スキップしてメイン コンテンツに移動

些細な日常

Bloggerブログのテンプレートのhead内のカスタマイズのために独自タグのall-head-contentを分解する

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を分解するとマークアップの自由度を上げられる。

関連ページ

コメント

最近の投稿

日付: 

Googleドキュメントのファイルが消えて取り戻せなくなった

イメージ

人気の投稿

宜保愛子は本物の霊能力者だと考えられる三つの真実

イメージ

昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...

平田監督の白井球審の誤審への抗議はパワハラへの強力な対処法に他ならない

イメージ

日本プロ野球で 佐々木朗希が完全試合を実現して 次の試合も八回まで無安打と無失点の状況で、次の試合はどうかと注目した4月24日の対オリックスバファローズ戦は初回の先頭打者の初球にヒットを打たれて五回に二失点を喫して連続の無安打と無失点が両方とも途絶えてしまった。 しかし予想外...

伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える

イメージ

プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 目次 伊良部秀輝が大好きだった記憶 負けても自分のスタイルを貫き通した 野球への...