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



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

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

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

やり方は次の2通り。

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

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

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

関連記事:【ブログカスタマイズ】CSSはHTMLと別のファイルじゃなくていい!CSSの書き方は3パターンある。


①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はここに貼りつけると便利です。


さいごに

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

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

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


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

関連記事:【比較】AmazonのAudible(オーディブル)とKindle Unlimitedはどっちがいい?それぞれのメリット・デメリットまとめ。