ITのえんぴつ

Google Blockly開発者ツールやIT・プログラミングを研究して発信するブログ

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


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

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

 

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

 

eigo-gayomenai-engineer.hatenablog.com

 

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

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

プラグイン「Elementor」を追加するスクリーンショット

1. 固定ページ

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

固定ページの本文編集にて、プラグイン「Elementor」を利用するスクリーンショット

2. プラグイン「Elementor」

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

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

プラグイン「Elementor」で設定>一般設定>固定ページレイアウト「Elemterキャンバス」を選ぶスクリーンショット

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

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

プラグイン「Elementor」で要素の検索ボックスへ「calc」と入力しているスクリーンショット

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

プラグイン「Elementor」でselect form(フォームを選択)で、先ほど作ったフォームを設定するスクリーンショット

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

高度な設定 > レイアウト > パディング 上を設定するスクリーンショット



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

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

 

プラグイン「Elementor」でページの上部へシェイプ区切りを追加するスクリーンショット

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

プラグイン「Elementor」でコンテンツ幅を設定しているスクリーンショット

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

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

プラグイン「Elementor」でレスポンシブプレビューの確認しているスクリーンショット

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

プラグイン「Calculated Fields Form」とプラグイン「Elementor」を利用して作成した計算フォームにて、、動作確認をするスクリーンショット

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

3.おわりに

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

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

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

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

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

4.参考リンク

 

前はこちら

⑧検証の設定をしよう