HTMLコードの入力を短縮！ルクセリタス【定型文登録】の使いかた

投稿する記事を分かりやすくするために文字に 色を付けたり 太文字にしたりと装飾します。

基本的な装飾は 投稿の編集画面から簡単に指定できますが 個別の装飾は事前に CSSコードを使って スタイルシートに書き込みます。

その指定したコードを記事内に呼び出すのが HTMLのコードなのですが、<span> や <class> など 毎回書き込むのは面倒です！

そして、危険なのはコードを間違えてしまった場合です。

そんなミスを回避するためにも 定型文登録はとってもありがたい機能なのです！

Luxeritas 定形文登録機能とは

こちらは WordPress テーマ Luxeritas（ルクセリタス）での投稿編集エディタ画面です。

このエディタに 定型文 というボタンがあります。

事前に登録してある定型文をここから呼び出します。

囲み枠を例に見ていきます。テキストエディタで見てみると このようなHTMLコードが表示されています。

本来なら CSSで作成した囲み枠を呼び出すには このようにHTMLコードを 毎回 記述しなくてはなりません。

この <div class  ~ のコードを覚えるのは大変ですが 定型文登録することで
HTMLコードの書き込みを省略することができ簡単に囲み枠を呼び出すことが出来ます。

CSSの作成と HTMLコード

囲み枠をサイトに表示させる場合は、囲み枠や 文字の装飾など  css（スタイルシート）に作成するところから始めます。

先ほどの例で使用した 基本枠の囲み枠のコードを参考に見ていきます。

CSSを作成する

CSSで設定する 囲み枠は .~ -box というコードで始まり 今回は 基本枠ということで normal-box となります。

CSSのコード指定 では どこに・何を・どのように という情報を指定していきます。

normal-box1 には 枠の余白や 線の幅・線種・線の色など
normal-box1 p には 枠内の行間・余白についての指定をしています。

囲み枠の作成などは こちらの記事を参考頂ければと思います。

投稿画面で記述する HTML

HTMLの記述のしかた では 投稿画面に書き込むコードが書かれていて
記事内に取り入れたい CSS (囲み枠) を <  > 本文 </  > というコードで呼び出します。

コードの始まり < > と 終わり </ > の間に囲み枠を付けたい文章を入れるという形になり
コードの名前 normal-box1 と 囲み枠を表すコード div との組み合わせによって呼び出すことが出来ます。

---

まだ CSS を設定されていない方は こちらの基本枠をベースに作成してみてください。

定型文登録を作成する

記事内で使用する HTMLコードを 定型文登録していきます。

ダッシュボード画面の Luxeritas から 定形文登録 を開きます。

定形文登録の 新規追加 から登録していきます。
作成した定型文を編集したい場合は、編集から画面を開くことができます。

ラベルの設定

一度作成したラベル名は 変更出来ません！
変更したい場合は 削除して再作成する形で変更してください。

囲み型での 定型文登録

<  > 本文 </ > の形式の HTMLコードは 囲み型として使用すると 簡単に変換できます。

ビジュアルエディタ画面でマウスを左クリックした状態でスライドさせ 囲みたい文章をマークします。

先ほどの HTMLのコードを記述します。
コードの始まり < > と 終わり </ > の間に文章 となるわけですので
囲み型 にチェックを入れ 上段のボックスに初めのコード < ~ >下段のボックスに </div> とだけ記述します。
これで囲み型のコード登録完了です。

定型文登録ができない !?

何度 登録しても、コードが消えてしまう!? というケースがあります。
実は、ラベルに設定する文字に ハイフン（ー）などを使用できない文字・記号があるようです。

登録できない時は 使用する文字を変更して もう一度作成してみてください。

エディタ画面から 定形文登録の使い方

先ほどと同じ画像を使って解説していきます。

エディタ画面のツールバーから 定形文登録 のボタンをクリックすると、
登録したコードのラベル名の一覧が表示されます。

1. 先に枠を付けたい文章を書きます。
2.  囲みたい文章を選択します。
3. 定形文ボタンをクリックし 一覧から使用したい定型文を選びます。
4. 今回は 基本枠1 ですのでこちらをクリックします。
5. これで文章に囲み枠を付けることが出来ました。