![](https://hibinogblog.com/wp-content/uploads/2024/02/a96b26980b4c38a7e332ccf95ca66359-150x150.png)
WordPressテーマのSWELLで、ふきだしのオリジナルアイコンを作りたい。でもどうやったらいいかわからない…
![](https://hibinogblog.com/wp-content/uploads/2024/02/212d0e1f26ed3bd48074d5c73eb33cdb-150x150.png)
![](https://hibinogblog.com/wp-content/uploads/2024/02/212d0e1f26ed3bd48074d5c73eb33cdb-150x150.png)
![](https://hibinogblog.com/wp-content/uploads/2024/02/212d0e1f26ed3bd48074d5c73eb33cdb-150x150.png)
サイズとかどうしたらいいの??
と思っていましたが、かんたんに作ることが出来ました。
具体的には
の順番で作成出来ました。
以下、詳しくご説明します。
PR
SWELLでふきだしのアイコンをつくって登録する方法
まずはアイコンで使うアイコン画像を用意します。
私は 画像サイズ 160px×160px 解像度 72dpi で作ったものを用意しました。
![](https://hibinogblog.com/wp-content/uploads/2024/02/b47c9bbf871f70d8a2c455d857d1e6c5-150x150.png)
![](https://hibinogblog.com/wp-content/uploads/2024/02/b47c9bbf871f70d8a2c455d857d1e6c5-150x150.png)
![](https://hibinogblog.com/wp-content/uploads/2024/02/b47c9bbf871f70d8a2c455d857d1e6c5-150x150.png)
アイコンの画像は、正方形で用意すると使いやすいです。
画像サイズを調べてみると160~230pxくらいで用意されている方が多かったです。
画像サイズが大きいほど絵はくっきりと綺麗に見えますが、ページの表示速度に影響してくるので、あまり大きすぎるサイズを使わないほうがいいとされています。ただし、画像サイズが小さすぎると画像が粗く見えます。
![吹き出しねこの画像](https://hibinogblog.com/wp-content/uploads/2024/02/a96b26980b4c38a7e332ccf95ca66359.png)
![吹き出しねこの画像](https://hibinogblog.com/wp-content/uploads/2024/02/a96b26980b4c38a7e332ccf95ca66359.png)
これが今回用意した画像です。
用意したイラストが細かい線のイラストではないので、粗さがあまり目立たないです。
安心と信頼のお絵かきソフトはこれ【CLIP STUDIO PAINT】![](https://www17.a8.net/0.gif?a8mat=3Z2PAN+G8NOTU+3AP2+626XU)
![](https://www17.a8.net/0.gif?a8mat=3Z2PAN+G8NOTU+3AP2+626XU)
アイコン画像はもちろんフリー素材を使っても大丈夫です。
無料で使える画像を調べるとたくさん出てきますが、
有料ならココナラ
PR
アイコン画像が用意出来たら、ワードプレスの管理画面にログインします。
![ふきだしの色の図](https://hibinogblog.com/wp-content/uploads/2024/02/826239155ec525b67cf3280a5723f401-1-1024x212.png)
![ふきだしの色の図](https://hibinogblog.com/wp-content/uploads/2024/02/826239155ec525b67cf3280a5723f401-1-1024x212.png)
● SWELL設定→ エディター設定→ ふきだし の順番にクリックします。
![エディター設定の図](https://hibinogblog.com/wp-content/uploads/2024/02/fd1ac1f5c059ee1ec48ec860f2899c7d-1024x538.png)
![エディター設定の図](https://hibinogblog.com/wp-content/uploads/2024/02/fd1ac1f5c059ee1ec48ec860f2899c7d-1024x538.png)
↓ すると、ふきだしカラーの設定の画面が出てきます。
![ふきだしのセリフ部分の色の図](https://hibinogblog.com/wp-content/uploads/2024/02/eb4fd8b7212285da1a22f091abd8fa66-1-1024x538.png)
![ふきだしのセリフ部分の色の図](https://hibinogblog.com/wp-content/uploads/2024/02/eb4fd8b7212285da1a22f091abd8fa66-1-1024x538.png)
この設定が終わったら、次はアイコンの登録等をしていきます。
ワードプレスの管理画面のふきだしをクリック→出てきた画面にある新規ふきだし追加をクリックします。
※下の図の①→②のようにクリックします。
![吹き出し説明用画像](https://hibinogblog.com/wp-content/uploads/2024/02/aeffd42e214d3b4f43ad794fd24cfc4b-1024x538.png)
![吹き出し説明用画像](https://hibinogblog.com/wp-content/uploads/2024/02/aeffd42e214d3b4f43ad794fd24cfc4b-1024x538.png)
出てきた画面の下の図の③の場所をクリックすると、④のアップロード画面が出てきます。
![アイコン画像登録の図](https://hibinogblog.com/wp-content/uploads/2024/02/728e191e4f4f60ae8932ab490b0c3944-1024x538.png)
![アイコン画像登録の図](https://hibinogblog.com/wp-content/uploads/2024/02/728e191e4f4f60ae8932ab490b0c3944-1024x538.png)
↓
![アップロード画面](https://hibinogblog.com/wp-content/uploads/2024/02/8118fd3605320f390ff8f5d13dec57e1-1024x538.png)
![アップロード画面](https://hibinogblog.com/wp-content/uploads/2024/02/8118fd3605320f390ff8f5d13dec57e1-1024x538.png)
ファイルを選択をクリックして、用意したふきだしアイコン用の画像をアップロードします。
![SWELLふきだしのアイコンのつくりかたの図](https://hibinogblog.com/wp-content/uploads/2024/02/2383a835516b0cd8118220f88835ff2b-1024x538.png)
![SWELLふきだしのアイコンのつくりかたの図](https://hibinogblog.com/wp-content/uploads/2024/02/2383a835516b0cd8118220f88835ff2b-1024x538.png)
画像のアップロードが終わったら、あとは細かい設定です。
⑤ 好きなアイコンのふきだしセットのタイトルを記入
⑥ ふきだしのアイコンの下に表示させる文字。なくても大丈夫です。
⑦ アイコンに丸い枠をつけるか、形や色をどうするかなどを決められます。
※ふきだしの色 は一番最初に SWELL設定→エディター設定→ふきだし で設定したカラーセット(図の★の部分)
が反映されるので、この中から色を選びます。
例えば
![ふきだしの例](https://hibinogblog.com/wp-content/uploads/2024/02/3641ef2651d69b77f4c9ce8e2041e5af-1024x538.png)
![ふきだしの例](https://hibinogblog.com/wp-content/uploads/2024/02/3641ef2651d69b77f4c9ce8e2041e5af-1024x538.png)
こんなかんじでアイコンを丸い枠ありで表示するかや、ふきだしの向きを簡単に変えられます。
ふきだしの形などが決まったら、登録を押すと、いま作ったふきだしのパターンが登録されます。
![ふきだし説明画像](https://hibinogblog.com/wp-content/uploads/2024/02/16ef8d87a1a1765a7f24f93f7d957603-1024x538.png)
![ふきだし説明画像](https://hibinogblog.com/wp-content/uploads/2024/02/16ef8d87a1a1765a7f24f93f7d957603-1024x538.png)
ふきだしセット一覧につくったふきだしセットが追加されます。
![ふきだしセットの図](https://hibinogblog.com/wp-content/uploads/2024/02/ac4a88449a50072410a809237620513a-1024x538.png)
![ふきだしセットの図](https://hibinogblog.com/wp-content/uploads/2024/02/ac4a88449a50072410a809237620513a-1024x538.png)
![](https://hibinogblog.com/wp-content/uploads/2024/02/a96b26980b4c38a7e332ccf95ca66359-150x150.png)
![](https://hibinogblog.com/wp-content/uploads/2024/02/a96b26980b4c38a7e332ccf95ca66359-150x150.png)
![](https://hibinogblog.com/wp-content/uploads/2024/02/a96b26980b4c38a7e332ccf95ca66359-150x150.png)
これでふきだしアイコンが登録出来ました!
あとは簡単に記事作成ページで呼び出して使えます。
番外編:ふきだしを使いたいとき
![](https://hibinogblog.com/wp-content/uploads/2024/02/a96b26980b4c38a7e332ccf95ca66359-150x150.png)
![](https://hibinogblog.com/wp-content/uploads/2024/02/a96b26980b4c38a7e332ccf95ca66359-150x150.png)
![](https://hibinogblog.com/wp-content/uploads/2024/02/a96b26980b4c38a7e332ccf95ca66359-150x150.png)
さっそくふきだしを使ってみたい…。
![](https://hibinogblog.com/wp-content/uploads/2024/02/212d0e1f26ed3bd48074d5c73eb33cdb-150x150.png)
![](https://hibinogblog.com/wp-content/uploads/2024/02/212d0e1f26ed3bd48074d5c73eb33cdb-150x150.png)
![](https://hibinogblog.com/wp-content/uploads/2024/02/212d0e1f26ed3bd48074d5c73eb33cdb-150x150.png)
どうやってふきだしを出したらいいの?
記事作成画面の左上にある青くなっている+のボタンをクリックする。
![ふきだしの呼び出し方の図1](https://hibinogblog.com/wp-content/uploads/2024/02/d980b89f1851cd5c6e42800235206ca0-1024x345.png)
![ふきだしの呼び出し方の図1](https://hibinogblog.com/wp-content/uploads/2024/02/d980b89f1851cd5c6e42800235206ca0-1024x345.png)
すると、左側にSWELLブロックが出てきます。その中から ふきだし を選んでクリックします。
![ふきだしの出し方説明の図](https://hibinogblog.com/wp-content/uploads/2024/02/e2b2a698e9d18651dae131c8703e1931-1024x538.png)
![ふきだしの出し方説明の図](https://hibinogblog.com/wp-content/uploads/2024/02/e2b2a698e9d18651dae131c8703e1931-1024x538.png)
●呼び出し方ーその2
記事作成画面の上にあるボタン
もうひとつの方法は、呼び出し方があって、記事作成画面の上に出ている左から6個目のマークをクリックしてふきだしを選ぶ方法です。
![ふきだしの呼び出し方の図](https://hibinogblog.com/wp-content/uploads/2024/02/b6aa99d966d06a9a2adb316b074d9954-1024x325.png)
![ふきだしの呼び出し方の図](https://hibinogblog.com/wp-content/uploads/2024/02/b6aa99d966d06a9a2adb316b074d9954-1024x325.png)
↓
![ふきだしの呼び出し方の説明の図](https://hibinogblog.com/wp-content/uploads/2024/02/1987761c4c53af3a2a2151942004ea25-1024x538.png)
![ふきだしの呼び出し方の説明の図](https://hibinogblog.com/wp-content/uploads/2024/02/1987761c4c53af3a2a2151942004ea25-1024x538.png)
以上の2つのどちらかの場所から、ふきだしをクリックします。
すると、記事作成画面に
![ふきだしだけの画像](https://hibinogblog.com/wp-content/uploads/2024/02/724aa4868a20c8216b9a11f7900a76fd-1024x235.png)
![ふきだしだけの画像](https://hibinogblog.com/wp-content/uploads/2024/02/724aa4868a20c8216b9a11f7900a76fd-1024x235.png)
↑ このようにアイコン画像のない、ふきだしのセリフ部分だけのふきだしが出てきます。
これをさっき作ったアイコン画像入りのふきだしに変えたい時は
画面右側に ふきだしセットが出てくるので、使いたいものをクリックします。
![ふきだし呼び出し説明の図](https://hibinogblog.com/wp-content/uploads/2024/02/97bccf3be0c20433c526762eae9ae571-1-1024x538.png)
![ふきだし呼び出し説明の図](https://hibinogblog.com/wp-content/uploads/2024/02/97bccf3be0c20433c526762eae9ae571-1-1024x538.png)
すると、
![](https://hibinogblog.com/wp-content/uploads/2024/02/a96b26980b4c38a7e332ccf95ca66359-150x150.png)
![](https://hibinogblog.com/wp-content/uploads/2024/02/a96b26980b4c38a7e332ccf95ca66359-150x150.png)
![](https://hibinogblog.com/wp-content/uploads/2024/02/a96b26980b4c38a7e332ccf95ca66359-150x150.png)
さっき作ったふきだしに変わりました!
![](https://hibinogblog.com/wp-content/uploads/2024/02/212d0e1f26ed3bd48074d5c73eb33cdb-150x150.png)
![](https://hibinogblog.com/wp-content/uploads/2024/02/212d0e1f26ed3bd48074d5c73eb33cdb-150x150.png)
![](https://hibinogblog.com/wp-content/uploads/2024/02/212d0e1f26ed3bd48074d5c73eb33cdb-150x150.png)
お疲れ様でした。説明は以上です。
まとめ
SWELLでふきだしのアイコン画像を登録してオリジナルふきだしを作りたいとき
- ワードプレスの管理画面、SWELL設定でふきだしのセリフ部分の色を設定。
- そして、ふきだしの所で画像を登録して向き、形などの細かい設定の登録。
ふきだしを使いたいとき
- 記事を書く画面の青色の+ボタン、もしくは画面上のマーク
からふきだしをクリック。
![](https://hibinogblog.com/wp-content/uploads/2024/02/a96b26980b4c38a7e332ccf95ca66359-150x150.png)
![](https://hibinogblog.com/wp-content/uploads/2024/02/a96b26980b4c38a7e332ccf95ca66359-150x150.png)
![](https://hibinogblog.com/wp-content/uploads/2024/02/a96b26980b4c38a7e332ccf95ca66359-150x150.png)
の順にすればふきだしを作って使えます。
※※※※※※※※※
最後まで読んでいただきありがとうございました。
SWELLでふきだしを使いたいと思っている方の参考になれば幸いです。