2017年3月15日

【編集中】Bloggerカスタマイズ関連の備忘録

, ,
つい先日、ブログのテンプレートをいじっていたのですが、どこかでコードがバッティングした模様。

盛大に表示が崩れ、オマケにバックアップを怠っていたために初期化して再度調整という事態にorz

まだ完璧ではないですが多少は復元できたので、再構築時に修正した箇所や新たに追加したスクリプト等を纏めてみます。

あくまでも自分用なので大雑把ですが、余裕のあるときに各説明も追記していけたらと思います。


　目次



自分のページビューを追跡しないようにする 


誰も見ていないであろう当ブログですが、記事を公開したばかりなのに気がつけばページビューがいきなり数十件に跳ね上がっていることが多々あります。

これはただ単純に自分のアクセスがカウントされているだけの模様。

またBloggerには"自分のビューを追跡しない"項目があるので設定してみたのですが、残念ながら当環境ではこれが全く機能しませんでした。 どういうことなの...(´・ω・`)


どうやら、日本でBloggerにアクセスするとblogspot.comからblogspot.jpへリダイレクトされているらしく、"自分のビューを追跡しない"設定で発行されるcookieは.comの方に適用されるため、.jpの方はカウントしてしまうということでした。

ここは自力でcookieを発行してやる必要がありそうです。

色々調べてみたのですが、こちらのブログで紹介している方法が一番わかりやすかったので参考にさせていただきました。

bloggerで自分のサイトを開くたびに自分をカウントしてしまう場合の解決方法。 | ちょいラク。今より日常をすこしだけ快適に。
  1. ChromeウェブストアからEditThisCookieというcookieを管理する拡張機能をインストール
  2. 「Cookieを追加」→「名前」に"_ns"、「値」に"2"、「ドメイン」に自分のサイトのURLを入力
  3. 自分のサイトを表示し確認

FirefoxやIEの場合はまた次の機会に。
→ブラウザアドオンを使用しない方法


jQueryを導入する

jQuery（ジェイクエリー）は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。
つまりjavascriptを動かす際に色々と便利になります。早速導入しましょう。

といってもやることは単純で、ファイルを外部から読み込むためにhtmlを少し手を加えます。

以下のソースコードを<head>...</head>内に埋め込み、「テーマを保存」

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

これでjQueryを動かすことができるようになりました。



ナビゲーションバー(Navbar)というのはBlooggerにアクセスした際にブラウザ最上部に表示されるバーで、他のブログを検索したりGoogle+に簡単に共有できたりするのですが...自分は全く使っていません。

デフォルトで表示されようになっていますが、必ず表示しなくてはいけないというものではないですし、他のブログを見て回っても敢えて表示している人は多くはないかと思います。


ナビゲーションバーは設定で簡単に非表示にできます。
  1. 管理画面→レイアウト→Navbarの「編集」をクリック
  2. 一番下のラジオボタン「オフ」にチェック→「保存」をクリック

ひとまずこれでバー自体は消えました。


しかしコンテンツトップにまだ余白が残っています。

気になる方はCSSで徹底的に消してしまいましょう。
  1. 管理画面→テーマ→カスタマイズをクリック
  2. 上級者向け→CSSを追加
  3. テキストボックスに下記の1行を追加し「ブログに適用」
#navbar{display:none;}

display  - 要素の表示形式の指定
none - 非表示

これで元々ナビゲーションバーがあった箇所の余白が消えました。


記事周辺の不要な項目を消す

各記事のページにはタイトルや投稿日時の他にいくつかの項目が表示されるのですが、結構邪魔に感じるので非表示にしてしまいましょう。

  • 投稿者 - 管理者が複数人いる場合は話が変わってきますが、個人ブログなのでわざわざ投稿者をざ表示させる意味がありません。
  • 時刻 - 記事ヘッダーに投稿日時があるのであまり必要ないのでは。
  • 共有ボタン - 後にカスタマイズしたものを追加するので今は必要ありません。

わざわざhtmlを編集しなくても設定で消すことができます。
  1. 管理画面→レイアウト→ブログの投稿の「編集」をクリック
  2. ブログ投稿の設定の「投稿ページのオプション」から表示させる項目を選択
  3. 不必要な項目のチェックを外したら「保存」をクリック

他にも表示したり非表示にしたりカスタマイズできます。下記ブログに詳しく書いてあります。

[Blogger] 記事の投稿日付・投稿者・時刻などをまとめて消す方法 | Bloggerをカスタマイズするときに見るブログ


"登録: 投稿 (Atom)"を消す

管理画面→テーマ→"HTMLの編集"をクリック

テンプレート編集画面でCtrl + F で以下の行を検索します
<b:include name='feedLinks'/>

該当項目を下記のように<!-- -->で囲みます(コメントアウト)。
<!--<b:include name='feedLinks'/>-->

最後にテンプレートを保存して完了です。

これであの邪魔な登録: 投稿 (Atom)が綺麗さっぱり消えてくれました。


"0 件のコメント :"を消す


管理画面→レイアウト→ブログの投稿の"編集"から消すことはできるのですが、これではコメント投稿欄も消えてしまうので四苦八苦していたのですが、ようやくCSSの該当箇所を見つけました。

".post-footer"という紛らわしい名前が付いています。

"post-header"が記事の日付なので、こちらは下部に表示される時刻の部分だと勘違いしておりました。

さっそく非表示にしましょう。

管理画面→テーマ→"HTMLの編集"をクリック

テンプレート編集画面でCtrl + F で".post-footer"を検索します
.post-footer {
margin: 0;
line-height:0;
}
最後の行に"display:none;"と追記します 
.post-footer {
margin: 0;
line-height:0;
display:none;
}
テンプレートを保存したら完了です。


ラベル横の"ラベル: "を消す

ラベルにCSSやアイコンを付けてデザインしている方はかなり邪魔に感じる箇所だと思います。

こちらもコメントアウトして消してしまいましょう。

以下の箇所をコメントアウト
<data:postLabelsLabel/>

このようになればOKです
<!--<data:postLabelsLabel/>-->


編集マーク(スパナアイコン)を消す

Bloggerやってる人にはお馴染みのあのスパナアイコン。

ほんと邪魔くさいですよね。

あれをなんとか消せないものかとググったらこちらの記事がヒットしました。

Bloggerの編集用マークを一気に消す方法｜思い出せ.com

あのスパナアイコンはクイックエディットというそうです。

CSSでいじれるということがわかったので早速消えてもらいましょう。

下記の1行をCSSに加えましょう。テーマのカスタマイズからが手っ取り早いかと思います。
.quickedit {display: none;}
  1. 管理画面→テーマ→カスタマイズをクリック
  2. 上級者向け→CSSを追加
  3. テキストボックスに下記項目を追加し"ブログに適用"
これでブログの表示を確認する際に一々ログアウトする必要も無くなりました。




ラベル: , ,
0 件のコメント :

コメントを投稿