こんにちは、管理人のaonyanです^^
このブログで使っているWordPressのテーマは「賢威7のビューティー版」ですが、少し困ったことがありました。
⇒2020年03月より、別のテーマに変更しました。
初期状態では、見出し２と見出し３のバランスが悪い、見づらいという事です。
そこで、私がやりたかったことは次の3つ。
- 見出し２と見出し３の文字の大きさを変えたい
- 見出し２の上に余白を作りたい
- 見出し２の下線の太さと色を変えたい
とにかく、「読者にとって見やすくする」ことがカスタマイズの目的になります。
この記事では「賢威7・ビューティ版で、見出し２と見出し３を見やすくカスタマイズする方法」を解説します。
作業自体はコピー＆貼り付けで簡単にできますが、いくつか注意点があるのでチェックしてくださいね。
スポンサーリンク
賢威7・ビューティ版カスタマイズの注意点
賢威7はカスタマイズ方法が数多く公開されていますが、この「ビューティ版」はちょっと特殊です。
他のテンプレートと違い、「画像を多用している」ため、CSSコードを転用できません。
ですので、この記事で公開しているCSSコードは、ビューティ版だけで使用してください。
【見出し２・見出し３】カスタマイズ前後の比較
最初に、以下の2点について確認しておきましょう。
- ビューティ版の初期状態ではどのような見出しになっているか
- カスタマイズ後にどのような見出しに変わったか
カスタマイズ前
下の画像は、ビューティ版の見出し２と見出し3の「初期状態」になりますが、ちょっと区別が付きにくいですよね？
※上側が見出し２、下側が見出し３です。
区別がつきにくい最大の原因は、以下の３点です。
- 見出し２の上の余白が少ない
- 見出し２の下線の色が目立たない
- 見出し２の文字が見出し３の文字に比べて小さい
そこで、下のイメージ画像のように修正し、区別を付けやすくしてみます。
カスタマイズ後の完成イメージ
見出し２と見出し３をカスタマイズした後は、下のイメージ画像が完成形となります。
どうでしょう？見出し２の方が大きくはっきりして、見出し３との区別がつきやすくなったと思います。
それでは、このような見出しになるようにカスタマイズしていきましょう！
スポンサーリンク
カスタマイズの事前準備
さっそくカスタマイズ（＝CSSコードの編集）といきたいところですが、最初にテーマの編集画面を開き、「バックアップ」することから始めます。
一つずつ順番に説明していきますね。バックアップのやり方が分かる方は、『見出し２と見出し３のカスタマイズ方法』の項目まで飛ばしてください。
編集するテーマのCSSを開く
ダッシュボードに入り、「外観」→「テーマの編集」をクリックします。
画面右側から、「base.css」ファイルを開きます。
これでテーマ編集画面に入れました。
テーマの初期状態をバックアップしておく
CSSを変更する時は、最初に「バックアップ」しておきましょう。
いきなり画面が真っ白になったり、デザイン全体が大崩れする可能性がありますので、大切な作業です。
私は次のような手順で簡単にバックアップしています。
- base.cssの内容を「全て選択」する
- 手順1で選択した内容を「コピー」する
- 手順2でコピーした内容を「メモ帳」に「貼り付け」する
- 手順3で貼り付けたメモ帳のファイルを「保存」する
手順4のとき、”base-css-original.txt”のように、自分が分かりやすい名前で保存するとあとでラクですね^^
メモ帳以外のテキストエディタでも大丈夫ですが、「Word」や「Excel」などは余計な文字が追加されてしまうので使用しないでください。
詳しくは「あなたの特技は何ですか？」で使える「ショートカットキー」のススメを参考にしてくださいね。
見出し２と見出し３のカスタマイズ方法
バックアップが終わったら、カスタマイズに入りましょう！
CSSコードは、すべて「base.css」の最下部に追加していきます。
元々のCSSコードをいじってしまうと、修正する時に大変なのでオススメしません。
カスタマイズ用のCSSコードは、「コピー＆貼り付け」できるようにしました。
見出し２のカスタマイズ（文字サイズ・下線の色と太さ・上の余白変更）
下の画像のように、h2（見出し２）カスタマイズ用コードを「base.css」最下部に追加します。
↓こちらからコピペできます。
【解説】
「margin:」 は左から、”上” “左右” “下” となります。
「border-bottom:」は左から、”太さ” “線の種類” “色” となります。
「font-size:」は、”文字サイズ” となります。
それぞれの””に入る「数字」や「色(カラーコード)」は、お好みで微調整してください。
CSSコードの入力が終わったら、「ファイルを更新」をクリックすれば完成です。
見出し３のカスタマイズ（文字サイズの変更）
下の画像のように、h3（見出し３）カスタマイズ用コードを「base.css」最下部に追加します。
ちなみに、見出し３は初期状態が「1.3em」ですので、わざわざ変更しなくても大丈夫です。
私は「見出し４～６」のことも考えて、初期状態よりも少し大きい「1.4em」としました。
↓こちらからコピペできます。
見出し２と同じく、数字は好みで調整してくださいね。
まとめ
最後に、【賢威7・ビューティ版】の見出し２・３をカスタマイズするポイントをまとめます。
- ビューティ版は特殊なため、他のテンプレートに転用しない
- 初期状態のバックアップを取っておく
- カスタマイズはあくまでも「読者にとっての見やすさ」を考える
ビューティ版は殆ど「完成された状態」のテンプレートとなってますので、カスタマイズはほどほどにしておき、記事執筆に専念しましょう！
