ウェブサイトに電卓を埋め込む方法–ウェブ電卓のケーススタディ＃10

HTMLコードとiFrameコードの違いを詳しく見てみましょう。 そして、最も人気のあるWebサイトビルダーにCalculoidをどのように組み込むことができるかを確認してください。

HTMLとiFrame

計算機を「終了」に設定すると、HTMLとiFrameのXNUMXつのコードが自動生成されます。 どちらのコードにもJavaScriptとHTMLが含まれ、仕様とパラメーターが異なります。 HTMLコードの下にあるチェックボックスを使用すると、電卓の名前と説明を表示するかどうかを設定できます。 チェックボックスはHTMLとiFrameの両方で機能します

「HTML」というコードを埋め込むw

この埋め込みコードを使用すると、ウェブサイトのCSSスタイルを電卓に適用できます。ほとんどのスタイルは自動的に適用されます。これにより、電卓を簡単にウェブサイトに馴染ませることができます。ただし、注意点もあります。ウェブサイトの一部のスタイルがCalculoidのCSSと競合し、電卓の外観や機能に悪影響を与える可能性があります。また、WordPressベースのウェブサイトでは、Calculoidプラグインのインストールが必要になる場合があります。HTMLコードは、ほとんどのCalculoidユーザーにとって問題なく動作します。WordPressを使用していない場合は、まずHTMLコードをお試しください。

「iFrame」というコードを埋め込む

上記のように、このコードはJavaScriptとHTML、そして「HTML」と呼ばれるもので構成されています。ただし、埋め込みコンテンツの周囲にフレームがあります。そのため、ウェブサイトのCSSスタイルが電卓に適用されません。Calculoidのデザイン設定を使用し、カスタムCSSを埋め込みコードに追加することで、電卓をウェブサイトにネイティブに表示させることは可能です。弊社の開発者がカスタムCSSを作成いたします。iFrameコードにも小さな弱点があります。Googleはフレーム付きの埋め込みコンテンツを好みません。iFrameで埋め込むと、電卓が埋め込まれたウェブページのSEOにわずかな影響が出る可能性があります。ただし、この影響は決して劇的なものではありません。HTMLで埋め込んだ後にスタイルの競合が発生する場合は、iFrameコードを試してみてください。

WordPressのプラグイン

WordPressベースのウェブサイトにCalculoidを埋め込むためのベストプラクティスは、弊社のプラグインを使用することです。プラグインに関するすべての情報は、こちらでご確認いただけます。最も重要なのは、プラグインの設定に正しいAPIキーを入力することです。キーは、Calculoidアプリケーションの「マイプロフィール」ページで確認できます。

ショートコードの例：[calculoid id = "60204" show_title = "0" show_description = "0"]

この計算機を使用してショートコードを生成します。

また、CalculoidにはJoomlaとDrupal用のプラグインもあります。

最も使用されているWeb構築プラットフォームのテストを埋め込みます

⚠️-WordPressには非常に多くのテーマがあり、Elementorのような多くのビルダーがあります。 すべてのWordPress WebでHTML埋め込みコードを適切に機能させることはほぼ不可能です。 ただし、このコードは、一流のビルダーでうまく機能します。