Blogger Bloggerカスタマイズ テンプレート

BloggerテンプレートをレスポンシブWebデザインに変えたときにやったこと

ついにと言うかやっとと言うのか、それともようやくと言うべきか、レスポンシブＷｅｂデザイン（以下、レスポンシブ）テンプレートに変更しました。
既存のテンプレートをカスタマイズしてレスポンシブ化したわけではなく、完成したテンプレートをダウンロードしました。


Bloggerのテンプレートは、日本語サイトではほとんど配布されていないため、「blogger template」で検索すると数多くの海外テンプレート配布サイトが見つかります。

今回は、TEMPLATE STOREからダウンロードしました。

海外テンプレート配布サイトの基本

基本的に、海外テンプレートサイトでは、Downloadをクリックすると自動でzipフォルダがダウンロードされます。
また、DemoやPreviewでそのテンプレートの表示例を見ることができます。英語が読めなくてもここでウィンドウの幅を縮めたりすることでレスポンシブに対応しているか確認することができます。

ダウンロードしたzipフォルダを解凍すると、中にXMLファイルが入っています。
これをアップロードするとテンプレートを変更できます。

テンプレートの変更方法

変更する前には必ず、現在使っているテンプレートのバックアップを取ってください。
参考：テンプレートをバックアップする方法

テンプレートのアップロード

テンプレートのバックアップ/復元をクリックします。
ファイルを選択をクリックして、解凍したXMLファイルをアップロードします。
これで完了です。
テンプレートを変更すると、大抵はレイアウトが乱れます。ガジェットの位置を変えたり、CSSで細かな調整をしていきます。

必ずやることと見た目の変更

今回のテンプレート変更時にやったことと、必ずやることです。

必ずやること

テンプレートを変更したら、最低限やらなくてはいけないことがあります。

アナリティクスコードの再設置

問題なく動作していれば、特に気にすることはありません。私は、動作していないことに気付くまで丸1日かかりました。

今までの設定その他で追加しても機能していなかった。

レポートを開くと上のほうに、
You are using a filtered view, which may cause your Users count to be inaccurate. Learn more
と表示されている。英語も得意ではないので、そのままGoogle翻訳したら、
あなたは、ユーザーが不正確に数えることがあり、これフィルタされたビューを使用しています。詳細はこちら
と、いまいちわからない日本語になったが、要はうまく動作しないということでしょう。リンクがあったので、「詳細はこちら」の部分をクリックしてみました。すると、「ユニークユーザー数とアクティブユーザー数の算出方法」ページが表示されました。が、長すぎて読んでません。

結局やったことは、
まず、設定のその他の「アナリティクスのウェブ プロパティ ID」を削除します。
次に、アナリティクスコードの設置 クロスドメイントラッキングの設定を参考に、トラッキングコードを貼り付けます。

背景画像の削除

ダウンロードしたテンプレートの背景画像などは、リンク切れを起こしている可能性があります。見栄えも悪いので、自分で用意した画像するか、そのまま削除します。今回は、リンク切れを起こしていない画像もすべて削除するか、自分で用意したものに差し替えました。

関連記事の画像がないときに表示されるNoImageを作成し変更
基本的に、HTMLの編集でbackground:url(http://で始まるURL部分を消すか、差し替えることで変更できます。

見た目の変更

ここからは、今回やった見た目の変更です。特に気にならなければデフォルトの状態で使用して問題ありません。大抵の場合、CSSの追加かHTMLの編集で変更します。HTMLの編集を行う場合は、バックアップをとりながらやると、問題が起きたときに途中から始めることができます。

タイトル画像の変更

タイトルの画像サイズを元の大きさから260×80に変更
レイアウトの編集から可能

SNSボタンの削除

HTMLの編集から、sosmed-kanan部分をすべて削除（サイドバーとフッター付近）
削除したくないけど非表示にしたいときは、コメントアウトするかCSSの追加で
.sosmed-kananblogger {display:none;}
.sosmed-kanantwitter {display:none;}
.sosmed-kananfacebook {display:none;}
.sosmed-kananrss {display:none;}
を追加する。

影を消す

サイドバーやタイトルなどいたるところにある影をすべて消す。
HTMLの編集でbox-shadowで検索して削除する。

タイトル下の時間の削除

時間を消してタイトルの上に投稿した年月日を追加します。
.clock {display:none;}
まずは時間を削除します。
次に、HTMLの編集で、
<h1 class='post-title entry-title'>
の上に、 
<data:post.dateHeader/>
と追加します。追加する場所がタイトルの下がいいなら、
<span class='clock'>
の前後あたりに追加する。

フッターのサポートを変更

広告主のリンクを貼ってもいいし、削除してしまってもいい。Supportで検索するとわかりやすい。

グローバルメニューの変更

リンクとテキストを変更する。DROPで検索するとわかりやすい。

グローバルメニューの大文字を小文字に変換
HTMLの編集でmenuのtext-transform:uppercaseをnoneに変更する。

アドセンスをレスポンシブに変更

WordPressにレスポンシブ広告ユニットの設定を参考に、広告ユニットを変更する。

タイトル横にアドセンスを設置

テンプレートの編集で、260pxで検索する。検索に2つかかるのでそれを240pxに変更する。
次に、.pega-menuのwidth:70%を74%に変更したら保存して完了。

モバイル表示でサイドバーを表示

携帯端末表示でモバイルテンプレートを選択したときに、カスタムを選択しただけではサイドバーは表示されません。HTMLの編集で携帯（スマホ）で見たときにサイドバーが表示されるように設定します。
参考：Bloggerのモバイルテンプレートを編集してサイドバーを表示する方法
スポンサーリンク
関連記事
スポンサーリンク