かっぱえびせんなBloggerカスタマイズ!

Bloggerになってはや一週間 (まだか)。まだまだBloggerのカスタマイズにはまってます! 今日はついにhtmlの編集に手を出してみるテスト!

やりたいこと

ひとつ前の記事にも書いたんですが、次のようなことをしたいときは、いわゆる普通のカスタマイズじゃなくってhtmlの編集をする必要があるようです。

投稿日付を日時にしたい
前の記事、先の記事を記事タイトル付近に表示したい
画像がはみ出ているのをなんとかしたい
コードや数式をきれいに表示したい

でもhtmlの編集ができるってことは、ほぼなんでもできちゃうってこと? ほんとにやめられな～いとまらない♪ですね。ではでは早速やっていきましょう。

投稿日付を日時にしたい

一日にいくつも投稿するなら、投稿した日時を出したいですね。せっかくStackEditで投稿日時を指定できるんだし、一日に何回も投稿留守なら、時間まで表示されているほうがわかりやすいです。

Bloggerの管理画面のテンプレートをクリックして表示される「HTMLの編集」ボタンを押すとエディタ画面が表示されます。
そこで”date-header”で検索して、下のように書き換えます。今の私の環境の場合、944行目の<data:post.timestamp />を追加するだけでした。(CSSを追加したりすると行数は変わるので注意)

<b:if cond='data:post.dateHeader'>
  <h2 class='date-header'><span><data:post.dateHeader/> <data:post.timestamp/></span></h2>
</b:if>
<p align="center">↓</span>

<b:if cond='data:post.dateHeader'>
  <h2 class='date-header'><span><data:post.dateHeader/> <data:post.timestamp/></span></h2>
</b:if>

また、フッタには「時刻」というラベルと時刻が出てるので、これを日時に変更します。<data:timestampLabel>で検索して、下のように書き換えます。今の私の環境では、1468行目からの部分でした。<data:top.timestampLabel/>をコメントアウトし、<data:post.dateHeader/>を追加しました。

<span class='post-timestamp'>
  <b:if cond='data:top.showTimestamp'>
    <data:top.timestampLabel/>
    <b:if cond='data:post.url'>
      <meta expr:content='data:post.url.canonical' itemprop='url'/>
      <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
    </b:if>
  </b:if>
</span>

↓

<span class='post-timestamp'>
  <b:if cond='data:top.showTimestamp'>
<!--          <data:top.timestampLabel/> -->
    <b:if cond='data:post.url'>
      <meta expr:content='data:post.url.canonical' itemprop='url'/>
      <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.dateHeader/> <data:post.timestamp/></abbr></a>
    </b:if>
  </b:if>
</span>

これだけでできました!

ラベルを記事タイトル付近に表示したい

作ったばかりのサイトでは、どんな記事なのかがわかるラベルが、下の方にしか表示されていません。これを記事タイトルの真下にも出したいです。
“post-labels”で検索すると、dataタグが見つかるので、<span=’post-labels’>～</span>をコピーします。次に”post-header”で検索すると、下の3行になっているところが出てくるので、<div class=’post-header-line-1’/>のしたにペーストします。

   <div class='post-header'>
   <div class='post-header-line-1'/>
   </div>

↓

<div class='post-header'>
<div class='post-header-line-1'/>
  <span class='post-labels'>
    <b:if cond='data:top.showPostLabels and data:post.labels'>
      <data:postLabelsLabel/>
      <b:loop values='data:post.labels' var='label'>
        <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='not data:label.isLast'>,</b:if>
      </b:loop>
    </b:if>
  </span>
</div>

さくっと出来上がりです。参考にしたサイトどおりに作業するだけで実現できました。

残った作業

まだまだやりたいことがありますね! これってネタには困らない? いやいや、でももう誰かがやってることだし… またがんばるぞぃ!

画像がはみ出ているのをなんとかしたい
コードや数式をきれいに表示したい

参考情報 (日本語)

Blogger:投稿の投稿日時を、JavaScriptで取得 (data:post.timestampISO8601 タグ編) (2015-3-27)
htmlテンプレートの解説含めてとてもわかり易くまとまっていました。私は何も考えずにデフォルトの時刻表示形式を使ったので、このサイトに書いてあることまではやっていません。
なおトップページでは時刻が正確に表示されない、とあったのですが、何も考えずにやったところちゃんと各記事ごとの時刻が表示されました。テンプレートが変わったんでしょうか。
Blogger：記事のラベルを記事の下部だけではなく上部にも表示できるようにした (2014-5-3)
書いてあるとおりそのままの作業で実現できました。