WordPress技術

WordPressの無料優秀テンプレート「Appointment」のテキストの色を変える方法

欲しいデザインが揃っている: 「Appointment」

私も利用しているWordPressの無料優秀テンプレート「Appointment」
トップページの良いデザインが定評があり、無料でもスライダー表示、お問い合わせボタン、サービス紹介のデザインの利用ができます。

ただ構築してみて気づいたのは、文字が見えづらい。
文字色が、灰色の#727272 になっているんですね。

文字は黒色の方が見やすいので、黒色に変更する方法をご紹介したいと思います。

※こちらの記事は、子テーマについて理解されている方を対象として書いています。

まず子テーマ名を変更

本体を編集するとアップデート時に変更箇所が消えてしまうので、「子テーマ」の方を編集します。

「Appointment」には、色別で用意されている子テーマがあります。
私の場合、「Appointment-blue」を利用しているので、その子テーマの名前を変更後利用していきます。

「Appointment-blue」→「Appointment-blue-child」に変更。

文字の色が設定されているCSSを探す

今回は、個別ページの本文が灰色になってしまうところを、黒色に修正します。

ブラウザは、chromeを利用します。(Firefoxでも同様のことができます)
灰色になっている文字を選択後、「右クリック>検証」を選択すると、画像のようなツールが起動します。
これは、開発者ツールと言って、chromeに標準で備わっているツールです。
Web制作にはなくてはならないツールです。大抵このツールを利用して、修正箇所を見つけます。

テクニックとしては、該当箇所選択後、「右クリック>検証」とすると、選択した場所のCSSをすぐに表示してくれるところです。
該当のCSSがすぐ表示されるので便利です。

こちらの場所で、color: #727272; で色設定されていることがわかりました。
そのCSSは、element.cssです。

子テーマの中に、element.css を作成

style.cssと同様に、子テーマの中にelement.css を作成して以下のCSSを記載しました。
場所は、テーマフォルダ内にある、cssフォルダの中ですね。
colorの指定だけでも変更できると思うのですが、今回は他の設定もすぐわかるように、全て記載しています。
ついでにpaddingも設定して、表示を整えています。

しかし、作成するだけでは子テーマのelement.cssを読み込んでくれません

HTMLを見ても、読み込んでいるのは親テーマのelement.cssのみです。

実は、functions.phpの方でも設定が必要だったのです。

functions.phpを修正

子テーマの、functions.php内、element.cssに関する読み込みを以下のように変更します。

get_template_directory_uri() → get_stylesheet_directory_uri() に変更しています。

get_template_directory_uri()と、get_stylesheet_directory_uri()の違いはこちらのサイトを参照させていただきました。
get_template_directory_uriとget_stylesheet_directory_uriの違いについて

要は、get_template_directory_uri()は、親テンプレートのパスなのに対し、get_stylesheet_directory_uri()は、有効化しているテーマ(子テーマ)のパスを読み込みます。

また、functions.phpにて記載されている、wp_enqueue_styleという関数は、要は読み込むCSSをキューに入れているのだと思います。
そのように記載することで、HTMLで自動的にCSS読み込みの記載がなされます。
関数リファレンス/wp enqueue style
関数リファレンス/get template directory uri

HTMLを確認しても、子テーマのelement.cssも無事読み込みができました。

文字色を変更完了!

黒色に変更することができました。
やっぱり見やすいですね。

まとめ

style.css以外のCSSも子テーマで編集する場合に参考にしてみてください。

HTMLで表示して、ちゃんと子テーマのCSSが読み込まれているか確認することも重要ですね!

  • このエントリーをはてなブックマークに追加