【賢威7ビューティ版】見出し2・3を見やすくカスタマイズする方法

[cc id=336]

 

こんにちは、管理人のaonyanです^^

 

このブログで使っているWordPressのテーマは「賢威7のビューティー版」ですが、少し困ったことがありました。

⇒2020年03月より、別のテーマに変更しました。

 

初期状態では、見出し2と見出し3のバランスが悪い、見づらいという事です。

 

そこで、私がやりたかったことは次の3つ。

  1. 見出し2と見出し3の文字の大きさを変えたい
  2. 見出し2の上に余白を作りたい
  3. 見出し2の下線の太さと色を変えたい

 

とにかく、「読者にとって見やすくする」ことがカスタマイズの目的になります。

この記事では「賢威7・ビューティ版で、見出し2と見出し3を見やすくカスタマイズする方法」を解説します。

作業自体はコピー&貼り付けで簡単にできますが、いくつか注意点があるのでチェックしてくださいね。

 

POINT 当記事は2018年8月現在の情報であり、最新版では内容が変わる可能性がありますのでご注意ください。
 

スポンサーリンク

 

賢威7・ビューティ版カスタマイズの注意点

賢威7はカスタマイズ方法が数多く公開されていますが、この「ビューティ版」はちょっと特殊です。

他のテンプレートと違い、「画像を多用している」ため、CSSコードを転用できません。

 

ですので、この記事で公開しているCSSコードは、ビューティ版だけで使用してください。

【見出し2・見出し3】カスタマイズ前後の比較

最初に、以下の2点について確認しておきましょう。

  1. ビューティ版の初期状態ではどのような見出しになっているか
  2. カスタマイズ後にどのような見出しに変わったか

カスタマイズ前

下の画像は、ビューティ版の見出し2と見出し3の「初期状態」になりますが、ちょっと区別が付きにくいですよね?


※上側が見出し2、下側が見出し3です。

 

区別がつきにくい最大の原因は、以下の3点です。

  1. 見出し2の上の余白が少ない
  2. 見出し2の下線の色が目立たない
  3. 見出し2の文字が見出し3の文字に比べて小さい

 

そこで、下のイメージ画像のように修正し、区別を付けやすくしてみます。

 

カスタマイズ後の完成イメージ

見出し2と見出し3をカスタマイズした後は、下のイメージ画像が完成形となります。

どうでしょう?見出し2の方が大きくはっきりして、見出し3との区別がつきやすくなったと思います。

それでは、このような見出しになるようにカスタマイズしていきましょう!

スポンサーリンク

カスタマイズの事前準備

さっそくカスタマイズ(=CSSコードの編集)といきたいところですが、最初にテーマの編集画面を開き、「バックアップ」することから始めます。

一つずつ順番に説明していきますね。バックアップのやり方が分かる方は、『見出し2と見出し3のカスタマイズ方法』の項目まで飛ばしてください。

編集するテーマのCSSを開く

ダッシュボードに入り、「外観」→「テーマの編集」をクリックします。

画面右側から、「base.css」ファイルを開きます。

 

これでテーマ編集画面に入れました。

テーマの初期状態をバックアップしておく

CSSを変更する時は、最初に「バックアップ」しておきましょう。
いきなり画面が真っ白になったり、デザイン全体が大崩れする可能性がありますので、大切な作業です。

私は次のような手順で簡単にバックアップしています。

  1. base.cssの内容を「全て選択」する
  2. 手順1で選択した内容を「コピー」する
  3. 手順2でコピーした内容を「メモ帳」に「貼り付け」する
  4. 手順3で貼り付けたメモ帳のファイルを「保存」する

手順4のとき、”base-css-original.txt”のように、自分が分かりやすい名前で保存するとあとでラクですね^^
メモ帳以外のテキストエディタでも大丈夫ですが、「Word」や「Excel」などは余計な文字が追加されてしまうので使用しないでください。

 

参考記事 「文字の全選択」は、キーボードの『Ctrl+A』というショートカットキーを使えば一気にできます。
詳しくは「あなたの特技は何ですか?」で使える「ショートカットキー」のススメを参考にしてくださいね。

見出し2と見出し3のカスタマイズ方法

バックアップが終わったら、カスタマイズに入りましょう!

CSSコードは、すべて「base.css」の最下部に追加していきます。
元々のCSSコードをいじってしまうと、修正する時に大変なのでオススメしません。

カスタマイズ用のCSSコードは、「コピー&貼り付け」できるようにしました。

見出し2のカスタマイズ(文字サイズ・下線の色と太さ・上の余白変更)

下の画像のように、h2(見出し2)カスタマイズ用コードを「base.css」最下部に追加します。

↓こちらからコピペできます。

【解説】

「margin:」 は左から、”上” “左右” “下” となります。
「border-bottom:」は左から、”太さ” “線の種類” “色” となります。
「font-size:」は、”文字サイズ” となります。

それぞれの””に入る「数字」や「色(カラーコード)」は、お好みで微調整してください。

CSSコードの入力が終わったら、「ファイルを更新」をクリックすれば完成です。

 

参考記事 ファイルを更新しても、変更後のデザインが反映されないことがあります。そんなときは、キャッシュを消去してみてください。※Google Chrome使用者向け

見出し3のカスタマイズ(文字サイズの変更)

下の画像のように、h3(見出し3)カスタマイズ用コードを「base.css」最下部に追加します。

ちなみに、見出し3は初期状態が「1.3em」ですので、わざわざ変更しなくても大丈夫です。
私は「見出し4~6」のことも考えて、初期状態よりも少し大きい「1.4em」としました。

↓こちらからコピペできます。

見出し2と同じく、数字は好みで調整してくださいね。

まとめ

最後に、【賢威7・ビューティ版】の見出し2・3をカスタマイズするポイントをまとめます。

  • ビューティ版は特殊なため、他のテンプレートに転用しない
  • 初期状態のバックアップを取っておく
  • カスタマイズはあくまでも「読者にとっての見やすさ」を考える

 

ビューティ版は殆ど「完成された状態」のテンプレートとなってますので、カスタマイズはほどほどにしておき、記事執筆に専念しましょう!

 

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください