WordPressでプラグインVisualizerを使ってキレイなグラフを掲載してみる。

先日、Wordpressで構築したブログにグラフを手軽に載せられないか、お客様よりご相談を受け、いろいろ方法を調べてみました。グラフを載せる方法としては、エクセルでグラフを作って、画像ファイルにして貼り付けるか、プラグインで対応するかの、いずれかになります。以下プラグインでグラフを記事中に挿入する方法を紹介します。

1.プラグインVisualizer: Charts and Graphsを導入する。
特に難しいところはありません。プラグインの新規追加よりVisualizer: Charts and Graphsを導入しましょう。
2015graph001
もちろん有効化します。
2015graph002

2.グラフを作る。
導入したプラグインは、サイドメニューの「メディア」の中に項目が作れています。ちょっと面食らいましたが、画像と同じ扱いと言うことらしいです。Visualizer Libraryを選びます。
メディアから選ぶ
Add Newを押してグラフの新規作成に入ります。いろいろ種類がありますが、例として円グラフのパイチャートを選択します。
パイチャートを選択
設定画面になります。
パイチャートデータ読み込み
ここで、データを読み込みます。データはPC上でもネット上でもいいのですが、CSVファイルで用意する必要があります。今回は例として以下のデータを用意しました。

種類,匹
犬,10346000
猫,9959000

1行目に項目と単位、2行目以下からデータをカンマ区切りで記入し、○○.csvの名前で保存します。トラブルを防ぐため保存はエンコードをUTF8のBOM無しにしておきます。From Computerボタンを押して、CSVファイルを選ぶと、読み込まれて画面上のグラフに反映されます。

2015graph007

数値は自動で%に変換されますので、計算は不要です。楽ですね。
NEXTで次に進み、グラフの体裁を整えます。タイトルをつけたり、色を変えたり、3D表示したり、見た目を調整して、「Create Chart」を押し完了です。

2015graph008

3.記事に貼り付ける。
再び、Visualizer Libraryのトップに戻ると作成したグラフが表示されています。必要に応じてグラフを作り、このページで管理することになります。作成したグラフの下に、貼り付け用のショートコードがありますので、コードを記事に貼り付けて完了です。

ショートコード

↓こんな感じになります。↓
[visualizer id=”1335″]

英語プラグインと言うことで、取っつきにくいところもあるのですが、比較的簡単な方ではないでしょうか?
1回限りの単発での掲載であるなら、エクセルで作ったグラフのキャプチャ画像を取り掲載することをおすすめしますが、定期的にグラフを掲載するようでしたら、上記プラグインでの作業をお薦めします。

ちなみに、私は猫派です。

参照
インプレス 日本の家庭でのペット飼育の現状とは?


制作事例 新潟浴場組合様

新潟浴場組合様

新潟の銭湯が加盟する、新潟浴場組合様のWEBサイトをリニューアルしました。
利用者の高齢化が進み、各家庭に風呂がある時代に、いかに「銭湯」を知ってもらい、足を運んでもらうかがテーマです。
営業中の掲載浴場全てに足を運び、取材+撮影してきました。

公開 2015年8月5日
URL http://www.niigata268.com/

●制作内容
・デザインの刷新
・CMSの導入
・レスポンシブ対応
・コンテンツの全面見直し
・RICOH THETAによる360°全天球写真を取り入れ


WordPressの無料テーマAttitudeの使い方(フッターエリア使用方法)

18

1.WordPressの無料テーマAttitudeの使い方
2.WordPressの無料テーマAttitudeの使い方(固定ページ活用方法)
3.WordPressの無料テーマAttitudeの使い方(フッターエリア使用方法)
3回目の今回は、フッターエリアの使用方法になります。
正直言って、前回でAttitudeの使い方は大筋終わっていますが、
サイトとしての形ができるまでの説明と思って読んでください。
前回と同様の完成サイトのトップページを元に説明していきます。

制作サイト

業種:歯科医院
ページ数:10ページ程度

グローバルメニュー
・トップページ
・院長のあいさつ
・診療科目
—一般歯科
—小児歯科
—口臭歯科
—予防歯科
—歯周病
—ホワイトニング
・初めての患者様
・アクセス
・お問い合わせ

28

 

フッターエリア(病院名、住所、診療日)

 

29

 

ダッシュボード/ 外観 / ウィジェット

30

「カスタムウィジェット画面」に移り「Footer Sidebar」にウェジットパーツをドラッグ&ドロップします。
フッターエリアは3カラムなっています。

テキスト → 病院名
テキスト → 住所
Biz Calendar → 診療日

1.病院名
ダッシュボード / 外観  / ウィジェット / Footer Sidebar / テキスト

ダッシュボード / 外観  / ウィジェット / Footer Sidebar / テキスト
テキストの「▼」を押すと項目が出てきます。
タイトル部分に文字を入力して保存します。

31

 

2.住所
 ダッシュボード / 外観  / ウィジェット / Footer Sidebar / テキスト

テキストの「▼」を押すと項目が出てきます。
本文部分に文字を入力して保存します。

32

 

3.診療日
ウィジェットあるカレンダーはブログの更新を表示するカレンダーなので
診療日や営業日を表すカレンダーには使用できません。
プラグインをインストールして、診療日を表せる「Biz Calendar」使用します。

ダッシュボード / 外観  / ウィジェット / Footer Sidebar / Biz Calendar
Biz Calendarの「▼」を押すと項目が出てきます。
タイトル部分に文字を入力して保存します。
※カレンダー設定は別途行います。

33

ここまで、HTMLを一度も記入せずサイトが完成しました。
一応は見れるサイトになったのではないでしょうか。

ここから、部分的に色を変えたりレイアウトを調節したい場合は、
CSSなどの知識が必要となります。。

無料テーマAttitudeも万能ではないので、
勉強して自分好みのサイトに近づけてください。

 


撮影事例 佐渡編

先日、サイト制作の撮影で弊社カメラマンと佐渡に行ってきました。
その時撮影した撮影サンプルを紹介します。

朱鷺の森公園

朱鷺の森公園にて。飼育場内の朱鷺です。
ガラス越しですがかなり近くで朱鷺を見ることが出来ます。
http://tokinotayori.com/tokipark/

DSC_7678

その後、立ち寄った妙宣寺です。
http://www.niigata-kankou.or.jp/sys/data?page-id=8903

妙宣寺 五重塔

新潟県内唯一の五重塔。
こちらには時間調整の都合で寄ったのですが、手入れの行き届いた境内は静かで良いところでした。

当日は天候に恵まれず、屋外の佐渡らしい写真をほとんど撮ることが出来ませんでした。
田園風景の中の朱鷺などを撮りたかったのですが…。

生き物の写真や、景観写真もアートグラフィック新潟にお任せください。