ブログを始めたばかりのとき、まず苦労するのが、デザインを自分好みに変えること。
僕もせっかくCSSについて勉強したのに、どうやって使えばいいかわからず困りました。
今回はそんな人のために、BloggerでのCSSのいじり方について解説します。
やり方は次の2通り。
①HTML内にあるCSSを書き換える。
②テーマデザイナーでCSSを追加する。
どちらもマスターして、ブログを自由にカスタマイズできるようになりましょう！
※補足
Bloggerの場合、CSSはHTMLの内部に組み込まれています。
CSSファイルが別にあるわけではないので注意！
Bloggerがリニューアルしたので、新バージョンでのCSS編集方法も別記事で解説しました。
↓
【Blogger】ブログテーマのCSSコードを編集・追加する手順。2通りのやり方を紹介します。
そこで、［HTMLの編集］を選択します。
すると、このようにHTMLのコードが表示されます。
「編集したいのはHTMLじゃなくて、CSSだよ！」と思うかもしれませんが、実はこの中にCSSが含まれています。
たとえば、このブログ（たなからぽんっ！）で使っているVaster2というテーマの場合はここ。
親切にCSSとコメントがつけられていますね。（普通はちょっとわかりにくいです）
CSSの場所がわかれば、後は自分で好きなように書き換えるだけです。
しかし、コードが長いので、変更したい部分を見つけ出すのはなかなか大変。
そんなときは、検索機能を使うと便利です。
やり方は、まずHTMLコードの画面上をクリック。それから［Ctrl］＋「F」を押します。
すると右上に検索ボックスが出現！
ここに、目的の要素名（imgやh1など）を打ち込めば、その場所にすぐ移動できます。
検索機能を上手く活用して、効率的にブログをカスタマイズしましょう！
テーマデザイナーは、CSSやHTMLに詳しくなくても、簡単にブログの見た目を変えられる機能です。
変更できるのは、背景画像や文字のフォント、リンクの色など。
HTMLをいじらなくていいので、ブログがおかしくなる心配がありません。
テーマデザイナーでは、コードを直接書き換えることはできませんが、CSSの追加は可能です。
まず、［テーマ］から［カスタマイズ］を選択します。
すると、「Bloggerテーマデザイナー」が開くので、［上級者向け］をクリック。
一番下にある［CSSを追加］を選ぶと、コードを書き込む枠が出てきます。
CSSは最後に書いたものが優先して適用されるので、テーマデザイナーでコードを追加すれば、HTMLをいじらなくても各要素のスタイルが変更できます。
とくに、外部から取り入れたブログパーツ（ヨメレバやカエレバなど）のCSSはここに貼りつけると便利です。
この本では、架空のホームページを作成しながら、HTMLとCSSの基礎を学べます。
一度自分でコードを書いてみると、どこを変えたらどうなるのかが大体把握できるので、ネットで情報を集めるのがとてもスムーズになります。
もちろん、読むだけでなく、実際に手を動かさないと意味ないですけどね。
初心者向けの書籍はいろいろありますが、とりあえずサイトを構築しながら進めるタイプがおすすめです。
でも、そのぶん自由にHTMLやCSSを編集できるのはいいところ。
どんどんカスタマイズして、ブログを自分好みにアレンジしていきましょう！
関連記事：ブログ初心者必見！Kindle Unlimitedで読める有名ブロガーの本おすすめ3選。
関連記事：【お得】Amazonのオーディオブックサービス、Audible（オーディブル）の無料体験はやらなきゃ損! 本が1冊タダでもらえて、退会後もずっと聴けるよ。
①HTML内のCSSを書き換える
HTMLの編集画面を開く
まず、Bloggerのホーム画面から［テーマ］をクリック。そこで、［HTMLの編集］を選択します。
すると、このようにHTMLのコードが表示されます。
「編集したいのはHTMLじゃなくて、CSSだよ！」と思うかもしれませんが、実はこの中にCSSが含まれています。
たとえば、このブログ（たなからぽんっ！）で使っているVaster2というテーマの場合はここ。
親切にCSSとコメントがつけられていますね。（普通はちょっとわかりにくいです）
変更したいCSSを検索する
CSSの場所がわかれば、後は自分で好きなように書き換えるだけです。
しかし、コードが長いので、変更したい部分を見つけ出すのはなかなか大変。
そんなときは、検索機能を使うと便利です。
やり方は、まずHTMLコードの画面上をクリック。それから［Ctrl］＋「F」を押します。
すると右上に検索ボックスが出現！
ここに、目的の要素名（imgやh1など）を打ち込めば、その場所にすぐ移動できます。
検索機能を上手く活用して、効率的にブログをカスタマイズしましょう！
②テーマデザイナーでCSSを追加する
テーマデザイナーとは？
テーマデザイナーは、CSSやHTMLに詳しくなくても、簡単にブログの見た目を変えられる機能です。
変更できるのは、背景画像や文字のフォント、リンクの色など。
HTMLをいじらなくていいので、ブログがおかしくなる心配がありません。
テーマデザイナーでは、コードを直接書き換えることはできませんが、CSSの追加は可能です。
※注意
外部からダウンロードしたテーマでは、テーマデザイナーが使えなかったり、機能の一部が制限されていたりする場合があります。
テーマデザイナーでのCSS追加方法
まず、［テーマ］から［カスタマイズ］を選択します。
すると、「Bloggerテーマデザイナー」が開くので、［上級者向け］をクリック。
一番下にある［CSSを追加］を選ぶと、コードを書き込む枠が出てきます。
CSSは最後に書いたものが優先して適用されるので、テーマデザイナーでコードを追加すれば、HTMLをいじらなくても各要素のスタイルが変更できます。
とくに、外部から取り入れたブログパーツ（ヨメレバやカエレバなど）のCSSはここに貼りつけると便利です。
HTMLやCSSがわからない人へ
ブログをを始めたばかりで、HTMLやCSSがよくわからない人は、『スラスラわかるHTML&CSSのきほん』をやってみるとよいです。この本では、架空のホームページを作成しながら、HTMLとCSSの基礎を学べます。
もちろん、読むだけでなく、実際に手を動かさないと意味ないですけどね。
初心者向けの書籍はいろいろありますが、とりあえずサイトを構築しながら進めるタイプがおすすめです。
さいごに
Bloggerの標準テーマ（テンプレート）は、正直どれもデザインがいまいちです。でも、そのぶん自由にHTMLやCSSを編集できるのはいいところ。
どんどんカスタマイズして、ブログを自分好みにアレンジしていきましょう！
関連記事：ブログ初心者必見！Kindle Unlimitedで読める有名ブロガーの本おすすめ3選。
関連記事：【お得】Amazonのオーディオブックサービス、Audible（オーディブル）の無料体験はやらなきゃ損! 本が1冊タダでもらえて、退会後もずっと聴けるよ。
