Bloggerテンプレートで重複する部分を一本化してみた

Bloggerテンプレートをカスタマイズしていくうちに、PC用とモバイル用で重複したコードが結構あったので見直してみました。

トップページ

当ブログでは、トップページは個別ページのようにカスタマイズしており、コードの共通部分を一本化しました。

なお、個別ページのようにカスタマイズする方法については下記リンクをご覧ください。

改・Bloggerトップページを個別のページにする方法

一本化の方法

1. <b:includable id='main' var='top'>および<b:includable id='mobile-main' var='top'>のコードの共通している部分を見つけてコピーしてテキストエディタに貼り付けておく。
2. コピーしたコードを<b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog' version='1'>～</b:widget>の</b:widget>のすぐ上に下記のように追加する。

<b:includable id='toppage'>
<--ここに共通部分をコピーする-->
</b:includable>

1. <b:includable id='main' var='top'>および<b:includable id='mobile-main' var='top'>のコードの共通している部分を下記の様に置き換える。

<b:include name='toppage'/>

SNSボタン

SNSボタンもPC用およびモバイル用で共通したものを使用しておりますが、スタイルシートの部分が少し違うので、共通した部分を一本化したうえで、個別にCSSを追加する形をとりました。

SNSボタン設置については、下記リンクをご覧ください。

Bloggerで個別投稿ページにFacebookのいいね！ボタンを設置する方法
Bloggerではてなブックマークボタンを個別投稿に追加する方法
BloggerでモバイルテンプレートでSNSボタン設置方法
Bloggerにてツイートボタンを設置してみた
BloggerにGoogle+1ボタンを設置してみた
BloggerでPocketボタンを設置してみた
BloggerでSNSボタンを横並びにそろえる方法
BloggerのSNSボタン表示がモバイル用では変だったので修正してみた
Bloggerでツイートボタンにバルーンを表示してみた

一本化の方法

1. <b:includable id='post' var='post'>および<b:includable id='mobile-post' var='post'>のSNSボタンの部分をコピーしてテキストエディタに貼り付けておく。
2. 貼り付けたコードのhtmlタグ内にCSSのコードが書かれている場合は下記のようにCSSに追加しておき、CSSコード部分は削除しておく。

.sns{
//PC用のコードを書く
}
.mobilesns{
//モバイル用のコードを書く
}

3. コピーしたコードを<b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog' version='1'>～</b:widget>の</b:widget>のすぐ上に下記のように追加する。

<b:includable id='sns'>
<--ここにSNSボタンのコードをコピーする-->
</b:includable>

4. <b:includable id='post' var='post'>のSNSボタンのコードの部分を下記のように置き換える。

<div class='sns'>
<b:include name='sns'/>
</div>

5. <b:includable id='mobile-post' var='post'>のSNSボタンのコードの部分を下記のように置き換える。

<div class='mobilesns'>
<b:include name='sns'/>
</div>

まとめ

• 共通部分は、<b:includable id='○○○'>～</b:includable>で囲む。
• <b:include name='○○○'/>で呼び出す
• スタイルを別にする場合はdivタグで定義したうえで別途CSSを書く。

以上、参考にしていただけたら幸いです。