こんにちは、WPホームページ研究所の運営サポートチーム（@WP_LABO）です。
ちょっとしたヘッダー画像やバナー作成程度であればプロのデザイナーさんへ依頼せずに自分でイメージを作成できる便利なサービス「Canva（キャンバ）」。本日はレイアウトが崩れた場合の回避策です。
目次
canva（キャンバ）で書き出すとレイアウトが崩れた時の解決策
とりあえず参考までにバナーを１つだけ作ってみました。画像サイズは王道の「横728px縦90px」です。
書き出しテスト用のバナーを作成
画像を配置して、文字やボタンの位置を決めていきましょう。
全体的な微調整を繰り返して以下のバナーが完成いたしました。
書き出すとレイアウト崩れが発生
しかし、書き出してみるとなぜか全体のレイアウトが崩れてしまいます。
レイアウト通りに書き出す方法
どうやら書き出し段階で「日本語フォントの一部」を正しく認識できていないようです。今回は回避策として画面表示を「100％表示」に切り替えてからスクリーンショットを撮ってサイズ通りに切り出しました。あと念のためにサポートサイトにレイアウトが崩れる件をメッセージで送っておきましょう。
余裕を持たせてスクリーンショット
100%表示へ切り替えたら完成状態と同じ見え方になります。サイズに余裕を持って画面をキャプチャ。
デザイン通りに保存すればOK
そしてグレーの箇所が消えるように切り出し。画像の編集はオンライン上の無料エディターでも「Skitch」でもなんでも構いません。横幅728px 縦幅90pxでデザイン通りに保存ができればOKです。
わざわざ自分自身で強制的に保存して後から編集しなくても綺麗に書き出せるようにバグを直してほしいところですが改善されるまで待っていても時間の無駄。褒められた手順ではないですが苦肉の策です。
まとめ
本日はキャンバ（Canva）の書き出しでレイアウト崩れが発生した際の解決策をご紹介いたしました。キャンバ側には何度かレイアウト崩れのキャプチャを英語解説をつけて共有済みなのでいづれ解決するはずです。
キャンバが律儀なシステムなのでわざわざフォントの状態を細かくチェックして画像が書き出されています。むしろ「スクリーンショットを撮って書き出すシンプルな仕組み」へ変更して欲しいですね。
この書き出しバグ現象はサポートへ申告済みなので近々解決するかもしれません。
最新式の無料プラグインを事前公開
WordPressは公式サイトに登録済みのプラグインだけで全機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグインを無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
→ 改良されたプラグインを確認する
