かゆいところに手が届く！WordPressの使えるCSSテクニック

WordPressは機能面が優れているのもありますが、レイアウトやデザインの自由度が高いことも魅力のひとつです。

豊富なテーマでかんたんにオシャレなサイトやメディアを作ることもできますが、HTML+CSSの知識もあれば細部に渡るまで自由自在に作り込むこともできます。

テーマを活用していて他のサイトと似たようなデザインになったり、オリジナリティを演出したかったり、微調整を行いたいといったことは現場では良くあります。

そこで今回は、WordPressのヴィジュアル面のカスタマイズに欠かせない、CSSのお役立ちテクニックをご紹介します。

CSSとは？その役割と必要性

CSSとは、正しくはCascading Style Sheets（カスケーディング・スタイル・シート）と呼び、Webサイトに表示される要素を装飾するための言語です。HTML言語とセットで使用します。

HTMLでも装飾を目的としたタグは存在していますので、ある程度までの装飾は可能です。

しかし、今日のWebに使用されている言語の仕様では、HTMLは情報を定義するためのもので、CSSは装飾を定義するためのものであるとされています。

HTMLでの装飾には限界があり、無理に実装しようとするとソースが重くなったり規則性を乱したりする原因となります。本来の目的を逸れたソースは検索エンジンからの読み取りの際に不具合が生じたり、環境次第で表示が崩れたりしてしまいます。

従って、装飾を本来の目的としているCSSは、ソースの構造上も機能の充実度においても、本格的なヴィジュアル面のカスタマイズには欠かせないものです。また、メンテナンス性も優れています。

WordPressのテーマを制御しているのもCSSであるため、オリジナルのデザインを実現したり、ページの構成や表示方法やレイアウトを調整したりする場合には必須の言語です。

WordPressでCSSを活用してできること

CSSでできることは幅広くありますが、WordPress運用時に良く使用するのは以下のような内容です。

・テキスト装飾

フォント名　フォントサイズ　フォントカラー　フォントの太さ　フォントの感覚　行間

・配置の調整

Margin　padding　位置の指定　回り込みの指定

・背景の調整

色を変更する等

・表示・非表示の指定

Displayプロパティ

・アクションを付ける

ボタンをクリックすると色が変わる等

大きく分けるとシンプルな分類のようですが、実際のサイトはこれらを複数組み合わせてデザインやレイアウトを制御しています。

気になったサイトがあれば、ソースを見てみたり、エディタに貼り付けていろいろ触ってみると、CSSがどのような役割を担っているのかがよく分かるのでオススメです。

WordPressでCSSを編集する方法

WordPressのCSSを編集する方法は大きく分けて3つの方法があります。

それぞれの方法の特徴やメリット・デメリットについて解説します。

・親テーマを編集する

親テーマは、テーマの根幹をなすデザインやレイアウトを指定したファイルがある場所のことです。

こちらを編集すれば、その内容がそのままサイトに反映されるためカスタマイズが非常に楽です。

しかし、テーマのアップデートの際に上書きされるため都度CSSを書き換える必要があるのと、サイトの見た目の根幹をなすファイルであるため、ミスをするとダメージをダイレクトに受けてしまいます。

・子テーマを編集する

子テーマとは、親テーマの後に読み込まれるカスタマイズのためのテーマです。

CSSは、後から読み込まれたものがサイトに反映されるため、子テーマに変更したい内容を記述すれば、親テーマのCSS指定に依らずにカスタマイズ内容を反映することができます。

一般的には、WordPressのヴィジュアル面をカスタマイズしたい場合には、この子テーマのCSSを編集します。

・追加CSS

WordPressのバージョン4.7から管理画面に登場した、CSSカスタマイズ用の機能が追加CSSです。子テーマと同じように、親テーマに影響を与えずにサイトのヴィジュアルを変更できます。

しかし、ヘッダーに直接CSSを書き込むという推奨されない記述方式であるのと、簡易的なCSSカスタマイズにしか向いていない点から、使えるシーンは限られてきます。

実践でよく使う具体的テクニック8選

CSSについての基本的な概念についてご紹介してきました。

ここでは、WordPressを運用していくにあたって、カスタマイズが欲しくなるありがちなポイントと、よく使うCSSの具体的なテクニックについて解説します。

・メディア（サイト）全体で使うフォントを指定

メディアやサイトにおいてフォントは、サイトの雰囲気を左右する重要な要素です。デフォルトで用意されているフォントだと、運営しているメディアの雰囲気にマッチしないシーンも多々あります。

CSSを使えば、簡単なソースを記述するだけでサイト全体のフォントを一括で指定することができます。このテクニックを知っておくと、例えばファッション系のお気に入りのテーマを別ジャンルに活用したりといったことも可能となり、意外と表現の幅が広がります。

簡単ですが効果の大きなテクニックですので、是非活用してみて下さい。

・見出しのカスタマイズ

コンテンツの可読性はもちろん、サイトの雰囲気まで関わってくるパーツが「見出し（h1~h6タグ）」です。テーマはオシャレなのに、見出しがなんだか気に入らないといったことはよくあります。

そんな時は、CSSを使って見出し部分のみをオリジナルのデザインにカスタマイズしてみてはいかがでしょうか？CSSを使えば、例えば以下のようなことができます。

・アンダーラインを引く

・見出しに背景を付ける

・タイトルバー風にカスタマイズ

・オリジナルデザインの見出しを作成

見出し部分のみのソースも多数配布されていますので、コピペのみでもカスタマイズは可能です。サイトの印象を大きく変える要素ですので、知っておいて損はないテクニックです。

・マージンとパディングの調整

サイトやメディアは、「トップ」「サイトメニュー」「メインコンテンツ」「フッター」といった各パーツから構成されており、また表示されている各パーツの中にも様々な要素が配置されています。

