WordPressの細かなデザイン変更に使えるCSSテクニックを７つ紹介

WordPressでサイト運用をスタートして、効果検証などを行った時に、「クリックにつながるタイトル文字をもう少し大きくしてみたい」、「トップ画像を外してわかりやすくしたい」「重要コンテンツにつながる導線を変更したい」などデザインの一部分を変更してもう一度検証してみたいと考えたことはないでしょうか。

でも、テーマファイルを直接編集するのは怖いし、追加CSSもいまいちわからないとなれば悩んでいるだけで時間が過ぎてしまいます。

今回は少しずつCSSやHTMLのタグに慣れるためにも、WordPressの特定の部分のデザインを変更するテクニックや、HTMLやCSS、テーマのテンプレートファイルについてご説明します。自分でやらなくても、知識があればどれぐらいのスピードで変更できるのかもわかりますし、デザインを簡単に変更できるのか、難しいのかなのかなどもわかるようになるので依頼もスムーズです。

特定部分のデザインを変更するのに必要なこと

1.classやidを調べる

2.タグの入れ子を把握する

3.追加CSSに記述する

4.文章、単語ごとにCSSを記述する

5.!importantを使う

6.テーマのCSSを読み解く

7.テーマファイルを直接編集する

WordPressではHTMLのタグやCSSのclassやid、タグの入れ子を知ることで特定部分のCSSのみを変更しやすくなります。基本的には追加CSSに記述するようにして、記事やコンテンツ本文はspanなどのタグを割り振り、CSSを設定することで対応するのが簡単です。

!importantの利用については意見が分かれる部分でもありますが、サイト全体のデザインに影響すること、本当の特定の1か所であれば有用と判断し、あえてテクニックとして加えてあります。また、テーマのCSSを読み解く、直接テーマファイルを編集する時は稼働中のWordPressではなく、ローカルのテスト環境で作業してから、実装することをおすすめします。

既に稼働しているWordPressに影響が出ない状態、もしくはバックアップを取り、すぐにWordPressを再構築できる状態で試すことを忘れないようにしてください。

今回はデフォルトでインストールされているテーマ「Twenty Seventeen」、ブラウザはGoogleChromeを利用して説明します。

1.classやidを調べる

GoogleChromeでWordPressのトップページを開き、適当なところで右クリックして、ページのソースを表示をクリックしましょう。

ページのソースを表示するとHTMLのソースが別タブで表示されますね。しかし、HTMLがわからない人ですと、どのタグがどこを指しているのか意味不明で悩む結果となりがちです。

そこで、変更したい箇所をマウスで選択して検証をしてみます。

タイトル部分のCSSがタグの入れ子のclassやidのセレクタが右下に表示されるので、試しにクリックして反転し、コピーしてみましょう。

body.has-header-image .site-title, body.has-header-video .site-title, body.has-header-image .site-title a, body.has-header-video .site-title a

上記がWordPressのサイトタイトル部分を特定するCSSのclassやidのセレクタであり、追記CSSに記述する際に役立ちます。また、検証画面では仮想的にプロパティを割り当ててリアルタイム表示させることもできます。

フォントサイズを4emにしたところ、すぐにサイトタイトルが巨大化しました。ちょっとしたCSSを試したい時はブラウザの検証機能で十分な場合もありますので、WordPressの追加CSSやテーマテンプレートファイルを直接編集する前に利用してみてください。

2.タグの入れ子を把握する

検証ではタグの構造がわかりやすく表示されます。右クリックからのページのソースを表示でも見れないことはないですが、どの部分かを探すのに手間取ってしまうこともありますから、HTMLソースが読めるようになるまでは、こうして局所的にタグの構造を見て、少しずつ理解を増やしましょう。

画面右下のCSSと同じように、編集したい部分を右クリックして「Edit as HTML」を選ぶことで、HTMLタグも編集することができます。

