アフィンガーでの見出しの変更方法まとめ

WordPressのデザイン変更はテーマの構造に合わせたCSS編集が必要

前回でも見出しの変更方法を記載したが、ここでもう一度全体を通しておさらいしたい。

サイト作成においての最終的な目標は、WordPressのテーマを１から作成できるようになることだ。

それでもアフィンガーを購入したのは、とりあえず今はコンテンツ作成の経験も積みたいこともあり、WordPressのテーマの一つのお手本として、評判が高いものを利用することにしたからだ。

ただ、いざ記事を作成する段階になるとデザインを自分好みに変更したくなってしまって記事が進まなくなってしまった。

まず一番気になってしまったのが見出しデザインだ。

でも、どうやって見出しデザインを変更するのか。

WordPressで作成するWEBサイトのデザインは、テーマごとにCSSが設定されているので、CSSを変更するにはテーマの構造を把握しておかなければならず大変だ。

しかしアフィンガーの公式サイトに、ある程度のデザイン変更の方法が載っていたので参考にしつつデザイン変更の方法を模索した。

テーマの構造を知らなくてもWordPressのデザインを変更する方法

アフィンガーでの見出しデザインの変更方法を模索した結果、とりあえずデザインを一部分だけ上書きする方法があることにたどり着いた。

大まかな流れとしては、ブラウザの機能をつかって自分が変更したい部分のデザインが、CSSファイルのどの部分の反映結果なのかを特定し、元のCSSファイルから該当部分をとりあえずコピーして「追加CSS」へ貼り付けし、そのうえで値を変更してみて希望どおりのデザインになるかをプレビューする、というもの。

この方法で、とりあえずはテーマの構造を知らなくても対応ができる。

自分への備忘録、または同じニーズを持つ人がいたら参考になればということで、以下にその手順を掲載していく。

見出しデザイン変更の手順

変更したい見出し部分のCSSをブラウザの開発ツールで確認する

変更したい見出しがあるページをブラウザで開き、画面のどこかで右クリックし、「要素を調査」を選択すると「インスペクタ」のウィンドウが画面下部に現れる。（Firefoxの場合）

「インスペクタ」の左上の選択マークをクリックすると、画面上のアイテムを選択できる状態となるので、変更したい見出し部分を過不足なく選択する。

すると、右側の「ルール」欄にCSSの内容が表示される。

ここで調べたCSSは参照元のCSSファイルの何行目に記載されているものかが表示されている。

サイトのソースコードを表示すると、ヘッダー部分にCSSファイルへのリンクが確認できるので、そのURLをブラウザのURL欄に入れてアクセスするとCSSファイルが表示できる。

そこから該当するCSSをコピーして取り出す。

セレクタと変更したいプロパティだけを取り出し、値を変更した上で、メディアクエリ内に貼り付けて、追加CSSでプレビューする。

コピーしたCSSを、WordPressの「追加CSS」へ貼り付ける。

その際は、必要なプロパティだけでよい。

なお、メディアクエリが以下のように設定されているので、あらかじめその枠組みを「追加CSS」へ準備しておき、適切な場所を選んで貼り付ける。

316行目
/*--------------------------------
各フォント設定
---------------------------------*/

4063行目
/*media Queries スマートフォンとタブレットサイズ（959px以下）で適応したいCSS - スマホ・タブレット
---------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 959px)

4098行目
/*media Queries タブレットサイズ（600px～959px）のみで適応したいCSS -タブレットのみ
---------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 600px) and (max-width: 959px)

 

4233行目
/*media Queries タブレット（600px）以上で適応したいCSS -タブレット・PC
---------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 600px)

 

4292行目
/*--------------------------------
各フォント設定
---------------------------------*/

4756行目
/*media Queries PCサイズ（960px）以上で適応したいCSS - PCのみ
---------------------------------------------------------------------------------------------------*/
@media print, screen and (min-width: 960px)

 

5000行目
/*--------------------------------
各フォント設定
---------------------------------*/

 

5556行目
/*media Queries スマートフォンのみ（600px）以下
---------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 599px)

希望どおりになったら、コメントを書き加えて完成。そして追加CSS全体を子テーマに上書き貼り付けする。

「追加CSS」は入力と同時に結果がプレビューされるのが便利なところだ。

希望どおりのデザインになった事を確認したうえで、コメントを書き加えて保存する。

最終的には「追加CSS」の内容はすべて子テーマに移しておくとよい。