Bloggerブログで記事/追加ページのブログ名から見出しタグのh1を外す

Bloggerの2017年の公式テーマのContempoとSohoとEmporioとNotableで記事/追加ページの固有タイトルの見出しタグを変更する方法と併せて使える各々のブログ名の見出しタグのh1を外す方法が見付かった。


前者だけだと記事/追加ページで見出しタグをh1にしてもデフォルトでh1が付いたブログ名と二つになってしまってhtml構文としてもSEO対策としても万全とはいえなかった。後者を取り入れると記事/追加ページで見出しタグのh1が固有タイトルの一つだけになるからかりにデザインは変わらないとしてもブログのマークアップは分かり易く整えられる。


かねて記事/追加ページのブログ名のh1を外す方法自体は固有タイトルの見出しタグを変更して間もなく思い付いたけど、しかしデザインを他のトップやアーカイブなどのブログ名にh1を残すページと振り分けるのが煩雑で、htmlとcssを二倍にして割り当てなくてはならないのが大変だからどうにも気が向かなくてやってなかったんだ。


今回、もう少し楽な仕方で、要するにcssの内容を当初の一つに保って指定先だけを変更しながらhtmlを振り分ければ可能だと分かってBloggerのブログの些細な日常に取り入れた。


些細な日常のブログ名の見出しタグのh1を外してh2を付けた記事ページのhtml文書

2017年の公式テーマで記事/追加ページのブログ名の見出しタグのh1を外すためのソースコード


Bloggerの「テーマ」のhtml編集やバックアップ/復元から行う。


テンプレートのhtmlとcssの二つを書き換えて記事/追加ページのブログ名から見出しタグのh1を外すと共に他のページは以前のままに保っておく。


htmlの変更:body内のHeaderウィジェットを書き換える


ソースコードの<b:widget id='Header1' locked='true' title='些細な日常 (Header)' type='Header' visible='true'></b:widget>(ブログ名の些細な日常はブログ毎の任意だ)で囲まれたブログ名を全ページで出力する部分の<b:include name='super.title'/>を三種類のページに振り分ける内容に編集する。


<div>
  <b:class cond='data:this.imagePlacement == "REPLACE"' name='replaced'/>
  <b:if cond='data:view.isHomepage'>
      <h1 blog-title='1'><data:blog.title/></h1>
    <b:elseif cond='data:view.isSingleItem'/>
      <h2 blog-title='2'><a expr:href='data:blog.homepageUrl'><data:blog.title/></a></h2>
    <b:else/>
      <h1 blog-title='3'><a expr:href='data:blog.homepageUrl'><data:blog.title/></a></h1>
  </b:if>
</div>

※太文字が書き換え済みの部分だ。

デフォルトでは<b:class cond='data:this.imagePlacement == "REPLACE"' name='replaced'/></b:if>の中には<b:include name='super.title'/>しか入ってない。デザインは全ページで見出しタグのh1が付いたブログ名が表示されてトップページだけはトップページへのリンクがない。


Bloggerの2017年の公式テーマはHeaderウィジェットのブログ名が最上段のフローティングバーのデザインにも影響する。


cssの内容を変えるとページ毎に調整するのが物凄く大変になるので、デフォルトのデザインを完全に引き継いだ形で、記事/追加ページのブログ名のh1だけを外すのが最も簡単だから気に入ってやっている。


サンプルのソースコードは三種類のページのブログ名の出力を振り分けてそれぞれにcssの指定先をセレクターの属性と番号で個別に割り当てている。


トップページのブログ名
見出しh1の「blog-title='1'」でトップページへのリンクなし
記事/追加ページのブログ名
見出しh2の「blog-title='2'」でトップページへのリンクあり
その他のページのブログ名
見出しh1の「blog-title='3'」でトップページへのリンクあり

ページ毎に共通のデザインを割り当てるためにはcssのセレクターに「blog-title」などの属性を指定するだけでも大丈夫で、さらに番号は付けなくて構わないけど、しかしソースコードでそれぞれが見分け易かったり、後からデザインを個別に振り分けられるのも便利だから属性だけではなくて番号も付けている。


