⑨プラグイン「Elementor」を使って、計算ツールを設置しよう

こんにちは、ITのえんぴつです。

こちらは、計算ツールの作り方連載全9回の第9回の記事となります。

計算ツールの作り方連載全目次はこちら

eigo-gayomenai-engineer.hatenablog.com

前回は、⑧検証の設定をしてみました。

本記事では、⑨プラグイン「Elementor」を使って、計算ツールを設置してみましょう。

1. 固定ページ

1. 固定ページを新規登録します。
2. タイトルを入力します。
3. 本文は、「Elementerで編集」をクリックします。

2. プラグイン「Elementor」

固定ページレイアウト「Elemterキャンバス」を設定する

1. 左下の歯車をクリック
2. 設定＞一般設定＞固定ページレイアウト「Elementerキャンバス」を選びます

ブロック「 Calculated Fields Form」を追加する

1. 右上のマークをクリックします。
2. 要素の検索ボックスへ「calc」と入力します。
3. 見つかったら、画面の方へドラッグします。

1. select form(フォームを選択)で、先ほど作ったフォームを設定します。

1. 上部に余白を追加したいので、
   高度な設定　＞　レイアウト　＞　パディング　上を設定します。

ページの上部へシェイプ区切りを追加する

1. 次は、セクションの真ん中を選択します。
2. スタイル＞シェイプ区切り＞タイプを本
3. テンプレートの説明文が水色なので、
4. 色＞水色にします。

レイアウト＞コンテンツ幅を設定する

レスポンシブプレビューの確認する

1. 最後に、下のブラウザのようなアイコンをクリックします
2. ＰＣ、タブレット、スマートフォンの表示を確認します。
3. 終わったら、更新を押します。

実際のページにて、動作確認する

以上、⑨プラグイン「Elementor」を使って、計算ツールを設置してみました。

3.おわりに

今回は、計算ツールの作り方のご紹介しました。

作り方は、様々な選択肢があるかと思うのですが、今回は、ワードプレスのプラグインを利用して作ってみました。

メールや決算機能などが必要のない計算ツールを作るときは、こちらのプラグインの無料版の範囲で作ることができます。デザインを少し整えたかったため、CSSを追加しましたが、JavaScriptは不要でした。

計算ツールをさくっと作りたい場面がありましたら、使ってみてください。

最後に、プラグイン「Calculated Fields Form」を開発して下さった方、素敵な計算ツールを利用させていただきました。ありがとうございました。

4.参考リンク

• CFF - Calculated Fields Form
• 『Calculated Fields Form』の使い方と設定方法 | メルプラ
• 「Calculated Fields Form」（自動見積・計算）プラグインの使い方 ① 基本設定 | ツッチーブログ

前はこちら

⑧検証の設定をしよう

⑧検証の設定をしよう

こんにちは、ITのえんぴつです。

こちらは、計算ツールの作り方連載全9回の第8回の記事となります。

計算ツールの作り方連載全目次はこちら

eigo-gayomenai-engineer.hatenablog.com

前回は、⑦フォームの設定をしてみました。

本記事では、⑧検証の設定をしてみましょう。

ITのえんぴつ

この機能では、Calculated Fields Formのエラーメッセージがカスタマイズできます。

エラーメッセージのデフォルト言語は、英語です。そのため、日本語に変更します。

 

1. 「検証の設定」があるセクションへ移動します。

フォームの設定箇所の下部にあるメニューバーの「」をクリックするか、画面の少し下までスクロールします。

2. エラーメッセージを翻訳します。

英語を日本語に変更します

設定が終わったら、「変更内容を保存」をクリックします。

エラーメッセージ一覧

#	検証内容	メッセージ
1	「必須」テキスト	この項目は必須です。
2	電子メールです テキスト	有効なメールアドレスを入力してください。
3	有効なキャプチャですテキスト	有効なキャプチャコードを入力してください。
4	は有効な日付です (mm/dd/yyyy) テキスト	この形式で有効な日付を入力してください（mm / dd / yyyy）
5	は有効な日付です (dd/mm/yyyy) テキスト	この形式で有効な日付を入力してください（dd / mm / yyyy）
6	は数字です テキスト	有効な数値を入力してください。
7	「数字のみ」テキスト	数字のみ入力して下さい。
8	「最大以下」テキスト	{0}以下の値を入力してください。
9	「最小以上」のテキスト	{0}以上の値を入力してください。
10	「無効な通貨」テキスト	有効な数値を入力してください。
11	「最大長/文字数」テキスト	{0}文字以内で入力してください。
12	「最小長/文字数」テキスト	{0}文字以上入力してください。
13	「等しい」テキスト	同じ値をもう一度入力してください。
14	「これらのファイル拡張子を受け入れる」テキスト	有効な拡張子の値を入力してください。
15	「KB単位の最大アップロードサイズ」テキスト	選択したファイルが大きすぎます。最大値は{0}kBです。
16	「電話番号」テキスト	無効な電話番号です。
17	「無効なクーポン」テキスト	無効なクーポンコードです。

