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の公式テーマから主なものを幾つか挙げる。 レイアウトバージョン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 #figcaption フッターの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 #figcaption-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 .figcaption メインのフッター(帰属) 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 公式テーマの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が混ざっていると反映しなくなるから出して別に記載しなくてはならない。 コメント 新しい投稿 前の投稿
細川慎二のどうにも泣けて来てしまうストリートライヴのアルトサックス サックス奏者の 細川慎二 の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...
コメント