サンプルのソースコードでは記事/追加ページの見出しタグからh1を外す代わりにh2を付けている。他のh3や見出し以外のタグに置き換えても基本的に大丈夫だと思う。どんなタグを使っても共通のcssが指定されるから別の記述から優先的に指定される専用のデザインが干渉しないかぎりは同じになるはずだ。


cssの変更:style内の使用しない指定先のh1を書き換える


デフォルトのデザインでは全ページで共通のcssがブログ名の見出しタグのh1に指定されている。記事/追加ページで見出しタグのh1を外すとデフォルトのデザインも反映しなくなってしまう。修正するには新しいcssを記述しても可能だけど、同じように反映させるのがもっと手早いんだ。cssの指定先を元々のh1ではなくてセレクターの属性を使って一つに纏め直す。


ソースコードのcss、すなわち<style></style>で囲まれた部分に含まれるHeaderウィジェットのh1からhtmlの変更で新しく使用するセレクターの属性に置き換える。


書き換え前の見出しタグのh1のサンプルの一部


.Header h1 a,.Header h1 a:hover,.Header h1 a:visited{
color:$(blog.title.color)
}

書き換え後のセレクターの属性のblog-titleのサンプルの一部


.Header [blog-title] a,.Header [blog-title] a:hover,.Header [blog-title] a:visited{
color:$(blog.title.color)
}

ブログ名のデザインを指定するHeaderウィジェットのh1はBloggerのContempoとSohoとEmporioとNotableのバージョン1.3.0(htmlタグの「templateVersion」で確認できる)だと「.Header」や「.blog-name」が付いているか、何も付いてない「h1」が該当してNotableテーマ以外はcssの全てのh1をセレクターの属性で置き換えて構わない。Notableテーマにかぎって「.post-body」が付いているh1は記事内のデザインだから除外しなくてはならない。


Contempoテーマだと合計十七ヵ所だったり、何れも数が多くて手間取るけど、しかしデザインを崩さないために一つ残らず、該当するh1を新しく使用するセレクターの属性に書き換えて行く。


cssのstyle内ではセレクターの属性は半角の大括弧([])で文字列を囲って記載する。


カスタマイズでHeaderウィジェットのブログ名のh1に対してcssを指定している場合には併せて書き換えないとデザインが反映しなくなるし、次からはセレクターの属性に対してデザインを付けるように変わるのを注意しておきたい。


記事/追加ページの固有タイトルの見出しタグだけをh1にするhtml構文とSEO対策の利点


Bloggerの全てのブログが記事/追加ページのブログ名から見出しタグのh1を外して固有タイトルだけをh1にする必要はないだろう。


例えば専門型でブログ名から全記事のテーマが十分に 纏まっていれば記事/追加ページの固有タイトルの見出しタグはh2が合っているように感じる。ブログ名から順繰りに各記事が速やかに理解できるマークアップだし、html構文としてもSEO対策としても相応しい印象を与える。


Bloggerの公式テーマのデフォルトのデザインで全記事のブログ名に見出しタグのh1が付けられているのは専門型のブログに使われるのを想定して設計されているか、少なくとも向いているのは間違いないと考える。


しかし雑記型のブログだとブログ名と全記事のタイトルがテーマで必ずしも緊密に一致するわけではないし、記事は記事でブログ全体と切り放すようにもうちょっと独立的に扱っても良いと思う。


ブログ名の見出しタグはh2などにしてメインコンテンツの記事の固有タイトルをh1にして個別のテーマから理解できるようにするのは望ましい。

参考:In the Header1 widget (title inclusion)

コメント

些細な日常の人気の投稿

MOTOROLAのMoto G5 Plusを使い出してのスマホレビュー

Imgurで画像URLと埋め込みコードを取得する方法

PlayストアでAndroidアプリのダウンロードが非常に遅い場合の打開策