結城永人Bloggerは利便性を高めるためにブログのテンプレートの様々なソースコードを独自タグで自動化している。しかし独自タグが幅広い記述に対応して多くのソースコードが一辺に出力されるとテンプレートのカスタマイズが反対に難しくなってしまう。直接、手を加えられないので、どうすれば良いのかと悩まざるを得ないわけなんだ。
公式サイトでは情報が薄いみたいだけど――ヘルプにはマークアップの基礎知識しか紹介されてない――しかし調べると独自タグの出力する内容を載せているBlogger Codeなどの専門サイトが見付かってカスタマイズにとても役立つ。
Bloggerの独自タグを実際に出力される内容に置き換えて分解するとテンプレートのソースコードをさらに細かく作り替えられるようになる。
前々から気がかりだったBloggerブログのhead内のカスタマイズをついに行ってみたいと思い立った。
Bloggerブログのhead内のソースコードへの希望
HTMLのためのタグのカスタマイズを行うためには独自タグを分解しないとどうにもならない。テンプレートのマークアップが自動化されていると手を加える余地は全くないのが辛い。head内はデザインのCSSを除いてカスタマイズしなくてもサイト運営にさほど影響しないので、従来、放っておいたけれども可能なかぎり、希望に即してテンプレートを仕上げたい。
独自タグのall-head-contentの出力内容
Bloggerの公式テーマのhead内にデフォルトで付けられた独自タグのall-head-contentがある。
<b:include data='blog' name='all-head-content'/>どんな出力内容なのかが分かった。
<b:includable id='all-head-content'>
<meta expr:content='"text/html; charset=" + data:blog.encoding' http-equiv='Content-Type'/>
<b:if cond='data:widgets'>
<b:comment>Chrome, Firefox OS and Opera</b:comment>
<meta expr:content='data:skin.vars.body_background_color' name='theme-color'/>
<b:comment>Windows Phone</b:comment>
<meta expr:content='data:skin.vars.body_background_color' name='msapplication-navbutton-color'/>
</b:if>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/>
<link expr:href='data:view.url.canonical' rel='canonical'/>
<data:blog.feedLinks/>
<data:blog.meTag/>
<b:tag name='link' cond='data:view.featuredImage' expr:href='data:view.featuredImage' rel='image_src'/>
<data:blog.ieCssRetrofitLinks/>
<b:if cond='data:blog.metaDescription'>
<b:tag name='link' cond='data:blog.googleProfileUrl' rel='publisher' expr:href='data:blog.googleProfileUrl' />
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
<b:if cond='data:blog.adultContent'>
<meta content='adult' name='rating'/>
</b:if>
<b:include name='openGraphMetaData'/>
<!--[if IE]> <script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script> <![endif]-->
</b:includable>※2018年8月時点で確認できる出力内容だけを取り上げた。
テンプレートのレイアウトバージョン（htmlタグに「layoutsVersion」で記載されている）によって実際のマークアップは微妙に異なる。
現行だと「2」が旧テーマのシンプルと動的ビューと画像ウィンドウとAwesome Inc.とウォーターマークとエスィリアルと旅行に、「3」が新テーマのContempoとSohoとEmporioとNotableに指定されている。
旧テーマで出力されないソースコード
新テーマで出力されないソースコード
独自タグのall-head-contentはテンプレートへの出力内容の<b:includable id='all-head-content'></b:includable>で囲まれた中身のレイアウトバージョンに対応した部分で完全に置き換えられる。
記述法としては前者のincludeのnameが後者のincludableのidと「all-head-content」で一致していてテンプレートのソースコードに出力されるように呼び出されているためだ。
独自タグのall-head-contentのための定義付けのincludableはテンプレートに記載されてない。Bloggerのコンピューターがincludeへ送信している。場合によって出力内容は変わらないわけではないんだ。ブログに問題が生じない範囲だと思うけど、例えばOpenID（ログインの方法の一つ）の使用が終了してその部分が消されたりするという。カスタマイズで分解したら自分でソースコードを編集しなくては何も変わらなくなるのを予め注意しておきたい。
独自タグのall-head-contentの記載結果
Bloggerブログのソースコードへ実際にどのように記載されるか。
文字エンコーディング
<meta expr:content='"text/html; charset=" + data:blog.encoding' http-equiv='Content-Type'/>utf-8
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>ブラウザのテーマカラー（ウィジェット使用で可能）
<b:if cond='data:widgets'>
<b:comment>Chrome, Firefox OS and Opera</b:comment>
<meta expr:content='data:skin.vars.body_background_color' name='theme-color'/>
<b:comment>Windows Phone</b:comment>
<meta expr:content='data:skin.vars.body_background_color' name='msapplication-navbutton-color'/>
</b:if>ブラウザのテーマカラーの色コード
<!-- Chrome, Firefox OS and Opera -->
<meta content='テーマカラーの色コード' name='theme-color'/>
<!-- Windows Phone -->
<meta content='テーマカラーの色コード' name='msapplication-navbutton-color'/>サイト作成のソフトウェア
<meta content='blogger' name='generator'/>Blogger（そのまま）
<meta content='blogger' name='generator'/>ファビコン
<link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/>ファビコンURL
<link href='ファビコンのURL' rel='icon' type='image/x-icon'/>URLの正規化
<link expr:href='data:view.url.canonical' rel='canonical'/>正規URL
<link href='正規URL' rel='canonical'/>フィードリンク
<data:blog.feedLinks/>AtomとRSSとAtomPubとAtomCommentのURL
<link rel="alternate" type="application/atom+xml" title="ブログ名 - Atom" href="AtomのURL" />
<link rel="alternate" type="application/rss+xml" title="ブログ名 - RSS" href="rssのURL" />
<link rel="service.post" type="application/atom+xml" title="ブログ名 - Atom" href="AtomPubのURL" />
<link rel="alternate" type="application/atom+xml" title="ブログ名 - Atom" href="AtomCommentのURL" />※AtomCommentのフィードリンクは記事ページでしか出力されない。
関連サイトリンク（Bloggerプロフィールで可能）
<data:blog.meTag/>BloggerプロフィールのURL
<link href="BloggerプロフィールのURL" rel="me" />ページ画像（掲載済みで可能）
<b:tag name='link' cond='data:view.featuredImage' expr:href='data:view.featuredImage' rel='image_src'/>ページ画像URL
<link href='画像URL' rel='image_src'/>IECSSレトロフィットリンクス
<data:blog.ieCssRetrofitLinks/>IE用のCSSハックの外部ファイル
<!--[if IE]><script type="text/javascript" src="https://www.blogger.com/static/v1/jsbin/4060273893-ieretrofit.js"></script><![endif]-->公開主サイトリンク（Google+プロフィールで可能）
<b:tag name='link' cond='data:blog.googleProfileUrl' rel='publisher' expr:href='data:blog.googleProfileUrl' />Google+プロフィールURL
<link href='Google+プロフィールのURL' rel='publisher' />検索向け説明（掲載済みで可能）
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>検索向け説明文
<meta content='検索向け説明文' name='description'/>アダルトコンテンツ（設定済みで可能）
<b:if cond='data:blog.adultContent'>
<meta content='adult' name='rating'/>
</b:if>アダルト指定
<meta content='adult' name='rating'/>OPG設定（掲載済みで可能）
<b:include name='openGraphMetaData'/>ページのURLとタイトルと説明文と画像URL
<meta content='ページのURL' property='og:url'/>
<meta content='ページのタイトル' property='og:title'/>
<meta content='ページの説明文' property='og:description'>
<meta content='ページの画像URL' property='og:image'/>※ページの説明文は検索向け説明文と同じになる。もしも掲載されてなければ記事の本文の冒頭の抜粋が入力される。
IE向けのCSSハックのマークアップ
<!--[if IE]> <script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script> <![endif]-->IE用のCSSハックのマークアップ（そのまま）
<!--[if IE]> <script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script> <![endif]-->独自タグのall-head-contentを個々のHTMLや独自タグに分解して記載すると順番を入れ換えたり、不要な部分を削除したり、必要なコードを挿入したり、もはや自由自在にカスタマイズできるようになるんだ。
旧テーマだとデフォルトで画像URLとOGP設定の画像URLが記載されるけれどもソーシャルメディアへの共有では一般的に後者が使われて前者は必要ないかも知れないから削除しても構わないと感じる。
新テーマだとデフォルトでレトロフィットリンクスがエラー（<!--Can't find substitution for tag [blog.ieCssRetrofitLinks]-->）になってIE向けのCSSハックのマークアップが不要なのに記載されるから両方を削除するとブログのソースコードがすっきり纏まる。
個人的にhead内のソースコードは順番が気になる。Bloggerの公式テーマのhead内はCSS以外に新旧とも三つのタグでできていてレスポンシブのmetaタグのviewportとtitleタグと独自タグのall-head-contentだけど、デフォルトのままだととにかく三つの順番しか入れ換えられないわけだ。
例えばTwitterカードやウェブクリップアイコンをhead内に追加する場合にソースコードの同じような領域に配置するのが気持ち良い。前者はOGP設定、後者はファビコンの近くに記載するとソースコードとして分かり易い。ひょっとしたら検索エンジンの読み込みもスムーズになって多少はサイト評価が上がってアクセスアップに繋がるのではないかと期待しなくもしない。
他にもHTMLページのhead内に記述する要素の総まとめなどを参考にしたりしながらブログのhead内のソースコードに何が必要かを考えながらカスタマイズするためにはBloggerブログでは独自タグのall-head-contentを分解するとマークアップの自由度を上げられる。
コメント