『Jazzy Forms』で『Free HTML』利用して文字を装飾と簡易なカスタマイズ

WordPressで計算フォームを設置できるプラグイン『Jazzy Forms』で出来ることを色々紹介して行きます。ここではまず簡単に出来るカスタマイズと【Free HTML】を使った文字の装飾について説明して行きます。

『Jazzy Forms』の簡易計算書

『Jazzy Forms』で作れる一番簡単な計算について以下の記事で説明しているのでご参考下さい。

『Jazzy Forms』の簡易なカスタマイズ

前回下記のような【Input】と【Output】を使い簡単な計算書を作りました。それが以下です。文字とボックスはタテ並びになっています。

上記計算のJazzy Forms管理画面のForm elements部分は以下のもので作られていました

Jazzy Forms

上記のタテ並びを横並べに変えていきます
【Free HTML】を以下のようにForm elements部分に3つ配置します。

Jazzy Forms

Jazzy Formsの【Input】と【Free HTML】を使って簡易カスタマイズ
  1. 元々の【Input】エリアの『リンゴ』の文字を消します
  2. 新たに挿入した【Free HTML】のタイトルを『リンゴ』にします
  3. 【Free HTML】のwith【1/2(Half)】にします
  4. 【Input】エリアの【Appearance】をクリック
  5. 【Input】エリアのwith【1/2(Half)】にします
  6. 【Input】エリアの【start new row】のチェックを外します
  7. ①~⑥と同じことを⑦でも行います
  8. ①~⑥と同じことを⑧でも行います

Jazzy Forms

上記を保存して次にショートコードをコピーします
Jazzy Formsのシヨートコード
  • ①【Title】:任意のタイトルを入力します
  • ②【General】:【General】タブをクリック
  • ③【Shortcode】:ショートコードをコピー
  • ④【Save】:保存します

出来上がった計算書が以下です
  • リンゴ
  • ミカン
  • 果物の合計(個)

『Jazzy Forms』の計算書タイトルの装飾

ここでさらにForm elements部分の一番上に【Free HTML】を追加します【HTML code】に以下のコードを入力。ここでは私の見出しをそのまま使っていますので見栄えはサイトにより変わります
<h4>果物の合計を計算して下さい</h4>
そしてリンゴと書かれたタイトルを装飾します【HTML code】に以下のコードを入力
<span style=\"color: #0000ff; font-weight: bold;\">リンゴ</span>

Jazzy Forms

出来上がった新たな計算書が以下のものです
  • 果物の合計を計算して下さい

  • リンゴ
  • ミカン
  • 果物の合計(個)

『Jazzy Forms』のFree HTMLを利用

『Jazzy Forms』のFree HTMLを上手く利用すれば、WordPressの記事内で使っているHTMLコードをそのまま利用できます。ここでは文字の色や太さだけを指定しましたが、『Jazzy Forms』管理画面では作成しにくいので、自分の記事内で文字を装飾してそのコピーを張り付ければ簡単です。

WordPressの記事内で文字を装飾したものはそのまま『Jazzy Forms』の【Free HTML】で利用できる

また、上記のように計算書を横並びにしたりしながら、間に【Free HTML】を挟み小見出しのように使うことも可能です。ここでは簡単なカスタマイズを行いましたが、組み合わせ方によっては綺麗な計算書を作ることも可能であると思います。