HTML嫌いな私が、WordPressで仕方なく覚える知識

私はWordPressでビジュアルエディタを使い、やむを得ない場合だけ、カスタムHTMLブロックでHTMLを使っています。そこで、私が使っているHTMLを備忘録としてまとめてみました。でも、本当はWordみたいな感覚で、HTMLの知識がゼロでも記事が作成できるようになって欲しいですね。

なお、私はプログラム言語Pythonの記事を書いているので、特殊文字などを使うことが多く、一般的な記事を書く場合よりも、HTMLブロックが必要なケースが多いのかもしれません。

１．タグ

私が、やむを得ずHTMLブロックで使っているタグは以下の通りです。なお、HTML5から、大幅な変更がなされていますので、ネット上の情報を収集する場合には気をつけましょう。

(1) <sub>...</sub> 下付き文字

・下付き文字であることを示すタグ

<p>H<sub>2</sub>O</p>

H₂O

(2) <sup>...</sup> 上付き文字

・上付き文字であることを示すタグ

<p>面積：10 m<sup>2</sup></p>

面積：10 m²

(3) <h2> ... </h2> 見出し

・見出しを意味するタグ
・<h1>～ < h6> 見出しの大きさに合わせて6段階で設定できる。

(4) <p> ... </p> 段落

・段落を意味するタグ
・ <p>タグで囲んだ両側で段落が変わる。
・<P>...</P>内の改行は半角スペースになる。
・等幅フォントに変換されない。(半角×2「''」→全角「”」になっったりする）
・枠で囲まれたり、色が変わったりしない。

<p>あいうえお
かきくけこ
シングルクォーテーション5個「'''''」</p>

あいうえおかきくけこシングルクォーテーション5個「'''''」

(5) <pre> ... </pre> 空白や改行などが整形済みのテキスト

・空白や改行などが既に整形済みのテキストであることを示すタグ。
・空白や改行が無視されない。
・等幅フォントになる。(半角×2「''」→全角「”」といった文字化けがない）
・枠で囲まれ、色が変わる。

<pre>あいうえお
かきくけこ
シングルクォーテーション5個「'''''」</pre>

あいうえお
かきくけこ
シングルクォーテーション5個「'''''」

(6)<code> ... </code> プログラムのソースコード

・プログラムのソースコードであることを示す。
・改行は無視される。
・等幅フォントになる。(半角×2「''」→全角「”」といった文字化けがない）
・枠で囲まれたり、色が変わったりしない。
・<code>タグで囲んだ両側は改行されない。

<p><code>あいうえお
かき</code>くけこ
シングルクォーテーション5個「<code>'''''</code>」</p>

あいうえおかきくけこシングルクォーテーション5個「'''''」

(7) <pre><code> ... </code></pre> 整形済みのソースコード

基本的に<pre>のみの場合と、基本的に同じ出力となるが、プログラムなどのソースコードを記述する場合には、だけではなく、<pre><code>とすることが推奨されている。 <pre><code>とすることで、「既に整形済み」であり、更に「プログラムのソースコード」であることを明示することができる。

<pre><code>あいうえお
かき</code>くけこ
シングルクォーテーション5個「<code>'''''</code>」</pre>

あいうえお
かきくけこ
シングルクォーテーション5個「'''''」

(8) <br> ... </br> 改行

・改行を意味するタグ。
・改行幅は「段落」よりも狭い。

<p>あいうえお</p>
<p>かきくけこ<br>さしすせそ</p>

あいうえお

かきくけこ
さしすせそ

２．WordPressの機能の、お節介な自動変換機能

WordPressのお節介な自動変換機能があり、例えば「」は全角「”」に変換されます。ワードプレスの公式オンラインマニュアル（日本語版）で「wptexturize」を検索すると、どのような記号が、どのように自動変換されるかが示されています。

詳しい説明は省略しますが、「'」、「''」、「 - 」、「--」、「---」、「...」(3連ドット) 「x」、「 (tm)」などは要注意です。半角が全角になったり、両側の半角スペースが消えたりします。いずれも、編集画面では問題なくとも、プレビューや最終表示がおかしくなります。

以下の3つは、Pythonの記事を書くときに特に困ったものです。

入力「...」（半角ドット×3）
表示「…」（全角、三点リーダー）

入力「''」（半角シングルクオーテーション × 2）
表示「”」（全角ダブルクォーテーション）

入力「"」（半角ダブルクォーテーション）
表示「”」（全角ダブルクォーテーション）

対策方法は「WordPressで引用符が自動変換されるのを<code>で止めるで説明しています。

３．特殊文字

特殊文字のエスケープシーケンス。

表示	数値文字参照	文字実体参照
半角空白
<	<	<
>	>	>
&	&	&
"	"	"
'	'	'

４．「円マーク」と「バックスラッシュ」

円マークとバックスラッシュはフォントによる表記の違いです。

(1) 円マークの表示

(2) バックスラッシュの表示

バックスラッシュでは、円マークを表示するときのような指定方法がありません。そこで、バックスラッシュで表記されるフォント「Arial」を指定します。「Arial」はWindowsでもMacでもフォントが標準で用意されているため、バックスラッシュで表示したい時には便利です。

５．Prism Syntax Highlighter

コードを美しく表示するプラグインは、「Prism Syntax Highlighter」を使用しており、HTMLブロックを用いて記述します。なお、「Prism Syntax Highlighter」では、特殊文字を表示するためにエスケープシーケンスを使う必要があります。

ただ、「HTML」「特殊文字」「変換」というキーワードで検索すれば、特殊文字を自動で変換してくれるサイトがたくさん見つかりますので、それほど大変な作業ではありません。

(1) HTML（行数表示）

HTMLブロックでの記述内容：code class="language-markup"とする

<pre class="line-numbers"><code class="language-markup">
&lt;p&gt;ここにHTMLのコードを記述します。&lt;/p&gt;
</code></pre>

出力：

<p>ここにHTMLのコードを記述します。</p>

(2) Python（行数表示）

HTMLブロックでの記述：code class="language-python"とする

<pre class="line-numbers"><code class="language-python">print(&apos;aaa&apos;)
print(&apos;bbb&apos;)</code></pre>

出力：

print('aaa')
print('bbb')

６．解答を折りたたんで隠す

折りたたんで隠す方法は、Pythonの記事で例題の解答を隠すために、どうしても欲しい機能でした。自分には難しかったのですが、プラグインを導入せずに実現したかったので、detailsを使うことにしました。

折りたたんで隠すdetailsは、HTML 5.1から導入されました。Google Chromeは対応していますが、HTML5.1に対応していないブラウザでは、隠したい部分が最初から表示されてしまいます。

(1) テキストを隠す

以下、折りたたんで隠すサンプルコードです。HTMLブロックに記述します。12行目の部分に隠しておきたいテキストを記述します。

なお、点線枠囲みが不要な場合には、8, 9, 14行目を削除します。

<details>
<!--表示・非表示の切り替え部分のテキスト設定-->
<summary><span style="color: #0000ff; text-decoration:underline;">
解答の表示・非表示の切り替え </span></summary>

<p>※ブラウザによっては最初から表示されてしまいます。(Google Chrome推奨)</p>

<!--枠囲みの書式設定-->
<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; border-radius: 5px; background-color: #ffffff;">

<!--次の行から、</div>までの間に隠したい記事を記述する-->
<p>テキスト１</p>

</div>
</details>

以下のような表示になります。クリックしてみて下さい。

解答の表示・非表示の切り替え

※ブラウザによっては最初から表示されてしまいます。(Google Chrome推奨)

テキスト１

なお、画像を隠したい場合は、同じように12行目の部分に画像を読み込むコードを記述します。また、画像を読み込むコードを知らない場合は、以下の方法で対応しました。

　(a) ブロックエディタで画像を読み込む。
　(b) コードエディタに切り替える。
　(c) コードエディタで画像ブロックのコードを探し、上下の1行を除いた部分をコピーする。
　(d) 再びブロックエディタに戻り、12行目に貼り付ける。

(2) 具体的な書式をstyle.cssに移動

HTML5では、フォントなどの書式設定はできるだけ、CSSファイルで行うのが基本のようです。CSSファイルを編集するのは怖い気がしますが、慣れる必要があるのかもしれません。

まず、CSSファイルに自分の好みの書式を記述し、名前をつけます。CSSファイルの開き方は以下の通りです。

WordPressの「外観」→「テーマエディタ」→右上の「編集するテーマを選択」（私の場合はCocoon Child)→スタイルシート(style.css)の選択

そして、CSSファイルに以下のサンプルコードをコピペします。サンプルコードでは 4行目で「解答の表示・非表示の切り替えの部分」の書式の名前を「details_summary」とし、 10行目で「点線で囲む解答の部分」の書式の名前を「details_answer」としました。それぞれ、勝手につけた名前です。

/* detailsのsummary部分の書式 */
/* 文字色青、アンダーライン */
.details_summary {
  color: #0000ff;  /*文字の色、#0000ff:青 */
  text-decoration:underline;  /*アンダーライン*/
}

/* detailsの折りたたみ部分の書式 */
/* 黒に近いグレーの破線で囲む（コーナーを丸める） */
.details_answer {
  padding: 10px; /* 領域内の上下左右のスペース */
  margin-bottom: 10px; /* 領域間の下側スペース */
  border: 1px dashed #333333;  /* 1px:線の太さ、dashed:破線、#333333:黒に近いグレー */
  border-radius: 5px;  /*コーナーを丸める*/
  background-color: #ffffff;  /* 背景色、#ffffff:白 */
}

次に、コードエディタのHTMLブロックに以下のサンプルコードをコピペします。4行目と10行目で、 CSSファイルで指定した書式「details_summary」と書式「details_answer」を呼び出しています。13行目の「テキスト１」の部分を必要なテキストに書き換えれば完成です。

<details>
<!--表示・非表示の切り替え部分のテキスト設定-->
<!--「summary」「枠囲み」の書式は、Cocoon Childのstyle.cssで設定-->
<summary><span class="details_summary">
解答の表示・非表示の切り替え </span></summary>

<p>※ブラウザによっては最初から表示されてしまいます。(Google Chrome推奨)</p>

<!--枠囲みの書式設定-->
<div class="details_answer">

<!--次の行から、</div>までの間に隠したい記事を記述する-->
<p>テキスト１</p>

</div>
</details>

上記コードでも、以下のように同じ結果になります。クリックしてテキストを開閉してみてください。

解答の表示・非表示の切り替え

※ブラウザによっては最初から表示されてしまいます。(Google Chrome推奨)

テキスト１

CSSファイルで指定する利点として、CSSファイルの書式を変更すると、全ての記事に変更が反映される点です。「やっぱり、こっちの方がよかったな・・・」と思っても、後から全ての記事で変更するのは大変です。

慣れるまでは大変（？）ですが、覚える価値はあるのではないかと思います。