BloggerでCSSを追加してフォントを調整する基本戦略

これまでBloggerのテーマEmporioを使って2つサイトを作った。

1つは最近作った英語学習ブログで、

おとなになってからの英語学習（eigobootcamp.blogspot.com/）

もう1つは2年ほど前に作ったカンボジア情報のブログ「GET A LIFE in Khmer!」だ。

2つ作る中でEmporioのフォント関係の調整のやり方につき、基本的なところがだいぶわかってきた。

ので、今回はCSSでEmporioのフォント調整をする際の

基本的なアプローチ
実際のCSS適用例

等につきまとめます。

慣れたひとには常識かもですが、わたくしと同じ初心者にはBloggerをカスタマイズするプロセスがわかって役に立つかも(・∀・)

テーマデザイナーを使いこなす

BloggerのCSSをいじるには、基本的にテーマデザイナー（旧テンプレートデザイナー）を使えばよい。

テーマデザイナーはここ

テーマデザイナーはBloggerの管理画面からアクセスできる。

「テーマ」で「カスタマイズ」ボタンを押してテーマデザイナーを開き、

「上級者向け＞CSS追加」で独自のCSSを設定できる。

「テーマ」から「HTML」ボタンでテーマのHTMLを直接いじってもいいのだが、テーマデザイナーからやればテーマの他の部分を不用意に壊したりせずにすむ。

バックアップを忘れずに

なおテーマデザイナーでやってることは結局テーマのHTMLの、CSS部分の改変である。

なので、使う前にはテーマのバックアップを取っておいたほうがいい。

バックアップは「テーマ」画面の右上、「バックアップ／復元」ボタンからできる。

この一手間をかけずに地獄に落ちることは本当によくあるので、めんどくさがらずにやりましょう。

CSSの影響範囲を見極める

ブログのフォントを調整するとき、気をつけなければならないのは

CSSの影響範囲

である。

油断するとCSSの設定が思わぬところに影響して表示が崩れたりする。

クラスを修正するか追加するか

ページの何らかの要素（例えば見出し）のデザインを変えるには、

既存クラスを修正して、すべての見出しのデザインを一斉に変える
新しくクラスを作って個別に要素に適用する

という2つの方法がありうる。

デザイン変更、2つの戦略

しかし

1.の方法では思わぬところのデザインが変わってしまう可能性があり、
といって2.だと個別にクラスを設定せねばならずかなりの手間となる

というジレンマがある。

よって

できる限り1.の方向で、しかし適用範囲を見極め、限定したCSS適用を試みる。
そしてどうしてもダメなら2.で個別対応。

というのが基本戦略になるだろう。

EmporioのCSSカスタマイズ例

自分の場合、Emporioで小見出しのデザインを変更しようとして上記のジレンマにぶち当たった。

Bloggerの記事の小見出しはh3タグで実装されている。

厄介なのはEmporioの場合、各ガジェットのタイトルなどにもh3タグが使われているということ。

よってh3のデザインを変更すると本文はもちろん、ガジェットまで全部影響を受けてしまう。

ここではこの影響範囲を限定する上記の2つの戦略の適用例を示す。

個別にクラスを付ける

まず簡単な方法としては2.の方法がある。

要するに新たにクラス↓を作って、

/*小見出しのデザイン*/
.クラス名 {
padding: 0.25em 0.5em;/*上下左右の余白*/
color: #494949;/*文字色*/
background: transparent;/*背景透明に*/
border-left: solid 5px #7db4e6;/*左線*/
}

そして本文中の小見出し全部にそれを適用↓する。

<h3 class="クラス名">

クラス名は何かわかりやすい英語にしておけばよい。

これは1番確実だが、全小見出しにクラスを適用するのはかなりの手間だ。
実際すぐイヤになった(^_^;)

簡単だがちょっと安易すぎる方法だと言えるだろう。

本文内に限定するCSS

なのでCSSを限定的に適用されるよう記述するのがスマートでよい。

記事のソースを見るとわかるが、Emporioの場合は記事コンテンツが「entry-content」で囲われている。

よってCSSに「.entry-content」を付ければ、記事本文の中のh3タグだけにデザインが限定して適用される。

/*小見出しのデザイン*/
.entry-content h3 {
padding: 0.25em 0.5em;/*上下左右の余白*/
color: #494949;/*文字色*/
background: transparent;/*背景透明に*/
border-left: solid 5px #7db4e6;/*左線*/
margin-bottom: 12px;
}

いわゆるセレクタというやつだが、こういう基礎知識は結局必要だなあと思う。

✓CSSの基礎知識を身につけよう

ブログをカスタマイズする上で、基本的なことは一度こういうの↓で体系的に勉強してもいいかもしれません :D

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

スラスラわかるHTML＆CSSのきほんサンプル実習 [ 狩野祐東 ]
価格：2052円（税込、送料無料) (2017/5/27時点)

何かわからなくなったときのハンドブックにもなります。

Webでぐぐるのとセットで使うと効果が高いと思うので、1冊とりあえず持っときましょう＼(^o^)／

本文の小見出しだけにデザイン適用

というわけで .entry-content h3 で設定したおかげで、今は記事作成時に小見出しを設定するだけで勝手にそのデザインが適用される。

この記事↓の小見出しの横に縦棒が付いてるの分かる？

>> ケップの離島、ラビットアイランドに行ってみた

これが先に書いたCSSで設定したデザインである。

本文以外の<h3>のところ（サイドバーにある各ガジェットのタイトルなど）には横棒が出てない、というのがポイントだ。

参考にしたサイト

最後にEmporioのフォント調整につき参考にした記事を紹介する。

CSSの影響範囲について：

>> 【CSS】見出しやリストのカスタマイズ時にトップページにまで反映されてしまう時の対処法 | SANGOカスタマイズガイド

小見出しのデザイン変更の参考にした記事：

>> CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選

クラスってそもそもなんだ？！とかフォントサイズなど基本知識について：

>> Htmlのタグでclassの意味がわかりません。class="クラス名"す... - Yahoo!知恵袋

>> あなたはどれにする？CSSの文字サイズ指定「px、em、%」 | デザインメモ

またカスタマイズの基本的な進め方の参考に（本サイトの記事です）：

>> 超初心者・俺氏のための、BloggerでCSSを修正する手順

有用な記事を公開してくださった方々に感謝します m(_ _)m

実際に自分が設定しているCSS定義はこちら
Emporioサイトでフォント調整のため設定した、実際のCSS定義を公開する

このブログを検索

Blogger/Emporioカスタマイズ日記