ワードプレスでは、一部のテーマを除き、カスタマイザーを使用して簡単にCSSを記述できるようになっています。ザ・トールも例外ではなく、カスタマイザーでCSSを記述することが可能です。
このページでは、カスタマイザーでCSSを記述するための〔追加CSS〕について説明しています。
追加CSSとは？
「追加CSS」は、ワードプレスの多くのテーマに備わっている機能で、CSSを記述することができるスペースです。テーマファイルをいじらなくても記述することができるので、比較的安全にカスタマイズすることができます。
できること
ファイルを作成したり、データをアップロードしたりすることなく、CSSコードを記述するだけで記事やサイトのスタイルを変更させることができます。
また、プレビュー画面を見ながら記述できるので、記述後のスタイルを確認しながら、値を微調整することも可能です。
できないこと
プレビュー画面にはスタイルが反映しますが、ビジュアルエディターにスタイルを反映させることはできません。
カスタマイザーを起動中の画面ではプレビュー画面が表示されていますが、ビジュアルエディターとは連動されていません。そのため、追加CSSに何を記述してもビジュアルエディターにスタイルを反映させることができないのです。
ビジュアルエディターの表示例
実際に具体例を挙げてみますね。
例１）では、「test」というクラス名を付与して追加CSSに記述しているのですが、ビジュアルエディターにスタイルが反映されておらず、ただ「テキストだけ」が表示されている状態です。この状態からは、どのようなスタイルが指定されているのかわかりません。（指定されたスタイルは後述します）
例２）は、ビジュアルエディターのツールバーにある［スタイル］メニューから［方眼ペーパーボックス］を指定しています。ビジュアルエディター画面にスタイルが反映されているので、一目で方眼ペーパーボックスだということが分かります。（スタイルを反映させる設定になっている場合）
テキストエディターの表示例
ビジュアルエディター画面をテキストエディター画面に変更すると以下のような記述を確認することができます。
例１）、例２）、ともにdiv要素にclass属性が付与され、class名が記述されています。【参考：HTMLの基礎の基礎】
テキストエディターの記述だけで見ると、どちらの文書も構成は同じように見えますが、上段の記述はビジュアルエディターではスタイルを反映できず、下段の記述はビジュアルエディターにスタイルが反映されています。
CSSを記述する方法：基本手順
上記の特徴を踏まえて、追加CSSに「CSSを記述する」方法とコツを紹介させていただきます。まずは、基本的な方法です。
1.カスタマイザー起動
カスタマイザーを起動します。ワードプレス左側のメニュー一覧から［外観］→［カスタマイズ］と移動します。上の画像のように、①外観をクリックして②カスタマイズをクリックしても、①外観にカーソルを合わせて横移動してから②カスタマイズをクリックしても、どちらの方法でもOKです。
2.追加CSSを開く
カスタマイザー画面が表示されたら、画面を下にスクロールして［追加CSS］をクリックします。
3.説明を読む
（この工程は省略可能です）CSSを記述していない状態（はじめて開いた場合）で「追加CSS画面」を表示すると、メッセージが表示されます。書かれているメッセージをざっくりと確認してください。
デフォルトでは、シンタックスハイライトが有効になっています。
シンタックスハイライトが有効になっていると、CSSを記述する際に候補となりそうなプロパティや値などが予測的に表示されたり、コードが色付けされて表示されたりします。
無効化するとそのような補足機能がなくなります。
当ページは、シンタックスハイライトを有効にしたまま説明を続けます。
4.コード記述
メッセージの確認が済んだら、「閉じる」をクリックして説明文を隠します。
その後、「1」の部分にカーソルを合わせてコードを記述します。
5.保存
CSSの構文を書き終えたら、［公開］ボタンをクリックして記述内容を保存します。
6.閉じる
保存が完了し、［公開］ボタンが［公開済み］に変更されたら、「×印」をクリックして画面を閉じます。
追加CSS編集のコツ
追加CSSを使ってCSSを記述するのは単純な作業なので難しくありませんが、どのタイミングでCSSを書き込むかによってちょっとしたコツがあるように思います。そこで、『記事を執筆しながらCSSを記述したい』というような場合に効率よく編集する方法を2つ、紹介させていただきます。
記事を編集中の場合
記事を執筆・編集している際に、CSSでスタイルを指定したいことはよくあることです。しかし、先の説明の通り、ビジュアルエディターでスタイルを確認しながら追加CSSに書き込むことはできません。1つめは、記事を編集しながらCSSを書き込むコツ(筆者が実際におこなっている方法)です。
上記、「ビジュアルエディターでの表示例」と「テキストエディターでの表示例」で掲載した、「class名：test」の記述から、追加CSSにスタイルを指定するまでのカスタマイズを例に紹介します。
1.テキストエディターに記述
テキストエディターに以下のコードを記述します。
<div class="test">例１）「test」というクラス名を作成してスタイルを指定しています。</div>
この例ではclass名を「test」としておこなっていますが、実際には別の名前を付けることになると思います。名づけの根拠などを明確にしたわかりやすいclass名を付けると後々管理しやすいです。
2.ビジュアルエディターに戻る
テキストエディターからビジュアルエディターに戻ります。
テキストエディターのまま次の工程に移行してもよいのですが、何か不具合があったときにビジュアルエディターの方が操作しやすく、また、テキストエディターへの記述がうまくいかない場合に、一度ビジュアルエディターを開いておくと記述可否の確認が取れるので、筆者はビジュアルエディターのテキスト表示を確認してから次の作業をおこなっています。
3.［Ctrl］+［S］
意図せず別の画面に移行してしまった時のために下書き保存をします。注意していただきたいのは、［下書き保存］のボタンをクリックするのではなく、ショートカットキーで下書き保存をおこなうということです。
理由は、「下書き保存すると戻れなくなる」から。また「ビジュアルエディター画面がtop(１行目)に戻ってしまう」からです。
下書き保存の挙動について、詳しくは【《元に戻す》ビジュアルエディターマニュアル】をご覧ください。
4.［プレビュー］クリック
画面右上の［プレビュー］ボタンをクリックします。すると、別タブでプレビューページが開きます。
5.ウインドウを分ける
別タブを切り替えながら編集を行ってもよいのですが、筆者はさらに効率的にするためにウインドウを分けています。お勧めです。
画像のように、プレビュー画面のタブにマウスカーソルを合わせ、そのままドラッグして枠外へ移動させます。
表示例）別ウインドウ
別のウインドウになると、下の画像のように画面が分かれます。
6.マウスを離す
画面が分かれたら、マウスを離してください。マウスを離すと完全な２画面となります。
7.画面を並べる
「編集中の画面」と「プレビュー画面」が独立した２画面になったら、編集しやすいように並べます。並べ方は各々調整していただきたいのですが、筆者の場合は、左側にプレビュー画面、右側に編集中の画面を並べています。
8.プレビュー画面からカスタマイザーを起動
プレビュー画面のツールバー内の［カスタマイズ］をクリックして、カスタマイザー画面を開きます。
9.［追加CSS］クリック
追加CSSをクリックしてCSSを記述する画面に移動します。ここからの工程は、基本的な工程と同じです。
10.CSSを記述して公開
CSSを記述したスタイルが、プレビュー画面に表示されているのが確認できます。記述を終えたら、［公開］ボタンを押して完了です。
他にもCSSを記述する予定がある場合、追加CSS画面を表示したまま作業を継続しても問題なく編集することができます。その際、編集の最後には［公開］ボタンをクリックして保存することを忘れないようにしてください。
同じページの編集中に新しいクラス名を作る場合
１つのページに、複数のclass名を使ってスタイルを指定することは珍しいことではありません。そのような場合には、ウインドウを２つ表示させながら記事を編集するととても効率が良く作業が進みます。
1.新しいclass名を記述
テキストエディターにHTML文を記述し、class名を指定します。
＜要素名 半角 class="クラス名"＞コンテンツ＜/要素名＞
2.ビジュアルエディターに戻る
この工程は「記事を編集中の場合」の工程と同じです（ 工程確認)。
3.［Ctrl］+［S］
この工程も「記事を編集中の場合」の工程と同じです（ 工程確認)。
4.［プレビュー］をクリック
［プレビュー］ボタンをクリックします。２つのウインドウに分割したじょうたいのまま「プレビュー画面」の表示だけが更新されます。
カスタマイザーを起動したままでもOK
カスタマイザーを起動したままのプレビュー画面でも、執筆中のページのプレビュー情報が更新されます。上の画像のように「追加CSS」を表示したままでも更新されるため、すべてを並べて表示して一覧で見ることができるのでHTML・CSSともに構文の追加や修正、削除などが容易になります。
5.CSSの追加や編集
作業中のディスプレイ表示を「プレビュー画面」と「編集画面」の２画面を並べて表示させることにより、要素の位置の確認や記述内容の照合など、とてもスムーズに進めることができます。
6.公開
記述が終了したら、公開ボタンをクリックして内容を保存します。
必要に応じて、何度でも記述してください。
まとめ
追加CSSにCSSを記述する方法とコツを紹介させていただきました。
テーマにないスタイルや、テーマ内のスタイルのカスタマイズなどに必須の項目なのでぜひ、使いこなしてくださいね。
