drawioで書いた図をwordpressで利用する3つの方法

  • 2021年11月30日
  • 2021年12月5日
  • wordpress
  • 72view

drawioで書いた図をPNG画像に変換したとき、画像が粗くなり文字が読みづらいという問題が発生しました。

どうすれば、図が一番綺麗で、かつ、書いた通りに表現されるのか調査しました。その結果、SVG画像の利用でした。

 

この記事では、drawioで書いた図をwordpressで表示する3つの方法を紹介します。

 

drawioで書いた図の出力方法の比較

drawioで書いた図を、以下の3つの方法で出力してみました。

それぞれ、メリット、デメリットがあったのでまとめます。

HTMLコード埋め込み PNG画像で出力 SVGデータで出力
メリット 画像が綺麗 図の位置ずれが発生しない
図の位置ずれが発生しない
drawioで設定したリンククリックできる
拡大しても画像が綺麗
デメリット 図によっては位置ずれが起きる 画像が荒い
wordpressで利用する場合は、プラグインなど必要で手間がかかる
図を拡大するとスクロールしずらくなることがある 文字が読みづらい

 

drawioで編集したあとの画面は以下のとおりです。

 

HTMLコード埋め込みで出力

■HTMLコードの出力方法

  1. drawioを開く
  2. 「File ->Embed -> HTML -> Create -> Copy」の順番で選択して、埋め込みコードの表示
  3. 表示させた埋め込みコード(HTMLコード)をwordpressの任意の場所に貼り付ける

 

その結果、以下のような図になります。

 

■特徴

  • 画像が綺麗
  • drawioで設定したリンクをクリックできる
  • ただし図によっては、文字の位置などずれることがある。

 

PNG画像を貼り付ける

■PNG画像に出力

  1. drawioを開く
  2. 「Export as -> PNG 」の順で選択してPNG画像を作成する
  3. wordpressで画像ファイルとして貼り付ける

 

 

■特徴

  • 図の位置ずれが発生しない
  • 画像が若干荒い
  • 画像が粗いため、文字が読みづらい。

 

SVG画像を貼り付ける(筆者オススメ!)

■SVG画像に出力

  1. drawioを開く
  2. 「Export as -> SVG 」の順で選択してSVG画像を作成する
  3. wordpressで画像ファイルとして貼り付ける

 

その結果、以下のように表示されます。

 

■特徴

  • 図の位置ずれが発生しない
  • 拡大しても画像(文字)が綺麗
  • wordpressで利用する場合は、プラグインなど必要で手間がかかる
関連記事

drawioやxmindで書いた図を綺麗なままwordpressで表示したい! SVG画像(アニメーションも含む)をwordpressで表示したい。 どうしたら実現できるの?   このような疑問にお答え[…]

 

ポイント

drawioで書いた図形に対して、アニメーションCSSを割り振ることにより、任意の図形を動かすこともできます。

ただし、図形を特定するためには、テキストエディタでSVGファイルを開き、データを調べる必要があります。

また、アニメーションCSSは、SVGの中に埋め込む必要があります。

 

 

まとめ

今回は、drawioで書いた図をwordpressの記事に反映させる、3つの方法を紹介しました。

どれも一長一短あります。

図が一番綺麗で、かつ、書いた通りに表現されるものは、SVG画像でした。

 

 

最新情報をチェックしよう!
>プログラミングスクール検索・比較表サイト

プログラミングスクール検索・比較表サイト

ワンクリック、さらに詳細に条件を指定してプログラミングスクールの検索ができます。さらに比較表により特徴を細かく比較できる!

CTR IMG