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