BloggerのContempoとSohoとEmporioのテンプレートで記事／追加ページにハンバーガーメニューを出す

結城永人 -2019年3月20日 (水)

Bloggerの2017年の公式テーマはブログの最上段にフローティングバー（固定／スティッキーのメニューバー）が付いている。ところがNotableを除いてContempoとSohoとEmporioはデザインが一般的ではない。トップやアーカイブなどのインデックスページは総合メニューのサイドバーを開閉するハンバーガーメニュー（≡）が表示されるのに記事／追加ページでは変わってホームボタン：トップページへのリンクの左矢印（←）が表示される。子ページだからデザインの意味付けは悪くはないにしても記事／追加ページから親ページへはフローティングバーやヘッダーにブログ名のリンクもあるから重複している。レタスとトマトとチーズが挟まったハンバーガー

折角の総合メニューのサイドバーを記事／追加ページから使えないのは勿体ないし、訪問者にプロフィールやアーカイブやラベルなどを直ぐに閲覧できるようにContempoとSohoとEmporioのテンプレートでもフローティングバーにハンバーガーメニューを出すようにカスタマイズしたい。何れもBloggerのウェブのテーマのHTML編集かバックアップ／復元を使ってブログのテンプレートのソースコード（xmlファイル）を書き換える。

Contempoでフローティングバーにハンバーガーメニューを出す
記事／追加ページのヘッダーのデザインをインデックスページと合わせる場合
記事／追加ページのヘッダーのデザインをデフォルトのままに維持する場合
ヘッダーのデザインを左矢印から引き継ぐためのCSS
Sohoでフローティングバーにハンバーガーメニューを出す
ハンバーガーメニューを表示するためにカスタマイズが必要な部分
Emporioでフローティングバーにハンバーガーメニューを出す
記事／追加ページでハンバーガーメニューを表示するカスタマイズ
記事／追加ページでハンバーガーメニューとサイドバーを連動させるカスタマイズ
Sidebar (Item Page)のコンテンツを記事／追加ページの下段に表示する場合
ハンバーガーメニューの出方を全ページ共通に揃えて設置するカスタマイズ

