BloggerのContempoとSohoとEmporioのテンプレートで記事/追加ページにハンバーガーメニューを出す 結城永人 - 2019年3月20日 (水) Bloggerの2017年の公式テーマはブログの最上段にフローティングバー(固定/スティッキーのメニューバー)が付いている。 ところがNotableを除いてContempoとSohoとEmporioはデザインが一般的ではない。トップやアーカイブなどのインデックスページは総合メニューのサイドバーを開閉するハンバーガーメニュー(≡)が表示されるのに記事/追加ページでは変わってホームボタン:トップページへのリンクの左矢印(←)が表示される。子ページだからデザインの意味付けは悪くはないにしても記事/追加ページから親ページへはフローティングバーやヘッダーにブログ名のリンクもあるから重複している。 A hamburger with vegetables by Valeria Boltneva / Pexels 折角の総合メニューのサイドバーを記事/追加ページから使えないのは勿体ないし、訪問者にプロフィールやアーカイブやラベルなどを直ぐに閲覧できるようにContempoとSohoとEmporioのテンプレートでもフローティングバーにハンバーガーメニューを出すようにカスタマイズしたい。 何れもBloggerのウェブのテーマのHTML編集かバックアップ/復元を使ってブログのテンプレートのソースコード(xmlファイル)を書 き換える。 目次Contempoでフローティングバーにハンバーガーメニューを出す記事/追加ページのヘッダーのデザインをインデックスページと合わせる場合記事/追加ページのヘッダーのデザインをデフォルトのままに維持する場合ヘッダーのデザインを左矢印から引き継ぐためのCSSSohoでフローティングバーにハンバーガーメニューを出すハンバーガーメニューを表示するためにカスタマイズが必要な部分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'> <!-- Display different sidebars for feed page / item page. --> 中略:サイドバーのソースコード </b:if> 中略:Sidebar (Item Page)のソースコード </aside> <!-- close sidebar-container --> 設置の変更後:>全ページ共通のサイドバーのソースコード <aside class='sidebar-container container sidebar-invisible' role='complementary'> 中略:サイドバーのソースコード 中略:Sidebar (Item Page)のソースコード </aside> <!-- close sidebar-container --> 太字が追加した部分で、他に独自タグのclassタグとif(開始と終了の二つ)とコメント(<!-- 内容 -->)は削除している。 サイドバーのデザインがデフォルトで最初から開かないようにして記事/追加ページを除外して出るように設置されているけれども全ページで共通して出るように修正している。 Emporioはサイドバーのコンテンツが二種類に分かれていてそのままで記事/追加ページにハンバーガーメニューを導入すると後半のSidebar (Item Page)のところは記事/追加ページの下段には表示されない。ハンバーガーメニューで開かれる前半のサイドバーに続いて表示されるように変わるから必要に応じてカスタマイズでデフォルトのデザインに戻さなくはならない。 コメント 新しい投稿 前の投稿
細川慎二のどうにも泣けて来てしまうストリートライヴのアルトサックス サックス奏者の 細川慎二 の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...
コメント