Bloggerの管理画面のレイアウトのカスタマイズについて 結城永人 - 2021年6月2日 (水) BloggerのテンプレートのCSSでbodyのセレクターに#layoutを使用すると管理画面のレイアウトに表示されるガジェットのデザインをカスタマイズして付けることができる。 目次body#layout：管理画面のレイアウトへの指定背景色のサンプルのソースコードCSSのカスタマイズに適した領域ガジェットのデザインのためのセレクター公式テーマのガジェットの主なセレクターガジェットの位置取りを変えるためのヒント公式テーマのセクションの親ボックスの主なセレクター位置取りのサンプルのソースコードレイアウト用のCSSをブログから除外する方法 body#layout：管理画面のレイアウトへの指定 BloggerのテンプレートのCSSは管理画面のテーマのカスタマイズのの詳細設定の「CSSを追加」やメニュー（▼）の「HTML編集」か「元に戻す」（テンプレートのXMLファイルのアップロード）で書き換えられる。 背景色のサンプルのソースコード レイアウト｜Blogger 公式テーマのEssentialで管理画面のレイアウトをカスタマイズした。 CSS body#layout #search_top {background-color:#ffc0cb} body#layout #header {background-color:#0000ff} body#layout #subscription {background-color:#008000} body#layout #page_list_top {background-color:#800080} body#layout #ads {background-color:#008080} body#layout #page_body {background-color:#ffa500} body#layout #figcaption {background-color:#ee82ee} body#layout #sidebar_top {background-color:#ffff00} body#layout #sidebar_bottom {background-color:#a52a2a} ※セレクターのbodyの部分は#layoutが他のところで使われないから省略しても構わない。 管理画面のレイアウトのデザインは通常のテンプレートのデザインと異なり、CSSの動作が部分的に制限されるようだ。やってみて例えばdisplay:gridやflex-direction:reverseなどのマークアップが反映しなかった。デザインが変わってガジェットが操作できなくならないようにするためかも知れない。だからCSSで普通に全てを書き換えられるとはかぎらない。 Bloggerのテンプレートのhead内のCSSの領域は通常のマークアップを行うためのskinとレイアウトに良く使われるtemplate-skinの二つの独自タグで決められる。やってみると前者よりも後者の方がデザインが非常に多く反映するようだ。またはカスタマイズが可能なのは殆ど後者のみで、前者では僅かにしか確認されないので、template-skin内にマークアップするべきだろう。 カスタマイズに適したCSSの領域 <b:template-skin><![CDATA[ CSSのマークアップ ]]></b:template-skin> ※独自タグのtemplate-skinの内側ならば独自タグのCDATA（XMLやVariableを除く独自タグの解析を止めるもの）の外側でも大丈夫だ。 管理画面のテーマのカスタマイズの「CSSを追加」を使うと主要なskinタグの最後にマークアップが追加されることになり、template-skin内ではないから管理画面のレイアウトのデザインは反映しない可能性が極めて高いと思う。 ガジェットのデザインのためのセレクター レイアウト｜Blogger Bloggerの管理画面のレイアウトにはテンプレートの独自タグのsectionとwidgetが表示されている。前者が後者を囲みながらテンプレートの状態を反映して個別に配置される。 ヘッダーやページの本文やサイドバー（上）などの名前が付いている部分がwidgetタグを入れるsectionタグ、その中で「ガジェット」と呼ばれて編集可能な部分がwidgetタグのコンテンツに相当する。 管理画面のレイアウトのデザインを変更できる対象はテンプレートの独自タグのsectionとwidgetなので、CSSの指定先のbody#layoutの次の部分はそれらのidやclassが中心になる。 公式テーマのガジェットの主なセレクター どんなセレクターがあるか、Bloggerの公式テーマから主なものを幾つか挙げる。 レイアウトバージョン３のガジェットのセクション body#layout #search_top Search (Top)のsection body#layout #header ヘッダーのsection body#layout #subscription 登録のsection body#layout #page_list_top ページリスト（先頭）のsection body#layout #ads 広告のsection body#layout #page_body ページの本文のsection body#layout #figcaption フッターのsection body#layout #sidebar_top サイドバー （上）のsection body#layout #sidebar_bottom サイドバー（下）のsection ※テンプレートのソースコードのhtmlタグに「b:layoutsVersion='3'」と記載されるもの、公式テーマはContempo、Soho、Emporio、Notable、Essentialが対象。 レイアウトバージョン２のガジェットのセクション body#layout #navbar Navbarのsection body#layout #header ヘッダーのsection body#layout #crosscol Cross-Columnのsection body#layout #crosscol-overflow Cross-Column 2のsection body#layout #main メインのsection body#layout #sidebar-right-1 sidebar-right-1のsection body#layout #figcaption-3 フッターのsection ※テンプレートのソースコードのhtmlタグに「b:version='2'」と記載されるもの、公式テーマはSimple、Dynamics Views、Picture Window、Awesomely Inc.、Watermark、Ethereal、Travelが対象。※サイドバーやフッターのsectionはテーマ毎に異なり、位置や番号で識別される。およそレイアウトの名前の英数字と記号の組み合わせがsectionタグのidに当て嵌まる。 ガジェット自体には「.widget-content」というclassが一般的に当て嵌まり、sectionのセレクターに追加すると反映する。 例えばレイアウトヴァージョン３のページの本文のsectionに含まれる全てのガジェットを指定するセレクターは「body#layout #page_body .widget-content」というふうになる。 個別のガジェットのデザインにはwidgetタグのtypeの値が出力後のソースコードでclassの値に変わるので、それをsectionのidとガジェットを一般的に指定するclassの間に追加すると反映する。 widgetタグのtypeによるガジェットのセレクター .Blog ブログの投稿 .AdSense アドセンス .FeaturedPost 注目の投稿 .BlogSearch ブログ検索 .HTML HTML / JavaScript .Profile プロフィール .BlogArchive ブログ アーカイブ .Header ページヘッダー .Follows フォロワー .Image 画像 .Label ラベル .PageList ページ .LinkList リンクリスト .Text テキスト .PopularPosts 人気の投稿 .Stats ブログの統計情報 .BlogList ブログリスト .Feed フィード .BloggerButton ロゴ .Subscribe 登録用リンク .Translate 翻訳 .TextList リスト .ContactForm 連絡フォーム .Wikipedia ウィキペディア .Attribution 帰属 .ReportAbuse 不正行為の報告 .Navbar ナビバー 例えばレイアウトヴァージョン３のページの本文のsectionに含まれるブログの投稿のガジェットを指定するセレクターは「body#layout #page_body .Blog .widget-content」というふうになる。 ガジェットの位置取りを変えるためのヒント 管理画面のレイアウトのデザインはテンプレートのCSSの影響を受ける。しかもカスタマイズにはCSSの動作が制限されているためにガジェットの位置取りを変えるのは難しい場合も出て来るかも知れない。 ガジェットの位置取りはbody#layoutのセレクターで何もしなければ基本的にテンプレートの独自タグのsectionとwidgetの順番通りに一行ずつ並んで行く。 ただしテンプレートのCSSの影響を受けると必ずしもそうではなくなるから注意しなくてはならない。 ガジェットの位置取りに影響を与えるテンプレートのCSSにはdisplayやpositionやfloatやwidthやmarginなどが挙げられる。 カスタマイズする場合はガジェットとそのセクションだけではなく、両方を入れる親ボックスのCSSも影響するかも知れない。 公式テーマのセクションの親ボックスの主なセレクター レイアウトバージョン３のセクションの親ボックス body#layout .page メインのコンテンツの全体（最も外側） body#layout .page_body メインのコンテンツの全体（二番目の外側） body#layout .centerd メインのコンテンツのヘッダー画像を除いた部分 body#layout .centerd-top-container メインのヘッダー（ブログ名やページリストなど） body#layout .centerd-bottom メインのコンテンツ（注目の投稿とブログの投稿と人気の投稿） body#layout .figcaption メインのフッター（帰属） body#layout .sidebar-container サイドバーの全体 body#layout .sidebar_top サイドバー（上） body#layout .sidebar_bottom サイドバー（下） ※テンプレートのソースコードのhtmlタグに「b:layoutsVersion='3'」と記載されるもの、公式テーマはContempo、Soho、Emporio、Notable、Essentialが対象。※テーマによって含まれないものもある。 レイアウトバージョン２のセクションの親ボックス body#layout .content-outer ブログ全体 body#layout .region-inner メインのコンテンツの全体 body#layout .header-outer ヘッダー（ブログ名や説明文など） body#layout .tabs-outer タブ（ラベルなど） body#layout .main-inner メインのコンテンツ（ブログの投稿など） body#layout .sidebar サイドバーの全体 body#layout .column-right-outer 右側のサイドバー body#layout .column-right-outer 左側のサイドバー ※テンプレートのソースコードのhtmlタグに「b:version='2'」と記載されるもの、公式テーマはSimple、Dynamics Views、Picture Window、Awesomely Inc.、Watermark、Ethereal、Travelが対象。※テーマによって含まれないものもある。 テンプレートでガジェットを表示する部分の独自タグのsectionとwidget、さらにそれらを囲んでいる親ボックスのdivタグなどの状態も考慮する。 位置取りのサンプルのソースコード レイアウト｜Blogger 公式テーマのEssentialで管理画面のレイアウトをカスタマイズした。 CSS body#layout .page, body#layout .sidebar_top, body#layout .sidebar_bottom {display: inline-block;left: inherit;position:relative;vertical-align:top} body#layout .page {float: right;margin-left: 20px;width: 55%} body#layout .sidebar-container {float: right;width: 40%} body#layout .centerd {display:flex} body#layout #search_top {background-color:#ffc0cb} body#layout #header {background-color:#0000ff} body#layout #subscription {background-color:#008000} body#layout #page_list_top {background-color:#800080} body#layout #ads {background-color:#008080} body#layout #page_body {background-color:#ffa500} body#layout #figcaption {background-color:#ee82ee} body#layout #sidebar_top {background-color:#ffff00} body#layout #sidebar_bottom {background-color:#a52a2a} ※打ち消し線はbody#layoutの既存のCSSから削除する部分。※セレクターのbodyの部分は#layoutが他のところで使われないから省略しても構わない。 テンプレートのCSSで影響を与えるものはbody#layoutで消すか戻すか上書きするとガジェットの位置取りを行い易い。 ガジェットとそのセクションと両方の親ボックス以外にもガジェットのタイトルの余白が影響して上下の隙間を詰められない場合があったり、ガジェットの兄弟要素や子要素も全く影響しないわけではない。 レイアウト用のCSSをブログから除外する方法 管理画面のレイアウトのデザインのマークアップは実際に表示するブログのソースコードには必要ない。なので除外しておくと大量ではないにしてもそれだけ不要なマークアップを減らしてブログのパフォーマンスを上げることに繋がる。 <b:if cond='data:view.isLayoutMode'> CSSのマークアップ </b:if> Bloggerの独自タグの条件分岐のifで「data:view.isLayoutMode」を条件のcondに使うと管理画面のレイアウトだけ記載するように変更されるので、その中に管理画面のレイアウト用のCSSを入れておくと実際にブログを表示するソースコードからは除外される。 管理画面のレイアウトのカスタマイズに有利な独自タグのtemplate-skinを使う場合はそれも含めて当該のifの中に記載するけれどもブログの表示に必要なCSSが混ざっていると反映しなくなるから出して別に記載しなくてはならない。 コメント 新しい投稿 前の投稿
結城永人
結城永人
コメント