試しにサイトタイトルのWordPresを「TOP」に編集してみると、すぐにTOPと表示されました。検証によって変更したHTMLやCSSはWordPress本体には何の影響もなく、リロードすると元に戻りますので、文字列やCSSを編集してみたり、タグの構造を見ながら、どのタグがどの部分なのか、マウスカーソルを当ててチェックしてみましょう。

WordPressのHTMLタグの構造を理解し、CSSの作りなどが見えてくるようになれば、デザインをする時にも非常に役立ちます。

HTMやCSSは決して難しいものではなく、可読性が高いソースなので、普段見ているサイトやホームページ、サービスがあれば、積極的にソースをチェックして、どのような仕組みになっているか勉強してみてください。

3.追加CSSに記述する

最初に検証で選んだサイトタイトル部分のセレクタをコピーして、後ろに{font-size:3em;color:red;}とフォントサイズと色を指定するプロパティを記述してみました。サイトタイトル部分のフォントが赤く、大きくなっているのがわかります。

body.has-header-image .site-title, body.has-header-video .site-title, body.has-header-image .site-title a, body.has-header-video .site-title a{font-size:3em;color:red;}

上記をそのまま追加CSSにコピペしてもサイトタイトル部分のCSSを変更できますが、不要な部分もありますので、追加CSSを記述する時にセレクタを削除して試してみましょう。

ある程度知識が蓄積されてくれば、HTMLの構造やCSSのセレクタ、プロパティなどをきちんと理解して記述できるようになります。WordPressで特定部分のデザインを変更したい時に、検証でコピーしたセレクタをコピペして使うのはHTMLやCSSに慣れない最初の頃だけにしましょう。

理由としては追加CSSに記述した内容はソースを見ればすぐにわかるので、HTMLやCSSを理解している人が見た時に「このサービス・サイトを作ってる人はHTMLやCSSを理解していなさそうだ」と思われたり「サイトデザインが適当だから、サービスの内容や対応も適当だろう」と思われてしまう可能性があるからです。

あくまでも応急処置的な対応のためや、HTMLやCSSを理解するため、しっかりとしたサイトやサービスを作る勉強をするためのテクニックと考えてください。

4.文章、単語ごとにCSSを記述する

もし、記事や固定ページの文章や単語ごとにデザインを変更したい場合はspanタグにclassを付けるのがおすすめです。

例えば <span class="font_red">文字列</span>　というタグで赤文字にしたい部分を括って、追加CSS部分でfont_redに.font_red{color:red;}を記述する形にすれば、局所的に文字列に対する色やサイズの変更が容易になります。

注意点としては　<span style="coler:red;">文字列</span>　といったような形で、タグに直接書き込まないことです。タグに直接記述するのはとても簡単ではありますが、タグとCSSは分離しておくことで、HTMLの構造が見やすくなること、CSSの記述が一か所で済むことなどの利点があるからです。

また、プラグインのTinyMCE Advancedを導入することで簡単なタグ付けが追加されるので便利です。

自分でclassを設定するならAddQuicktagを導入するのがおすすめです。

WordPressのバージョンアップによって新しくなったエディタでは表示されない可能性もありますので、上記2つのプラグインを利用したい場合は、旧エディタに戻すプラグインClassic Editorを導入しましょう。

5.!importantを使う

通常のCSSではclassやid、タグなどの具体的な記述があればあるほど優先順位が上がり、同時に後から記述されたCSSが優先される仕組みになっています。!importantをプロパティに付記することでCSSの優先順位が上がり、デザインに反映されやすくなります。

h1{font-size:3em;}と記述しただけではフォントサイズが反映されない場合でもh1{font-size:3em !important;}と記述することで反映されやすくなるんですね。

CSSを学んでいる段階ですと、テーマのCSSを見ても理解できず、本来のセレクタのプロパティを変更できずに困ります。

簡単なデザイン変更をしたい時に検証でclassやidを調べて、追加CSSに記述して使うのが便利です。

ただし、classやidを指定せず、タグをそのままセレクタにする場合は注意が必要しましょう。なぜなら!importantによって優先順位が上がることによって、意図しない場所でもCSSが反映されてしまうからです。

