WordPressの記事のマークアップとCSSの備忘録

どうしてこんなに面倒なのか

WordPressは「テーマ」があるお陰で、ホームページ全体のレイアウトや、メニューの作成に全く力を注ぐ必要がなくなったので、作成者は記事を書いてエディターに貼り付けて「公開」すればいいだけだ。ただ、ホームページ作成上の約束として、テキストをタグでマークアップし、CSSを適用するという問題はあるが、普通の記事は定型的に処理すればいいから、そんなに面倒ではない(はずだ。)。しかし実際はどうしてこんなに面倒なのか。

人間が相手だと、約束事は厳密なものではないし、大方それに従っていれば、あとは相手方が「善解」してくれる。しかしコンピューターが相手だと、約束を100%知って理解し実行しないと正しい結果はでない。今私が直面しているのは、大したたことではないのに悩ましいそういう類の話だ。

文書の作成問題

WordPressのエディターについて

WordPressのエディター(WPエディター)には、「ビジュアル」と「テキスト」の2種類があるが(新しい様式も2種類あるが、旧様式で行こう。)、それぞれの段落、改行の入れ方やその他の振る舞いが微妙に異なっていて混乱する。どういう場合に、WPエディターが必要になるかといえば、公開に先立ち、①外で作成しワープロ文書あるいはHTML文書を貼り付ける場合、②これをエディターで修正する場合、③エディターからコピーして外で修正する場合等である。

特に混乱するのは、段落、改行のタグ表示だ。これは、何が原因かといえば、Wordpressが親切心から「テキスト」での段落、改行のタグ表示を消して整形するという仕様にしたため、文書を「ビジュアル」と「テキスト」を行き来して修正すると、「テキスト」での段落、改行のタグが消えてしまい形が崩れてしまうことだ。Wordpress.org(ソフトウエア)ではプラグインをインストールすればこの問題は防げるからいいが、Wordpress.com(ブログサービス)では問題が残る。

対応策

まず外で作成した文書を貼り付ける場合は、2回のEnterで段落</p><p>、が入り、1回のEnterで改行<br /> が入るので、基本的にこれに従って文書を作成すること、そして「ビジュアル」でもある程度のタグの処理ができるので「ビジュアル」だけを利用することが原則だ。ただし「ビジュアル」のタグは不十分なので、何か適当なHTMLエディターを利用できないかと考えた(たとえばDreamweaverであればデザインモードをコピーすればタグの情報を保持したまま貼り付けられると思う。)。私は昨日の朝(平成26年12月10日)までは、Dreamweaverを使おうと思って、さあ頑張るぞと思っていたのだが(これは使えるようになると便利だが、改訂を重ねた外国ソフトの日本語訳版ということもあって、錯綜していて分かりにくい。)、もう少し簡単な方法はないかと思い、ふとパソコンにWordpress.org(ソフトウエア)をインストールして、そちらでは使えるプラグインをインストールして「ビジュアル」の機能を拡張し、これを利用するのはどうだろうかと思いついた。

調べてみるとそのためには自分のパソコンにXAMPPというサーバーと同じようにPHPとデータベースを利用できるようにするソフト(の集団)をインストールして擬似的なサーバー環境を作り、そこにWordpressのソフトウエアやプラグインをインストールしてそれを利用すればいいようなので、それを実行してみた(これも余り分かりやすくはないが、ネット等の情報で何とかした。)。これをすると、確かにTinyMCE Advancedという「ビジュアル」を拡張できるプラグインも利用できる。たぶんワープロでテキストを作成し、ここの「ビジュアル」で必要な加工をし、Wordpress.com(ブログサービス)の「ビジュアル」に貼り付け、必要に応じて修正すれば何とかなるだろう(多分)。なおXAMPPのコントロールパネルでPHPとデータベースを起動させるのを忘れてはダメだ。

これで何とかなるだろう(多分)。見慣れない人には魔法の言語のようだろうが、初歩的な話だ。

CSSの変更

問題はややこしい

次は、CSSの適用だ。Wordpress.org(ソフトウエア)ではもちろん、Wordpress.com(ブログサービス)でもプレミアサービス(有料)でCSSを変更することができる。もっともCSSの変更といってもWordpressは「テーマ」で提供されている環境に少し手を加えたいだけなので、適当に済ませたいし、普通ならそんなに頭を抱えることはないのだろうが、WordpressのCSSは「テーマ」で提供されていることが逆に働いて、何を変更すればいいのかが分かりにくい。「テーマ」で提供されているタイトルはどこにあるんだか、しかもどうも記事を<div>で囲って変更するだけではうまくいかないこともあるようだ。ただ私は、CSSの記述方法やセレクタについてもいい加減なので、それが原因でうまくいかない可能性もあり、困っていた。具体的には記事の中のh3(小見出し)の大きさが変えられなかった。

どうすればいいのか、WordpressやCSSをキーワードにして検索していたら、Firefoxの「Firebug」を利用すればよさそうだということが分かった。具体的には、WordPress.com日本語フォーラムのCSSカスタマイズという中に、asazuki508さんが「CSSカスタマイズの方法についてですが、Firefoxの「Firebug」を使って、あらかじめ、Web上でCSSを修正しながら、その修正内容をテキストエディタなどに貼っていき、最後にまとめてWordPress.comのCSSスタイルシートエディタに貼りつければOKです。重複している部分は自動的に削除・統合されますので、なりゆきで作業していっても問題ないと思います。」と書いてあるのが、これができれば導きの星だろうという気がした。Firefoxがブラウザーだというのは知っていたが、「Firebug」は初耳だったが、とにかくFirefoxと「Firebug」を探し出してインストールし、利用できる環境はできた(他のブラウザーで「Firebug」Lite版も利用できるが、うまく表示されなかった。)。

Firebugを使う

さてこれをどうするのだろう。これも最初の一歩がわからなかったが、あれこれ見たりやったりしているうちに、初心者でも次のようなことができることが分かった。まずFirefoxで変更したいページを出して、Firebugを起動し(右上にbug表示がある。)、左側のタグを「HTML」にし、矢印タグを押して変更したい部分を選択する。そうすると右側の「スタイル」というタグにCSSが、「累積」というタグにどういうCSSが適用されていて最終的に何が適用されているかが、それぞれ表示される。そして「スタイル」にあるCSSの各行にマウスの矢印を持っていくと赤丸表示になるのでクリックすると、一時的にそのCSSの適用を外したり、またダブルクリックしてその内容を書き換えたりして、表示がどうなるかを確認したりすることもできる。そして気に入った表示になったらそれをコピーしてCSSに貼り付ければよい。なるほどね(もう少し詳しい説明はこちら)。とにかくh3問題が解決した。あとは各ページのタイトルの修正かな。そのうち小見出しもかっこよくしよう。

遠くに

これでも遠くに来た。頭の中が整理されて嬉しい。h3問題は2年越しでの解決だ。でも文書作成が本当に大丈夫か、まだ分からない。