Bloggerの管理画面のレイアウトのカスタマイズについて

BloggerのテンプレートのCSSでbodyのセレクターに#layoutを使用すると管理画面のレイアウトに表示されるガジェットのデザインをカスタマイズして付けることができる。

body#layout：管理画面のレイアウトへの指定
背景色のサンプルのソースコード
CSSのカスタマイズに適した領域
ガジェットのデザインのためのセレクター
公式テーマのガジェットの主なセレクター
ガジェットの位置取りを変えるためのヒント
公式テーマのセクションの親ボックスの主なセレクター
位置取りのサンプルのソースコード
レイアウト用のCSSをブログから除外する方法

body#layout：管理画面のレイアウトへの指定BloggerのテンプレートのCSSは管理画面のテーマのカスタマイズのの詳細設定の「CSSを追加」やメニュー（▼）の「HTML編集」か「元に戻す」（テンプレートのXMLファイルのアップロード）で書き換えられる。背景色のサンプルのソースコードガジェットに様々な背景色が付けられたBloggerの管理画面の縦二列のレイアウト

ガジェットに様々な背景色が付けられたBloggerの管理画面の縦二列のレイアウト

レイアウト｜Blogger

公式テーマのEssentialで管理画面のレイアウトをカスタマイズした。CSSbody#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の管理画面の縦一列のレイアウト

レイアウト｜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の管理画面の縦三列のレイアウト

ガジェットに様々な背景色が付けられたBloggerの管理画面の縦三列のレイアウト

レイアウト｜Blogger

公式テーマのEssentialで管理画面のレイアウトをカスタマイズした。CSSbody#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が混ざっていると反映しなくなるから出して別に記載しなくてはならない。