WordPressの管理画面で作図や画像の加工ができるプラグイン「DrawIt (draw.io)」 | Knowledge Base

WordPressの管理画面で作図や画像の加工ができるプラグイン「DrawIt (draw.io)」

Wordpressで画像やイラスト、図などを挿入するときどうしてますか?

撮りっぱなしの画像をアップロードするときはいいとして、加工したイラストや画像などを掲載する一般的な方法は、

  1. パソコンで専用ソフトを使って加工する
  2. サイトへアップロードして挿入する

という2つの手順を使う方法。慣れた方なら問題ないかもしれません。でもアップロードした後で再加工するときは??面倒でそのままにしてしまったり、画像や図の挿入をしなくて済むようにしてしまったりすることありませんか??。

図や画像などテキストでないコンテンツは一見するとあまりSEOとは関係ない印象もあるようですが、Googleの説明によればこれも重要なファクターとして認識して検索順位などを決定しているようです(確信的なことはGoogleのみぞ知るところです)。

ということは、見た目だけでなく、見やすさだけでなく、まず見てもらうための手段として図や画像を使ってより分かりやすいページの作成が必要ということですね。いくら書いても見てもらえなければ意味がないわけですから。

前置きはこのぐらいにして、今回紹介するDrawIt (draw.io)プラグインはこの作業が投稿編集画面の中でできてしまうとても便利なプラグインです。

このプラグインを使って作成した画像はいつでもWordpress上で再編集できますから、文章の編集とともにすべてが投稿編集画面でできてしまうようになります。

今までいろいろなプラグインをテストして紹介していますが、こういう動作をするプラグインは類を見ないと思います。まるで高度なペイントソフトがWordpressに備わったような感覚で簡単に画像の加工ができるようになります。

作成した画像はパソコンにダウンロードすることも可能(エクスポート機能)なので、他のサイトで使いまわすこともできます。

【DrawIt (draw.io)】プラグインの基本的な機能・できること

  1. 投稿編集画面からドローソフトが起動できる
  2. 作成した図や挿し絵、設計図などはメディアに保存されるので他のコンテンツやアイキャッチなどでも利用可能
  3. このプラグインで作成したファイルはいつでも再加工可能
  4. 加工した図や画像はパソコンにエクスポート(保存)できる

作図するための機能として

  1. たくさんのサンプル画像やイラストから自由に挿入できる
  2. 矢印やコネクタなど製図などに使う線が引ける
  3. EXCELで言う「オートシェイプ」が使える
  4. レイヤー機能がある
  5. 図形の拡大縮小や回転ができる
  6. 外部の図や写真を取り込んで使用できる

など、普通はパソコン上で使うようなソフトそのものがこのプラグイン1つで実装できます。

この記事の内容について
このプラグイン紹介記事は簡易的に動作テストをした上で紹介していますが以下の点にご注意願います
  1. すべての環境で動作するとは限りません
  2. できる限り最新のバージョンの情報を紹介するようにしておりますが、閲覧される時期によってはバージョンが変わり、仕様が大きく変更されている場合があります
  3. 有料版と無料版がある場合、テストは原則無料版のみで実施しています
  4. テスト環境については文末に記載しています
  5. 使用方法で紹介しているショートコードをコピーして使用すると、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。

【DrawIt (draw.io)】プラグインの設定画面や表示の日本語化と翻訳

【DrawIt (draw.io)】プラグインは有効化すると日本語で使用できるようになっていますので、英語が分からない方でも安心して使えます

【DrawIt (draw.io)】プラグインのインストールと設定

インストールと設定方法

インストールはプラグインの新規追加でプラグイン名で検索してインストールするか、ページ先頭の画像をクリックして表示されるWordpressのプラグイン公式配布ページがダウンロードしてからアップロードインストールします。

インストール方法の詳しい解説は

Wordpressと言えばさまざまな追加機能を使って思い通りの表現や動作ができるのがブログやHTMLで作ったサイトと違って楽しいところですね。ここでは基本的なプラグインの導入の仕方とトラブルが発生した場合の対処方法について解説します。
を参照ください

このプラグインにはいくつかの設定項目がありますが、特に変更する箇所はありません。

【DrawIt (draw.io)】プラグインの基本的な使い方

テキストエディタでの説明をします

基本的な使い方

  1. 投稿編集画面で「DrawIt」というボタンをクリックすると別ウインドウが開きます
  2. ※最初に使う際、画面右側の地球マークをクリックすると言語が選択できますので日本語にします

  3. あとはパソコン用のドロー(ペイント)ソフトと同様にいろいろと加工して保存します
  4. 編集画面に戻り、画像を表示するためのコードが挿入されていることを確認して完了です

