Bloggerブログで記事/追加ページのブログ名から見出しタグのh1を外す 結城永人 - 2018年6月30日 (土) 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を外すためのソースコード 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> (中略) <!--No header image --> <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にして個別のテーマから理解できるようにするのは望ましい。 関連ページImaginary|Bloggerのテンプレートの提供 参考サイトIn the Header1 widget (title inclusion) コメント 新しい投稿 前の投稿
細川慎二のどうにも泣けて来てしまうストリートライヴのアルトサックス サックス奏者の 細川慎二 のYouTubeチャンネルの Sax in the Night City で出ているサックスのストリートライヴの動画が美しい音色と相俟った街角の雰囲気の良さで心底と泣けて来るほどの感動を催させる。 細川慎二のアルトサックスの美しい音色が響き渡る街角の...
宜保愛子は本物の霊能力者だと考えられる三つの真実 昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...
平田監督の白井球審の誤審への抗議はパワハラへの強力な対処法に他ならない 日本プロ野球で 佐々木朗希が完全試合を実現して 次の試合も八回まで無安打と無失点の状況で、次の試合はどうかと注目した4月24日の対オリックスバファローズ戦は初回の先頭打者の初球にヒットを打たれて五回に二失点を喫して連続の無安打と無失点が両方とも途絶えてしまった。 しかし予想外...
アドセンスのGDPRに日本でも対応しなくてはならない場合がある アドセンスの個人情報のCookieなどの使用に関してサイトの訪問者に同意を得なくてはならない法律としてEU(European Union/欧州連合)の GDPR (General Data Protection Regulation/EU一般データ保護規則)がある。外国の個人情報...
伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 目次 伊良部秀輝が大好きだった記憶 負けても自分のスタイルを貫き通した 野球への...
日本人がジャニーズ事務所で行われた性加害よりも恐れていること イギリスの公共放送のBBC(British Broadcasting Corporation/英国放送協会)が日本のジャニーズ事務所の創業者の ジャニー喜多川 の性加害について取り上げたドキュメンタリーの J-POPの捕食者:秘められたスキャンダル に衝撃を受けた。 目次 ジ...
玉置浩二のメロディーは涙腺緩んで総毛立つ名曲中の名曲だ 玉置浩二 のYouTubeの公式チャンネルで、最も気に入りの メロディー のライブ版が追加されていた。曲自体をちゃんと聴いたのは約二十五年振りかも知れないけど、しかし初めての内容から以前にも況して大変な感動を覚えることになった。 玉置浩二 『メロディー』Live at Tok...
沖雅也の涅槃への自殺と双極性障害 かつて俳優の 沖雅也 の自殺が伝えられたとき、遺書の言葉とされた「おやじ、涅槃でまっている」と共に何なのかと疑問を感じたのを良く覚えている。聞き慣れない「涅槃」という言葉が入っても何十年も過ぎた今振り返っても自殺者の遺書として本当に珍しい表現だったと改めて驚く。 沖雅也が書い...
Imgurで画像URLと埋め込みコードを取得する方法 Imgur は自分でアップロードした画像については画像URL/直リンクを取得して他のサイトにHTMLのimgタグで表示させられる。 そして自分と他の人たちも含めて画像の埋め込みコードを取得して他のサイトのHTMLに、そのまま、記載して表示させられもする。 目次 Img...
Googleの誕生祝いでプロフィールアイコンに風船と紙吹雪が飛んで来た サイトを見ていたら妙な感じがするので、良く見てみるとGoogleサービスで、ログインして右上のプロフィールアイコンが出ているときに風船と紙吹雪が飛んで来ていることに気付いた。 Googleから久し振りに受け取った誕生祝い サマリー|Search Console| Goog...
コメント