プラグインの吹き出しクリエイターを使ってみたら最高だった

鹿せんべいを投げに行こう

ブログでよく使う「吹き出し」

ぼくは10種類くらいのアイコンを使っています。

色々な表情をつかって感情を表現できるのがとてもいいのですが、実はアイコンの管理がとっても大変なんです！

吹き出しクリエイターのすごいところ

アイコンがたくさんあって管理がたいへん！って言う人にはもってこいのプラグインです。

実際に使った感じ

吹き出しクリエイターは「管理」がめちゃ簡単

増えすぎたアイコン

あれどこに保存したっけ、、、画像URLなんだっけ、、、なんて無駄な時間はなくなります！

吹き出しクリエイターの管理画面

登録しているアイコンがカード型で並んでいます。

これがめちゃくちゃ見やすい。

シンプルに1ページ10個のアイコンが表示されているので、ごちゃごちゃした管理画面ではありません。

カード部分

カードは必要な機能だけでシンプルです。

吹き出しクリエイターの編集画面

⑤と⑥が特に素晴らしいです。

登録したアイコンごとに背景色と吹き出しのタイプを選択することができます！

吹き出しクリエイターは「挿入」がめちゃラク

吹き出しクリエイターならビジュアルエディタにドロップダウン式で簡単挿入。

短いショートコードで挿入されるので、見た目もスマートです。

吹き出しクリエイターは「種類」が豊富

LINE風の吹き出し

ぼくはLINE風にしたくてしょうがなかったので、自力でカスタマイズしなくてすみました。

思い浮かべてる風の吹き出し

これも「あったらいいなぁ」と思っていた吹き出しです！

吹き出しの形が2種類増えるだけで、ものすごく表現の幅が広がりました。

吹き出しクリエイターをカスタマイズしてみた

吹き出しクリエイターを有効化すると

前のアイコンよりもサイズが小さくなります。

気にならないレベルですが、いままでの吹き出しと一緒にするために

吹き出しのアイコンをカスタマイズしました。

カスタマイズのコードを追加

/*--------------------------------------
  こじか吹き出し
--------------------------------------*/
.kjk_balloon figure img {/*アイコン部分*/
    border: solid 3px #eaedf2;/*線の種類・線の幅・線の色*/
}
.kb_text {/*文字*/
    color: #424242;/*文字の色*/
}
.kjk_balloon figure {/*アイコンの大きさ*/
    width: 80px;
    height: 80px;
}
.kb_line .kb_text {/*LINE風を修正（お好みで）*/
    max-width: 65%;/*幅調整*/
    padding: .5em 1em;/*内側の余白調整*/
    margin-top: 5px;/*位置調整*/
}
.kb_text.kb_right, .kb_text.kb_left {/*普通の吹き出しテキスト部分*/
    max-width: calc(100% - 100px);/*幅調整*/
}
@media only screen and (min-width: 768px){/*PCのとき*/
.kjk_balloon figure {/*アイコンの大きさ*/
    width: 110px;
    height: 110px;
}
.kb_text.kb_right, .kb_text.kb_left {/*普通の吹き出しテキスト部分*/
    max-width: calc(100% - 130px);/*幅調整*/
}}

たったこれだけで前と同じアイコンを使用できます！

人によってアイコンの枠線は色が違うと思いますので、自由に変更してください。

ショップへGO