見栄えを整える

　当サイトは恥ずかしながらグラフィカルな華麗さとは少々縁遠いのですが、柳のへぼ小説を読んでやろう！と仰ってくださる皆様になるべく度々来ていただけるようなページにしていきたいと考え、「美しく読みやすいページ」を目指して一応細々とお勉強しております。今回はその見栄えの話。

　柳はWordPressでのサイト運営を決意する前、長いことHTMLを記述支援式エディタで打つことでサイトを作ってきました。まあ、もともと文章メイン（というか、文章しかない）のサイトですから、さしあたってそれで不自由はありませんでした。

　しかしHTMLというのは、本来文書の構造を定義するための言語なんだそうです。HTMLを見栄えの制御のために使うと、ブラウザによって見え方がかわってしまったり、検索エンジンに理解されない…今で言うSEO対策（検索エンジン最適化）上よろしくないと。

　とどのつまりHTMLは本来の文書構造のみに絞るべきで、見栄えスタイルの指定はCSS（Cascading　Style　Sheets）指定が推奨…というのが当世の流れ。で、HTMLにある装飾目的の属性（<center>や<font> ）については、廃止の方向に進んでいるのだそうです。うーむ隔世の感。当時の柳はこれでもかってくらい使いまくっていましたがね。（＜というより他に方法を知らなかった）

　まあ、柳としましてはSEO対策とかいった高尚な話は二の次でして、当時はひたすら見栄えをきれい＆効率的に制御出来るという噂に飛びつき、リファレンスと首っ引きで小説部屋ごとに外部スタイルシート一括指定！という荒技に取り組んだのでありました。 …ま、荒技というか…本来そういうモノだっただけなんですが。¹

　話をWordPressに戻します。

　WordPressにおけるサイトの「見栄え」が、テーマで管理されているのは皆様ご承知の通り。テーマを取っ替えるだけでまったく違った見栄えになるのですが、その指定は基本的にCSSです。文書構造を書くのがHTMLからphpになっただけ、という理解で間違ってないと思うのですが、HTMLにスタイルシートを読み込ませて指定するという、至って明瞭、シンプルなやり方に対して…WordPress上での見栄え指定は柳にとって存外難儀なシロモノでした。

　何が難儀って…まさに見栄えを整えたいその部分を、一体何処で指定してるのかさっぱり判らない、というところです。²
　テーマの指定をそのまま使うのであれば問題ありませんが、「この文字はちょっとでかすぎ」「ここにこんなの入れたい」「この表示は要らない」というのがどうしても出てきます。致し方ない、恐る恐る³テーマをいじるしかありません。

　WordPressテーマのファイルの中には確かにstyle.cssというCSSファイルが存在します。しかしこのファイル、大概もの凄くでかいのですよ。まあ、アクセシビリティ対応のためにこういう環境ならこういう表示、と事細かく指定されているのだから当たり前なのですが…正直、該当箇所を探すだけでも疲れ果ててしまいます。

　オマケに奇跡的に該当箇所を見つけて修正をかけても、なかなかうまく反映されないということが多々ありまして…最終的に柳、テーマエディター内のCSSファイルをいじくることを基本的に諦めました。

　じゃあどうするかというと、【ダッシュボード】→【外観】→【カスタマイズ】から【追加CSS】を選択してそこに書き込むのです。右隣がライブビューアになっているので実際の見栄えを確認しながら値を指定できるという有り難い機能でして、基本書式である
　セレクタ｛プロバティ名：値；｝　
　…をきちんと踏襲すればばっちりキマるという寸法です。万歳！

　ただし、柳は長いこと「セレクタ⁴がわからん！」という壁に苦しめられてきました。まあ、CSSファイルにおける該当箇所を探すのが難儀だったというのと根本は同じ話なのですが、しかしここも存外簡単に解決。表示させたページの文字の上で右クリックすると現れる…Edgeなら「要素の検査」Chromeなら「検証」の画面を開くと、該当部分のソースがざらっと、しかもハイライト表示されるのです。これで、該当部分がどういう名前のセレクタで指定されているかが判るので、あとは基本書式に則り必要なプロパティと値をライブビューアで確認しながら指定すればよいのでした。

　ちなみにセレクタがクラス名であった場合、
　．クラス名｛プロバティ名：値；｝
　で指定すればOK。本来．の前に要素名（pとかａとかdivとか）が要るらしいのですが（div.クラス名｛プロバティ名：値；｝みたいに）、テーマファイル内style.cssの記述を見る限り必須でないようなので柳は上記のように記述しています。巧く作動しなかったら要素名までいれてみたり。ここはもう試行錯誤ですね。（なんとアバウトな…いつものことか）

　ちなみに今回の原稿を仕上げるにあたって参考にさせていただいた、HyperEdit時代から柳がお世話になっているリファレンスサイト様がこちら。
　HTMLクイックリファレンス　
　もはや畏れ多くて足向けて寝られません。HTMLはもとよりCSSまで、うろ覚え、惰性でやってて巧くいかなくなったらとりあえずここ。基礎の基礎からがっちり解説していただける、それはそれは有り難いサイト様です。指定のやり方に詰まったときは、是非参考になさってください。

柳の感触としてもHTMLでの見栄え調整は至って効率の悪いシロモノでした。当時の柳はスタイルシート、とりわけ外部スタイルシートという概念に感動さえ覚えたものです。
要はphpがきちんと読めてないってコトじゃないか…というツッコミは甘んじて受けます。全く以てその通り。柳にとっては、天使様でも降臨してくれないとphpって読めない…
WordPress5.0あたりからテーマエディターという表示になって見なくなりましたが、最初の頃はテーマを弄ろうとすると「サイト壊れるかもしんないけどいい？」的な警告が出たものです。…まあ、それでもやりましたけど。
セレクタ（selector）…スタイルシートを適用する対象。一番判りやすいのはp（パラグラフ、本文）やa（リンク）等。クラスやIDを指定することも可能。セレクタの種類を使い分けることで様々な対象にスタイルを適用させる。