Bloggerのテンプレートのカスタマイズをしたい。
というか、タグやら命令が分からいないので、簡単でてきとなテンプレをいちから書いてみる
英語の情報が多いが日本語は少ない。
下記のブログがまとまっていて分かりやすい。
加えて、足りない情報は英語サイトで読む。
Google Bloggerのテンプレートを自作する ちーた様
http://cheetahs-blog.blogspot.jp/2014/04/google-blogger.html
Bloggerのテンプレートをいじる Aragger様
http://aragger.blogspot.jp/2012/04/blogger.html
簡単でてきとうでシンプルなテンプレ。
やりようによっては使えるのかも？
<html>
<head>
<head>
<head>
<b:skin><![CDATA[
body{font-size:1.0em;}
]]></b:skin>
</head>
</head>
</head>
<body>
<h1><data:blog.pageTitle/></h1>
<b:section id='main'>
<b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog' version='1' visible='true'>
<b:includable id='main'>
<b:loop values='data:posts' var='post'>
<h2><data:post.title/></h2>
<p><data:post.body/></p>
</b:loop>
</b:includable>
</b:widget>
</b:section>
</body>
</html>
こちらのページのようになります。
http://nihongokantanburogatenpure.blogspot.jp/
ページャーのように前の投稿のリンク表示は、下記のようにloopの終端に'nextprev'を置く。
<b:loop values='data:posts' var='post'>
・・・
</b:loop>
<!-- navigation -->
<b:include name='nextprev'/>
日付はこの命令を書けば良さそう。
<data:post.timestampISO8601/>
１）タイトル
２）日付
３）内容
の順番で繰り返し。
<h2><data:post.title/></h2>
<p><data:post.body/></p>
<small><data:post.timestampISO8601/></small>
あとは、下記のようにsectionを追加すれば、bloggerのレイアウトから
各種ガジェットを追加できる。
ラベルとか月ごとアーカイブはこれで追加可能。
<b:section id='sidebar'> </b:section>
ここまでできれば、それっぽくなりそうだ。
あとは、bootstrapを適用すれば、何かができるのではないかと思う。
テンプレのxmlはこれです。
これから徐々にアップデータするはず。
やたらと長いのは、自動生成で追加された部分です。
実際に書いたのは20行程度
https://drive.google.com/file/d/0B18k-I2MKH8PZmRzazN5T2FsTWM/view?usp=sharing
時間があれば少しずつ作ってみよう。
「要件」
■すっごいシンプルにする。
■レイアウトや表示はbootstarpで管理して、レスポンシブにする。
■見た目はcssで整える。
■使わないかもしれないがjQueryもインクルードしておく。
■ホームページは、画像サムネイルと本文スニペットを表示。
■ホームページと個別の投稿のみ対応。静的ページは無視。
■日本語の表示が問題ないように。
■とにかくシンプル。
細かいことをやろうとすると、cond if の条件分をやたらと使う。
下記にメモ。
bloggerのページの種類は主に３つ
■index：ホームページ
■item：個別の投稿ページ
■static_page：静的ページ
下記のような感じ。
<b:if cond='data:blog.pageType == "item"'>
○○する。
</b:if>
ORとかANDの条件も使えます。
Using OR, AND, NOT Logic Operators in Blogspot Template Layouts
http://www.mybloggertricks.com/2015/07/blogger-template-logic-operators.html
