Bloggerで”CSSを追加”する方法。HELP（ヘルプ）を見てもわからない”CSSを追加”の場所の謎

　Bloggerの”CSSを追加”する方法がわからない方いませんか？

　わたしはわからず、こんな感じかなぁとHTMLを直接カスタマイズを行っていました。
　しかし、”CSSを追加”はテーマ設定でサポートされているので、指定箇所にコードをコピペするだけだったんです。

　ということで、今回は”CSSを追加”方法がわかったので、その体験を具体的にわかりやすくまとめて記事にしています。

Bloggerで”CSSを追加”する方法。HELPを見てもわからないCSS追加場所

　カスタマイズを紹介されているサイトをみると”CSS”を配布してくれている方々がたくさんいらっしゃり毎日関心するばかりです。

　また、丁寧に説明されていて、初心者のわたしでもカスタマイズができて、楽しい毎日です。

　しかし、ご紹介される記事では、この”CSSを追加”については、ほかのコードに比べて”CSSを追加”してくださいと、あっさりしていてBlogger初心者のわたしにはわからなかったのです。

　なぜだろうと、思いながらきっと誰でもわかるルールなんだろうと調査を続けました。

　まず、CSSは通常3通りの設定方法があります。

• headタグ内にStyleタグを設置し、bodyに反映する
• タグに直接設定する。
• 外部ファイルを使用する。

　ということで、１．項だろうと、テーマのカスタマイズから直接HTML編集で配布いただいたCSSを、適当に追加していました。

　しかし、丁寧で親切な記事なのに、ほかのコードのように”ここに記載せよ”という説明が”なぜ”なのいのだろうか不思議に思っていました。　

HELPを見てもわからないCSS追加場所

　その理由は、”CSSを追加”はテーマデザイナーが対応しているので”ここに記載せよ”などという必要が無かったからです。

　そうです、　テーマのカスタマイズで”CSSを追加”はサポートされているとヘルプに記載されているからです。

　しかし、
Bloggerのヘルプ通りの手順では、その”CSSを追加”にたどり着けない
のです。

　上図は、2021年3月29日現在の該当ヘルプのスクリーンショットです。　

　テーマのカスタマイズをクリックします。次のウインドウが開きます。

　左側に設定メニューが表示され、右側にはサイトイメージが表示されています。

　このウインドウには”上級者向け”という項目はありません。
　では、どこにあるのでしょうか？

Bloggerで”CSSを追加”する方法

　”CSSを追加”は詳細設定の意外な場所にあります。
　たしかに、詳細設定に”CSSを追加”があることは、おかしくはないですね。

　しかし、その場所が意外な場所で、どうにも直感的ではなく発見できなかったのです！

　その”CSSを追加”するは、詳細設定→文字色の右にある”▼”をクリックします。

　すると、ポップアップのメニューの一番に”CSSを追加”という項目があります。
　流石に、文字の色の横の▼はわからなかったです・・・

　”CSSを追加”の説明を続けます。
　

　”CSSを追加”をクリックすると上図のようなウインドウになります。
　この赤丸部分にCSSを追加します。

　とりあえず、
　<!--test-->
　として追加してみます。

　そして、上図のようにウインドウ画面左下のフロッピーの絵柄をクリックすると追加内容が反映されます。

　上図は、CSSを追加後にHTML編集で該当文字を検索した結果です。
　具体的にはQooQのテンプレートに”CSSを追加”したときの追加位置になります。

　QooQの場合は<b:skin>・・・</b:skin>の間で、最終行にCSSが追加されていく、といった動作をするようです。

まとめ

　Bloggerで”CSSを追加”する方法は以下の通りです。

• テーマ→
  詳細設定→
  　文字色の右にある”▼”→
  　　”CSSを追加する”をクリック→
  　　　CSSコードを記載→テーマを保存

　なぜ、ヘルプをみてもわからないかは、以下のように推測します。

• 2020年頃のBloggerのリニューアル時の変更点をヘルプに更新しきれていない

　この他にも、ありそうですので注意が必要です。

　これでスッキリしました。

編集後記

　こちらの記事でCSSを適当に記載していました。

　結果としては、<b:skin>・・・</b:skin>の間に記載しているので問題はなかったことになります。
　しかし、初心者はこの程度のことでも変な気を起こして遠回りしちゃいますね。

　そのおかげで、どこにコードが挿入されるか理解できたので良しとします。

　ほかにやり方、対処の仕方をご存知の方がいればコメントいてだけると助かります。

　また、おなじお悩みを抱えていた方もこの記事で解決できたらコメントいただけるとはげみになりますので、コメントをお願いします！