スキップしてメイン コンテンツに移動

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

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

body#layout:管理画面のレイアウトへの指定

BloggerのテンプレートのCSSは管理画面のテーマのカスタマイズのの詳細設定の「CSSを追加」やメニュー(▼)の「HTML編集」か「元に戻す」(テンプレートのXMLファイルのアップロード)で書き換えられる。

背景色のサンプルのソースコード

ガジェットに様々な背景色が付けられたBloggerの管理画面の縦二列のレイアウト
レイアウト|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 #footer {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の管理画面のレイアウトにはテンプレートの独自タグのsectionとwidgetが表示されている。前者が後者を囲みながらテンプレートの状態を反映して個別に配置される。

ヘッダーやページの本文やサイドバー(上)などの名前が付いている部分がwidgetタグを入れるsectionタグ、その中で「ガジェット」と呼ばれて編集可能な部分がwidgetタグのコンテンツに相当する。

管理画面のレイアウトのデザインを変更できる対象はテンプレートの独自タグのsectionとwidgetなので、CSSの指定先のbody#layoutの次の部分はそれらのidやclassが中心になる。

公式テーマのガジェットの主なセレクター

どんなセレクターがあるか、Bloggerの公式テーマから主なものを幾つか挙げる。

レイアウトバージョン3のガジェットのセクション
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 #footer
フッターのsection
body#layout #sidebar_top
サイドバー (上)のsection
body#layout #sidebar_bottom
サイドバー(下)のsection

※テンプレートのソースコードのhtmlタグに「b:layoutsVersion='3'」と記載されるもの、公式テーマはContempo、Soho、Emporio、Notable、Essentialが対象。

レイアウトバージョン2のガジェットのセクション
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 #footer-3
フッターのsection

※テンプレートのソースコードのhtmlタグに「b:version='2'」と記載されるもの、公式テーマはSimple、Dynamics Views、Picture Window、Awesomely Inc.、Watermark、Ethereal、Travelが対象。
※サイドバーやフッターのsectionはテーマ毎に異なり、位置や番号で識別される。およそレイアウトの名前の英数字と記号の組み合わせがsectionタグのidに当て嵌まる。

ガジェット自体には「.widget-content」というclassが一般的に当て嵌まり、sectionのセレクターに追加すると反映する。

例えばレイアウトヴァージョン3のページの本文の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
ナビバー

例えばレイアウトヴァージョン3のページの本文のsectionに含まれるブログの投稿のガジェットを指定するセレクターは「body#layout #page_body .Blog .widget-content」というふうになる。

ガジェットの位置取りを変えるためのヒント

管理画面のレイアウトのデザインはテンプレートのCSSの影響を受ける。しかもカスタマイズにはCSSの動作が制限されているためにガジェットの位置取りを変えるのは難しい場合も出て来るかも知れない。

ガジェットの位置取りはbody#layoutのセレクターで何もしなければ基本的にテンプレートの独自タグのsectionとwidgetの順番通りに一行ずつ並んで行く。

ただしテンプレートのCSSの影響を受けると必ずしもそうではなくなるから注意しなくてはならない。

ガジェットの位置取りに影響を与えるテンプレートのCSSにはdisplayやpositionやfloatやwidthやmarginなどが挙げられる。

カスタマイズする場合はガジェットとそのセクションだけではなく、両方を入れる親ボックスのCSSも影響するかも知れない。

公式テーマのセクションの親ボックスの主なセレクター

レイアウトバージョン3のセクションの親ボックス
body#layout .page
メインのコンテンツの全体(最も外側)
body#layout .page_body
メインのコンテンツの全体(二番目の外側)
body#layout .centerd
メインのコンテンツのヘッダー画像を除いた部分
body#layout .centerd-top-container
メインのヘッダー(ブログ名やページリストなど)
body#layout .centerd-bottom
メインのコンテンツ(注目の投稿とブログの投稿と人気の投稿)
body#layout .footer
メインのフッター(帰属)
body#layout .sidebar-container
サイドバーの全体
body#layout .sidebar_top
サイドバー(上)
body#layout .sidebar_bottom
サイドバー(下)

※テンプレートのソースコードのhtmlタグに「b:layoutsVersion='3'」と記載されるもの、公式テーマはContempo、Soho、Emporio、Notable、Essentialが対象。
※テーマによって含まれないものもある。

レイアウトバージョン2のセクションの親ボックス
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

公式テーマの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 #footer {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が混ざっていると反映しなくなるから出して別に記載しなくてはならない。

コメント

些細な日常の人気の投稿

PlayストアでAndroidアプリのダウンロードが非常に遅い場合の打開策

イメージ

偶に始まらなかったり、途中で止まったりもしていたPlayストアでのAndroidアプリのダウンロードは安定して来ていると思うし、喜ばしいかぎりの昨今だけれども速度自体はいつも同じではないから何だろうと訝られる。 余りに遅過ぎるわけではないし、お手上げとまでは行かないにせよ、非...

飽和脂肪酸の多いココナッツオイルの過剰摂取の危険性とその他の健康上の利点

イメージ

パンや菓子や揚げ物などに安く使用される マーガリンやショートニングなどのトランス脂肪酸が動脈硬化を引き起こすと世界的に避けられる 一方で、代わりに新しく使用される他の食用油によって必ずしも健康的な食生活が確保されるとはかぎらない状況も出て来てしまっているのが厄介なんだ。 脂...

早川愛の高校野球の夏の甲子園の大会歌の栄冠は君に輝くの独唱のソプラノの美声

イメージ

高校野球の夏の甲子園の 作新学院と今井達也の優勝の記事 を改善するために新しく引用できる動画はないかとYouTubeで探していたら2016年の地方予選の栃木大会だから当の作新学院と今井達也も参加して奇しくも予選の勝ち抜けと夏の甲子園での全国制覇への好影響を受けたかも知れなかった...