WordPressでのブログデザインのカスタマイズの、2種類の方法
ブログを続けて少しすると、本文や見出しのフォントのサイズ変更といった細かいところから、広告を貼るといったことをしてみたくなると思います。
そうなると<p>や<div>といったhtmlを使って文章デザインなどを変えることになります。
しかしイチイチ1記事ずつ変更していたのでは手間もかかるため効率も悪いです。
そんなときにどうすれば効率よく編集や設定ができるのか紹介します。
一括編集でデザインを変更
まずサイトデザインを変更するには、全ページを一括で変更するようなものが望ましいです。
特にフォントサイズや見出しといった、全てのページで共通しているもの。
こうしたデザインは一括で設定を変更できるほうが手間を大幅に減らせます。
・後で変更したくなっても、一部を変えれば全てに反映できる
一括変更にはこうしたメリットがあります。
たとえば毎回文章ひとつひとつにデザイン変更のコードを書きこんでいると手間がかかりすぎます。
…まあ最初はコードを書く手間があるので、ここではそこまで変わりません。
問題は後でデザインを変更したくなった場合。
この場合は各ページ・文章ごとに変更コードが独立してしまっているため、全てを変更するには膨大な時間と手間がかかります。
記事数が数枚ならともかく、何十・何百と記事数が多くなるにつれてかかる時間も雪だるま式に増えていきます。
記事のタイトルや見出しを こんな感じに していたら、1記事ごとに全て手作業で直さないといけません。
しかし一括で編集できるようにしておけば、「デザインを変えたい」なんて思ったときにすぐに全ページを直せます。
サイトのデザインを一括で変更するにはCSSを覚える必要があります。
CSSとはプログラムを専用の動作をするようクラス別に分けることで、各デザイン別を簡単に変更できるようにするものです。
例えば文章を赤文字と青文字と別々に表示したいときに「赤文字にするクラス」と「青文字にするクラス」を用意しておき、それぞれを各文章に適応させれば簡単にデザイン変更できます。
クラスを使えば変更できる数に制限はないので、いくらでもデザイン変更ができるようになります。
そしてクラス内のブログラムを変更すれば、そのクラスを適応させていたものすべてが変更されます。
先ほどの「赤文字にするクラス」で文章を赤くしていましたが、デザインが気に入らなくなったので黄色に変えたくなったとします。
各文章ごとにデザイン変更していると1記事・1文章レベルで変更作業が必要になりますが、「赤文字クラス」の「文字を赤くする」部分を「文字を黄色にする」に変更してしまえば変更していたすべての文章に適応されます。
イメージとしては、フォルダなどをショートカットで呼び出す感じに似ています。
ショートカットでフォルダ（仮）のアイコンをどこにでも配置できるのに対し、中身はオリジナルのフォルダを参照しています。
オリジナルのフォルダの中身を変えれば、当然ショートカットで開いても変更された後になるのと同じです。
このCSSの仕組みさえ覚えればサイトデザインは簡単に変更できるようになります。
ソースコードなど複雑なプログラムを覚える必要もありません。
ウィジェットといったWordPressそのものの機能を追加するにはもう少し突っ込んだプログラミングが必要になります。
が、既にあるもののデザインを変えるならCSSだけで充分です。
一括編集は「テーマの編集」か「追加CSS」で
WordPressでデザインなどを一括で編集する方法は「テーマの編集」と「追加CSS」があります。
しかし、双方使いやすさや編集できる範囲が違うのでそれぞれ紹介します。
「テーマの編集」で編集する
「テーマの編集」はWordPressの基本機能で、サイトを構成するすべての要素（phpファイルなど）を表示・設定できます。
ブログの構成をすべて設定できるので、フォントサイズの変更や見出しのデザイン設定といった細かいところ、果てはウィジェットの追加でサイドバーの増設といったサイトそのものの機能の設定もできます。
極端な話ここを弄り倒せるなら、サイトを作り変えることが可能です。
ウィジェットを使わずに記事ページの上下に広告を貼りたいときなども、ここを弄ることになります。
あるいはそのウィジェットの枠そのものを新しく追加したかったりする場合も「テーマの編集」で追加します。
「新しい機能を自分で追加する」といったことは、プラグインなどを使わない場合は「テーマの編集」で追加していくことになります。
ただ、この方法ではリスクがかなり高いデメリットがあります。
デメリットというより危険性といったほうがいいですが、一歩間違えるとブログそのものが崩壊します。
消したり変更した部分が、実は大切な部分だった・他と密接に関係していたりすると、デザインが狂ってしまうこともあります。
それだけならまだマシなほうで、最悪ブログの表示が真っ白になってしまい取り返しのつかない事態になりかねません。
そうでなくとも、使っているテーマの更新をすると編集した部分がリセットされてしまい、一からやり直しになってしまします。
確認作業でも、この方法では設定を保存しないかぎり反映されないので、確認するのに手間がかかります。
解決方法としては「子テーマ」を作ってそちらを編集するのが最善かつ一般的です。
「子テーマ」とは現在使っているテーマ（親テーマ）の編集専用のテーマです。
イメージとしては親テーマに子テーマの設定を追加してサイトに反映する、といった具合です。
親テーマに子テーマの内容が書き込まれるわけではないので安心してください。
子テーマで編集するようにすれば、親テーマを弄ることなくブログの編集ができます。
例えば子テーマの「single.php」を編集した結果記事ページが表示されなくなっても、その子テーマの「single.hp」を消してしまえば、親テーマの「single.php」が優先され問題なく表示されます。
こうして子テーマを作って編集することで、ブログが壊れるリスクをなくせます。
子テーマを作る方法はWordpressでアップロードする方法と、サーバー側で作成する方法があります。
サーバーはブログにとって重要なものが集まっているので、サーバー側で作成するときは細心の注意を払いましょう。
「追加CSS」で編集する
「追加CSS」もWordPressの基本機能です。
「追加CSS」のシステムは簡単にいってしまえば「子テーマ」での「style.css」の編集とほぼ同じ。
サイトもタイトル・見出し・サイドバー・フォントといった、既に設定されているクラスを弄ることになります。
子テーマ同様に追加CSSで間違った設定をしても親となるテーマは無事なので、そこの部分を消してしまえば元の状態に戻ります。
WordPressの基本機能なので、子テーマ作成のようにいちいちサーバーのほうを弄る必要がないので手軽に作業ができます。
設定する画面の関係上、CSSの設定をしながらそれがどう反映されるのか見ながら作業できるので確認作業がラクです。
フォントのサイズが変わっているか、タイトルに色付けがされているかetc。
子テーマを作らずにタイトルデザインやフォントの設定をしたいときは、ここで設定することになります。
この方法では「テーマの編集」と違いサイト全体が消えるリスクはありません。
追加CSSでは書き方に問題のあるプログラムだと、反映させずにスルーする設定になっています。
…が、あくまで「CSS」なためできることに限りがあります。
「追加"CSS“」の名の通り、「p」タグや「h」タグ・自分で作ったクラスなどの設定しかできません。
あくまで「h」タグなどの既存クラスの設定しかできないため、ウィジェットなどの「新しい機能の追加」といったことはできせん。
「フォント・タイトルのデザイン等の変更」や「記事のスペースを広げたい」などのデザインしか変えられないと思っておきましょう。
「記事中に一括で広告を表示するよう編集したい」なんて設定は、「テーマの編集」でしかできませんので注意してください。
ちょっとした注意
「テーマの編集」にしろ「追加CSS」にしろ、設定を弄ったら必ずしておきたいことはいくつかあります。
それは実際に設定が反映されているかの確認です。
実際にうまく設定したプログラムが保存されたとしても、うまく表示されているかの確認は必要です。
設定を変更したら確認する癖をつけましょう。
確認はプレビューか実際の画面
「テーマの編集」でも「追加CSS」でも、反映されるのは実際のサイト画面です。
使っているテーマによっては記事作成ページの「ビジュアル」では表示されないことも多いです。（見出しや文章デザインが以前のままetc）
確認したいなら「プレビュー」や、「外観」→「カスタマイズ」で実際のブログ画面を開いて確認しましょう。
設定が反映されてない
たまにしっかり変更設定をしたとしても、実際の画面でそれが反映されてない時があります。
それはキャッシュが原因の場合があります。
キャッシュは以前に閲覧したページを早く表示するため、表示データを保存する機能があります。
この機能のために「変更前のまま」のページデータが読み込まれてしまうため、変更ができていないように見えてしまいます。
解決するには、一度ブラウザを閉じる・インターネットオプションなどでキャッシュを削除します。
これで現在のページデータに基づいて表示されるようになります。
もしくは「カスタマイズ」の「追加CSS」でならリアルタイムで変化がわかるので、確認を簡単にするならこちらで作業しましょう。
後で追加CSSで作たクラスをそのまま子テーマの「style.css」にコピペしてしまえばしっかり動作します。
…この時点ではキャッシュのせいで変化がないように見えることが多いですが…。
場合に応じて使い分ける
サイトの一括編集の方法を紹介しましたが、実際に変更作業をしていると結局両方使うことが多いと思います。
追加CSSはそんなに神経質にならずに作業できますが、子テーマを使っての作業だと前準備に結構手間と神経を使います。
ブログの根幹部分の「サーバー」と「テーマ」に手を入れるので、くれぐれも注意して作業してください。
フォントや見出しといった既存クラスなら、まずは追加CSSで作業したほうがラクです。
初めは追加CSSで設定を変更する感覚を掴みましょう。
少し慣れてきて、もう少し踏み込んだ変更をしたくなってから子テーマに手を出しても問題ないです。
無事子テーマが作れた後に追加CSSの内容を丸ごとコピペすればいいわけですし。
最終的な設定の保存は小テーマに落ち着くと思いますが、各々がやりやすい方法でデザインの変更をしてみましょう。