Cocoonのスタイルを使いこなしてWordPress記事を装飾!囲み枠・吹き出し・ボタンなど一覧

WordPress

こんにちは、サブです。

WordPressのテーマ「Cocoon」では、たくさんのスタイルを手軽に使えるので、記事を装飾するのにとても便利です。

スタイルの種類がとても多いので、一覧としてまとめていこうと思います。

インライン

段落内で特に強調したいところに使います。

  • 太字
  • 赤字
  • 赤太字
  • 赤アンダーライン
  • 青太字
  • 緑太字
  • 打消し線
  • キーボードキー

マーカー

こちらも、段落内で特に強調したいところに使います。

  • 黄色マーカー
  • 赤色マーカー
  • 青色マーカー
  • 黄色アンダーラインマーカー
  • 赤色アンダーラインマーカー
  • 青色アンダーラインマーカー

ボックス(アイコン)

ボックスのパターンがとても豊富です。

文章だけをだらだら続けないように、ワンポイントで差し込むのに使います。

補足情報(i)
補足情報(?)
注意喚起(!)
メモ
コメント
OK
NG
GOOD
BAD
プロフィール

ボックス(案内)

プライマリー(濃い水色)
セカンダリー(濃い灰色)
サクセス(薄い緑)
インフォ(薄い青)
ワーニング(薄い黄色)
デンジャー(薄い赤色)
ライト(白色)
ダーク(暗い灰色)

ボックス(白抜き)

灰色
黄色
赤色
青色
緑色

ボックス(タブ)

※それぞれ5色のうち1色をピックアップ

チェック
コメント
ポイント
ティップス
ヒント
ピックアップ
ブックマーク
メモ
ダウンロード
ブレイク
Amazon
OK
NG
GOOD
BAD
プロフィール

ボックス(付箋風)

灰色
黄色
赤色
青色
緑色

バッジ

使い道はいろいろありそうですが、URLが外部リンクであることを示すときに使ったりできそうです。

  • オレンジ
  • レッド
  • ピンク
  • パープル
  • ブルー
  • グリーン
  • イエロー
  • ブラウン
  • グレー

マイクロコピー

マイクロコピーは、重要なメッセージや、コンバージョンへのリンクボタンなどの周りに、小さく補足情報を載せたい場合に便利な機能です。

「テキスト」と「吹き出し」の2パターンあり、それぞれ「上・下」「左・中央・右」の6通りの配置が可能です。

下記では、そのうちの2パターンをピックアップしています。

テキスト(上)(中央)
ボックス
ボックス
吹き出し(下)(右側)

ボタン / 囲みボタン

ただのテキストを、簡単にボタンにすることができます。

アフィリエイトリンクなどにも、よく使われている気がします。

レッド(小)

レッド(中)

レッド(大)

ピンク(大)

パープル(大)

ディープパープル(大)

インディゴ[紺色](大)

ブルー(大)

ライトブルー(大)

シアン(大)

ティール[緑色がかった青](大)

グリーン(大)

ライトグリーン(大)

ライム(大)

イエロー(大)

アンバー[琥珀色](大)

オレンジ(大)

ディープオレンジ(大)

ブラウン(大)

グレー(大)

囲みブログカードラベル

吹き出し

[SAMPLE 001] 男性(左)

[SAMPLE 002] 女性(右)

[SAMPLE 003] ビジネスマン(左)

[SAMPLE 004] ビジネスウーマン(右)

[SAMPLE 005] 悩むおじさん(左)

[SAMPLE 006] 悩むおばさん(右)

[SAMPLE 007] 男性医師(左)

[SAMPLE 008] 女性医師(右)

[SAMPLE 009] どや顔男性(左)

[SAMPLE 010] どや顔女性(右)

トグルボックス

細かい説明を、最初は折りたたんでおくことができるボックスです。

ここに展開したい内容を入れます

クリックすると、内容が展開されます。

タイムライン

時系列を表現できます。

龍が如く 発売時期
  • 2005
    龍が如く

    PlayStation 2

  • 2009
    龍が如く3

    PlayStation 3

時系列の項目を増やす手順は、下記の通りです。

1.タイムラインを選択すると、右メニューで「スタイル設定」>「アイテム数」が設定できる

2.「アイテム数」を1→2に設定すると、タイムラインの項目が1つ増える

アイコンリスト

箇条書きの「・」の部分を、好みのアイコンにしたり、色の変更をしたりできます。

タイトル
  • リスト1
  • リスト2

アイコンや背景の変更は、右メニューの「スタイル設定」「色設定」でやります。

まとめ

Cocoonで利用できるスタイルを、一覧にしてまとめました。

どんなスタイルがあるのかを知っておけると、記事の装飾の選択肢が広がりますね。

下記では、WordPressにCocoonをインストールする手順をまとめています。

コメント

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