WordPressでの編集

WordPress移行用 HTMLの超基本的な考え方

　このページでは、以前HAIK(QHM)を使っていた方を視野に入れて、WordPress編集の基本を説明しました。
　HAIK(QHM)を使っていなかった方でも、そんなに読む支障にはならないはずなので、「何かそんな指定の仕方があったんだ」くらいに、HAIKに触れたくだりは、読み流していただければと思います。

　ワープロを思い浮かべてください。QHMでいう所のおまじない（タグ）など一切表示されずに、アンダーラインを引きたいところを範囲指定して、ボタンを押すと、アンダーラインが引けます。
　でもこれをワープロのデータとして取り扱うことを考えると、アンダーラインを引いた文字がそのまま図形データとして保存されるわけではありません。普通の文字テキストが続いている中で、「ここはアンダーラインが引かれているよ」という印がつけられて保存されているだけです。例えば、こんな感じです。

　これがQHMのおまじないなら

ここは&deco(u,,,){アンダーライン};

このようになっていたところでした。
　結局、表記の仕方は少し変わっていても、「ここから制御をしますよ」という記号があり、「ここまで制御をしますよ」という記号で、その制御が終わる、その仕組みは同じことです。そうやって書かれたデータが、Internet ExplorerなどのWEBブラウザでは、ワープロの編集画面と同じように、きれいに成形された形で表示されるのです。
　普通ホームページを作るのによく使われる、この制御記号のことをHTMLといいます。WordPressの編集画面で時々使うのもこのHTMLです。
　しかし、HTMLの制御記号を覚えなければならないといっても、ホームページの全体レイアウトを構成するような面倒くさい部分は、WorPressがほとんど勝手にやってくれますから、ホームページの編集を行う上で我々が関知しなければならない制御タグの範囲は、割合限られたものだけです。
　ですから、WorPressを一度設定してしまうことが出来れば、それらの制御用のタグ(HTML)を、必要になったところから覚えていけば、それで十分です。
　QHMから移行して、WordPressを使う上で必要になるタグは、それほど多くはありません。これまでQHMをお使いでしたら、「こんな用途のタグがあるはずだ」と目星を立てて、HTMLの詳しい解説書を斜めに探してゆけばそれでよいのです。

いくらかの編集ボタンはある

　編集画面には、QHMにもWordPressにも、リンクの作成など、いくらかの編集ボタンがあります。しかしこれも、このボタンを操作すると、上のようなタグが挿入されているだけですから、ボタンが少ないからと言ってそれほどあわてる必要はありません。

基本は、始まりと、終わりのタグがセットで

　例えば、QHMのタイトルは、

*タイトル　　**タイトル２
<h2>タイトル</h2>
<h3>タイトル</h3>

上のように、最初のタグしかありませんでした。QHMの場合、ブロック要素の時には、最初のタグしか書きません。しかし、HTMLの場合は、このようにタイトルの場合でも、きちんと終了宣言をします。
　この、はじめと終了のタグがきちんと呼応していないと、ページの表示がでたらめに崩れてしまいます。
　そのような場合は、ほとんどがこの呼応関係の誤りですから、ソースをしっかり見て、落ち着いて修正してください。WordPressのシステム自体が壊れているわけではありませんので。
　タイトルは、QHMより少しだけ記述が多くなりますが、タイトルを入れたいところに以前の記述をコピーして、中身の文字だけを書きかえればよいので、たいして難しいことでもないでしょう。

きちんと入れ子構造になるように

　タグはきちんと入れ子構造になるように順番を守らないといけません。

<b>これは<u>テスト表示<b>です</u>
これはテスト表示です

　こんな、入れ子構造になっていない例を試してみました。この場合は思った通りの動作をしてくれているようですが、ブロックで範囲指定をする場合、遅く指定したものから早く終了させていく、入れ子構造にすることが基本です

改行のタグ

　改行のタグは <br> です。しかし、これはWordPressのエディターを使って、編集している場合には、テキスト編集画面の場合でも、画面上で改行をしておけば、この記号を入れなくても、WordPressが勝手にこの記号を入れてくれているようです。
　しかし本来、純粋にHTMLのみでホームページを作成する場合には、元データでいくら改行してあっても、それはスペースと同じ扱いなので、改行のタブを明示的に入れないと思った通りの改行にはなりません。
　WordPressの場合は、本文の文章中の改行は、1行だけはそのまま改行になりますが、元原稿をいくら改行してあっても、表示される時には、1行だけの改行に圧縮されてしまいます。そのような場合に、もっと多くの改行を入れたければ、 <br>を明示的に入れなければなりません。
　WordPressを使っていて、特にブロックエディターなどで、もし思った通りの表示にならない場合には、このようなHTML本来の表示がどうなっているのかを調べてみる必要があるかもしれません。
　また、純粋なHTMLなら、普通は、<P>を使って、段落の指定をします。でもこれも、WordPressが基本勝手にやってくれますから、我々はあまり意識しなくても構いません。
　しかし、ビジュアル画面編集を使っていて、不必要に表示画面の間隔があくなど、意図しない表示結果になっている場合には、不要な段落 <P></P> が挿入されている場合もあるかもしれません。そのような時には、テキスト画面で見てみると原因がわかることがあります。
　ビジュアル画面は、とても出来が悪いワープロを使っているようなものですから、私は普段からテキスト画面を使っています。

WorPressはHTMLのタグを普通に入れて使える

　QHMでは、

#html{{
　(ここにHTMLタグを挿入)
}}

としてしか、HTMLの記述をすることができませんでしたが、WorPressはHTMLのタグをベタ打ちの文章の中に普通に入れて使えます。これは自由度があってとても便利です。

スタイルシートは便利

　ホームページのスタイルは、普通css(スタイルシート)というファイルに一括指定して、これを使います。例えば、「<h2>のタイトルは、こういうデザインにしてね」というのをcssに指定しておけば、実際使う時には、スタイルを一切指定せずに<h2>と書くだけで、そのスタイルが適用されます。
　このcssを使う利点は、デザインを変えたくなった時に、このcssを書き換えるだけで対応できることです。もしこのCSSを使わず、<h2>が出てくるたびにスタイルを指定していると、デザインを変えたくなると、すべてのページの記述を書き換えなければならなくなります。
　例えば、私のこのホームページでは、見出しの設定は別ページのようにしています。

なるべくテーマのcssはいじらない

　スタイルシート(css)だけではありませんが、テーマは、なるべくそのまま改造せずに使う方が楽です。テーマは割合頻繁に更新するので、これを書き換えて使わなければならないとすると、テーマを更新するたんびに、これを書き換えていかなければなりません。これは結構大変です。
　ですから、cssを書き換える場合でも、「独自CSSやJavascript追加」のやり方で、追加のcssで指定します。ここで書いたcssは各ページにそのまま貼り付けられ、WordPressに元々記述してあったデザインよりも、後で宣言されるので優先されます。