コーディングの知識がなくてもWordPressで円グラフを作成する方法

円グラフを表示すると、Web ページにさまざまな種類のデータを表示するのに便利です。ただし、プログラマーではない場合、または CSS の十分な編集スキルを持っていない場合は、難しいかもしれません。

ちなみに、ElementsKit ではありません。

ElementsKit を Web サイトにインストールすると、ドラッグ アンド ドロップするだけで Web ページに円グラフを簡単に追加できます。

このブログ投稿では、WordPress で円グラフをいくつかの簡単な手順で作成する方法を学びます。

円グラフとは何ですか?

データが円内のさまざまなセクションでグラフィカルに表示される場合、円グラフと呼ばれます。データと表示スタイルは異なる場合がありますが、データはグラフィカルな円の中に表示されます。場合によっては、サークルのデータをカスタマイズして、何かユニークなものを考え出すことができます。

WordPressで円グラフを作成するにはどうすればよいですか?

いくつかの簡単な手順を使用して、WordPress ダッシュボード内に円グラフを作成します。ここで共有したガイドラインに従ってください。

ステップ 1: プラグインをインストールする

ここでの目標は、コードを書かずに WordPress で円グラフを作成することです。したがって、最も人気のあるプラグインを使用します エレメンター アドオン ElementsKit.

このためには、 WordPress ダッシュボード > プラグイン > 新規追加。今、 上部の検索バー、エレメンターを検索します。見つかったら、インストールしてアクティブ化します。

同様に、ElementsKit をインストールしてアクティブ化します。

ステップ 2: プラグイン設定を選択する

ElementsKit プラグインでいくつかの設定を行う必要があります。これを行うには、WordPress ダッシュボードに移動し、ElementsKit にカーソルを合わせます。円グラフウィジェットを使用して円グラフを作成するので、「ウィジェット」を選択します。

ウィジェットのリストから「円グラフ」ウィジェットをオンにします。 ただし、Web ページの構築を最大限に楽しむために、すべてのウィジェットをオンにすることをお勧めします。

ステップ 3: 新しいページを作成する

これで、Web ページ上にグラフを作成する準備が整いました。カスタム データを含むグラフを表示するページを作成します。または、既存のページの 1 つを選択することもできます。

円グラフを表示するためにどのページを選択した場合でも、右上から「Elementor で編集」を選択します。

ElementsKit のすべての機能を使用できるエディター ページにリダイレクトされます。 

ステップ 4: 円グラフ ウィジェットを追加する

左側のパネルで円グラフ ウィジェットを検索し、ページにドラッグ アンド ドロップします。

必要に応じて、ページ上にウィジェットをドラッグ アンド ドロップする前に、特定のタイプのセクションを作成できます。

セクションを追加するには、プラス アイコンをクリックしてセクションを追加します。

ステップ 5: 円グラフをカスタマイズする

デフォルトでは、円グラフにいくつかの事前設定があります。数回クリックするだけでこれらの設定をカスタマイズできます。

[コンテンツ] タブでは、円グラフのスタイル、グラフの内容、グラフのパーセンテージを変更できます。

円グラフのスタイル: ここでは、シンプルまたはコンテンツ付きを選択できます。

グラフの内容: このセクションでは、グラフのパーセントまたはアイコンを使用できます。アイコンを選択すると、それをカスタマイズするための複数のオプションが表示されます。カスタム アイコンをアップロードしてチャート上に表示します。

パーセンテージ: ここで、グラフのパーセンテージを選択して設定できます。

次に、スタイル タブに移動して、グラフにスタイルを適用します。

円グラフのサイズ: 必要に応じて、円グラフのサイズを調整します。サイズを書き留めたり、バーをドラッグしてサイズを増減したりできます。

枠線のサイズ: ここで枠線のサイズを調整バーで設定します。

色の種類: 必要に応じて、グラフのカスタム色を選択します。

バーの色: ページのデザインに適切に適合するバーの色を追加します。

バーの背景色: 円グラフに背景色を追加すると、見栄えが良くなります。

アイコンの色: グラフのアイコンを追加した場合は、ここでそのアイコンのカスタム色を選択できます。

さらにカスタマイズしたい場合は、詳細設定に移動し、グラフを使いやすいものにするために必要な変更を行ってください。

ステップ 6: ページの外観をカスタマイズする

Elementor を使用すると、ページの外観もカスタマイズできます。このために、セクションの上部に点線のボタンがあります。それをクリックすると、レイアウト タブにリダイレクトされます。

ページのレイアウトをカスタマイズするためのすべてのオプションが表示されます。

ステップ 7: プレビューと公開

最後に、すべてを適切に実行したら、円グラフのプレビューを確認します。完璧に見える場合は、公開ボタンを押してください。

読んでおきたい追加リソース:

デジタルマーケティング代理店のWebサイトの作り方【ノーコードスタイル】

WordPress で清掃業のウェブサイトを作成する方法

WordPress ウェブサイトにキャリアページを作成する方法

WordPress でデータ視覚化のためのチャートを作成する方法

Web サイトで円グラフを使用する必要があるのはなぜですか?

円グラフを使用すると、Web サイト上の情報が理解しやすくなります。色と形を使用してパーセンテージと比較を示し、訪問者が複雑なデータを簡単に把握できるようにします。円グラフを使用すると、Web サイトをより興味深いものにし、情報をより深く理解できるようになります。

最後の言葉

円グラフの作成は、あなたにとって難しい作業ではありません。ただ力を使うだけです。 ElementsKitの。従来のプラグインと同様、単一タイプのタスクに対応するものではありません。 ElementsKit だけで Web サイト全体をデザインできます。さあ、頑張ってウェブサイトの完璧な形状を作り始めましょう。