要素間の間隔は「margin」、要素間の余白は「padding」と言います。これらの隙間や空白のバランスが悪かったり、配置がずれていたら、サイトの印象は大きくダウンしてしまいます。

細かい部分となりますが、CSSを使って調整を施すことにより、スッキリとまとまったオシャレな印象のサイトにすることができます。テーマをそのまま使っていると起こりがちな現象ですので、是非調整にチャレンジしてみて下さい。

・表示・非表示の指定

WordPressでメディアやサイトを運用していると、レイアウトされている要素の一部を非表示にしたり、時期によって表示・非表示を切り替えたりしたいシーンが出てきます。

その都度ソースを記述したり消したりするのは手間がかかりますし、推奨されている方法でもありません。

CSSの「display」を使用すれば、ソースはそのまま変更せずに、「none」を指定するだけで特定要素をブラウザに表示させないようにすることができます。

たったひと手間で要素の表示・非表示を切り替えることができるテクニックですので、頻繁な変更が発生するサイトでは覚えておくと便利です。

・画像を並べる

テーマは気に入っているけれども、画像をたくさん並べることができないといったこともあります。運営しているサイトによっては、ギャラリー風に画像を魅せたり、複数画像を並べて比較したり、商品を多角的に見せたいシーンもあるのではないでしょうか？

CSSでは、画像を複数カラムで表示するカスタマイズが実現可能です。後述する画像のCSSテクニックと組み合わせれば、お気に入りのテーマの画像表示部分のみ調整して、希望のレイアウトやデザインを実装することができます。

新規テーマを複数比較検討する必要はありません。是非覚えておいて欲しいテクニックです。

・画像を装飾

ほとんどのサイトやメディアでは、コンテンツに合わせて画像を挿入しているかと思います。しかし、単に画像を挿入しているだけでインパクトに欠けたり、見栄えがしなかったりと言ったことは良くあります。

CSSを使えば、画像にシャドウを付けたり、写真風にしたり、円形にくり抜いたり、四隅を丸くしたりといったカスタマイズを簡単に行うことができます。

ちょっとしたアレンジで画像をオシャレに見せることができますので、サイトの雰囲気に合わせてカスタマイズしてみると良いでしょう。

・画像の幅を指定

サイトを閲覧する端末の画面の幅に合わせて、画像の表示を指定したい場合はよくあります。特に、レスポンシブ非対応のテーマを使用している際には、画像の表示を最適化することは必須です。

CSSを使えば、デバイスの幅に合わせて相対的に画像の表示幅を指定することができます。横幅の伸縮に合わせて、縦横比を保ったまま表示することも可能です。

現在使用中のテーマの画像の表示を変更したい場合にも便利なテクニックです。

・パンくずリストを作成する

パンくずリストは、現在のWebサイトにおいてユーザビリティーの観点からもSEOの観点からも有効となる要素です。テーマにあらかじめ実装されている場合が多いですが、無いものもあります。

一定の書式で記述すれば、検索エンジンはパンくずリストとして認識してくれますので、実はCSSでオリジナルデザインのパンくずリストを作成することができます。

テーマデフォルトのパンくずリストのデザインがしっくりこない場合や、実装されていない場合に、CSSで作成するといったシーンは意外とよくあります。

WordPressでCSSを編集する際の注意点

この章では、CSSを活用してWordPressをカスタマイズする際の注意点を解説します。

CSS編集はいくつかのポイントを抑えておかないと、後で思わぬトラブルになる場合もありますので、是非こちらも参考にしてみて下さい。

・なにはともあれ まずはバックアップ

WordPressの運用にあたっての様々なリスクに対応するために、バックアップを取るのは運用にあたっての基本的な心得です。

CSSを編集する際にも、テーマの根幹となる部分を触ることになるのですから、事前にバックアップを取って、編集ミスや不具合が発生した際にもいつでも元に戻せるようにしておくのが基本です。

慣れたCSS編集である場合も思わぬ事態が発生することがありますので、後で苦労しないように必ず実施しておきましょう。

・テーマのアップデートに注意

定期的に行われるテーマのアップデートによる更新で、親テーマのディレクトリ内のCSSを編集していた場合は、カスタマイズされた内容が上書きされてしまいます。

更新のたびにCSSに変更を加えれば良いのですが、手間がかかるため現実的ではありません。

CSSをカスタマイズする際には、アップデートによる影響を受けないカスタマイズ用の子テーマ、または追加CSSを用いて実装しましょう。

・煮詰まってしまったらアウトソースも検討する

WordPressのカスタマイズに使えるCSSのソースはインターネット上にもたくさん公開されていますが、使用しているテーマや環境によってはコピペでは実装できない場合もあります。

実現したい内容によっては、応用や調整が必要であるなど、ある程度CSSの編集経験が無いと想定外に苦労することもあります。

WordPress運用において最も重要なのは、コンテンツの追加や更新であるため、CSS編集に煮詰まって時間を奪われてしまうのは得策ではありません。

どうしてもわからない場合は、要件を伝えて制作会社やデザイナーにアウトソースして、スムーズに済ませるのが吉です。

まとめ

WordPressを活用してのサイト運用に役立つCSSテクニックについて解説してきました。

CSSを使いこなすには知識や技術が必要となりますが、既定のテーマの範囲を超えてのレイアウトやデザインを実現することができます。サイトにオリジナリティを持たせたり、他のサイトとの差別化につなげたり、細かい調整の際にも役立ちます。

CSSの概念だけでも持っておけば、デザイナーや制作会社に希望をオーダーする際にもスムーズです。

「もっとこういうデザインやレイアウトにしたい！」

WordPressを運用していてこのような思いのある方は、是非この機会にCSSについての理解を深めてみて下さい。