Cocoonの吹き出しのデザインをカスタマイズする

今回はブログのデザインを少し変更してみたいと思います。メインは吹き出しのデザイン変更です。

解説するのは、このブログ、WordPressでCocoonのテーマを使っている場合です。中でもこの凹凸スキンを使っている場合は背景色などのデザインをロックされていたり、制約がある部類ですが、吹き出し部分は背景色もきちんと変更することができました。

Cocoonスキン「凸凹」の取扱説明書　がありますので、そちらをご覧いただくと

スキンのデザイン特性上、背景色などは、スキン側からロックしています。

とあります。Neumorphismデザインにするために枠線もcssでカスタムすることが難しいんですね。なので吹き出しの中でも、キャラクター部分の枠線部分は変更できませんでした。

とりあえずできるところ、吹き出しの部分だけでもデザイン変更できればかなりビジュアル的に良くなりました。なのでその部分を解説していきます。ちなみに凹凸スキンではなくスタンダードなスキンを選んでいる場合はもっと自由度が高く、デザインのカスタムがしやすいのではないかと思います。

そうは言ってもこの凹凸スキンの未来感、かなり気に入っていますので、このスキンでできる範囲をつきつめていきたいなと思っています（まだ何ができるのかよくわかってないですが）

今回の吹き出しカスタマイズの目標

今回の目標は以下の図のように、デフォルトの吹き出しから、この点P空間ブログのデザインに合った吹き出しデザインにカスタマイズすることです。

変えているところ

• 枠線を変更（ドットの点線、色もマゼンタ色に変更、枠線の太さも変えています）
• 吹き出しの白い四角のふちを角丸にしてかわいくする
• 吹き出しの形を考えているように〇パーツを増やしてそのデザインも変更している

最初にとりあえず枠線の変更からやっていきます。吹き出しの形がセリフのようになっているのか考えているような形になっているのかは選択することができます。

そもそも吹き出しを入れるには、記事を投稿するときに記事作成画面でブロックを追加する■の中に+があるボタンをクリックします。するとどんなコンテンツを挿入するのかメニューが出てきますので、その中から吹き出しを選択してください。

吹き出しがない場合は、下のすべて表示ボタンをクリックし、さらに出てきたメニューの中から選択してください。

これをもっとブログに似合ったようなデザインに変更したいと思います。

吹き出しのベースをカスタマイズする

枠線を変更する前に、WordPressダッシュボード内で吹き出しデザインのベースをカスタマイズできますのでそれを先にやります。

管理画面から左側メニューのCocoon設定＞吹き出し　を開きます。

すでに何個かサンプルがあるんですが、新規追加で自分のオリジナルの吹き出しを作っていきます。自分のブログにはQちゃんとPさんというキャラクターがいるので、とりあえず２個作りました。

トップ部分のすぐ下にある新規追加をクリックして作っていきます。

吹き出しのベースを編集する

吹き出しを新規追加で編集していきます。

編集画面で編集できるのは

タイトル　編集した吹き出しの名前（自分が判別できればなんでもいいです）

名前　吹き出しのキャラクターの下に出る文字列。名前やキャプションなどいれることができます

アイコン画像　キャラクターの画像をアップロードしてください。pngで512×512ピクセルくらいあるとボケなくていいかなと思います。

吹き出しスタイル　４種類あります。

• デフォルト　白地に灰色のフチのついた普通の吹き出し
• フラット　灰色背景でフチなしの吹き出し
• LINE風　LINEでやりとりをするときのような緑背景の吹き出し
• 考え事　考えているときに漫画で表現されるような〇がぽわぽわ出てる吹き出し

今回枠線を変えようとしている方は、デフォルトか考え事かどちらかを選択しといてください。

人物位置　右か左です。右と左で交互におくとキャラクターが会話しているような雰囲気にできる

アイコンスタイル　円と四角、フチありなしが選べますが、この凹凸スキンだと変わらず角丸です。ただ円にすると角の部分が切れてしまうときがあるので画像がはみ出る場合は四角にした方がいいかと思います。

終わったら保存を押してください。デモ画面が上部に出て、どのような仕上がりかチェックすることができます。枠線部分や色などはあとでCSSなどで変更できます。

吹き出しの追加設定でデザイン変更をする

枠線を点線にすることはできないのですが、ここでは簡単に吹き出しのデザインが変更できる吹き出しの追加設定について解説します。

記事作成画面で、吹き出しを挿入すると、その吹き出しのオプションをひらくことができます。吹き出しアイコンの右に縦に…と並んだオプションボタンがあるのでクリックして開き、追加設定を表示という部分をクリックします。（画面ではすでに開いているので非表示になっています）

すると右側に吹き出しの追加設定ができるメニューが開きますので、そこで細かい設定を行うことができます。

スクロールして下に行くと、背景色、文字色、ボーダーの色が選択画面内にある色に限り、変更することができます。

これで十分という方はこれで変更してください。

もっと自分の好きな色に選択したい、ボーダーの太さを変えたり点線にしたい、という方はCSSで変更するので、ここでは選択せずクリアの状態にしておいてください。ここで何か選択してしまうと、CSSで上書きしたときに反映されない場合があります。

吹き出しデザインをCSSでカスタマイズする

まずは吹き出しデザインをCSSでカスタマイズしておくためにIdを取得します。

編集した作ったベースの吹き出しの一覧ページを出し、カスタマイズしたい吹き出しのタイトル部分にポインタを置きます、しばらく置いていると、ページ下部にid=●●という風にidが出ますので、その番号を覚えておいてください。

CSSを書き換えるのは管理画面の外観＞カスタマイズ＞追加CSSの書き込み部分です。

追加CSSで追記すると、元のデータやCocoonのテーマをいじらなくて済むので、間違えてもこの部分を消すだけで済みます。初心者でも安心してCSSを書き込むことができるので、ここで書き換えることをオススメします。

吹き出しの作りを図解します。これは自分が書き換えたCSSです。

自分の場合は線をドットの点線にするため dotted にし、角丸にするためborder-radiusも設定しました。ただし、線のデザインを変えられるのは上記の青の背景の部分のみです。あとは枠の色のみしか変更できませんでした。三角部分はドットや点線にしようとしてもうまく表示されないし、太さも変えない方がいいですね。色のみの変更にすべきだと思います(dottedにするとIEで表示されなくなりましたので、三角部分の線の種類はsolidにしてください。)

色の部分を変えたい場合はWEB色見本 原色大辞典などのサイトで色のコードを探してください。

右と左の区別があるのでそこは注意してください！！

考え事吹き出しの構造は上の図のようになっています。こちらは右や左の区別はなく、ただ四角形本体部分と円01部分、円02部分を素直に設定していけばうまくいきます。

こちらも色や線の種類は好きなように書き換えて自由にカスタマイズしてください。

まとめ

吹き出しの背景の色、線の色、文字の色を変えるだけで良いなら吹き出し追加設定で簡単に変えることができますが、線の太さを変えたい、点線にしたい、などと思うと結構めんどくさいです。

でもそこまで変えると自分のサイトらしいデザインにできますし、他のデザインと差を作ることができますのでひと手間かけてみるのもオススメです。