Menu
カテゴリー

SWELLブロック「ふきだし」の使い方【最適な画像サイズも紹介】

悩む人

SWELLブロック「ふきだし」の使い方と画像がイイ感じに表示されないので画像サイズについても教えてほしいです。

こういった悩みにお答えします。

本記事で解決できること

  • 「ふきだしセット」の登録方法
  • イイ感じに表示される画像サイズ
  • 投稿画面から「ふきだし」を作成する方法
  • 登録した「ふきだしセット」から「ふきだし」を作成する方法

是非、最後までご覧ください。

News

以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。

本記事の内容

SWELLブロック「ふきだし」の使い方【最適な画像サイズも紹介】

以下の順で解説していきます。

  • 「ふきだしセット」の登録方法
  • イイ感じに表示される画像サイズ
  • 投稿画面から「ふきだし」を作成する方法
  • 登録した「ふきだしセット」から「ふきだし」を作成する方法

「ふきだしセット」の登録方法

管理画面メニューから、「ふきだし」を選択します。

吹き出しセット一覧から、「新規ふきだし追加」を選択します。

ふきだしセットを新規登録から、以下を決めます。

  • 画像
  • アイコン下に表示する名前
  • ふきだしの内容
  • アイコンの丸枠
  • ふきだしの形
  • ふきだしの向き
  • ふきだしの線
  • ふきだしの色 ※「エディター設定」の「ふきだし」タブからふきだしの色を編集することもできます。
  • テキストとアイコンの並び

上記項目は投稿画面からでも変更することができるので、どこまで設定するかは作成者の好みによると思います。

ふきだしの色を編集

管理画面メニューから、「SWELL設定」>「エディター設定」を選択します。

エディター設定から、「ふきだし」タブを選択します。

ここでふきだしの色を編集することができます。

イイ感じに表示される画像サイズ

結論から先に言うと、画像サイズは「240×240」の正方形です。

理由は単純で開発者が240×240の画像を使っているからです。

「80x80」は画像が表示される領域で、丸枠にしなければこの領域で画像が表示されます(予想ですが、「80x80」の3倍で240x240の画像を使用しているのではないかと思います)。
極端ですが、実験として「800x800」の画像を用意して試しましたが問題ありませんでした笑

実例紹介

用意した画像サイズ「248×400」

縦長だと枠なしでも全身が「80×80」の領域に収まりません。

丸枠にしても同様です。

正方形の画像(背景透過)作成に使用しているツール

画像作成

あわせて読みたい

背景透過

remove.bg
画像をアップロード – remove.bg 画像を選んで背景を削除する – 100%自動 – 5秒内 – クリックをせずに – 無料。

投稿画面から「ふきだし」を作成する方法

管理画面メニューから、「投稿」>「新規投稿を追加」を選択します。

(ブロック挿入ツールを切り替え)から、「ブロック」>「SWELLブロック」>「ふきだし」を選択します。

「ふきだし管理ページ」から「ふきだしセット」を登録することもできます。

順番は好みによると思いますが、今回は上から順に作成していきます。

テキストを入力します。

「カラー設定」からふきだしの色を決めます。

「ふきだし設定」から以下を決めます。

  • ふきだしの形(発言 or 心の声)
  • ふきだしの向き(左 or 右)
  • ふきだしの線(なし or あり)
  • アイコンの丸枠(枠なし or 枠あり)
  • スマホでのテキストとアイコンの並び(横並び or 縦並び)
  • アイコン下に表示する名前 ※アイコン画像を選択しなければ入力できないためここのみ順番が前後します。
  • アイコン画像

「投稿を表示」または「(プレビュー)>新しいタブでプレビュー」を選択します。

このように表示されました。

登録した「ふきだしセット」から「ふきだし」を作成する方法

(ブロック挿入ツールを切り替え)から、「ブロック」>「SWELLブロック」>「ふきだし」を選択した後からの解説となります。

「ふきだしセット」からふきだしを選択します。

※ここから先の作成方法は既に投稿画面から「ふきだし」を作成する方法で解説していますので割愛しています。

表示確認

パソコン

このように会話形式にすることもできます。

スマホ

下段のふきだしでは「スマホでのテキストとアイコンの並び」にチェックを入れているためテキストとスマホでは縦並びになっています。

News

以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。

今回は以上です。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
本記事の内容