例えば追加CSSにh2{font-size:3em !important;}と記述して、任意のタイトル部分の文字を大きくしたつもりが、別の個所のh2もフォントサイズが大きくなってしまうんですね。

!importantは非常に便利ですが、慣れない内は多用し過ぎないように注意しましょう。

6.テーマのCSSを読み解く

ある程度、CSSの記述に慣れてきて理解が進んだら、外観→テーマの編集からテーマのCSSを見てみましょう。直接見る時に間違って編集するのが怖ければ、ブラウザでトップページを開いてブラウザの検証ツールを利用すれば、タグの入れ子構造と一緒にCSSのセレクタやプロパティが見れるので非常におすすめです。

テーマ「Twenty Seventeen」のCSSを外観→テーマの編集から見てみると、html、bodyの順にプロパティが設定されており、h1のフォントサイズやマージンが設定されているのがわかります。

タグやプロパティの意味を調べながら、テーマのCSSを読み解くことで自分が使っているテーマのデザインの基礎、根幹となる部分が理解できるようになるのでおすすめです。

また、最初の段階ではCSS全てを把握し、理解しなければならないということではないので、自分が必要とする部分のCSSの読み方や設定されているプロパティについて、自分で調べて理解できる手順だと考えるようにしてください。

7.テーマファイルを直接編集する

テーマごとのCSSの読み解き方が少しずつわかってきたら、今度は直接テーマファイルを編集してみましょう。外観→テーマの編集でstyle.cssを開いたら、まずはバックアップのためにコピペでメモ帳などで保存しておきます。保存したものは編集しないようにして、テーマのCSSを編集して不具合が起きた時に、すぐにコピペで元に戻せるようにしておきましょう。

追加CSSではなくテーマファイルを直接編集するメリットはサイト全体のデザインをある程度把握しながら、任意の箇所のデザインを変更できる点です。

もちろん、優先順位的には追加CSSで十分な場合もありますが、デフォルトのCSSを理解し、編集できた方がデザインしやすく、デザインが統一されやすいです。

例えばh2、h3などはサイドバーやフッターの記事タイトルやウィジェットごとのタイトルとして利用されることが多いので、追加CSSでh2、h3を指定してしまうとデザインが大幅に崩れる可能性があります。

テーマのテンプレートファイルをある程度理解した上で、直接CSSを編集すれば、任意の箇所のみデザイン変更できるようになり、デザインが崩れにくくなります。

また、タグの入れ子の構造によっては、classやidが割り振られていたとしてもCSSの優先順位が上がらず、思ったようにデザインが反映されないこともあるので、いずれにせよテーマテンプレートのCSSを理解したり、直接編集できる知識とスキルが必要なんですね。

CSSを読めるようになること、読むだけでなく編集できるようになることでWordPressをさらに使いこなせるようになり、WordPressが持つ本来の自由なデザイン性をさらに高められるようになります。

まとめ

WordPressはHTMLやCSSを理解しなくてもサイトやホームページが作れるツールとして使い始める初心者の方も非常に多いです。もちろん、理解しないままでもテーマやプラグインを導入することでデザインすることは可能ですが、HTMLやCSSを理解し、編集や変更できる方が自由自在にデザインを変更できるようになります。

CSSのclassやidとタグの入れ子構造をどうやって見れば良いのか、次にプロパティや値を変更するとどうなるのか、実際に設定されているCSSはどんな状態なのかと段階を追ってCSSを見たり、編集や変更することで、CSSやHTMLが非常にわかりやすく、扱いやすいものだと感じれるようになります。

HTML、CSSと聞くと非常に難しく感じてしまう方も多いですが、ほぼ全てのホームページやサイトはHTMLやCSSでパソコンやスマホ、タブレットで表示される仕組みであり、HTMLとCSSを理解すれば画面に表示されるデザイン全てを自由自在に表現できるようになるパワフルな言語であり、学んでおく価値は非常に高いです。

WordPressでテーマやプラグインの導入だけでは思ったようにデザインができないと感じ始めたら、ぜひともHTMLとCSSについて学んでみてくださいね。