3. 入力値制限・チェックの表示を確認します

確認①形式：「有効な数値を入力してください。」

半角空白の場合

ひらがなの場合

全角数字の場合

確認②最小：「{0}以上の値を入力してください。」

最小値の1つ下 (マイナス)の場合

最小値 (ゼロ)の場合

最小値の1つ上の場合

確認③最大：「 {0}以下の値を入力してください。」

以下も最小と同様の確認をします。（最小と同様のため、略）

• 最大値の1つ下の場合
• 最大値 の場合(最大桁)
• 最大値の1つ上の場合

以上、⑧検証の設定をしてみました。

前はこちら

⑦フォームの設定をしよう

次はこちら

⑨検証の設定をしよう

⑦フォームの設定をしよう

こんにちは、ITのえんぴつです。

こちらは、計算ツールの作り方連載全9回の第7回の記事となります。

計算ツールの作り方連載全目次はこちら

eigo-gayomenai-engineer.hatenablog.com

前回は、⑥フィールド3列目を設定してみました。

本記事では、⑦フォームの設定をしてみましょう。

1.  フォーム名

フォーム名を設定します。上部に表示されます。

2.  説明

説明を設定します。フォーム名の下に表示されます。

3.  フォームテンプレート「4」

テンプレートは全部で14種類あります。その事例を以下に記します。

使用しているテンプレートや、作成物（文字数が多いときなど）によって、レイアウトが少し崩れるときもあります。
相性のよいテンプレートを選んだり、文字数を見直すと、CSSの微調整などの手間が省けます。 

ITのえんぴつ

くろねこ

既存デザインが14種類から選べるんだね。

デフォルトのテンプレートを使用

テンプレート1

テンプレート2

テンプレート3

テンプレート4

テンプレート5

テンプレート6

テンプレート7

テンプレート8

テンプレート9

テンプレート10

テンプレート11

テンプレート12

テンプレート13

テンプレート14

4.  フォームデザインのカスタマイズ

上のテンプレートで、気になる箇所などは、こちらのカスタマイズで調整できます。

今回は、テンプレート6を利用して、主に、こちらの点を調整しました。

• 数値項目は、文字位置を右寄せにする
• プレースホルダーは、文字色を薄める
• スマホの時は、改行位置・レイアウトなどを調整する

具体的な設定項目はこちらになります。

/*========================
   1. 画面サイズ共通
==========================*/

/* 1. 項目「価格」「サイズ」「原価率」  文字位置　右寄せ */
#fieldname4_1,
#fieldname5_1,
#fieldname9_1,
#fieldname10_1,
#fieldname15_1 {
    text-align: right;
}

/* 2. プレースホルダー　文字色　灰 */

::placeholder {
    color: #ddd;
}


/* 3. 項目「原価率」　タイプ「概要」　ラベル「(空白)」  高さ 設定 （理由：空ブロック要素の対策） */

.fields>label {
    min-height: 1px;
}

/*========================
   2.  画面サイズが741px以上
==========================*/

@media screen and (min-width:741px) {

    /*  1. 要素「br」   非表示 */
    .br-sp {
        display: none;
    }

}

/*========================
   3.  画面サイズが740px以下
==========================*/

@media screen and (max-width:740px) {
    

    /* 1. フォーム「タイトル」   位置   中央揃え */
    #formheader_1 h2{
        text-align:center;
    }    


    /* 2. 4カラム「ラベル」「フォーム」 横  30:65 */
    .column4 label {
        float: left;
        width: 30%;
    }

    .column4 .dfield {
        display: inline-block;
        width: 65%;
    }

}

以上、⑦フォームの設定をしてみました。

前はこちら

⑥フィールド3列目を設定しよう

次はこちら

⑧検証の設定をしよう

⑥フィールド3列目を設定しよう

こんにちは、ITのえんぴつです。

こちらは、計算ツールの作り方連載全9回の第6回の記事となります。

計算ツールの作り方連載全目次はこちら

eigo-gayomenai-engineer.hatenablog.com

前回は、⑤フィールド2列目を設定してみました。

本記事では、⑥フィールド3列目を設定してみましょう。

1.  2列目を複製します

2. タイプ「概要」を変更します

項目	値
フィールドラベル	原価率

3. 以下の3個を消します

項目	値
フィールドラベル	商品名

項目	値
フィールドラベル	価格

項目	値
フィールドラベル	サイズ

4. 2で作成したフィールドラベル「原価率」を2つ複製します

項目	値
フィールドラベル

項目	値
フィールドラベル

