WordPressの記事のマークアップとＣＳＳの備忘録
どうしてこんなに面倒なのか
WordPressは「テーマ」があるお陰で、ホームページ全体のレイアウトや、メニューの作成に全く力を注ぐ必要がなくなったので、作成者は記事を書いてエディターに貼り付けて「公開」すればいいだけだ。ただ、ホームページ作成上の約束として、テキストをタグでマークアップし、ＣＳＳを適用するという問題はあるが、普通の記事は定型的に処理すればいいから、そんなに面倒ではない（はずだ。）。しかし実際はどうしてこんなに面倒なのか。
人間が相手だと、約束事は厳密なものではないし、大方それに従っていれば、あとは相手方が「善解｣してくれる。しかしコンピューターが相手だと、約束を１００％知って理解し実行しないと正しい結果はでない。今私が直面しているのは、大したたことではないのに悩ましいそういう類の話だ。
文書の作成問題
WordPressのエディターについて
WordPressのエディター（ＷＰエディター）には、「ビジュアル」と「テキスト」の２種類があるが（新しい様式も２種類あるが、旧様式で行こう。）、それぞれの段落、改行の入れ方やその他の振る舞いが微妙に異なっていて混乱する。どういう場合に、ＷＰエディターが必要になるかといえば、公開に先立ち、①外で作成しワープロ文書あるいはＨＴＭＬ文書を貼り付ける場合、②これをエディターで修正する場合、③エディターからコピーして外で修正する場合等である。
特に混乱するのは、段落、改行のタグ表示だ。これは、何が原因かといえば、Wordpressが親切心から「テキスト」での段落、改行のタグ表示を消して整形するという仕様にしたため、文書を「ビジュアル」と「テキスト」を行き来して修正すると、「テキスト」での段落、改行のタグが消えてしまい形が崩れてしまうことだ。Wordpress.org（ソフトウエア）ではプラグインをインストールすればこの問題は防げるからいいが、Wordpress.com（ブログサービス）では問題が残る。
対応策
まず外で作成した文書を貼り付ける場合は、２回のＥｎｔｅｒで段落</p><p>、が入り、１回のＥｎｔｅｒで改行<br /> が入るので、基本的にこれに従って文書を作成すること、そして「ビジュアル」でもある程度のタグの処理ができるので「ビジュアル」だけを利用することが原則だ。ただし「ビジュアル」のタグは不十分なので、何か適当なＨＴＭＬエディターを利用できないかと考えた（たとえばDreamweaverであればデザインモードをコピーすればタグの情報を保持したまま貼り付けられると思う。）。私は昨日の朝（平成２６年１２月１０日）までは、Dreamweaverを使おうと思って、さあ頑張るぞと思っていたのだが（これは使えるようになると便利だが、改訂を重ねた外国ソフトの日本語訳版ということもあって、錯綜していて分かりにくい。）、もう少し簡単な方法はないかと思い、ふとパソコンにWordpress.org（ソフトウエア）をインストールして、そちらでは使えるプラグインをインストールして「ビジュアル」の機能を拡張し、これを利用するのはどうだろうかと思いついた。
調べてみるとそのためには自分のパソコンにＸＡＭＰＰというサーバーと同じようにＰＨＰとデータベースを利用できるようにするソフト（の集団）をインストールして擬似的なサーバー環境を作り、そこにWordpressのソフトウエアやプラグインをインストールしてそれを利用すればいいようなので、それを実行してみた（これも余り分かりやすくはないが、ネット等の情報で何とかした。）。これをすると、確かにTinyMCE Advancedという「ビジュアル」を拡張できるプラグインも利用できる。たぶんワープロでテキストを作成し、ここの「ビジュアル」で必要な加工をし、Wordpress.com（ブログサービス）の「ビジュアル」に貼り付け、必要に応じて修正すれば何とかなるだろう（多分）。なおＸＡＭＰＰのコントロールパネルでＰＨＰとデータベースを起動させるのを忘れてはダメだ。
これで何とかなるだろう（多分）。見慣れない人には魔法の言語のようだろうが、初歩的な話だ。
ＣＳＳの変更
問題はややこしい
次は、ＣＳＳの適用だ。Wordpress.org（ソフトウエア）ではもちろん、Wordpress.com（ブログサービス）でもプレミアサービス（有料）でＣＳＳを変更することができる。もっともＣＳＳの変更といってもWordpressは「テーマ」で提供されている環境に少し手を加えたいだけなので、適当に済ませたいし、普通ならそんなに頭を抱えることはないのだろうが、WordpressのＣＳＳは「テーマ」で提供されていることが逆に働いて、何を変更すればいいのかが分かりにくい。「テーマ」で提供されているタイトルはどこにあるんだか、しかもどうも記事を<div>で囲って変更するだけではうまくいかないこともあるようだ。ただ私は、ＣＳＳの記述方法やセレクタについてもいい加減なので、それが原因でうまくいかない可能性もあり、困っていた。具体的には記事の中のh3（小見出し）の大きさが変えられなかった。
どうすればいいのか、WordpressやＣＳＳをキーワードにして検索していたら、Firefoxの「Firebug」を利用すればよさそうだということが分かった。具体的には、WordPress.com日本語フォーラムのＣＳＳカスタマイズという中に、asazuki508さんが「ＣＳＳカスタマイズの方法についてですが、Firefoxの「Firebug」を使って、あらかじめ、Ｗｅｂ上でＣＳＳを修正しながら、その修正内容をテキストエディタなどに貼っていき、最後にまとめてWordPress.comのCSSスタイルシートエディタに貼りつければＯＫです。重複している部分は自動的に削除・統合されますので、なりゆきで作業していっても問題ないと思います。」と書いてあるのが、これができれば導きの星だろうという気がした。Firefoxがブラウザーだというのは知っていたが、「Firebug」は初耳だったが、とにかくFirefoxと「Firebug」を探し出してインストールし、利用できる環境はできた（他のブラウザーで「Firebug」Lite版も利用できるが、うまく表示されなかった。）。
Firebugを使う
さてこれをどうするのだろう。これも最初の一歩がわからなかったが、あれこれ見たりやったりしているうちに、初心者でも次のようなことができることが分かった。まずFirefoxで変更したいページを出して、Firebugを起動し（右上にbug表示がある。）、左側のタグを「ＨＴＭＬ」にし、矢印タグを押して変更したい部分を選択する。そうすると右側の「スタイル」というタグにＣＳＳが、「累積」というタグにどういうＣＳＳが適用されていて最終的に何が適用されているかが、それぞれ表示される。そして「スタイル」にあるＣＳＳの各行にマウスの矢印を持っていくと赤丸表示になるのでクリックすると、一時的にそのＣＳＳの適用を外したり、またダブルクリックしてその内容を書き換えたりして、表示がどうなるかを確認したりすることもできる。そして気に入った表示になったらそれをコピーしてＣＳＳに貼り付ければよい。なるほどね（もう少し詳しい説明はこちら）。とにかくh3問題が解決した。あとは各ページのタイトルの修正かな。そのうち小見出しもかっこよくしよう。
遠くに
これでも遠くに来た。頭の中が整理されて嬉しい。h3問題は２年越しでの解決だ。でも文書作成が本当に大丈夫か、まだ分からない。