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

  • 2021年11月30日
  • 2024年7月13日
  • wordpress
  • 456view

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

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

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

\IT未経験者からのサポートあり!転職サービス3選!!/

サービス名
未経験 未経験OK 未経験の転職専用 経験者向け
公開の求人数 ITエンジニア全体で1万件以上
ITエンジニア未経験で600件以上
未公開 5,000件以上
利用対象 全職種 IT特化 IT特化
特徴 ✓誰もが知る転職サービス
✓経歴を登録しておくとオファーが来る
✓企業担当者と条件交渉
✓スキルの身につく企業を紹介
✓IT専門のエージェントが対応
✓転職成功すると年収200万円以上の大幅アップがある
転職サポート内容
  • 求人検索
  • 企業担当者と交渉
  • 求人紹介
  • ライフプランのサポート
  • キャリア相談
  • 求人紹介
  • 提出書類の添削
  • 面接対策
公式サイト リクナビネクスト テックゲート レバテックキャリア

 

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画像でした。

\IT未経験者からのサポートあり!転職サービス3選!!/

サービス名
未経験 未経験OK 未経験の転職専用 経験者向け
公開の求人数 ITエンジニア全体で1万件以上
ITエンジニア未経験で600件以上
未公開 5,000件以上
利用対象 全職種 IT特化 IT特化
特徴 ✓誰もが知る転職サービス
✓経歴を登録しておくとオファーが来る
✓企業担当者と条件交渉
✓スキルの身につく企業を紹介
✓IT専門のエージェントが対応
✓転職成功すると年収200万円以上の大幅アップがある
転職サポート内容
  • 求人検索
  • 企業担当者と交渉
  • 求人紹介
  • ライフプランのサポート
  • キャリア相談
  • 求人紹介
  • 提出書類の添削
  • 面接対策
公式サイト リクナビネクスト テックゲート レバテックキャリア

 

 

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

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

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

CTR IMG