Chrome と Firefox の拡張 "Stylus" で Blogger の複数ブログの管理を便利に。

2024/10/0812
アイキャッチ

Blogger で複数のブログを運営されている方で、管理画面で間違えて別のブログのテーマやレイアウトを変えてしまったり、記事を誤爆してしまった!😱 なんて経験をされた事はないですか?

え?ないって? 少なくとも私と さんがつさんはあります・・・😇

そういううっかりミスをしてしまう原因は管理画面の見た目が全部同じで紛らわしいからなんですよね。(たぶん…)
例えばブログごとに背景の色が違ってたりすれば、非常に判りやすくなって間違えるリスクも減るというわけです。

これはウチの4ブログのそれぞれの色分けした投稿ページです。わかりやすいでしょ?
(メインブログはデフォルトの白のままです)

色分けされた管理画面

とは言え、ブログ本体ならまだしも管理画面の CSS は直接は弄れません。

そこで Stylus という Chrome と Firefox の拡張機能(アドオン)を使って背景の色を変える手順を紹介したいと思います。

この拡張は自分(ブラウザ管理者)からの見た目だけを手軽に CSS で変えることができるツールです。

CONTENTS

拡張をインストール

まず以下のページにアクセスし、Stylus をブラウザにインストールして下さい。

Chrome

ファビコンChrome ウェブストア
サムネイル
Stylus
Redesign the web with Stylus, a user styles manager. Stylus allows you to easily install themes and skins for many popular sites.
https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne

Firefox

ファビコンFirefox Blowser ADD-ONS
サムネイル
Stylus – 🦊 Firefox (ja) 向け拡張機能を入手
Firefox 向け Stylus をダウンロード。お気に入りのWebサイトをStylusでデザインしましょう。Stylusは、アクティブに開発されているコミュニティ主導型のユーザースタイル管理ツールです。有名なオンラインリポジトリからカスタムテーマを簡単にインストールしたり、あなたの個人用のCSSスタイルシートを作成したり、編集したり、管理したりすることができます。
https://addons.mozilla.org/ja/firefox/addon/styl-us/

編集手順

Chrome の画面キャプチャで説明しますが、 Firefox でも手順は同じです。

  1. Blogger 管理画面を開き、CSS を適用させたいブログ(仮にブログ1とします)に切り替えます。
  2. アドレスバーの右にある Stylus の Stylus アイコン アイコンをクリックしてメニューを開き、
    www.blogger.com/このURL をクリック。
  3. stylus メニュー

    Stylus の編集画面が開きます。

    stylus 編集画面
  4. コード欄に以下の CSS をコピペします。
  5. body [data-ogpc] {
    background: #e1e4f5;
    }

    画面全体を指定するセレクタ body [data-ogpc] は全てのブログで共通です。
    カラーコードはお好みで。コードの左側に出現する□をクリックするとカラーピッカーが使えます。

    カラーピッカー
  6. 最後にサイドバーの「保存」を押して設定完了です。背景色変わりましたか?
  7. 投稿一覧以外の画面(ページ一覧等)にも適用させたい場合は、一番下の「適用先」URL欄の右側の + をクリックして URL を追加してください。

    編集画面2

続いてブログ2の管理画面の色を変えるには、管理画面でブログ2に切り替えて、また手順2から行って下さい。
若しくは、「他のセクションを追加」で下に追加した編集画面にブログ1の編集内容をコピペして、URL のブログ ID とカラーコードを書き換えるだけでも構いません。

最後に手順の簡単な流れの動画キャプチャも貼っておきます。

以上、私達のようなうっかりさんのお役に立てれば幸いです。

2021/01/23 追記: レイアウト編集画面の背景変更

実は上記の方法では、レイアウト編集画面だけは全体の背景に適用できなかったのですが、BINUBALLさんにコメントで有用な方法を教えて頂きました。拡張機能は使わず、直接テーマのHTMLを弄ります。

変更したいブログのテーマ編集にて以下のコードを検索します。

</b:template-skin>

その上に以下のコードを追加します。

body#layout {
background: #e1e4f5;/*お好みのカラーコード*/
}
CSS

QooQ等、<b:template-skin> タグがないテーマの場合は以下のコードを追加します。
挿入位置は <body></body> 内ですが、]]></b:skin> 直下辺りが妥当だと思います。

コメントにて <head></head> 内に置いても問題ないとの情報を頂きました。

<b:template-skin><![CDATA[
body#layout {
background: #e1e4f5;/*お好みのカラーコード*/
}
]]></b:template-skin>
CSS2

2021/05/30 追記: テーマ(HTML)編集画面のカスタマイズ

テーマ(HTML)編集画面でブログを間違えることも多いだろうということで、ブログ毎に見分けやすくする方法を2つ紹介します。

適用先URL: https://www.blogger.com/blog/themes/edit/[Blog ID]

背景色の変更

.CodeMirror {
background: #f8f8ff;/*お好みのカラーコード*/
}
HTML編集画面

メニューバーにブログ名を表示

これが一番わかりやすくて最強のやり方かもw

#gb::before {
content: "ここにブログ名";
font-weight: bold;
font-size: 1.6em;
position: absolute;
left: calc(50% - 5em);
top: calc(50% - .5em);
}
メニューバーにブログ名