Bloggerのカスタマイズ Ⅰ　CSSの追加にたどりつくまでと編集方法

 まったくもって、自分だけのための備忘録

記事一覧などを表示したいと思いBloggerの表示を変えたくなりました。

まず、”Blogger”、”カスタマイズ”のキーワードでgoogle検索すると、テンプレートを導入するように書いてあります。そこで、最初に目にとまった”QooQ”を導入します。

デフォルト画面では緑ベースなので、これを触ってみたいと思います。

BloggerのカスタマイズにはCSSを編集するらしいのですが、そこにたどり着くまでが一苦労だったので、まとめておきます。

CSSを追加する方法（CSS追加の探し方）

１．①「テーマ」、②右の▽ではなく「カスタマイズ」をクリック

２．③「詳細設定」をクリック

３．④文字色の隣の「▽マーク」をクリック（ここに隠れている）

４．やっと、⑤「CSS追加」が出てくる

5．CSSを編集するための工夫

あとでCSSを編集するとき、CSSを追加した場所を探すために一工夫しておきます。”Blogger で CSS を追加する方法”を踏襲いたしました。

一行目に次の一文を書いてから、追加したいCSSを書きます。

<!-- CSSを追加カスタマイズしてもよい領域 -->

注記　"<!--" と "-->"で挟むとHTMLではコメントアウトになります。

6．CSSの編集枠に記述したら、右下の保存（フロッピー）をクリック

追加したCSSを編集する方法

追加したCSSはHTMLの一部になっています。そこで、HTML編集で追加したCSSを探します。

1．「テーマ」「カスタマイズ横の▽」「HTMLを編集」とクリックします。

2．HTMLのどこかにカーソルを置き、「CTRL+F」として検索欄を表示させます。

検索欄に先ほどCSSの追加のとき書き込んだキーワード（CSSを追加）を入れて、検索（エンターを押す）します。

キーワードがない場合は、追加したCSSの最後が”</b:skin>”なので、それを検索します。

3．CSSを編集したら、右上のフロッピーアイコンを押して保存します。

帯カラーの変更

1．目的の画面の帯カラーを変えるのは、CSSを書かなくてもできました。

「詳細設定」の下に「CSS追加」と同列で「ブランドカラー」があります。

それらしい項目をクリックすると、右に表示されている下面がリアルタイムに変わります。

ブランドカラー

ブランドサブカラー、ブランドサブカラーの文字の色

2．最後に右下にあるフロッピーアイコンをクリックして保存します。これを忘れると変更が反映されません。

オリジナルのBlogger画面に比べて、好みの方向へカスタマイズできました。これをベースに触ってみようと思います。