5. タイプ「計算フィールド」を追加します

項目	値
フィールドラベル
方程式	PREC((fieldname9* (fieldname5/fieldname10) /fieldname4)*100,1)

 

PREC関数

値を小数点以下1桁に丸めるために、利用しています。この関数は、四捨五入になります。

例：

PREC（10.3333333, 1） → 10.3
PREC（10.555, 1） → 10.6

参考：

［公式サイトCFF-よくある質問(FAQ)］CFF - FAQ

 

ITのえんぴつ

イメージ図   方程式と画面の関係

以上、⑥フィールド3列目を設定してみました。

前はこちら

⑤フィールド2列目を設定しよう

次はこちら

⑦フォームの設定をしよう

⑤フィールド2列目を設定しよう

こんにちは、ITのえんぴつです。

こちらは、計算ツールの作り方連載全9回の第5回の記事となります。

計算ツールの作り方連載全目次はこちら

eigo-gayomenai-engineer.hatenablog.com

前回は、④フィールド1列目を設定をしてみました。

本記事では、⑤フィールド2列目を設定してみましょう。

1.  1列目を複製します

右下の複製マークをクリックします

複製するときに、メッセージボックスが表示された場合は、「OK」を押します。

 メッセージボックスの内容　

内容は、計算フィールドを使っている場合は、計算フィールドの設定も同じく複製されますが、大丈夫ですか？という旨が書いてあります。

 

ITのえんぴつ

2.  複製した項目は、以下に変更します

タイプ「概要」

項目	値
フィールドラベル	市場

タイプ「価格」

項目	値
事前に定義された値	128

タイプ「サイズ」

項目	値
事前に定義された値	100

以上、⑤フォームの設定2列目を追加してみました。

前はこちら

④フォーム1列目を設定しよう

次はこちら

⑥フォーム3列目を設定しよう

④フィールド1列目を設定しよう

こんにちは、ITのえんぴつです。

こちらは、計算ツールの作り方連載全9回の第4回の記事となります。

計算ツールの作り方連載全目次はこちら

eigo-gayomenai-engineer.hatenablog.com

前回は、③フィールド種類をご紹介しました。

本記事では、④フィールド1列目を設定してみましょう。

1. 最初のフィールドをすべて削除します

右下のゴミ箱マークを押すと、削除できます。

2.  タイプ「Div」を追加します

項目	値
列	4列

3.  タイプ「概要」を追加します

項目	値
フィールドラベル	ふるさと納税

4.  タイプ「1行のテキスト」を追加します

項目	値
フィールドラベル	商品名
フィールドサイズ	大きい
事前定義された値	鶏肉もも
事前定義された値をプレースホルダーとして使用します	✓

5.  タイプ「通貨」を追加します

項目	値
フィールドラベル	価格
フィールドサイズ	大きい
最小	0
最大	999999999
通貨記号
通貨	円
セントを許可しない	✓
動的にフォーマットして	✓
事前に定義された値	10,000

6.  先程のタイプ「通貨」を複製して、ラベル「サイズ」を作ります

項目	値
フィールドラベル	サイズ
通貨
セントを許可しない
小数点以下2桁	✓
事前に定義された値	3,000

以上、④フィールド1列目を設定してみました。

前はこちら

③フィールド種類のご紹介

次はこちら

⑤フィールド2列目を設定しよう

③フィールド種類のご紹介

こんにちは、ITのえんぴつです。

こちらは、計算ツールの作り方連載全9回の第3回の記事となります。

計算ツールの作り方連載全目次はこちら

eigo-gayomenai-engineer.hatenablog.com

前回は、②新しいフォームを追加してみました。

本記事では、③フィールド種類をご紹介します。

ITのえんぴつ

フィールドは、「項目」や「領域」という意味になります。

事例　…　フォーム画面のテキストフィールド

　→　文字を1行だけ入力できる入力欄（の部品）

今回使うタイプは、5種類です

翻訳	説明
1行のテキスト	1行のテキスト入力項目
通貨	金額の入力項目。 表示設定あり 3桁毎に区切り記号（カンマ） 金額記号（円） 小数点2桁以下
概要	概要等の表示項目。入力項目の表示も可能
計算フィールド	計算結果の表示項目。
DIv	複数項目のグループ化。 横並びレイアウト (1カラム～4カラム) ができます。

項目タイプ「通貨」に対して、項目名「サイズ」を設定した理由

 項目タイプ「通貨」は、管理画面に、「小数点以下2桁」という設定項目があったからです。 

ITのえんぴつ

くろねこ

項目タイプ「番号」は、値を入力すると、小数点が9桁の入力ができたよ。多すぎるよ～。 

以上、③フィールの種類をご紹介しました。

前はこちら

②新しいフォームを追加しよう

次はこちら

④フィールド1列目を設定しよう