takato（@n8takato）です！
swellで吹き出しを表示する方法を知りたい。
この記事は上記の課題に向けて作成しています。
ブログを書く時に吹き出しを作る事があると思います。
swellでは簡単に吹き出しを作る事ができます。
この記事はswellユーザー向けに吹き出しの作り方を説明します。
この記事を読むメリット
- swellで吹き出しを作る方法がわかる
この記事を書いた人
この記事を書いた僕はこんな人です！
- 都内制作会社でwebデザイナーとして勤務
- webデザイナー3年目
- web制作現場で学んだことを発信している人
swellに関する他の記事はこちら
swellで吹き出しを作る2つの方法
swellで吹き出しを作る方法は2通りあります。
- 吹き出しセットを活用する
- ブロックエディター上で吹き出し作成する
吹き出しセットを活用する
swellには「吹き出しセット」と呼ばれる機能があります。
吹き出しセットとは、一度登録した吹き出しを簡単に呼び出すことの出来る機能です。毎回吹き出しを作る必要が無くなります。
毎回同じ吹き出しを使う場合は「吹き出しセット」の活用がおすすめです。
吹き出しセットの使い方は下記の通りです。
吹き出しセットの使い方
- 「ふきだし」を選択
- 「新規ふきだし追加」を選択
- 吹き出し情報を入力し登録する
- エディター上で登録した吹き出しを表示する
①「ふきだし」を選択
WordPress管理画面にある「ふきだし」を選択します。
②「新規ふきだし追加」を選択
続いて青色の「新規ふきだし追加」を選択します。
③吹き出し情報を入力し登録する
ここで吹き出し情報を追加します。
- 画像
- アイコンの丸枠
- ふきだしの形
- ふきだしの向き
- ふきだしの線
- ふきだしの色
- テキストとアイコンの並び
これらの情報を好きなようにカスタマイズします。
カスタマイズが終わったら青色の「登録」ボタンをクリックします。
④エディター上で登録した吹き出しを表示する
先ほど登録した吹き出しをエディター上で呼び出します。
ブロックエディターの右側にある「+」を選択します。
続いて「ふきだし」を選択します。
検索する際は「ふきだし」とひらがなで入力してくだい。
右側に「ふきだしセット」があるので、先ほど作成した吹き出しを選択します。
するとエディター上に吹き出しが表示されます。
吹き出しセットの活用方法は以上です。
ブロックエディター上で吹き出し作成する
続いてブロックエディター上で吹き出しを作成する方法を説明します。
使い回さない吹き出しを作る場合はブロックエディター上で作成する方法がおすすめです。
ブロックエディター上で吹き出しを作成する手順は下記の通りです。
- ブロックエディター上で「ふきだし」を選択する
- ブロック上で吹き出し情報を入力する
①ブロックエディター上で「ふきだし」を選択する
ブロックエディター右側にある「+」から「ふきだし」を選択します。
②ブロック上で吹き出し情報を入力する
右側にある「ふきだし設定」で吹き出しに必要な情報を入力します。
以上でブロックエディター上に吹き出しを作成する事が出来ます。
swellの吹き出しデザインの種類
続いてswellの吹き出しデザインの種類を説明します。
吹き出しを作る際デザインを変更することができます。
変更できる吹き出しのデザイン
- ふきだしの形
- ふきだしの向き
- ふきだしの線
- ふきだしの丸枠
- ふきだしの色
- アイコン下に名前の表示
①ふきだしの形
swellは吹き出しの形が2種類あります。
- 発言
- 心の声
発言はこんな感じ！
心の声はこんな感じ！
②ふきだしの向き
吹き出しの向きを変更することが出来ます。
左からだよー！
右からだよー！
吹き出しの向きは画像に合わせるのが良いと思います。
僕の画像だと右からの方がしっくりきますね。
③ふきだしの線
吹き出しの縁の部分に線を追加することが出来ます。
線ありだよー！
線をつけると吹き出しの視認性が高まりますね。
④ふきだしの丸枠
吹き出しの画像を丸や四角に変更出来ます。
四角くするとこんな感じー！
吹き出しの画像は丸い方が良いですね。
⑤ふきだしの色
swellは吹き出し部分の色を変更することも出来ます。
こんな感じに色が変わるよー！
⑥アイコン下に名前の表示
吹き出しのアイコン下記に名前を入れることが出来ます。
takatoこんな感じで名前が反映されるよ！
上記のような感じで吹き出しのデザインを変更することが出来ます。
吹き出しはイラスト画像もおすすめ
吹き出しは自分の写真以外のイラストを必要とする場合があります。
例えばこんな感じのイラストだよ。。。。
上記のようなイラストは素材サイトから手に入れることが出来ます。
イラストを探すおすすめな素材サイト
僕がおすすめするイラスト素材サイトはこちらです。
- イラストAC
イラストAC
イラストACはイラストをメインとした素材サイトです。
無料で使用することが出来ます。
ただ、無料会員では下記の制限が発生します。
- サイト内検索回数 1日4回まで
- ダウンロード回数 1日9点まで
そこまで大きな制限では無いので、無料会員で十分だと思います。
吹き出しを使うメリット
swellで吹き出しを表示する方法はわかったけど、吹き出しを表示するメリットはなに？
上記のような疑問を持った方がいると思います。
ブログで吹き出しを表示するメリットは下記の通りです。
- 文章の視認性が高まる
- ストーリー性が高まる
文章の視認性が高まる
吹き出しを使うことで文章の視認性が高まります。
読者の悩みを表示する際、文章だけなのと吹き出しが付いているのでは気付きやすさは異なりますよね。また、吹き出しのイラストと文章のニュアンスが一致しているとより内容が入ってきやすくなります。
吹き出しを使うことで文章が見やすくなります。
ストーリー性が高まる
吹き出しを使うもう1つのメリットは記事のストーリー性が高まることです。
「悩む人」と「解決する筆者」の2つの吹き出しを作成することで、文章のストーリー性が高まります。
例えば下記のような感じですね。
吹き出しを表示するメリットはなに？
takato記事のストーリー性を高めるメリットがあるよ！
2つの吹き出しを作成することで記事が「会話」に近い形になります。
ストーリー性が高まると記事が読みやすくなります。
swellは吹き出しが簡単に使える
最後にまとめです。
- swellの吹き出しは「吹き出しセット」か「ブロックエディター上で行う」の2通りがある
- 吹き出しには様々なデザインがありカスタマイズ可能
- 吹き出しのイラストダウンロードはイラストACがおすすめ
- 吹き出しは「視認性を高める」と「ストーリー性を高める」の2つのメリットがある
swellは吹き出しの作成やカスタマイズが簡単に行えるテーマです。
まだ吹き出しを使用していない方は是非活用してください。