HTMLコーディングで役立つ PhraseExpressの活用法

今回は、

「htmlコーディングで役立つPhraseExpressの活用法 」

についてお答えしていきたいと思います。

この記事ではこんな悩みを持った人に向けて書いています。

↓

この記事を読むメリット

• HTMLコーディングに役立つ、登録しておくべきフレーズが知れる。
• 多少のマクロ関数（{#~} ←こういった奴）が知れる。
• 開始タグと終了タグを同時に囲む方法も知れて、効率的にコーディングができる。
• 登録したフレーズが多くなりすぎた際の、対策方法が知れる。

htmlコーディングで使える最低限登録すべきフレーズ

ここでは、「記事執筆した後に→HTMLコーディング」する方、つまりシングルタスク的にやりたい人向けに書いています。

それでは、HTMLコーディングで登録必須なフレーズと、どんな感じで登録しているか紹介していきます。

※説明の仕方は以下の通り。

• 「どんな感じで出力されるのか？」
  →アニメーションで理解。
• フレーズを登録する画面をもとに、➀~➃の設定を表でまとめました。
  ※➂Hotkeyは設定しません。
  ➄のAutotextのオプションは常に、「Execute immediately（すぐに実行）」に設定しましょう。

見出しタグ

開始タグと終了タグで囲むようにしました。

<h2>{#end}</h2>

<h3>{#end}</h3>

<h4>{#end}</h4>

タグ内にある「{#end}」は、「キーボードのEnd」に相当します。
以下のように出力されています。

➀~➂は出力される順番です。

段落（class指定を楽にできる）

1段落を示すタグですね。
class名の入力がすぐにできるようにしました（<p|←ここにカーソルが来るようにした）。

<p>{#end}</p>{#home}{#right}{#right}

入力する際の注意点は、必ず1段落が1行になるようにエディタを調整しましょう。

以下、1行に1段落となるように、対策を書いておきました（横1列に<p>～</p>のセットが1つという意味）。

対策（Windowsメモ帳の場合）

• Windowsのメモ帳→「右端で折り返す」の☑を外す


右端を折り返さない

• ウインドウを最大化して、コーディング


ウインドウを最大化させる

• 既定の倍率に戻す
  （Ctrl + ０）


既定の倍率にする

改行

<br />{#cursor}

もしかしたら、必要ないかもです。
改行するなら、
「Shift + Enter」もありかなと。

リスト系

リストは、フォーム版と後からコーディング版の2つを作成しました。

<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>
    <li>{#formeditbox -text リスト6 -single}</li>
    <li>{#formeditbox -text リスト7 -single}</li>
</ul>

<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>
    <li>{#formeditbox -text リスト6 -single}</li>
    <li>{#formeditbox -text リスト7 -single}</li>
</ol>

{#form -text  listbox -width 400}    <li>{#formeditbox -text リスト -single}</li>
		

<ul>
    <li>{#del}{#end}</li>{#right}    <li>{#del}{#end}</li>{#right}    <li>{#del}{#end}</li>{#right}    <li>{#del}{#end}</li>{#right}    <li>{#del}{#end}</li>{#right}

</ul>

<ol>
    <li>{#del}{#del}{#end}</li>{#right}    <li>{#del}{#del}{#end}</li>{#right}    <li>{#del}{#del}{#end}</li>{#right}    <li>{#del}{#del}{#end}</li>{#right}    <li>{#del}{#del}{#end}</li>{#right}

</ol>

<li>{#del}{#END}</li>{#right}{#cursor}

<li>{#del}{#del}{#END}</li>{#right}{#cursor}

※すみません、「li（ul後で追加）」と「li（ol後で追加）」にある<li>の手前に半角スペース4つ入れてください🙇

1.フォーム版

フォーム版は、執筆とコーディングを同時にやるなら、かなり使えるかなと思います。

2．後からコーディング版

後からコーディング版は、以下のような仕組みで作動しています。

class、spanタグ

 class="{#cursor}"

<span class="{#cursor}">

</span>

※すみません。class指定の「class=""」の先頭に半角スペースを入れてください。
「  class=""」←こんな感じ。

class指定は「""（クォーテーションマーク）」の間にカーソルが来るようにしています。
割と、いろんなところでデザインを施す際に使うので便利。

外部・内部リンク

ブログを書いていると、参照したくなる記事が出てきますよね。そういう時に使います。

上記のアニメーションでは、マウス操作多めです。ショートカットを多用するともうちょい早くなります。

<a href="{#formeditbox -text URL -single}" target="_blank" rel="nofollow noopener noreferrer">{#formeditbox -text 題名 -single}</a>

<a href="{#formeditbox -text URL -single}" target="_blank" rel="noopener noreferrer">{#formeditbox -text 題名 -single}</a>

<a href="{#insertclipboard}" target="_blank" rel="nofollow noopener noreferrer">{#input -題名 -}</a>

フォーム内で、「URL」と「ページタイトル」を入力しておけるようにしました。

なお、コピペ版の外部リンクも悪くないので、貼っておきました。
もしかすると、コピペ版の方が楽かもしれない。
アニメだとこんな感じ↓

※外部リンク（コピペ版）の使い方

• 「あ、この記事参考になるな~。」
• そのサイトのURLをコピー
  （Ctrl +L→Ctrl + C」
• 載せたいエディタにて、Autotextを入力。
  すると、{#insertclipboard}によって、先にURLは出力される。
• 再び参照したいサイトにフォーカスして、ページ名をコピー
  （Ctrl + S →Ctrl +C）
• inputのフォームに貼り付け
  （Ctrl +V）
• Tab→Enterでページ名も出力される。

コメント系（HTML・CSS）

コーディングしていると、コメントを残しておきたい時こともあるかと思います。

<!-- {#formeditbox -text htmlコメント-} --{#cursor}>

/*{#formeditbox -text CSSコメント-}***{#cursor}/

どちらもフォームで入力できるようにしました。

特殊文字

<{#cursor}

>{#cursor}

Web系の技術系記事を書く際に、使うかもです。

続いて、私がブログのコーディングで使っているアレンジフレーズです。

【私のブログ仕様】コーディングで使えるアレンジフレーズを紹介

※CSSが分からないと利用できそうにないので、CSSもコピペできるようにしておきました。

文字装飾（アイコン）

装飾後のイメージ

<p class="frown"><i class="fas fa-frown"></i>{#end}</p>

<h2>と</h2>で囲む要領と同じで、{#end}のマクロ関数を使っています。

必要なCSS

/***<p class="frown"><i class="fas fa-frown"></i>気になる点</p>*******/
i.fa-frown{
    font-family: "Font Awesome 5 Free";
    content: "\f118";
    padding-right: 5px;
    font-weight: 900;
    color: #ff0055;
}

.frown{
    color:#ff0055;
    font-weight:700;
    text-decoration:none;
    border-bottom:solid 2px #ff0055;
    margin-bottom:15px !important;
}

※Font Awesomeのアイコン表示には、必要ファイルをダウンロードして関連付けさせるか、CDNを利用する必要があります。
参考：【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう
やはり、サルワカの記事が分かりやすいですね。感謝🙇‍

文章囲み文

装飾後のイメージ

{#form -text  infobox -width 400}<div class="kakomib">
    <div class="dainfo fas-fa-info-circle">{#formeditbox -text 説明項目 -single}</div>
    <p>{#formeditbox -text 説明内容-}</p>
</div>

2つのフォームで、➀説明事項（タイトル）と➁説明内容を入力できるようにしました。

必要なCSS

/*もしかしたら、かもしれない、※系文のCSS*/
.kakomib {
    position: relative;
    border: solid 2px #6C9FCE;
    margin-top: 1em;
    margin-bottom: 2em;
    padding: 0.2em 1em 0.5em;
}


.dainfo {
    font-weight: 600;
    color: #6C9FCE;
    font-size: 1.1em;
    background: #fafafa;
    padding: 0 .5em;
    position: absolute;
    top: -.5em;
    line-height: 1;
    margin-left: .5em;
}



.fas-fa-info-circle:before{
  content:"\f05a";
  font-size:25px;
  font-family: FontAwesome;
  padding-right : 5px;/*文字との隙間*/
  color: #6C9FCE;/*アイコンの色*/
}

吹き出し系

装飾後のイメージ

{#form -text  fukibox -width 300}<!--★ふきだし左-->
<div class="tb-m clearfix">
      <figure class="ma0 ffukii f-flol">
        <div class="fi-pr">
{#formeditbox -text 画像 }
        </div>
        <figcaption class="fn">{#formeditbox -text ネーム }</figcaption>
      </figure>
  <div class="sfuki sfuki-flor sfuki-tr">
   <p>{#formeditbox -text 吹き出し内容 }</p>
  </div>
</div>
<!--Finふきだし左-->

こちらもごちゃごちゃしていますが、➀画像、➁画像の名前、➂吹き出しの内容といった感じで、フォーム入力できるようにしました。

必要なCSS

/*吹き出しbox全体の上下余白<div class="tb-m">*/
.tb-m{
margin-top:1.5em;
margin-bottom:1.5em;
}

/*吹き出しimgがフロートで重なり防止システム*/
.clearfix:before {
    display: inline-table;
}

.clearfix:after {
    content: "";
    clear: both;
    display: block;
}


/*フィギュアタグ→「文章」、「画像」、「図」などを囲うタグ*/
figure{
    -webkit-margin-before: 0;
    -webkit-margin-after: 1.5em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
}

figure{
    display:inline-block;
}


/*吹き出しのimgのプロパティ <figure class="f-flol ma0 ffukii">~</figure>*/
.f-flol{/*fukidasi float left*/
    float:left;
}

.ma0{/*margin全て０*/
    margin:0;
}

/*figure fukidasi img*/
.ffukii{
    width:18%;
    border:none;
    min-width:60px;
}


/*<div class="fi-pr">*/
.fi-pr{
    padding-right:10px;
/*吹き出し　imgの余白系調整*/
}

/*吹き出しimg下の、ネーム設定<figcation class="fn">*/
.fn{
    background:0 0;
    font-size: 0.6em;
    line-height:1.4;
    font-weight:700;
}

figcaption{
    text-align:center;
    padding:8px;
}

/*s吹き出しのプロパティ<div class="sfuki-flor sfuki sfuki-tr ">*/
.sfuki-flor{
    float:right;
    /*吹き出しのfloat-rightに*/
}


/*s吹き出しのプロパティ*/
.sfuki{
    max-width: calc(100% - 60px);
    width: 80%;
    border: 3px solid #4285f426;
    background-color: #fff;
    color: #444;
    padding: 2.5%;
    position: relative;
    border-radius: 10px;
}

/*sfuki内の<p>～</p>の文字サイズ*/
.sfuki p{
    font-size:105%;
}

.sfuki:before{
    content: "";
    position: absolute;
}


/*これで縁のある吹き出しのトライアングルができる。*/
/*s吹き出しの△三角形（緑の部分：縁となる部分）*/
.sfuki-tr:before{
    border-right: 8px solid #4285f426;/*透明薄い青色*/
    border-bottom: 8px solid transparent;
    border-top: 8px solid transparent;
    top: 14px;
    left: -11px;
}


/*s吹き出しの△三角形（オレンジの部分：重ねて白くしている）*/
.sfuki:after{
    border-right: 10px solid #fff;
    border-bottom: 8px solid transparent;
    border-top: 8px solid transparent;
    top: 14px;
    left: -7px;
}

.sfuki-tr:after {
    content: "";
    position: absolute;
}

コーディング時は「Windowsのメモ帳」がおすすめ

私は、ブログをHTMLコーディングする際、ほぼほぼWindowsのメモ帳でコーディングします。

理由はPhraseExpressでコーディングするなら、「Windowsのメモ帳」が最速だからです。
たぶん、アニメーションを見たほうが分かりやすいかもです↓。

※ul-liのタグを囲っている様子で比較してみました。

ワードプレスのテキストエディタ×PhraseExpressでコーディング

Windowsメモ帳×PhraseExpressでコーディング

Autotextを入力→出力が完了するまでの時間

• Windowsメモ帳：約3秒
• ワードプレス（テキストエディタ）：約7秒

やはり、Windowsメモ帳の方が早いですね。

しかし、ブログのコーディングのHTML・CSSが決まっていない人は、「Windowsのメモ帳」はおすすめしません。
※ブログのデザインをあまり気にしない方は別ですが…。

多分HTML・CSSがあらかた決まっていないと、デザインが気になってしまうと思います。
そういう人はまず割り切って、ブログのコーディングデザインをあらかた構築してしまうのもありだと思います。

簡単にブログのコーディングデザインの構築方法を紹介しておきますね。

ブログのコーディングデザイン構築方法

1. ワードプレスのテキストエディタでテキストや画像にタグ付け、そして「カスタムCSS」内でCSSプロパティで装飾。
2. 「変更をプレビュー」でブラウザ表示を見ながら、「検証ツール（デベロッパーツール）でデザインを調整する。
3. そして、カスタムCSSのプロパティを検証ツールから値をコピペして構築していく。

※まんま初心者の方は、気になるサイトのデザインを検証ツールで参考にしながら、構築したほうがいいかもですね。

それから、PhraseExpressの方に、class名やらタグやらをフレーズ登録し、「Windowsのメモ帳」でデザインを確認せずに、一気にコーディングをした方が早いかなと思います。
というか、これよりもっと早くコーディングしている人の方法を知りたいです（笑）。
※これは、私の経験上効率よくデザインにこだわって、コーディングしたい人向けに伝えています。

続いて、フレーズを登録しまくって管理しきれなくなるかもしれません。なので、管理法についても書いておきますね。

登録フレーズが増えてきてしまった際の対策（僕の場合）

結論として、「バックアップ用にWordで1ファイルにして」まとめるのがおすすめです。

理由は、

• ナビゲーションウインドウやハイパーリンクで再編集や管理が楽。
• DescriptionとAutotextの表を作れば、紙にコピーして一覧を確認しながらコーディング可能。
• Phrase contentの内容をバックアップとして保存しておける。
• 自作したCSSデータも同時に保存し、一括管理が可能。

だからです。

具体的に示すと、以下の通りです。

ナビゲーションウインドウやハイパーリンク

ナビゲーションウインドウ

ハイパーリンク

紙でフレーズの一覧を見ながら、コーディング

コーディング時に、「あ、このデザインにしたい…。」と思って、登録したフレーズをアプリから確認するのは、意外と煩わしいですよね。
よって、コーディングでよく使う「DescriptionとAutotextを一覧の表にしてプリントアウト」を行う。
そうすれば、登録したフレーズの確認が楽です。

参考~私のコーディング用のAutotext一覧です~

バックアップとして保存

もしも登録してあるフレーズを間違って消しても、Wordで「Description、Phrase content、Autotext」をまとめておけば、復活が楽ですね。

自作CSSも同時に管理

自作CSSのバックアップになるだけでなく、「あれ、フレーズで登録したclass名のCSSってどんなプロパティで作ったんだっけ？」と思った際に、Word内で検索したり、ハイパーリンクとかで管理しとけば、CSSの確認"編集が楽になります。

最後に…

すみません。
まだ私も完全にPhraseExpressの機能を引き出せているかというと、微妙です。

紹介した以外にも、色々な機能があり奥深いツールです。
もっと、詳しく知りたい方は、下記の公式サイトの解説が詳しく載っています。参考にどうぞ。
>>PhraseExpress – Macro functions

私もコーディングは「無駄」だと思っているので、もっとPhraseExpressの機能を知り、どんどん効率化していく予定です。
使えそうなら、ブログで紹介していきます。

以上で、「HTMLコーディングに役立つ、PhraseExpressの活用方法」について紹介を終わります。