会話形式の記事は相変わらずよく見ますよね。
WordPress無料テーマ、Cocoonにはビジュアルエディタで会話形式を挿入できる機能があります。
アイコンなどもカスタマイズが簡単ですしショートコード等も必要なくワンクリックで使えるので、非常に使い勝手がいいです。
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100％GPLテーマです。
わいひらさん作。個人的には無料テーマでは最強ではないかと思っています。
Cocoon公式サイトはこちら
Cocoonの「吹き出し」機能
デフォルト一覧
Cocoonの「吹き出し」でデフォルトで設定されているのは以下の8種類。
Cocoonの「吹き出し」機能デフォルトです。
[sample001]男性（左）
Cocoonの「吹き出し」機能デフォルトです。
[sample002]女性（右）
Cocoonの「吹き出し」機能デフォルトです。
[sample003]ビジネスマン（左）
Cocoonの「吹き出し」機能デフォルトです。
[sample004]ビジネスウーマン（右）
Cocoonの「吹き出し」機能デフォルトです。
[sample005]悩むおじさん（左）
Cocoonの「吹き出し」機能デフォルトです。
[sample006]悩むおばさん（右）
Cocoonの「吹き出し」機能デフォルトです。
[sample007]男性医師（左）
Cocoonの「吹き出し」機能デフォルトです。
[sample008]女性医師（右）
Cocoonの「吹き出し」機能デフォルトです。
[sample009]どや顔男性（左）
Cocoonの「吹き出し」機能デフォルトです。
[sample010]どや顔女性（右）
オリジナルアイコンでカスタマイズ
この「吹き出し」は、アイコンなどをカスタマイズする事ができます。
設定画面から登録しておけばいつでも呼び出して使用する事ができるようになります。
吹き出しのアイコンを用意
まずはアイコンにする画像を用意。
使用する画像は「160px以上の正方形」とのことです。
今回は顔アイコン素材が簡単に作れるサービス「Iconpon」でアイコンを作ります。
今回は「イケてる顔アイコン」で男女2種類のアイコンを作ってみました。
パーツを選ぶだけでいい感じのアイコンが作れます。
会員登録なしでDLできます。
デフォルトだと一辺256pxのPNGでDL出来ます。
こんなかんじで。
Cocoon設定の「吹き出し」で新規作成
「Cocoon設定」「吹き出し」「新規作成」を開きます。
「Cocoon設定」「吹き出し」「新規作成」を開きます。
各種設定していきます。
吹き出しのタイトル。
■名前
アイコン下に表示されるもじ。
■アイコン画像
さっき作った画像をアップロード。
■吹き出しスタイル
デフォルトはふつうの吹き出し、フラットは背景が薄いグレー、LINE風は背景が緑、考え事は吹き出しの尻尾が丸いもの。
■人物位置
左か右か。どっちか揃えになってるものもよく見ますよね。
■アイコンスタイル
丸四角、それぞれ枠線ありなしも選べます。
設定できたら保存。
ビジュアルエディタから呼び出して簡単に使えるようになります。
Cocoonの吹き出しカスタマイズ、いいかんじにできましたね。
吹き出し自体も簡単に使えるからまじですごい。
Cocoonの「吹き出し」機能のデフォルト一覧とカスタマイズ方法 まとめ
この会話形式の記事スタイル、企業サイトやコーポレートサイトでもけっこう重宝します。
インタビューの記事などで使うと硬さが取れて読みやすくなるんですよね。
FAQの導入部分で使うと親しみやすさも出ますし。
コメント