【ブログカスタマイズ】BloggerでCSSを編集してデザインを変更する手順。2通りの方法を解説します。


ブログを始めたばかりのとき、まず苦労するのが、デザインを自分好みに変えること。

僕もせっかくCSSについて勉強したのに、どうやって使えばいいかわからず困りました。

今回はそんな人のために、BloggerでのCSSのいじり方について解説します。

やり方は次の2通り。

①HTML内にあるCSSを書き換える。
②テーマデザイナーでCSSを追加する。

どちらもマスターして、ブログを自由にカスタマイズできるようになりましょう!

※補足
Bloggerの場合、CSSはHTMLの内部に組み込まれています。
CSSファイルが別にあるわけではないので注意!

※追記(2021/10/15)
Bloggerがリニューアルしたので、新バージョンでのCSS編集方法も別記事で解説しました。
 ↓
【Blogger】ブログテーマのCSSコードを編集・追加する手順。2通りのやり方を紹介します。


①HTML内のCSSを書き換える

HTMLの編集画面を開く

まず、Bloggerのホーム画面から[テーマ]をクリック。

そこで、[HTMLの編集]を選択します。

Bloggerカスタマイズ_HTMLの編集その1

すると、このようにHTMLのコードが表示されます。

Bloggerカスタマイズ_HTMLの編集その2

「編集したいのはHTMLじゃなくて、CSSだよ!」と思うかもしれませんが、実はこの中にCSSが含まれています。

たとえば、このブログ(たなからぽんっ!)で使っているVaster2というテーマの場合はここ。

Bloggerカスタマイズ_HTMLの編集その3_Vaster2

親切にCSSとコメントがつけられていますね。(普通はちょっとわかりにくいです)

変更したいCSSを検索する


CSSの場所がわかれば、後は自分で好きなように書き換えるだけです。

しかし、コードが長いので、変更したい部分を見つけ出すのはなかなか大変。

そんなときは、検索機能を使うと便利です。

やり方は、まずHTMLコードの画面上をクリック。それから[Ctrl]+「F」を押します。

すると右上に検索ボックスが出現!

Bloggerカスタマイズ_HTMLの編集その4_CSS要素の検索

ここに、目的の要素名(imgやh1など)を打ち込めば、その場所にすぐ移動できます。

検索機能を上手く活用して、効率的にブログをカスタマイズしましょう!



②テーマデザイナーでCSSを追加する

テーマデザイナーとは?


テーマデザイナーは、CSSやHTMLに詳しくなくても、簡単にブログの見た目を変えられる機能です。

変更できるのは、背景画像や文字のフォント、リンクの色など。

HTMLをいじらなくていいので、ブログがおかしくなる心配がありません。

テーマデザイナーでは、コードを直接書き換えることはできませんが、CSSの追加は可能です。

※注意
外部からダウンロードしたテーマでは、テーマデザイナーが使えなかったり、機能の一部が制限されていたりする場合があります。 

テーマデザイナーでのCSS追加方法


まず、[テーマ]から[カスタマイズ]を選択します。

Bloggerカスタマイズ_CSSの追加その1

すると、「Bloggerテーマデザイナー」が開くので、[上級者向け]をクリック。

Bloggerカスタマイズ_CSSの追加その2_テーマデザイナー

一番下にある[CSSを追加]を選ぶと、コードを書き込む枠が出てきます。

Bloggerカスタマイズ_CSSの追加その3_テーマデザイナー_上級者向け

CSSは最後に書いたものが優先して適用されるので、テーマデザイナーでコードを追加すれば、HTMLをいじらなくても各要素のスタイルが変更できます。

とくに、外部から取り入れたブログパーツ(ヨメレバやカエレバなど)のCSSはここに貼りつけると便利です。


HTMLやCSSがわからない人へ

ブログをを始めたばかりで、HTMLやCSSがよくわからない人は、『スラスラわかるHTML&CSSのきほん』をやってみるとよいです。

この本では、架空のホームページを作成しながら、HTMLとCSSの基礎を学べます。
一度自分でコードを書いてみると、どこを変えたらどうなるのかが大体把握できるので、ネットで情報を集めるのがとてもスムーズになります。

もちろん、読むだけでなく、実際に手を動かさないと意味ないですけどね。

初心者向けの書籍はいろいろありますが、とりあえずサイトを構築しながら進めるタイプがおすすめです。


さいごに

Bloggerの標準テーマ(テンプレート)は、正直どれもデザインがいまいちです。

でも、そのぶん自由にHTMLやCSSを編集できるのはいいところ。

どんどんカスタマイズして、ブログを自分好みにアレンジしていきましょう!


関連記事:ブログ初心者必見!Kindle Unlimitedで読める有名ブロガーの本おすすめ3選。

関連記事:【お得】Amazonのオーディオブックサービス、Audible(オーディブル)の無料体験はやらなきゃ損! 本が1冊タダでもらえて、退会後もずっと聴けるよ。