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コードの出力方法
- drawioを開く
- 「File ->Embed -> HTML -> Create -> Copy」の順番で選択して、埋め込みコードの表示
- 表示させた埋め込みコード(HTMLコード)をwordpressの任意の場所に貼り付ける
その結果、以下のような図になります。
■特徴
- 画像が綺麗
- drawioで設定したリンクをクリックできる
- ただし図によっては、文字の位置などずれることがある。
PNG画像を貼り付ける
■PNG画像に出力
- drawioを開く
- 「Export as -> PNG 」の順で選択してPNG画像を作成する
- wordpressで画像ファイルとして貼り付ける
■特徴
- 図の位置ずれが発生しない
- 画像が若干荒い
- 画像が粗いため、文字が読みづらい。
SVG画像を貼り付ける(筆者オススメ！)
■SVG画像に出力
- drawioを開く
- 「Export as -> SVG 」の順で選択してSVG画像を作成する
- wordpressで画像ファイルとして貼り付ける
その結果、以下のように表示されます。
■特徴
- 図の位置ずれが発生しない
- 拡大しても画像(文字)が綺麗
- wordpressで利用する場合は、プラグインなど必要で手間がかかる
関連記事
drawioやxmindで書いた図を綺麗なままwordpressで表示したい！ SVG画像(アニメーションも含む)をwordpressで表示したい。 どうしたら実現できるの？ こ[…]
ポイント
drawioで書いた図形に対して、アニメーションCSSを割り振ることにより、任意の図形を動かすこともできます。
ただし、図形を特定するためには、テキストエディタでSVGファイルを開き、データを調べる必要があります。
また、アニメーションCSSは、SVGの中に埋め込む必要があります。
まとめ
今回は、drawioで書いた図をwordpressの記事に反映させる、３つの方法を紹介しました。
どれも一長一短あります。
図が一番綺麗で、かつ、書いた通りに表現されるものは、SVG画像でした。