WordPress Cocoonテーマでサイトを魅力的にする基本装飾

---

by ChatGPT

WordPressのテーマ「Cocoon」は、無料で使える高機能なテーマで、多くの装飾機能がデフォルトで搭載されています。これらの装飾を使うことで、記事を見やすく、視覚的に魅力的にすることができます。以下に、Cocoonで使える基本的な装飾機能をいくつか紹介します。

見出しの装飾

• Cocoonでは、H2、H3、H4などの見出しタグにスタイルを適用できます。テーマの設定から見出しのデザインを変更することも可能です。見出しを使うことで、記事の構造を分かりやすくできます。

ボックス（Box）装飾

• 情報を強調したいときに使える装飾です。いくつかのプリセットがあり、注意喚起、引用、ポイントなどに使えます。
  • メモボックス
  • ポイントボックス
  • 警告ボックス
  • 補足ボックス
• ショートコードを使ってもボックスを挿入できます。

カラム（Column）レイアウト

• テキストや画像を複数のカラムに分割して表示できます。2カラム、3カラムなど、レイアウトを自由に選べます。

吹き出し（Speech Bubble）

• 会話形式のテキストを挿入できる装飾です。キャラクターアイコンを設定して、発言者のセリフを吹き出し形式で表示できます。

ボタン装飾

• リンクボタンや強調したいアクションを誘導するためのボタンを簡単に作成できます。色やサイズ、形状をカスタマイズすることができます。
• ショートコードを使って挿入することも可能です。

アンダーラインと強調

• テキストの一部にアンダーラインを引いたり、強調色で目立たせたりすることができます。これもショートコードを使って簡単に挿入できます。

リストの装飾

• リスト（箇条書き）にアイコンや色を追加して、視覚的に整理された情報を提供できます。番号付きリストやドット付きリストもカスタマイズできます。

囲み枠（Border）

• テキストや画像を枠で囲むことで、特定の部分を強調できます。囲み枠のデザインや色は、Cocoonの設定で変更可能です。

引用（Quote）

• 引用をスタイリッシュに表示するためのデザインが用意されています。標準の引用タグを使用すると、Cocoonのスタイルが適用されます。

インデント（Indent）

• テキストの左寄せや右寄せの位置を調整できるインデント機能です。段落ごとにインデントを追加して、読みやすさを向上させます。

ふきだし・引用などのショートコード

• Cocoonには、ショートコードが多数用意されており、簡単にデザインや装飾を追加できます。以下はその一部です。
  • [speech_bubble]：吹き出しを作成します。
  • [quote]：引用のスタイルを適用します。
  • [btn]：カスタムボタンを作成します。

テーブル（Table）

• 表を簡単に挿入することができ、見やすいデザインで表示されます。Cocoonのスタイル設定で表のデザインもカスタマイズ可能です。

by Copilot

WordPressのテーマ「Cocoon」は、豊富なカスタマイズオプションと使いやすさで人気があります。以下は、Cocoonで使える基本的な装飾についての概要です

まとめ

いかがだったでしょうか？
ChatGPTとCopilotに同じ質問をしてみましたが、得られた回答数は歴然でしたね。
見出しや太字といった装飾はもちろんなんですが、今回はChatGPTに教えてもらったカラム・吹き出しに挑戦してみました。
カラムは今回のように何かを比較したりする場面でも活躍できそうですね（テーブルでもいい気がしますが）
Copilotの方でも質問内容を変更するともう少し魅力的な回答が得られるかもしれないので今度試してみようと思います。

2カラムを使って表現したときに、スマートフォンの縦表示ではデザインが崩れることがわかりましたので1カラムに修正しました（24年8月11日追記）

では、今回はこのへんで
最後まで読み進めていただきありがとうございました！