前回はインデックスのカスタマイズ方法を解説しました。
今回は、吹き出しをカスタマイズする方法について紹介させていただきます。
当ブログ『ムササビやねん』の吹き出し設定、CSSをもとにカスタマイズ手順を紹介させていただきます！
Cocoonカスタマイズ第6弾として、吹き出しのカスタマイズについてご紹介させていただきます。
▼この記事はこんな方におすすめ
- ・吹き出しの設定方法を知りたい
- ・吹き出しの色をカスタマイズしたい
吹き出しの色をサイトカラーに変えて、おしゃれな吹き出しにしましょう！
Contents
吹き出しの完成イメージ
今ご覧いただいている、
この吹き出しが完成イメージです！
▼特徴
- ・吹き出しごとに枠線・背景の色を設定している
- ・PCでもスマホでもレイアウトが崩れないように設定している
吹き出しの設定方法
▼注意！！！
- 設定の変更やCSSを修正する際はバックアップを取ることをお忘れなく！！！
まずはじめに吹き出しの設定をします。
①Cocoon設定→②吹き出し→③編集したい吹き出しの『編集』で設定できます。
すると吹き出しの設定画面が表示されます。
タイトル
タイトルを設定します。
記事に追加するときの名前になるので、分かりやすい名前に設定してください。
名前
アイコンの下に表示される名前を設定します。
アイコン画像
アイコンに表示される画像を設定します。
当ブログのアイコンはGravit Designerで作成しました。無料でオリジナルのアイコンも作れるのでお試しください！
画像サイズは『幅240 (px) × 高さ240 (px)』で作成しました。
吹き出しスタイル
吹き出しのスタイルを設定します。
当ブログの設定は『デフォルト』です。
色々な設定を試してしっくりきたものに設定してください！
人物位置
アイコンの表示する位置を左か右かを設定します。
むさの吹き出しは『左』で、さびの吹き出しは『右』です。
アイコンスタイル
アイコンのスタイルを設定します。
TinyMCE
記事を作成する際の選択ボックスに表示するかを設定します。
選択できるようにしたい場合は、『エディターのリストに表示』にチェックを入れてください。
吹き出しの設定はここまで！
CSSで装飾をカスタマイズ
続いてCSSを編集していきます。
CSSは①サイドバーのテーマファイルエディタ→②スタイルシート(style.css)で編集できます。
▼注意！！！
- ・設定の変更やCSSを修正する際はバックアップを取ることをお忘れなく！！！
- ・スタイルシート(style.css)が選択されていることを再度確認してください！！！
当サイトはスキンをなしに設定しています。
スキンを設定していると上手くいかない可能性があります。ご了承ください。
①アイコン（人物位置左）
.sb-id-1 .speech-icon-image {
border: solid 2px #8cab8b!important;
}
②吹き出し（人物位置左）
.sb-id-1 .speech-balloon {
background: #edf2ed!important;
border: solid 2px #8cab8b!important;
}
.sb-id-1 .speech-balloon::before {
border-right: 12px solid #8cab8b;
}
.sb-id-1 .speech-balloon::after {
border-right: 12px solid #edf2ed;
}
@media screen and (max-width: 480px){
.sb-id-1>.speech-balloon::before {
border-right: 7px solid #8cab8b;
}
.sb-id-1 .speech-balloon::after {
border-right: 7px solid #edf2ed;
}
}
③アイコン（人物位置右）
.sb-id-2 .speech-icon-image {
border: solid 2px #d98030!important;
}
④吹き出し（人物位置右）
.sb-id-2 .speech-balloon {
background: #faf3e8!important;
border: solid 2px #d98030!important;
}
.sb-id-2 .speech-balloon::before {
border-left: 12px solid #d98030;
}
.sb-id-2 .speech-balloon::after {
border-left: 12px solid #faf3e8;
}
@media screen and (max-width: 480px){
.sb-id-2 .speech-balloon::before {
border-left: 7px solid #d98030;
}
.sb-id-2 .speech-balloon::after {
border-left: 7px solid #faf3e8;
}
}
このコードをコピーして、スタイルシート(style.css)に貼り付けてください。
皆様のブログに合わせて調整する方法を解説します！
まずは、アイコンのクラスを調べる必要があります。
吹き出しで右クリック → 検証をクリックしてください。
各吹き出しのクラスを確認することができます。
人物位置が『左』の場合は、コピーしたCSSコード①②の『sb-id-1』を、人物位置が『右』の場合はコピーしたCSSコード③④の『sb-id-2』を全て確認したクラスに変更してください。
（注意！）前の『.』は消さないでください！
①アイコン（人物位置左）
（吹き出しの設定で人物位置を『左』に設定した場合に使えるCSSです。）
『border』でアイコンの枠線の太さ、枠線の色を設定しています。
枠線の太さを変更したい場合は『2px』の値を変更してください。
枠線の色を変更したい場合は『#8cab8b』のカラーコードを変更してください。
②吹き出し（人物位置左）
（吹き出しの設定で人物位置を『左』に設定した場合に使えるCSSです。）
吹き出し部分のカスタマイズをしています。
少し設定が難しいので、詳細には説明しませんが、『#edf2ed』が吹き出しの背景色、『#8cab8b』が吹き出しの枠線の色です。
背景の色を変更したい場合は『#edf2ed』を全て変更、枠線の色を変更したい場合は『#8cab8b』を全て変更してください。
③アイコン（人物位置右）
（吹き出しの設定で人物位置を『右』に設定した場合に使えるCSSです。）
『border』でアイコンの枠線の太さ、枠線の色を設定しています。
枠線の太さを変更したい場合は『2px』の値を変更してください。
枠線の色を変更したい場合は『#d98030』のカラーコードを変更してください。
④吹き出し（人物位置右）
（吹き出しの設定で人物位置を『右』に設定した場合に使えるCSSです。）
吹き出し部分のカスタマイズをしています。
少し設定が難しいので、詳細には説明しませんが、『#faf3e8』が吹き出しの背景色、『#d98030』が吹き出しの枠線の色です。
背景の色を変更したい場合は『#faf3e8』を全て変更、枠線の色を変更したい場合は『#d98030』を全て変更してください。
まとめ
今回はCocoonの吹き出しのカスタマイズについてご紹介させていただきました。
次回は、目次のカスタマイズについて紹介する予定です！
今回の記事は以上となります。
最後までお読みいただき、ありがとうございました！