かなりの変更を加えたのでその際に役に立ったエントリや、修正した点のメモなどを記述しておきます。
OGP(OpenGraphProtocol)の導入
導入方法は以下のブログエントリが参考になりました。
ふじけんでおｋ: OGPを設定しました（settings）
"og:image"の部分だけはどうしようもなかったのでBloggerのプロフィール画像を指定してお茶を濁しました。
<b:if cond='data:blog.pageType == "item"'>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:else/>
<meta content='blog' property='og:type'/>
<meta expr:content='data:blog.title' property='og:title'/>
</b:if>
<meta expr:content='data:blog.url' property='og:url'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYE3nmHIYuY8N4KYlpAnizK59mPlTjpL4pQ-Zzwa1REMFRwHY4yy9yRqvIDgfbo9TCjkA3CgJT31wkROK7DpwG8pqVlIaITvBZnNrKT9Dx0pxcn5TRnnEIUGWyO16s4KSB0wyPq_Gg_Go/s800/%2525E7%252584%2525A1%2525E9%2525A1%25258C.png' property='og:image'/>不必要なテンプレート要素の削除
includable要素の"mobile-*"を削除しました。元のテンプレートには恐らく携帯端末などでアクセスした際にデザインを変化させる機能がありましたが、Bloggerがモバイルテンプレートを設定できる機能を追加したため不要になりました。
そのほかにも、なぜか同じincludable要素があったりとめちゃくちゃな状態でしたが全て修正しました。
各種共有ボタンの追加
テンプレートの"shareButtons"のincludable要素をごっそり以下のように書き換えました。
<b:includable id='shareButtons' var='post'>
<script src='http://apis.google.com/js/plusone.js'/>
<script src='http://connect.facebook.net/ja_JP/all.js#xfbml=1' async='async'/>
<script src='http://b.st-hatena.com/js/bookmark_button.js' async='async'/>
<script src='http://platform.twitter.com/widgets.js' async='async'/>
<div class='left twitter-share-wrapper'><a href='https://twitter.com/share' class='twitter-share-button' expr:data-url='data:post.url' expr:data-counturl='data:post.url' expr:data-text='data:post.title' data-count='none' data-via='zerippe' data-lang='ja' alt='このエントリーをTwitterでつぶやく'>Tweet</a></div>
<div class='left hatena-bookmark-wrapper'><a class='hatena-bookmark-button' expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url' expr:data-hatena-bookmark-title='data:post.title' data-hatena-bookmark-layout='standard' title='このエントリーをはてなブックマークに追加'><img src='http://b.st-hatena.com/images/entry-button/button-only.gif' alt='このエントリーをはてなブックマークに追加' width='20' height='20' /></a></div>
<div class='left facebook-like-wrapper'><div class='fb-like' expr:data-href='data:post.url' data-send='true' data-layout='button_count' data-width='1' data-show-faces='true'/></div>
<div class='left google-plusone-wrapper'><g:plusone expr:href='data:post.url' size='medium'></g:plusone></div>
<!-- end of shareButtons --></b:includable>はてな、Facebook、Twitter、Googleの共有ボタンを追加しました。Twitterの共有ボタンにもツイートされた件数を表示する機能がついていますが、なぜか正確な件数が表示されないのと件数の部分をクリックしても該当ツイートが取得できないので無効にしています。
DOCTYPE宣言をHTML5に変更
Bloggerが正式に古いブラウザのサポートを停止したので、これを基にDOCTYPEを変更してみました。殆どHTML5要素は使っていませんが、古いブラウザのサポートを切る流れに乗りました。
このブログのテンプレートで利用しているHTML5の新要素は以下の通りです。
- input要素のplaceholder属性。"ブログ内を検索！"の部分がこれにあたります。
- script要素のtype属性の値の削除。デフォルトで"text/javascript"なので消しました。
- script要素のasync属性。JSの読み込みをコンテンツの読み込みと並列に行うようになります。