WordPress Cocoon

【Cocoon】吹き出しのカスタマイズ&設定方法

WordPressテーマ「Cocoon」のカスタマイズ備忘録です。今回は吹き出しのカスタマイズ方法をご紹介します。

こんな感じで好きな色に変えたり、アイコンの大きさを調整したりできます。

POINT
POINT

吹き出しは人物のセリフ的な使い方以外に、工夫次第でこういう強調するための使い方もできますね。

ではさっそくやっていきましょう〜!

吹き出しの設定方法

念のため吹き出しの設定方法から紹介したいと思います。管理画面のメニューから「Cocoon設定>吹き出し」を開き、「新規追加」で新しい吹き出しを登録できます↓

  • タイトル:利用時に分かりやすいように好きな文字で
  • 名前:未入力だとアイコンの下に文字が表示されない
  • アイコン画像:好きな画像でOK
  • 吹き出しスタイル:カスタマイズするなら「デフォルト」か「考え事」を選択
  • 人物位置:お好みでOK
  • アイコンスタイル:お好みでOK
  • TinyMCE:普通はビジュアルエディターで使うのでチェックを入れる

アイコンに使う画像は素材サイトからダウンロードしたり、似顔絵アプリなどで作っても良いと思います。

無料で似顔絵やアバターを作れるサイト・アプリもたくさんあります。こちらの記事を参考にしてみてください↓

カスタマイズ前の注意点

カスタマイズはCSSを追加するだけですが、少し注意点があります。吹き出しの場合は個別にCSSを反映させるために「id」を使います。

idの確認方法

吹き出し一覧画面を開いて、カスタマイズしたい吹き出しのタイトルにマウスを持っていきましょう。するとウィンドウ下部にURLが表示されるので、末尾の数字で「吹き出し固有のid」を確認できます↓

もしくは吹き出しのタイトルをクリックして編集画面を開き、ブラウザのアドレスバーのURLで確認してもオッケーです。

以下で紹介するコードは全て「.sb-id-25」など、個別のidで指定していますので、idの数字は確認した数字に置き換えてください。

CSSで吹き出しをカスタマイズ

idの確認ができたら、あとはCSSを追加するだけです。部分的に紹介していきます。

アイコンのサイズを変える

まずはアイコンのサイズを変えるだけのコードです。初期設定だとPC表示が12%、スマホ表示が16%になっていると思います。

これはメインカラム(記事本文の横幅)に対しての割合を%で指定していますが、%の値を増やしても良いですし、pxで指定してもオッケーです↓

「@media screen and (max-width: 480px)」以下の部分がスマホ表示でのサイズ指定ですね。

アイコンの背景色やボーダー色を変える

アイコンの背景がPNG画像などで透過になっていれば、CSSで背景色を変えることもできます。

カラーコードは以下のサイトなどを参考にお好みで変更してください↓

HTMLカラーコード
HTMLカラーコードでは、ウェブサイトで使用するHTML のカラーを探すためのツールを無料で提供しています。HTMLカラーチャートとHTMLカラーピッカーは、色探しの作業を手軽にしてくれる素晴らしいツールです。

スタイル「デフォルト」のカスタマイズ

次に吹き出し部分です。デフォルト・フラット・LINE風は、以下のコードでカスタマイズできます。

スタイル「考え事」のカスタマイズ

「考え事」の場合は少しコードが変わります。

上記コードでこのようになります。ボーダーの値を「dashed」で指定することで破線にすることができます。

ボーダーの値は以下のようにたくさん種類があります。

  • solid(普通の実線)
  • dashed(破線)
  • dotted(点線)
  • double(二重線)
  • groove(凹んだような立体、太い線が良い)
  • ridge(出っ張ったような立体、太い線が良い)
  • inset(凹んだようなデザイン)
  • outset(出っ張ったようなデザイン)

色々な種類の線やカラーで吹き出しを作ってみると、オリジナリティも出て面白いと思います。皆さんも試してみてくださいね!

WordPress
\記事が役に立ったらシェアしてね/
うぇぶあしび

comment

タイトルとURLをコピーしました