プライベートや仕事で気づいたことやノウハウなどを書き留めるブログです

2016/05/12

簡単でてきとうなBloggerのテンプレをいちから書いてみる:その1

0 件のコメント
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/>


1)タイトル
2)日付
3)内容
の順番で繰り返し。

<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のページの種類は主に3つ
■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

0 件のコメント :

コメントを投稿