《WordPress》テーマの編集・追加CSSでブログの一括編集!

ブログを続けて少しすると、本文や見出しのフォントのサイズ変更といった細かいところから、広告を貼るといったことをしてみたくなると思います。
そんなときにどうすれば効率よく編集や設定ができるのか紹介します。




一括編集のメリット

フォントのサイズなど全ページに共通して設定できるものは、できる限り一括で編集してしまえば手間を大幅に減らせます。

たとえば毎回記事ひとつひとつにデザイン変更のコードを書きこんでいると、デザインを変更したいときにとてつもない手間と時間がかかります。
記事数が数枚ならともかく、何十・何百と記事数に比例して膨大なものになります。

記事のタイトルや見出しを こんな感じに していたら、すべて手作業で直さないといけません。

一括で編集できるようにしておけば、「デザインを変えたい」なんて思ったときにすぐに全ページを直せます。

一括編集は「テーマの編集」か「追加CSS」で

WordPressでデザインなどを一括で編集する方法は「テーマの編集」と「追加CSS」があります。

しかし、双方使いやすさや編集できる範囲が違うのでそれぞれ紹介します。

「テーマの編集」で編集する

「テーマの編集」はWordPressの基本機能で、ブログを構成するすべての要素(phpファイルなど)を表示・設定できます。

テーマの編集のメリット

ブログの構成をすべて設定できるので、フォントサイズの変更や見出しのデザイン設定といった細かいところ、はてはウィジェットの追加でサイドバーの増設といったブログそのものの機能の設定もできます。

極端な話ここを弄り倒せるなら、ブログをつくり変えることができます。

ウィジェットを使わずに記事ページの上下に広告を貼りたいときなども、ここを弄ることになります。
あるいはそのウィジェットの枠そのものを新しく追加したかったりする場合も「テーマの編集」で追加します。

「新しい機能を自分で追加する」といったことは、プラグインなどを使わない場合は「テーマの編集」で追加していくことになります。

テーマの編集のデメリット

デメリットというより危険性といったほうがいいですが、一歩間違えるとブログそのものが崩壊します。

消したり変更した部分が、実は大切な部分だった・他と密接に関係していたりすると、デザインが狂ってしまうこともあります。
それだけならまだマシなほうで、最悪ブログの表示が真っ白になってしまい、取り返しのつかない事態になります。

そうでなくとも使っているブログテーマの更新をすると、編集した部分がリセットされてしまい一からやり直しになってしまします。

あと「テーマの編集」で設定をしてから、「外観」→「カスタマイズ」などでブログにどう反映されてるか確認作業をしないといけないので、少し手間です。

テーマの編集は「子テーマ」をつくってする

「テーマの編集」でブログを壊さないようにするために、「子テーマ」をつくってそれを編集するのが最善です。

「子テーマ」とは現在使っているテーマ(親テーマ)の編集専用のテーマです。
イメージとしては、親テーマに子テーマを上書きしてブログに反映される、といった具合です。(上書きといっても、親テーマに子テーマの内容が書き込まれるわけではないので安心してください)

子テーマで編集するようにすれば、親テーマを弄ることなくブログの編集ができます。
例えば子テーマの「single.php」を編集した結果記事ページが表示されなくなっても、その子テーマの「single.php」を消してしまえば、親テーマの「single.php」が優先され問題なく表示されます。

こうして子テーマをつくって編集することで、ブログが壊れるリスクをなくせます。

子テーマをつくる方法はWordpressでアップロードする方法と、サーバー側で作成する方法があります。

サーバーはブログにとって重要なものが集まっているので、サーバー側で作成するときは細心の注意を払いましょう。

「追加CSS」で編集する

「追加CSS」もWordPressの基本機能です。
「テーマの編集」と違い危険性はありませんが、あくまで「CSS」なためできることに限りがあります。

追加CSSのメリット

「追加CSS」のシステムは、簡単にいってしまえば「子テーマ」での「style.css」の編集とほぼ同じです。

追加CSSで間違った設定をしても親となるテーマは無事なので、そこの部分を消してしまえば元の状態に戻ります。
WordPressの基本機能なので、子テーマ作成のようにいちいちサーバーのほうを弄る必要がないので、手軽に作業ができます。

設定する画面の関係上、CSSの設定をしながらそれがどうブログに反映されるのか見ながら作業できるので、確認作業がラクです。(フォントのサイズが変わっているか、タイトルに色付けがされているかetc)

子テーマをつくらずにタイトルデザインやフォントの設定をしたいときは、ここで設定することになります。

追加CSSのデメリット

「追加"CSS“」の名の通り、「p」タグや「h」タグなどの設定しかできません。

あくまで「h」タグなどの既に設定されているクラスの設定しかできないため、「新しい機能の追加」といったことはできせん。
「フォントの色を変えたい」「タイトルのデザインを変えたい」「記事のスペースを広げたい」などのデザインしか変えられないと思っておきましょう。

記事中に一括で広告を表示するよう編集したい」なんて設定は、「テーマの編集」でしかできませんので注意してください。

ちょっとした注意

「テーマの編集」でも「追加CSS」でも、反映されるのは実際のブログ画面です。

記事作成ページの「ビジュアル」では表示されないので、確認したいなら「プレビュー」や「外観」→「カスタマイズ」で実際のブログ画面を開いて確認しましょう。

最後に

ブログの一括編集の方法を紹介しましたが、実際にブログデザインの作業をしていると、結局両方使うことが多いと思います。
追加CSSはそんなに神経質にならずに作業できますが、子テーマを使っての作業だと前準備に結構手間と神経を使います。

ブログの根幹部分の「サーバー」と「テーマ」に手を入れるので、くれぐれも注意して作業してください。