Contempoでフローティングバーにハンバーガーメニューを出す二つの方法を考える。一つはインデックスページと共通のヘッダーのデザインにする。もう一つは記事／追加ページのヘッダーのデザインにする。 Contempoのフローティングバーのデザインはヘッダーのデザインと連動して変わる。そしてインデックスページと記事／追加ページではヘッダーのデザインがデフォルトで微妙に異なる。前者よりも後者が狭くなっている（上下の隙間が少ない）ので、それを維持するかどうかでフローティングバーにハンバーガーメニューを表示するカスタマイズが二つに分けられる。記事／追加ページのヘッダーのデザインをインデックスページと合わせる場合<b:if cond='data:view.isSingleItem'> <a class='return_link' expr:href='data:blog.homepageUrl'> <b:include data='{ button: true, iconClass: "back-button rtl-reversible-icon flat-icon-button ripple" }' name='backArrowIcon'/> </a> <b:else/> <b:include data='{ button: true, iconClass: "hamburger-menu flat-icon-button ripple" }' name='menuIcon'/> </b:if> テンプレートのソースコードのbody内の上の方にある帯文字の部分を残して他の六つのタグを削除する。すると全ページでフローティングバーにハンバーガーメニューが表現されて記事／追加ページのホームボタンの左矢印は消える。もう使わない左矢印のデザインがCSSのソースコードのheadのstyle内に、二ヵ所、ある。削除しなくても大丈夫だけれども削除するとソースコードの無駄が省かれて少しだけ軽くなるから良いと思う。ブログの表示速度も上がる。.item-view .return_link{ margin-bottom:12px; margin-top:12px; position:absolute }html[dir=rtl] .rtl-reversible-icon{ -webkit-transform:scaleX(-1); -ms-transform:scaleX(-1); transform:scaleX(-1) } 記事／追加ページのヘッダーのデザインをデフォルトのままに維持する場合フローティングバーの表示とデザインの両方を変更する。表示の変更前：左矢印ありのソースコード<b:if cond='data:view.isSingleItem'> <a class='return_link' expr:href='data:blog.homepageUrl'> <b:include data='{ button: true, iconClass: "back-button rtl-reversible-icon flat-icon-button ripple" }' name='backArrowIcon'/> </a> <b:else/> <b:include data='{ button: true, iconClass: "hamburger-menu flat-icon-button ripple" }' name='menuIcon'/> </b:if> 表示の変更後：ハンバーガーメニューのみのソースコード<b:if cond='data:view.isSingleItem'> <div class='return_link'> <b:include data='{ button: true, iconClass: "hamburger-menu flat-icon-button ripple" }' name='menuIcon'/> </div> <b:else/> <b:include data='{ button: true, iconClass: "hamburger-menu hbm flat-icon-button ripple" }' name='menuIcon'/> </b:if> テンプレートのソースコードのbody内の上の方にある変更前のソースコードを変更後のソースコードに置き換える。ヘッダーのデザインを左矢印から引き継ぐためのCSS 何もせず、表示のソースコードを変更するだけだとインデックスページのハンバーガーメニューのデザインが記事／追加ページでもかかってヘッダーとフローティングバーのブログ名や検索アイコンと縦にずれてしまう。なのでインデックスページのハンバーガーメニューのデザインが記事／追加ページでかからないように除外しなくてはならない。 CSSのheadのstyle内にクラス名の「.hamburger-menu」で指定されているけど、このコードはBloggerの独自タグのハンバーガーメニューの表示（includeのdataのbuttonとiconClass）にも影響するから新たに使う記事／追加ページからは外せないので、代わりにCSSのクラス名こそ「.hbm」などに変えてインデックスページの表示のソースコードにも置いて記事／追加ページと切り離してデザインを指定し直すのが良いと思う。クラス名の変更前のサンプルbody#layout .hamburger-menu,body#layout .search{ display:none } クラス名の変更後のサンプルbody#layout .hbm,body#layout .search{ display:none } 現行のContempoのバージョンの1.3.0（ソースコードの冒頭のhtmlタグの「templateVersion」から確認可能）ではCSSのheadのstyle内の六ヵ所に「.hamburger-menu」が出て来るので、全て表示の変更後のソースコードに予め追加しておいた「.hbm」に書き換える。インデックスページのハンバーガーメニューのデザインは記事／追加ページに付けたハンバーガーメニューにはかからなくなる。記事／追加ページのハンバーガーメニューのデザインは従来の左矢印で使われていた「.return_link」を含む二ヵ所で指定されているので、CSSのheadのstyle内のコードを変更すればカスタマイズも可能になる。 Sohoでフローティングバーにハンバーガーメニューを出す記事ページのフローティングバーだけがホームボタンの左矢印を表示してハンバーガーメニューを表示しない。前者を後者に置き換えるだけでデザインも影響を受けずに直ぐに使えるようになる。ハンバーガーメニューを表示するためにカスタマイズが必要な部分<b:if cond='data:view.isPost'> <div class='back-button-container'> <a expr:href='data:blog.homepageUrl'> <b:include data='{ iconClass: "touch-icon back-button rtl-reversible-icon" }' name='backArrowIcon'/> </a> </div> <b:else/> <div class='hamburger-menu-container'> <b:include data='{ iconClass: "touch-icon hamburger-menu" }' name='menuIcon'/> </div> </b:if> テンプレートのソースコードのbody内の上の方にある帯文字の部分を残して他の八つのタグを削除する。すると全ページでフローティングバーにハンバーガーメニューが表現されて記事ページのホームボタンの左矢印は消える。 Emporioでフローティングバーにハンバーガーメニューを出す先ずフローティングバーの表示をカスタマイズして記事／追加ページのホームボタンの左矢印をハンバーガーメニューへ取り換える。デザインは影響を受けずに表示は大丈夫だけど、ところがそれだけではハンバーガーメニューのスイッチからブログのサイドバーが出て来なくて機能しない。ハンバーガーメニューとサイドバーを記事／追加ページでもインデックスページと同じように連動させるカスタマイズも行わなくてはならない。そしてブログの全ページで共通に出し入れ可能な仕方で設置するようにカスタマイズすると完成する。記事／追加ページでハンバーガーメニューを表示するカスタマイズフローティングバーのデザインを二つ取り上げる。ホームボタンの左矢印をハンバーガーメニューへ取り換える方法とさらにEmporioはハンバーガーメニューが右寄せだからホームボタンの左矢印が左寄せなのと両立する方法もやり易い。前者のデザインは全ページで共通で、後者のデザインは記事／追加ページだけがホームボタンの左矢印を左寄せで持ってインデックスページと区別できる。ホームボタンの左矢印を消すデザイン<b:if cond='data:view.isSingleItem'> <a class='return_link' expr:href='data:blog.homepageUrl'> <b:include data='{ iconClass: "touch-icon back-button rtl-reversible-icon" }' name='backArrowIcon'/> </a> <b:else/> <div class='hamburger-section'> <b:include data='{ iconClass: "touch-icon hamburger-menu" }' name='menuIcon'/> </div> </b:if> テンプレートのソースコードのbody内の上の方にある帯文字の部分を残して他の六つのタグを削除する。すると全ページでフローティングバーにハンバーガーメニューが表現されて記事ページのホームボタンの左矢印は消える。もう使わない左矢印のデザインがCSSのソースコードのheadのstyle内に、二ヵ所、ある。削除しなくても大丈夫だけれども削除するとソースコードの無駄が省かれて少しだけ軽くなるから良いと思う。ブログの表示速度も上がる。 Emporioのハンバーガーメニューで不要の左矢印のCSS.centered-top .return_link{ -webkit-box-flex:0; -webkit-flex:0 0 auto; -ms-flex:0 0 auto; flex:0 0 auto; height:24px; -webkit-box-ordinal-group:1; -webkit-order:0; -ms-flex-order:0; order:0; width:24px }html[dir=rtl] .rtl-reversible-icon{ -webkit-transform:scaleX(-1); -ms-transform:scaleX(-1); transform:scaleX(-1) } 後他にもクラス名だけが残る部分もある。.blog-name,.return_link,.subscribe-section-container{ opacity:1; -webkit-transition:opacity .3s cubic-bezier(.4,0,.2,1); transition:opacity .3s cubic-bezier(.4,0,.2,1) }.centered-top.search-focused .blog-name,.centered-top.search-focused .return_link,.centered-top.search-focused .subscribe-section-container{ opacity:0 } 太字の「.return_link」を含む二種類の指定先はハンバーガーメニューの表示のソースコードで削除されているから不要だ。ブログのハンバーガーメニューの位置取りはインデックスページと同じで、記事／追加ページでもフローティングバーの右寄せになる。ホームボタンの左矢印を使うデザイン<b:if cond='data:view.isSingleItem'> <a class='return_link' expr:href='data:blog.homepageUrl'> <b:include data='{ iconClass: "touch-icon back-button rtl-reversible-icon" }' name='backArrowIcon'/> </a> </b:if> <div class='hamburger-section'> <b:class cond='!data:view.isSingleItem' name='menu-balance'/> <b:include data='{ iconClass: "touch-icon hamburger-menu" }' name='menuIcon'/> </div> ソースコードのHTMLのaの「return_link」やdivの「hamburger-section」を含んだ部分の三ヵ所を編集する。太字が<b:else/>から</b:if>への書き換え、帯文字が新しく追加したコード、最後の</div>の次には元々は</b:if>があるけれども削除する。加えてCSSのheadのstyle内も変更する。何もしないと記事／追加ページのフローティングバーに表示するハンバーガーメニューの右端に隙間が多く付いてバランスが崩れる。インデックスページのデザインが追加されるためなので、記事／追加ページにかからないようにCSSのコードを除外しなくてはならない。.centered-top .hamburger-section{ -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; height:48px } .menu-balance { margin-$endSide:24px } CSSの指定先の「.centered-top .hamburger-section」のコードを編集する。デフォルトで最後にハンバーガーメニューの右端の余白を調節する「margin-$endSide:24px」（$endSideはBloggerのCSSの変数で、文章の向きの終了側：日本語だと左から右なので、終了側は右の「right」に相当する）が記載されているので、一つだけ取り出してクラス名の「.menu-balance」のコードとして別に記載し直す。カスタマイズのHTMLのソースコードで独自タグのclassを使って記事／追加ページ以外のページに「.menu-balance」のクラス名を付けるようにしてある。インデックスページではハンバーガーメニューの右端の余白を調節する「margin-$endSide:24px」がかかってデザインは崩れず、記事／追加ページには影響しない。フローティングバーにホームボタンの左矢印と共にハンバーガーメニューを設置しても右端に隙間は増えなくなる。記事／追加ページでハンバーガーメニューとサイドバーを連動させるカスタマイズ Emporioテーマにかぎってフローティングバーのハンバーガーメニューを記事／追加ページで表示しても機能しない。画面が黒くなったり、ブログが縮小されたりする。ハンバーガーメニューのスイッチを押したらサイドバーが的確に出て来るようにカスタマイズする必要がある。 CSSのクラス名の「.item-view .sidebar-container」が干渉していてテンプレートのソースコードのheadのstyle内の当該のデザインを停止すると上手く行く。停止するCSSのソースコードのサンプル.item-view .sidebar-container{ box-sizing:border-box; margin-$startSide:0; margin-top:15px; max-width:280px; padding:0; width:280px } 現行のEmporioのバージョンの1.3.0（ソースコードの冒頭のhtmlタグの「templateVersion」から確認可能）ではCSSのheadのstyle内の五ヵ所に「.item-view .sidebar-container」を含むデザイン――他のクラス名を併せ持つのは「.item-view .sidebar-container .widget」と「.item-view .sidebar-container .section」と「.item-view .sidebar-container .section .widget」が見付かる――が記載されているので、クラス名を他の特定の何かに変えてコードを無効にしたり、不要なかぎりはクラス名とコードの両方とも削除してハンバーガーメニューのスイッチに干渉しないように停止しなくてはならない。 Emporioはサイドバーが二種類に分かれていて前半の「サイドバー」がインデックスページのハンバーガーメニューに対応して後半の「Sidebar (Item Page)」が記事／追加ページの下段に対応するというのがデフォルトのデザインになっている。 CSSの「.item-view .sidebar-container」が指定する部分はサイドバーの後半の「Sidebar (Item Page)」のデザインになっているので、例えば人気の投稿ガジェットを記事下に使うような場合は停止させると元々のデザインが保てなくなってしまう。記事／追加ページの下段に「Sidebar (Item Page)」でコンテンツを表示する場合には当該のソースコードをサイドバーの前半の「サイドバー」のソースコードの外側へ移動して「.item-view .sidebar-container」のデザインをかけなくてはならない。 Sidebar (Item Page)のコンテンツを記事／追加ページの下段に表示する場合 Emporioのサイドバーのソースコードは<aside class='sidebar-container container' role='complementary'></aside>の中に前半のサイドバーと後半のSidebar (Item Page)の分が両方とも入っている。記事／追加ページのハンバーガーメニューの表示のためにCSSの「.item-view .sidebar-container」を含むコードを停止するとSidebar (Item Page)のコンテンツはサイドバーに表示されてデフォルトの記事／追加ページの下段ではなくなってしまう。表示する位置を元に戻すにはサイドバーのソースコードから外して記載し直す。同じように記事／追加ページの下段ならばサイドバーの開始タグの<aside class='sidebar-container container' role='complementary'>の直前やサイドバーの終了タグの</aside>の直後にSidebar (Item Page)のソースコードを置くとブログではサイドバーには入らず、記事／追加ページの下段に表示される。デザインを揃えるには停止したCSSの「.item-view .sidebar-container」のクラス名を変えてSidebar (Item Page)のコンテンツの親ボックスに指定する。人気の投稿ガジェットをサイドバーから外してデザインを変えずに表示するソースコードのサンプル<b:if cond='data:view.isSingleItem or data:view.isLayoutMode'> <aside class='nexus'> <b:section id='sidebar_item' name='Sidebar (Item Page)'> <b:widget cond='data:posts any (p => p.id != data:view.postId)' id='PopularPosts1' locked='true' title='' type='PopularPosts' visible='true'> 中略 </widget> </section> </aside> </b:if> サイドバーの後半のSidebar (Item Page)はBloggerの振り分けタグのをifを使って記事／追加ページかレイアウトモード（編集画面）に表示されるようになっている。一つのsectionで大きく区分けされた中に諸々のコンテンツがwidgetで記載される。人気の投稿ウィジェットの場合はPopularPostsのtypeになって挿入されるようになる。ブログのサイドバー全体のソースコードから外しながらデザインを引き継ぐためには記事／追加ページのハンバーガーメニューで不要の「.item-view .sidebar-container」のCSSをかけなくてはならない。そのままのクラス名ではハンバーガーメニューと両立できないので、サンプルでは「nexus」に変えてasideタグでSidebar (Item Page)のsectionを囲んで内側の人気の投稿ウィジェットなどのwidgetにかかるようにしている。 CSSは記事／追加ページのハンバーガーメニューで停止するソースコードを削除せず、クラス名を変えてSidebar (Item Page)のHTMLのソースコードに適用させる。.item-view .nexus{ box-sizing:border-box; margin-$startSide:0; margin-top:15px; max-width:280px; padding:0; width:280px } サンプルのHTMLではasideタグに「nexus」というクラスを付けたので、合わせるためにCSSは「.item-view .nexus」のクラス名を新しく付けている。クラス名が二つに分かれていて前者の「.item-view」は記事／追加ページの全体を指定している。後者が内側に含まれる個別の領域を指定するので、続けてクラス名を記載したところの記事／追加ページのコンテンツにデザインが付けられる。現行のEmporioの1.3.0のバージョンならば元々の「.item-view .sidebar-container」のクラス名が五つあるので、全て揃える。他のクラス名も入っている場合は「.sidebar-container」だけを新しいクラス名に書き換える。サンプルだと「.item-view .nexus .widget」と「.item-view .nexus .section」と「.item-view .nexus .section .widget」になる。サイドバーの後半のSidebar (Item Page)のコンテンツはHTMLとCSSを両方ともサイドバーの前半のサイドバーと切り離して設置すると記事／追加ページのハンバーガーメニューと両立して下段にデフォルトのデザインを引き継いで表示できる。ハンバーガーメニューの出方を全ページ共通に揃えて設置するカスタマイズ最後、フローティングバーのハンバーガーメニューに連動するサイドバーのデザインを記事／追加ページでもインデックスページと同じように取るためにサイドバーの出方も合わせて確保しておく。設置の変更前：インデックスページ専用のサイドバーのソースコード<aside class='sidebar-container container' role='complementary'> <b:class cond='not data:view.isSingleItem' name='sidebar-invisible'/> <b:if cond='not data:view.isSingleItem or data:view.isLayoutMode'>  中略：サイドバーのソースコード </b:if> 中略：Sidebar (Item Page)のソースコード </aside>  設置の変更後：>全ページ共通のサイドバーのソースコード<aside class='sidebar-container container sidebar-invisible' role='complementary'> 中略：サイドバーのソースコード中略：Sidebar (Item Page)のソースコード </aside>  太字が追加した部分で、他に独自タグのclassタグとif（開始と終了の二つ）とコメント（）は削除している。サイドバーのデザインがデフォルトで最初から開かないようにして記事／追加ページを除外して出るように設置されているけれども全ページで共通して出るように修正している。 Emporioはサイドバーのコンテンツが二種類に分かれていてそのままで記事／追加ページにハンバーガーメニューを導入すると後半のSidebar (Item Page)のところは記事／追加ページの下段には表示されない。ハンバーガーメニューで開かれる前半のサイドバーに続いて表示されるように変わるから必要に応じてカスタマイズでデフォルトのデザインに戻さなくはならない。