2015年5月10日

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

phrase-express-registration-300

こんにちは! ヨス(@yossense)です。

今回はかなーりマニアックです。PhraseExpressを使っていて、HTML5でWEBサイトを運営している人以外は全く関係ない内容となっております。

PhraseExpressでのHTML5のコード登録例

私はHTML5でブログのコーディングをしているのですが、その際にPhraseExpressがものすごく役に立っています。というかPhraseExpressはコーディングぐらいしか使っていないです。

今回はそんな私がPhraseExpressを使って、HTML5のコードをどんな風に登録しているかを紹介します。

b / strong / em / p タグ

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

カーソルが「様」の前に来たぞ!!
カーソルが「様」の前に来たぞ!!

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

1b / strong / emタグ

まずは<b><strong><em>です(「b」「strong」「em」の使い分けについて)。

下の例ですが、上側が登録している文字です。で、下側のHTMLタグが、出力されるコードです。もちろん、あくまで私のやっている例ですので、やりやすいように改造してください。

b;
<b>{#cursor}</b>
st;
<strong>{#cursor}</strong>
em;
<em>{#cursor}</em>

全部、始まりタグと閉じタグの間にカーソルが来るようになっています。

2pタグ

段落タグも同じく、カーソルが始まりタグと閉じタグの間にきます。

p;
<p>{#cursor}</p>

3h2 / h3タグ

<H2><h3>ももちろん同じように登録しています。

h2;
<h2>{#cursor}</h2>
h3;
<h3>{#cursor}</h3>

こちらも同じ要領です。

rubyタグ

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

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

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

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

入力時に「rubyタグ」のポップアップウィンドウが出てくる
入力時に「rubyタグ」のポップアップウィンドウが出てくる

citeタグ

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

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

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

入力時に「citeタグ」のポップアップウィンドウが出てくる
入力時に「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>」みたいに面倒なこと書いているんですよ。

1Altとのショートカット

alt;
<kbd class="short_cut"><kbd>Alt</kbd>+<kbd>{#cursor}</kbd></kbd>

2Ctrlとのショートカット

ctrl;
<kbd class="short_cut"><kbd>Ctrl</kbd>+<kbd>{#cursor}</kbd></kbd>

3Shiftとのショートカット

shift;
<kbd class="short_cut"><kbd>Shift</kbd>+<kbd>{#cursor}</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="http://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>

さて、今回はかなり偏った内容でしたがいかがでしたか?

もちろん効率化おたくの私はこれの何倍もの登録をして使いまくっています。PhraseExpressを使うだけでいろんな苦痛から解放されます。参考になれば幸いです。なお、Macの方はTextExpanderが同じ内容です。コードは違いますが、この記事も参考になると思います。

この記事が気に入ったら
「いいね!」で情報GET!

Twitterでヨスをフォローしよう!

この記事のシェアはこちら♪

※ 微妙だったら、そっと閉じるか、ほかの記事を見ていただけるとうれしいです!