BloggerテンプレートのサイドバーWidgetタイトルを消去する

とても些細なことなんですが、Google Blogger テンプレートをカスタマイズしていてデザイン的にどうしても気になっていた点があります。
それはサイドバーの Widget のタイトル部分なんですが。

私はサイドバー Widgetのタイトルは空白にしておくことが多いです。Javascript のウィジェットを追加してもタイトルは記入せずに、何と言うか、あくまでもサイドバーのパーツとして使うことが多い。

例えば、このブログのサイドバーにはソーシャルメディアへのリンクアイコンを置いていますが、そこに「ソーシャルメディア」という類のタイトルは入れません。

ウィジェットのタイトルは未記入が多い

そもそも Google Blogger テンプレートのサイドバーウィジェットのタイトルは見出しタグの H2 が割り当てられていることが多いですよね？私はサイドバータイトルに H2 の見出しってどうよって考えです。

もちろん、サイドバーの Widget へ普通にタイトルを入れるときもありますから、私はサイドバータイトルの見出しレベルは高くても見出し H3 、もしくはテンプレートをカスタマイズして単純に DIV にしています。

話を戻しますが、空のサイドバータイトルがあるとデザイン上で何が気になるのか。
そこに、1.5cm くらいの空白ができてしまうからです。

Firefox などでは、比較的に空白の高さは1.5cmくらいに収まって見えますが、Internet Explorer などでは 2cm にも 2.5cm にも見えることがある。つまり、サイドバータイトルをブランクにしたままにしておくと、デザイン的にかなり間抜けな状態になります。

サイドバーに追加したガジェットのWidget IDを特定

サイドバータイトルの余白を消す前に、追加したサイドバーのガジェットの Widget ID を確認しておかなくてはいけません。

恐らく一番簡単なのは、ブログトップページの HTML ソースを確認することです。
大抵のブラウザは、ホームページの画面上を右クリックすると「ページソースの表示」などのメニューがあります。これを選んで HTML ソースを表示します。

HTML の中からサイドバー部分を探します。経験上、Blogger テンプレートのサイドバーは <div id='sidebar-wrapper'> で定義されていることが多いようです。
開いた HTML を sidebar-wrapper というキーワードで検索してみます。

sidebar-wrapper がヒットしたら、その直下に次のような記述を探します。

HTML9 の 9という数字はガジェットが追加された順番で、最初に必ずHTML9が来るというわけではありません。

この数字は順不同ですが、レイアウト通りにサイドバーの上から順番に並んでいます。
HTMLにはウィジェットに記述した文字やコードがそのまま表示されていますから、Widget ID を特定するのはさほど難しくはないはずです。
id = 'HTML' の数字を確認しておきます。

サイドバータイトルの余白を消す

Widget ID が確認できたら、管理画面からテンプレートを選び、HTML の編集を行います。
テンプレートに下記のような表記があります。

<b:if cond="data:title != """> <h3 class="title"><data:title/></h3> </b:if>

必ずしも h3 とは限りません。h2 のときもありますので、<data:title/> で検索すると探しやすいと思います。

先ほど特定しておいた Widget ID を探して、上記の３行を削除します。

これで、サイドバー Widgetの空白タイトル部分にあった 1.5cm くらいのブランクが消えて、すぐ上に配置したWidgetとぴったりと密着して見栄えがよくなります。

私は開かれたページタイプによって、追加したサイドバー Widgetを表示させたり非表示にさせたりしますが、そのようなときに空白のサイドバータイトルは上に詰めておいた方が良いですね。