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

Bloggerの2017年の公式テーマのContempoとSohoとEmporioとNotableで記事／追加ページの固有タイトルの見出しタグを変更する方法と併せて使える各々のブログ名の見出しタグのh1を外す方法が見付かった。前者だけだと記事／追加ページで見出しタグをh1にしてもデフォルトでh1が付いたブログ名と二つになってしまってHTML構文としてもSEO対策としても万全とはいえなかった。後者を取り入れると記事／追加ページで見出しタグのh1が固有タイトルの一つだけになるからかりにデザインは変わらないとしてもブログのマークアップは分かり易く整えられる。かねて記事／追加ページのブログ名のh1を外す方法自体は固有タイトルの見出しタグを変更して間もなく思い付いたけど、しかしデザインを他のトップやアーカイブなどのブログ名にh1を残すページと振り分けるのが煩雑で、HTMLとCSSを二倍にして割り当てなくてはならないのが大変だからどうにも気が向かなくてやってなかったんだ。今回、もう少し楽な仕方で、要するにCSSの内容を当初の一つに保って指定先だけを変更しながらHTMLを振り分ければ可能だと分かってBloggerのブログの些細な日常に取り入れた。追記：旧テーマ：SimpleとDynamic ViewsとPicture WindowとAwesome Inc.とWatermarkとEtherealとTravelの記事／追加ページのブログ名の見出しタグの変更についても掲載した。2017年の公式テーマで記事／追加ページのブログ名の見出しタグのh1を外すためのソースコード些細な日常のブログ名の見出しタグのh1を外してh2を付けた記事ページのHTML文書

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

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や他の見出しタグに置き換えても共通のデザインが引き継がれるから大丈夫なんだ。見出し以外のタグを使うとデザインが崩れてしまう。段落タグのpでは説明文のデザインと干渉する。pの他は中寄せが効かず、周りの余白もずれる。どちらもCSSをさらに追加して修正するのが手間取らずにいない。記事／追加ページでブログ名の見出しタグのh1を外す代わりにはh2などの他の見出しタグを使うのが良いと思う。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とCSSの二つを書き換えて記事／追加ページのブログ名から見出しタグのh1を外すと共に他のページは以前のままに保っておく。HTMLの変更：body内のHeaderウィジェットを書き換える元のソースコード<b:includable id='main'> （中略） <b:if cond='data:mobile'> <div id='header-inner'> <div class='titlewrapper' style='background: transparent'> <h1 class='title' style='background: transparent; border-width: 0px'> <b:include name='title'/> </h1> </div> <b:include name='description'/> </div> <b:else/> （中略） <div class='titlewrapper' style='background: transparent'> <h1 class='title' style='background: transparent; border-width: 0px'> <b:include name='title'/> </h1> </div> （中略）  <div id='header-inner'> <div class='titlewrapper'> <h1 class='title'> <b:include name='title'/> </h1> </div> <b:include name='description'/> </div> </b:if> </b:includable>ブログ名のh1が三箇所で使われている。一番目と二番目はヘッダー画像を使ってブログ名の背後に置いたときのモバイルとデスクトップのもので、三番目はヘッダー画像を置かないときのモバイルとデスクトップの共用のものになる。必要に応じて書き換える。ヘッダー画像を使うならば二番目をカスタマイズしてンプレートをモバイルにも対応させるならば一番目をカスタマイズする。ヘッダー画像を使わない場合は三番目をカスタマイズするだけで、デスクトップもモバイルも対応できる。一番目のh1のカスタマイズのソースコード<b:tag class='title' style='background: transparent; border-width: 0px' expr:name='data:view.isMultipleItems ? "h1" : "記事／追加ページのブログ名のタグ"'> <b:include name='title'/> </b:tag>二番目のh1のカスタマイズのソースコード<b:tag class='title' style='background: transparent; border-width: 0px' expr:name='data:view.isMultipleItems ? "h1" : "記事／追加ページのブログ名のタグ"'> <b:include name='title'/> </b:tag>三番目のh1のカスタマイズのソースコード<b:tag class='title' expr:name='data:view.isMultipleItems ? "h1" : "記事／追加ページのブログ名のタグ"'> <b:include name='title'/> </b:tag>何れも元のソースコードのh1の開始タグと<b:include name='title'/>とh1の終了タグの三行を新しいソースコードで置き換える。トップページなどのインデックスページのブログ名の見出しタグはh1のままにして記事／追加ページのブログ名に帯文字の「記事／追加ページのタグ」に入れたものを使える。新しく使うタグはh2やh3などの見出しタグにかぎらず、段落タグのpなどの他のタグでも構わない。CSSの変更：style内の使用しない指定先のh1を書き換えるブログ名の見出しタグを変えるとブログ名のデザインが反映しなくなるので、新しく反映させるにはテンプレートのソースコードのskin内のCSSも修正する。旧テーマのDynamic Viewsのソースコードにはブログ名のCSSがないので、その他のテーマだけがCSSのカスタマイズの対象になる。元のソースコード.Header h1 a { color: $(header.text.color); }新しいソースコード.Header :is(h1,記事／追加ページのブログ名のタグ) a { color: $(header.text.color); }CSSの「.Header h1 a」をカスタマイズした記事／追加ページのブログ名のタグを含むものに変える。</p> 記事／追加ページの固有タイトルの見出しタグだけをh1にするHTML構文とSEO対策の利点Bloggerの全てのブログが記事／追加ページのブログ名から見出しタグのh1を外して固有タイトルだけをh1にする必要はないだろう。例えば専門型でブログ名から全記事のテーマが十分に纏まっていれば記事／追加ページの固有タイトルの見出しタグはh2が合っているように感じる。ブログ名から順繰りに各記事が速やかに理解できるマークアップだし、HTML構文としてもSEO対策としても相応しい印象を与える。Bloggerの公式テーマのデフォルトのデザインで全記事のブログ名に見出しタグのh1が付けられているのは専門型のブログに使われるのを想定して設計されているか、少なくとも向いているのは間違いないと考える。しかし雑記型のブログだとブログ名と全記事のタイトルがテーマで必ずしも緊密に一致するわけではないし、記事は記事でブログ全体と切り放すようにもうちょっと独立的に扱っても良いと思う。ブログ名の見出しタグはh2などにしてメインコンテンツの記事の固有タイトルをh1にして個別のテーマから理解できるようにするのは望ましい。

コメント