こんにちは、ITのえんぴつです。
こちらは、計算ツールの作り方連載全9回の第9回の記事となります。
計算ツールの作り方連載全目次はこちら
eigo-gayomenai-engineer.hatenablog.com
前回は、⑧検証の設定をしてみました。
本記事では、⑨プラグイン「Elementor」を使って、計算ツールを設置してみましょう。
1. 固定ページ
- 固定ページを新規登録します。
- タイトルを入力します。
- 本文は、「Elementerで編集」をクリックします。
2. プラグイン「Elementor」
固定ページレイアウト「Elemterキャンバス」を設定する
- 左下の歯車をクリック
- 設定>一般設定>固定ページレイアウト「Elementerキャンバス」を選びます
ブロック「 Calculated Fields Form」を追加する
- 右上のマークをクリックします。
- 要素の検索ボックスへ「calc」と入力します。
- 見つかったら、画面の方へドラッグします。
- select form(フォームを選択)で、先ほど作ったフォームを設定します。
- 上部に余白を追加したいので、
高度な設定 > レイアウト > パディング 上を設定します。
ページの上部へシェイプ区切りを追加する
- 次は、セクションの真ん中を選択します。
- スタイル>シェイプ区切り>タイプを本
- テンプレートの説明文が水色なので、
- 色>水色にします。
レイアウト>コンテンツ幅を設定する
レスポンシブプレビューの確認する
実際のページにて、動作確認する
以上、⑨プラグイン「Elementor」を使って、計算ツールを設置してみました。
3.おわりに
今回は、計算ツールの作り方のご紹介しました。
作り方は、様々な選択肢があるかと思うのですが、今回は、ワードプレスのプラグインを利用して作ってみました。
メールや決算機能などが必要のない計算ツールを作るときは、こちらのプラグインの無料版の範囲で作ることができます。デザインを少し整えたかったため、CSSを追加しましたが、JavaScriptは不要でした。
計算ツールをさくっと作りたい場面がありましたら、使ってみてください。
最後に、プラグイン「Calculated Fields Form」を開発して下さった方、素敵な計算ツールを利用させていただきました。ありがとうございました。
4.参考リンク
- CFF - Calculated Fields Form
- 『Calculated Fields Form』の使い方と設定方法 | メルプラ
- 「Calculated Fields Form」(自動見積・計算)プラグインの使い方 ① 基本設定 | ツッチーブログ
前はこちら