加工に関しては使っていただくしか説明のしようがありませんので今回の説明では省略します。とにかく触っていると時間がどんどん過ぎてしまう位簡単に、しかもいろいろな加工ができます。

また、同一画面上で作成した画像をパソコンなどに保存できるエクスポート機能も使えます(インポートもできます)

保存した画像の取り扱い

  1. 投稿の「公開」または「更新」、「下書き保存」などをクリックして一旦投稿を保存します
  2. 1で保存された画像はメディアに保存されていますので、他の投稿などでも利用できるようになります

画像を再編集するには

投稿に挿入されている画像タグ全体をドラッグした後「DrawIt」ボタンをクリックしてください。「DrawIt」プラグインで加工した画像であれば別画面に加工可能な状態で表示されます。
※最初に加工して挿入されたタグでも、保存してメディアから挿入したタグでもきちんと判断されるようです

使用上の注意点

  1. このプラグインを使って作った画像は再編集できるように一時ファイルが作成されます。その分だけ単純にサーバーの容量を使うことになります。
  2. 加工する画像には自由に名前を付けられますが以下のようになりますから留意してください
    • マルチバイト文字に対応していないので日本語でタイトルを付けるとエンコードされ長くて見にくいタイトルになります
    • 恐らくですが、メディア保存されたタイトルと一時ファイルのタイトルが同一の場合のみ再編集が可能になります
  3. 加工した画像を挿入後、投稿を保存することでメディアに保存されるのですが、保存される度に新たなファイルが作成されてしまうようです。
    1. 一度だけ投稿を保存
    2. 一旦作成したときにできた画像タグは削除して再度保存
    3. メディアから画像を挿入

    という手順で行うと無意味な画像が増えることを防げます

【DrawIt (draw.io)】プラグインの便利な使い方・カスタマイズ方法など

より便利に使うカスタマイズ技やテストサイトで使用した結果や感想、Wordpressのプラグイン公式配布ページには書かれていない事柄などを紹介します。

一旦使い始めてしまうと、もう外部で画像を加工してアップしてみて「あれ?ここもうちょっと・・・」となって面倒なのでそのまま・・・ということがなくなりますから大変重宝しています。画像加工といってもウインドウズのペイントとは比べ物にならない位使いやすいですし、専用フリーソフトの「GIMP」などのように複雑で分からないということもありませんから、手軽に使用できます。

昔ポスターや掲示物などを作るときにJustsystemの「ラベルマイティ」というソフトを使っていたのですが、使い方そのものはそれと変わりません。画像入れて→大きさ変えて→回転させて→次の画像をいれて重ねて→文字を入れて・・・みたいに見ながら画像イメージそのものが簡単に作れます。

いろいろなプラグインを試用してきましたが、今までの中で一番秀逸なプラグインだと思います。

Wordpressの本

Amazonの人気商品楽天市場の人気商品
CS Shop
はじめの一歩! サクサクわかるWordPress 4.x対応 [ 茂木 葉子 ]

はじめの一歩! サクサクわかるWordPress 4.x対応 [ 茂木 葉子 ]

1,814 円 (税込) 送料込
茂木 葉子 天野 裕子 マイナビ出版ハジメノイッポ サクサクワカルワードプレス ヨンテンエックスタイオウ モテギ ヨウコ アマノ ユウコ 発行年月:2016年11月25日 予約締切日:2016年11月22日 ページ数:256p サイズ:単行本 ISBN:9784839959876 Introduction WordPress..
【中古】 WordPressサイト構築スタイルブック デザイナーのためのテンプレートタグリファレンス+サイトデザインテクニック /エ・ビス..

【中古】 WordPressサイト構築スタイルブック デザイナーのためのテンプレートタグリファレンス+サイトデザインテクニック /エ・ビス..

98 円 (税込)
エ・ビスコム・テック・ラボ【著】販売会社/発売会社:毎日コミュニケーションズ/毎日コミュニケーションズ発売年月日:2006/11/11JAN:9784839921910
楽天ウェブサービスセンター CS Shop

プラグインに関するお問い合わせ

「こんなプラグインないの?」「設定方法をもっと詳しく教えてほしい」「プラグインを少しカスタマイズして使いたい」などのご相談は、こちらのリンクからお願いします(【ココナラ】のサイトへ移動します)。

ココナラ Wordpress プラグイン探し バナー
トップへ戻る