【 PhraseExpress使い方: 4 】HTMLでの登録例

b / strong / em / p タグ

まずは基本中の基本です。PhraseExpressの基本である{#cursor}をHTMLタグで挟む方法です。

上のアニメーション画像のように、文字を入力したあとのカーソルの位置をこちらで指定できるんですね。これを利用するんです。

rubyタグ

そして<ruby>タグです。当たり前ですが、読みにくい漢字の読みがなを入れたいときに使っています。

例えば「神竜(シェンロン)」と表示したいときです。

ruby;

<ruby>{#formeditbox -text 漢字 -single -hint 漢字を入れて下さい。}<rp>(</rp><rt>{#formeditbox -text 読みがな -single -hint 読みがなを入れて下さい。}</rt><rp>)</rp></ruby>{#cursor}

これをやると下のようなウィンドウが入力時に出てきます。

citeタグ

<cite>は、映画などの作品タイトルに使います。例えば『アナと雪の女王（Frozen）』のように。

cite;

{#form -text CITEタグ -width 500}『<cite>{#formeditbox -text 英語タイトル -single}{#formeditbox -text 日本語タイトル -def （） -single}</cite>』

こちらのコードを使うと、以下のようなウィンドウが出ます。「日本語タイトル」のところは最初から「カッコ」が入っているようにしていて、不要な場合は削除する感じです。あと、自動的に「二重かぎかっこ」に挟まれる仕様です（カッコの使い分けについても参考に）。

ul / ol / dlタグ

<ul>、<ol>、<dl>も頻繁に使っています。こちらもウィンドウを埋めていく仕様です。

ul;

{#form -text ULタグ -width 500}<ul>
<li>{#formeditbox -text 1 -single}</li>
<li>{#formeditbox -text 2 -single}</li>
<li>{#formeditbox -text 3 -single}</li>
<li>{#formeditbox -text 4 -single}</li>
<li>{#formeditbox -text 5 -single}</li>
</ul>

ol;

{#form -text OLタグ -width 500}<ol>
<li>{#formeditbox -text 1 -single}</li>
<li>{#formeditbox -text 2 -single}</li>
<li>{#formeditbox -text 3 -single}</li>
<li>{#formeditbox -text 4 -single}</li>
<li>{#formeditbox -text 5 -single}</li>
</ol>

dl;

{#form -text 定義タグ -width 500}<dl>
{#formtext -text 定義タグ1}{#formseparator}<dt>{#formeditbox -text DT1 -single}</dt>
<dd>{#formeditbox -text DD1}</dd>
{#formtext -text 定義タグ2}{#formseparator}<dt>{#formeditbox -text DT2 -single}</dt>
<dd>{#formeditbox -text DD2}</dd>
{#formtext -text 定義タグ3}{#formseparator}<dt>{#formeditbox -text DT3 -single}</dt>
<dd>{#formeditbox -text DD3}</dd>
</dl>

kbdタグ

私はブログで扱っているネタ上、結構<kbd>タグを多用します。

例えばAlt+Zのように。コードで見ると「<kbd class="short_cut"><kbd>Ctrl</kbd>+<kbd>Z</kbd></kbd>」みたいに面倒なこと書いているんですよ。

どれもスタイルシートの「class=""」で「class="short_cut"」を付けています。

codeタグ

<code>タグもこのブログではよく使われます。今使った「<code>」ですね。

これですがHTMLで見ると「<code>&lt;code&gt;</code>」ってなっているんですよ。実はHTMLタグの表記で使っている「 < 」や「 > 」の表記がネックなんです。

こいつらをWEBで正しく表記するためにHTML特殊文字の「&lt;」や「&gt;」で表記するため、PhraseExpressで登録していないと気が滅入ります。

code;

<code>&lt;{#cursor}&gt;</code>

dfnタグ

そして「専門用語」を使い、その説明と関連付ける<dfn>タグです。

dfn

{#form -text CITEタグ -width 500}<p>「<dfn><abbr title="{#formeditbox -text 正式名称は? -single}">{#formeditbox -text 専門用語は? -single}</abbr></dfn>」は、{#formeditbox -text その用語の説明文は?}のことです。</p>

<abbr>タグ内にある「title=""」内でその専門用語の「正式名称」を入れてやります。

「ポケモン」だと「ポケットモンスター」ですね。

figureタグ

私は画像はほとんど<figure>を使っています。1個だけ画像を使うときはこんな感じで登録しています。

<figure>
<img src="https://yossense.com/wp-content/uploads/{#clipboard -paste}" alt="">
<figcaption>{#cursor}</figcaption>
</figure>

画像名（＝スラッグ＋連番）をクリップボードにコピーしておいて、このコードを入れると、画像名（「src=""」）に自然に入ります。

1つだけ面倒なのが、<figcaption>と「alt=""」ですね。同じ文言を入れているのですが、コピペでやっています。これも1つを入れると自動的にもう1個も入るように自動化したいんですけどね。

コメントアウトタグ

コメントアウトをHTMLやCSSの見出しに使うときの場合です。

<!-- //////// {#cursor} ///////// -->

/* {#cursor}
-------------------------------------------------------------- */

意外と重宝しますよー。

冒頭・最後の文章

このブログの冒頭の挨拶と最後のまとめの部分です。

hello;

<p>こんにちは! ヨス（<a href="https://twitter.com/yossense" target="_blank" class="exit" rel="nofollow">@yossense</a>）です。</p>

<p>{#cursor}</p>

<!--more-->

matome;

<div class="addup">
<p>{#cursor}</p>

</div>