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

公開日:2016年8月6日 画像・動画
Knowledge Base メンテナンス
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. 使用方法で紹介しているショートコードやコードなどをコピーして使用すると、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。

メディアライブラリ一覧上でALT(代替)テキストの編集ができるプラグイン「Quick Alt Editor」

WordPressの管理画面でアイキャッチ画像が簡単に変えられるプラグイン「Easy Featured Images」

WordPressでアップロードした画像から位置情報などのデータを削除するプラグイン「Exif-Remove-ImageMagick」


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

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

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

インストール方法

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

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

を参照ください

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

【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の「ラベルマイティ」というソフトを使っていたのですが、使い方そのものはそれと変わりません。画像入れて→大きさ変えて→回転させて→次の画像をいれて重ねて→文字を入れて・・・みたいに見ながら画像イメージそのものが簡単に作れます。

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

このページを紹介いただいているサイト

 インターネットの世界はネットワークが命。私の拙いページをご紹介いただいているありがたいサイト様へ少しでも恩返しを・・ということでサイトへのリンクを張らせていただきます。ぜひご覧ください。

※Google Analyticsでのリファラアクセスデータを元にリンクさせていただいております(リンクを張っていただいている方でも本ページへアクセスのないサイト様は残念ながら掲載できておりません)

※リンクを張っていただいているサイト様でも長期間本ページへのアクセスがない場合にはリンクを解除させていただく場合があります

Wordpressの本

Amazonの人気商品楽天市場の人気商品
【中古】 本格ビジネスサイトを作りながら学ぶWordPressの教科書 2(スマートフォン対応サイト編 / プライム・ストラテジー株 / [大型..

【中古】 本格ビジネスサイトを作りながら学ぶWordPressの教科書 2(スマートフォン対応サイト編 / プライム・ストラテジー株 / [大型..

799 円 (税込)
著者:プライム・ストラテジー株式会社出版社:SBクリエイティブサイズ:大型本ISBN-10:4797370963ISBN-13:9784797370966■こちらの商品もオススメです ● 20歳の自分に受けさせたい文章講義 / 古賀 史健 / 講談社 [新書] ■通常24時間以内に出荷可能です。■メール便は、1冊..
【新品】【本】エンジニアのためのWordPress開発入門 野島祐慈/著 菱川拓郎/著 杉田知至/著 細谷崇/著 枢木くっくる/著

【新品】【本】エンジニアのためのWordPress開発入門 野島祐慈/著 菱川拓郎/著 杉田知至/著 細谷崇/著 枢木くっくる/著

3,278 円 (税込)
■ISBN:9784774187068★日時指定・銀行振込をお受けできない商品になりますタイトル【新品】【本】エンジニアのためのWordPress開発入門 野島祐慈/著 菱川拓郎/著 杉田知至/著 細谷崇/著 枢木くっくる/著フリガナエンジニア ノ タメ ノ ワ−ドプレス カイハツ ニユ..
楽天ウェブサービスセンター CS Shop
ひまあーと(管理人)
  • 記事の作者: ひまあーと(管理人)

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】


記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報