WordPress無料テーマ「Cocoon」では、人物のセリフの吹き出しをプラグインなしで表示することができます。
Cocoon（コクーン）は多機能の無料テーマで使っている人も多いため、疑問点は検索するとすぐに分かります。
今回の記事ではCocoonで吹き出しを設定する方法とカスタマイズのコツを説明します。
1．吹き出しの設定はまず画像の用意から
まず吹き出しの人物になる画像を用意します。
160～200ピクセルの正方形の画像にします。
私のブログでは、今まで「父さん」「母さん」しか出てきていませんでした。
まずはヒロハッピーの追加です。
こちらの画像が元画像です。
tinypngにドラッグアンドドロップして圧縮しておきます。
そしてダッシュボード左メニューの「Cocoon設定」から「吹き出し」を選びます。
そうしたら「新規追加」を選択します。
順番にみていきます。まずタイトルと名前です。
タイトルは任意のものをつけます。
名前は吹き出しアイコンの下に表示されるものです。
6文字以下推奨ということでした。
「ヒロハッピー」でかろうじて6文字。セーフです。
次にアイコン画像の選択です。
先ほど用意した画像を選択します。
選択ボタンを押すと、「画像を選択してください」というファイルのアップロード画面になりますので、そこからアップロードします。
続いて吹き出しスタイル。
以下の4つがあります。
1．デフォルト
デモ画面です。
セリフがグレーの囲みで、白無地です。
2．フラット
グレーの無地になり、囲み線との区別はなくなります。
3．LINE風
人物を右側に設定した場合のみ緑色の下地になります。
4．考え事
吹き出しの形が変わります。
次に人物位置。これは左か右かを選びます。
ヒロハッピーは左にしておきました。
そしてアイコンスタイル。「丸（枠線あり）」「丸（枠線なし）」「四角（枠線あり）」「四角（枠線なし）」の4つから選べます。
これは今までの吹き出しと合わせますので、「丸（枠線あり）」を選びました。
2．吹き出しに妖精の画像を設定する
ヒロハッピーに続いて、「妖精」の画像を追加します。いらすとやさんから選びました。
なぜ妖精なのかというと、トンネルズ＆トロールズで種族として出てくるからです。（スミマセン、意味の分からない人はスルーしてください）
これをWindows10付属の「ペイント」というソフトで200×200に縮小します。
といいたいところですが、元々の画像が正方形ではありません。
しかたなく、171×200ピクセルにしました。
ではまた吹き出しの新規追加から設定します。
今度は画像を右側にもってきました。
3．吹き出しのカスタマイズ
2020/10/10追記 ここからは一番下の追記まで飛んでください。この段落に書かれていることはしなくて大丈夫です。
ここでもうひとひねり吹き出しをカスタマイズしてみましょう。
準備として、「吹き出し固有のid」を取得しておきます。
吹き出しの一覧から、カスタマイズしたいものを選びます。
今回は「妖精」の吹き出しをカスタマイズします。
吹き出し一覧から、「妖精」と書いてあるところにマウスをあてます。
そうすると下にURLが出てきます。
ここに書いてあるのが固有のidです。今回は「17」ですね。
吹き出しメイン部分の背景色を白からラベンダーに変えます。
色の16進コードは「原色大辞典」というサイトから確認できます。
ラベンダーの16進コードは「#e6e6fa」であることがわかります。
ではカスタマイズです。
CSSで設定します。
Cocoonの子テーマでCSSを編集するときには、左側メニューの「外観」から「テーマエディター」で、Cocoon Childのstyle.cssを書き換えます。
「付随のCSSエディターで、編集とライブプレビューを行うことができます」
と表示されるので、「付随のCSSエディター」というところをクリックします。
一番下の追加CSSを選びます。下の空欄に次のように記述します。
ここから－－－
.sb-id-17 .speech-balloon {
background-color: #e6e6fa; /* 吹き出しメイン部分の背景色 */
border: 2px solid #e6e6fa; /* 吹き出しメイン部分のボーダー */
color: #333; /* セリフの文字色 */
}
.sb-id-17 .speech-balloon::before {
border-left: 12px solid #e6e6fa; /* 三角部分の外側（ボーダー）の太さ・形状・色 */
}
.sb-id-17 .speech-balloon::after {
border-left: 12px solid #e6e6fa; /* 三角部分の内側（背景）の色 */
}
@media screen and (max-width: 480px){
.sb-id-17 .speech-balloon::before { border-left: 7px solid #e6e6fa; /* スマホでの三角部分の外側 */
}
.sb-id-17 .speech-balloon::after { border-left: 7px solid #e6e6fa; /* スマホでの三角部分の内側 */
}
}
－－－ここまで
以上で「妖精」の吹き出しがラベンダーになりました。
上にある「公開」のボタンを押します。
今回はCSSまでさわって難しかったな
試行錯誤が大切ですね
何事も挑戦！
私も顔を出すからね
だいぶにぎやかになってきました。
4．まとめ Cocoonは簡単に吹き出しの設定ができる
今さらながらCocoonの偉大さに感心しますね。
これで無料なんですから、本当にありがたいことです。
実は吹き出しの三角形のところに色を塗るのに苦労しました。
それでも何度かやっているうちにうまくいきました。
- Cocoonの吹き出しは「Cocoon設定」から
- さらにカスタマイズしたい人はトライ＆エラー
＞＞関連記事 ブログ記事を楽しく書く方法＆毎日書けないときの対応
追記 なんと！ Cocoonの親テーマを更新したら、設定が消えてしまいました。
今日はもう直す気力がないので、このままにしておきます。
2020/10/10追記
ブロックエディターになってから、簡単に吹き出しの色を変更することができるようになりました。
まず、文章を編集中に、吹き出しを入れたいところから＋ボタンで吹き出しを選びます。
＋ボタンで吹き出しが出てこない場合は、「すべて表示」をクリックして、左側メニューの中から「吹き出し」を選択します。
右側のブロック設定画面で、スタイル設定の人物から「妖精」を選びます。
画面を下にスクロールさせていき、「吹き出し色設定」から「背景色」で薄いピンクを選びます。
すると、吹き出しに色をつけることができました。
追記 ここまで－－－
ブログランキングに登録しました。1日1回、ぽちっと応援よろしくお願いします。
コメント