スマホ・PC

【Mac】ワードプレスにグラフを挿入するオススメの方法!

更新日:

今回はMacを使ってワードプレスにグラフを作成する方法を紹介します。

  • プラグインを使用する方法
  • Numbersを使用する方法

分かりやすく画像を使って解説していきますので、参考にしてみてください。

 

プラグインを使用する方法

こちらは前にご紹介したプラグイン『WordPress Charts and Graphs Lite』を使った方法になります。

色々なプラグインを使いましたが、こちらのプラグインが1番使い勝手も良いですし、いろんなグラフを作成できます。

グラフのデザイン等はこちらを参考にしてみてください!

CSVファイルの作成方法

こちらのプラグインを使う場合は、CSVファイルを作成します。

CSVファイルを作成する場合は、ExcelやGoogleのスプレッドシート等を使い作成します。

今回、私はMacなのでNumbersを使って作成したいと思います。

Numbersの詳しい使い方はこちらを参考にしてみてください。

では使用方法をみていきます。

  • Numbersを開きます。

  • テンプレートの空白を開きます。

  • 開くとこのようになりますので、入力します。

 

円グラフを作成する場合

円グラフを作成する場合の入力場所を紹介します。

今回は家計簿を作成しました。

■ A1の赤枠で囲った場所は必ず空白にします。

■ 青枠は項目を入力します。

■ 黄色に金額を入力します。

これで設定は完了ですので、こちらをCSVファイルに保存します。

  • 上部のファイルの書き出すを開きます。

こちらからCSVファイルを選択して保存します。

以上がCSVファイルの作成方法です。

ではプラグインの使い方を見ていきます。

 

プラグインの使用方法

まず、『WordPress Charts and Graphs Lite』を開きます。

  • そうしますとこのようにグラフを選択できます。

  • Pieの円グラフを選びますと、このようになります。

  • Import data from fileを選びます。

 

  • そうしますと、こちらにファイルを選択がありますので、先ほど作成したCSVファイルを選択します。

 

  • このようなグラフが作成できました。

綺麗に作成できました。あとは細かい設定を見ていきます。

 

その他の設定

  • まず、設定画面にある右下のAdvancedを開きます。

そうしますとこのような画面になります。

 

General Settings

色々な設定ができます。

  • Title

タイトル設定、色が選択できます。

  • Font Styles

フォントの大きさ、スタイルを選べます。

  • Legend

項目の配置、フォントの色を選べます。

基本的な設定は以上です。

 

貼り方

  • 作成したグラフの下にコードがあります。

  • このコードを貼るとこのようになりました。

以上が円グラフを作成する方法です。

 

線グラフの作成方法

先ほどは、円グラフを作成したので線グラフを作る場合の入力方法を紹介します。

まず先ほどと同様にNumbersを使っていきます。

今回はただの例のグラフです。

Aの1は空欄にします。

■ 青枠は横軸です。

■ 黄枠は項目です。

■ 緑枠は縦軸です。

以上がを設定し、表示しますとこのようになります。

以上が線グラフの作成方法です。

 

Numbersでグラフを作成する方法

ワードプレスにグラフを挿入するのではなくて、グラフを作成する方法を紹介します。

先ほどCSVファイルで作ったNumbersでグラフが簡単に作成できます。

Numbersを開きますと、このようにテンプレートで基本のグラフというのがあります。

開きますと、このようにグラフを設定できます。

数値等も自分で変更できます。

あとはファイルに保存したり、コピーしたりできます。

 

最後に

今回は、Macでグラフを作成する方法を紹介しました。

MacですとNumbersを使うと簡単にグラフを作成できます。

ぜひ参考にしてみてください。

-スマホ・PC
-

Copyright© トリヤリ , 2019 All Rights Reserved.