WordPress【twenty seventeen】記事見出し(H2・H3)のデザインを変更する方法

見出し

スポンサーリンク

Pocket

【twenty seventeen】テーマは「見出し」のデザインが全くされていない。フォントサイズが変更されている程度で、記事を読む際に黒文字ばかりでアクセントがなく、ちょっと記事を見ると部分がわかりずらい。その為、読む側からすると読みずらい文章となってしまう。そこで筆者は「見出し2」「見出し3」を良く使用する為に、この部分に関して変更を加えた。ちなみにSEO(検索エンジン最適化)の事を考慮すると「見出し1」については記事の中に埋め込むことはしない。これは「記事タイトル」「見出し1」になるようになっている為、「見出し2」以降を記事に使用している。

スポンサーリンク

どうやって「見出し」のデザインを変更するのか?

これは勿論であるが、子テーマのスタイルシート(style.css)に追加を加える。このようにデザイン変更をしたいが為に子テーマを作ったようなものである。小テーマの作り方がわからない方は「【twenty seventeen】の子テーマを作成する方法」をご参照ください。それでは実際にどこを変更したかを説明します。

記事中のh2およびh3の枠のボーダーラインにアクセントをつける

編集方法は[外観]-[テーマの編集]よりスタイルシートを選択し編集してください。子テーマのスタイルシート(style.css)に次の内容を追記してください。「#」の部分は配色になりますので、お好みの配色コードに変更してください。

/* 見出しh2 */
.entry-content h2 {
border-left: 5px solid #1F5E73;
border-bottom: 1px solid #1F5E73;
padding: 0 0 0 15px ;
line-height: 2;
font-size: 18px;
background-color: #fff;}

 

/* 見出しh3 */
.entry-content h3 {
border-left: 5px solid #1F5E73;
padding: 0 0 0 15px ;
line-height: 2;
font-size: 18px;
background-color: #fff;}

たったこれだけです。

これを追記したら[ファイルを更新]を押下して終了です。記事を見て反映されているかをご確認ください。更新されていればOKです。もし、更新されない場合は「【twenty seventeen】子テーマのスタイルシート(CSS)が反映されない」をご参照ください。

まとめ

なんか見出しのデザインを変更しただけで、何となくカッコよくなった感じがしませんか?でも、まだまだ細かい点が目立つのでもっと変更していきたいです。

【A8.netに登録しよう!】
◇ 広告主数・アフィリエイトサービス数日本最大級☆
◇ 登録はもちろん無料、審査なしのアフィリエイトサービス☆
◇ 使いやすいサイトNO.1
アフィリエイトならA8.net

Pocket

スポンサーリンク

コメントを残す

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