WordPressの無料テーマ【Cocoon】で使えるブロック一覧

Cocoon
スポンサーリンク

WordPressでブログを書いている人にはおなじみ(?)の無料テーマ「Cocoon」。

シンプルで使いやすくて無料なのに多機能ということで、人気があります。

このブログでもCocoonを利用していますが、正直なところ機能が多すぎて今一つ活用し切れていないのも事実です。

特にブロックは種類も多いし色のパターンも多いので、どれにしようか悩んでうっかり時間が経過してしまうことも。

あと、普段使っていないと、どんなデザインのブロックだったか忘れてしまうんですよね。

そこで今回は、Cocoonで使えるブロックを各デザイン・スタイルごとにずらっと並べてみました。

ついでにWordPressデザインブロックのカラムも最後に入れています。

ブロックによっては、このサイトで設定しているCocoonスキンに色味などが多少左右されることもありますが、大体のイメージはつかめるはずです。

同じようにCocoonを利用していて「このブロックはどれだっけ?」とか「どんな色だっけ?」となる方は、ぜひ参考にしてください。

スポンサーリンク

Cocoonブロック

まずは、Cocoon基本ブロックからです。

各ブロックは「スタイル設定」のみ変更しています。

基本的に文字のフォントサイズや色設定、テキスト設定などはいじっていません。

ほとんどのボックスで、テキスト部分は設定メニューの色設定から文字色と背景色が変更できます。

アイコンボックス

テキスト部分は各ボックスのタイプです。

補足情報(i)

補足情報(?)

補足情報(!)

メモ

コメント

OK

NG

GOOD

BAD

プロフィール

案内ボックス

テキスト部分は各ボックスのタイプです。

プライマリー(濃い水色)

セカンダリー(濃い灰色)

インフォ(薄い青)

サクセス(薄い緑)

ワーニング(薄い黄色)

デンジャー(薄い赤色)

ライト(白色)

ダーク(暗い灰色)

白抜きボックス

ボックスの設定メニューから背景色を変更すると、ボックス内全部が指定の色で塗りつぶされます。

ボーダー色:キーカラー 背景色:青色 文字色:白

上はボーダー色をキーカラーに設定、背景色を青色、文字色を白で指定しました。

テキストのメニューから背景色と文字色を別に指定すると、こんな感じになります。

ボーダー色:キーカラー 背景色:青色 文字色:白
ブロック背景色:灰色

ボーダー色:キーカラー 背景色:青色 文字色:白
ブロック背景色:灰色 テキスト文字色:黒

テキストの設定で指定した色が優先されるようですね。あとちょっと文字がズレます。

ここから下は各ボックスのボーダー色のみ変更、テキスト部分はボーダーの色です。

キーカラー

赤色

ピンク

紫色

深紫色

紺色

青色

天色

浅葱色

深緑色

緑色

黄緑色

ライム

黄色

アンバー

オレンジ

ディープオレンジ

茶色

灰色

淡い青

淡い黄色

淡い赤

淡い緑

付箋風ボックス

灰色

黄色

赤色

青色

緑色

タブボックス

枠の色は薄すぎる色を省いています。

ラベルと枠の色は任意の組み合わせが可能です。

ラベル:チェック

枠の色:キーカラー

ラベル:コメント

枠の色:赤色

ラベル:ポイント

枠の色:ピンク

ラベル:ティップス

枠の色:紫色

ラベル:ヒント

枠の色:深紫色

ラベル:ピックアップ

枠の色:紺色

ラベル:ブックマーク

枠の色:青色

ラベル:メモ

枠の色:天色

ラベル:ダウンロード

枠の色:浅葱色

ラベル:ブレイク

枠の色:深緑色

ラベル:アマゾン

枠の色:緑色

ラベル:OK

枠の色:黄緑色

ラベル:NG

枠の色:ライム

ラベル:GOOD

枠の色:黄色

ラベル:BAD

枠の色:アンバー

ラベル:プロフィール

枠の色:オレンジ

ラベル:チェック

枠の色:ディープオレンジ

ラベル:コメント

枠の色:茶色

ラベル:ポイント

枠の色:灰色

ラベル:ティップス

枠の色:黒

ラベル:ヒント

枠の色:キーカラー

ラベル:ピックアップ

枠の色:赤色

ラベル:ブックマーク

枠の色:ピンク

ラベル:メモ

枠の色:紫色

ラベル:ダウンロード

枠の色:深紫色

ボタン

WordPressのカラムブロックで6分割表示しています。

ボタンのサイズは小、左から順に「ノーマル・円形にする・光らせる」です。

キーカラー・赤色

ピンク・紫色

深紫色・紺色

青色・天色

浅葱色・深緑色

緑色・黄緑色

ライム・黄色

アンバー・オレンジ

ディープオレンジ・茶色

灰色・黒

白・淡い青(色が薄いので枠線と文字色を黒にしています)

淡い黄色・淡い赤(色が薄いので文字色を黒にしています)

淡い緑(色が薄いので文字色を黒にしています)

アイコンリスト

タイトル・ボーダー・アイコン・文字の色は、タイトル部分クリックで設定します。

タイトルの色はテキスト部分と連動するため、違う色にしたい場合は別の設定が必要です。

さすが見づらいので、白・淡い青・淡い黄色・淡い赤・淡い緑は除外しています。

背景色に関しては白抜きボックスと基本的に同じですが、テキスト部分の背景はグラデーションカラーも選べます。

グラデーションカラーについてはおまけ・WordPressデザインブロック・カラムをどうぞ。

タイトルはここに表示
  • ボーダー:キーカラー
  • アイコン色:キーカラー
  • 文字色:キーカラー
タイトルはここに表示
  • ボーダー:赤色
  • アイコン色:赤色
  • 文字色:赤色
タイトルはここに表示
  • ボーダー:ピンク
  • アイコン色:ピンク
  • 文字色:ピンク
タイトルはここに表示
  • ボーダー:紫色
  • アイコン色:紫色
  • 文字色:紫色
タイトルはここに表示
  • ボーダー:深紫色
  • アイコン色:深紫色
  • 文字色:深紫色
タイトルはここに表示
  • ボーダー:紺色
  • アイコン色:紺色
  • 文字色:紺色
タイトルはここに表示
  • ボーダー:青色
  • アイコン色:青色
  • 文字色:青色
タイトルはここに表示
  • ボーダー:天色
  • アイコン色:天色
  • 文字色:天色
タイトルはここに表示
  • ボーダー:浅葱色
  • アイコン色:浅葱色
  • 文字色:浅葱色
タイトルはここに表示
  • ボーダー:深緑色
  • アイコン色:深緑色
  • 文字色:深緑色
タイトルはここに表示
  • ボーダー:緑色
  • アイコン色:緑色
  • 文字色:緑色
タイトルはここに表示
  • ボーダー:黄緑色
  • アイコン色:黄緑色
  • 文字色:黄緑色
タイトルはここに表示
  • ボーダー:ライム
  • アイコン色:ライム
  • 文字色:ライム
タイトルはここに表示
  • ボーダー:黄色
  • アイコン色:黄色
  • 文字色:黄色
タイトルはここに表示
  • ボーダー:アンバー
  • アイコン色:アンバー
  • 文字色:アンバー
タイトルはここに表示
  • ボーダー:オレンジ
  • アイコン色:オレンジ
  • 文字色:オレンジ
タイトルはここに表示
  • ボーダー:ディープオレンジ
  • アイコン色:ディープオレンジ
  • 文字色:ディープオレンジ
タイトルはここに表示
  • ボーダー:茶色
  • アイコン色:茶色
  • 文字色:茶色
タイトルはここに表示
  • ボーダー:灰色
  • アイコン色:灰色
  • 文字色:灰色
タイトルはここに表示
  • ボーダー:黒
  • アイコン色:黒
  • 文字色:黒
タイトルはここに表示
  • ボーダー:キーカラー
  • アイコン色:キーカラー
  • 文字色:キーカラー
タイトルはここに表示
  • ボーダー:赤色
  • アイコン色:赤色
  • 文字色:赤色
タイトルはここに表示
  • ボーダー:ピンク
  • アイコン色:ピンク
  • 文字色:ピンク
タイトルはここに表示
  • ボーダー:紫色
  • アイコン色:紫色
  • 文字色:紫色
タイトルはここに表示
  • ボーダー:深紫色
  • アイコン色:深紫色
  • 文字色:深紫色
タイトルはここに表示
  • ボーダー:紺色
  • アイコン色:紺色
  • 文字色:紺色
タイトルはここに表示
  • ボーダー:青色
  • アイコン色:青色
  • 文字色:青色
タイトルはここに表示
  • ボーダー:天色
  • アイコン色:天色
  • 文字色:天色
タイトルはここに表示
  • ボーダー:浅葱色
  • アイコン色:浅葱色
  • 文字色:浅葱色
タイトルはここに表示
  • ボーダー:深緑色
  • アイコン色:深緑色
  • 文字色:深緑色
タイトルはここに表示
  • ボーダー:緑色
  • アイコン色:緑色
  • 文字色:緑色
タイトルはここに表示
  • ボーダー:黄緑色
  • アイコン色:黄緑色
  • 文字色:黄緑色
タイトルはここに表示
  • ボーダー:ライム
  • アイコン色:ライム
  • 文字色:ライム
タイトルはここに表示
  • ボーダー:黄色
  • アイコン色:黄色
  • 文字色:黄色
タイトルはここに表示
  • ボーダー:アンバー
  • アイコン色:アンバー
  • 文字色:アンバー
タイトルはここに表示
  • ボーダー:オレンジ
  • アイコン色:オレンジ
  • 文字色:オレンジ
タイトルはここに表示
  • ボーダー:ディープオレンジ
  • アイコン色:ディープオレンジ
  • 文字色:ディープオレンジ
タイトルはここに表示
  • ボーダー:茶色
  • アイコン色:茶色
  • 文字色:茶色

Cocoon汎用ブロック

ここからはCocoon汎用ブロックの一覧となります。

見出しボックス

見出しとアイコンは白固定。色の変更はどちらも不可能です。

さすがにアイコンが見づらいので、白・淡い青・淡い黄色・淡い赤・淡い緑は除外しています。

見出し

キーカラー

見出し

赤色

見出し

ピンク

見出し

紫色

見出し

深紫色

見出し

紺色

見出し

青色

見出し

天色

見出し

浅葱色

見出し

深緑色

見出し

緑色

見出し

黄緑色

見出し

ライム

見出し

黄色

見出し

アンバー

見出し

オレンジ

見出し

ディープオレンジ

見出し

茶色

見出し

灰色

見出し

見出し

キーカラー

見出し

赤色

見出し

ピンク

見出し

紫色

見出し

深紫色

見出し

紺色

見出し

青色

見出し

天色

見出し

浅葱色

見出し

深緑色

見出し

緑色

見出し

黄緑色

ライム

見出し

黄色

見出し

アンバー

見出し

オレンジ

見出し

ディープオレンジ

見出し

茶色

見出し

灰色

見出し

見出し

キーカラー

見出し

赤色

見出し

ピンク

見出し

紫色

見出し

深紫色

見出し

紺色

見出し

青色

見出し

天色

見出し

浅葱色

見出し

深緑色

見出し

緑色

見出し

黄緑色

タブ見出しボックス

見出しとアイコンは白固定。色の変更はどちらも不可能です。

さすがにアイコンが見づらいので、白・淡い青・淡い黄色・淡い赤・淡い緑は除外しています。

見出し

キーカラー

見出し

赤色

見出し

ピンク

見出し

紫色

見出し

深紫色

見出し

紺色

見出し

青色

見出し

天色

見出し

浅葱色

見出し

深緑色

見出し

緑色

見出し

黄緑色

見出し

ライム

見出し

黄色

見出し

アンバー

見出し

オレンジ

見出し

ディープオレンジ

見出し

茶色

見出し

灰色

見出し

見出し

キーカラー

見出し

赤色

見出し

ピンク

見出し

紫色

見出し

深紫色

見出し

紺色

見出し

青色

見出し

天色

見出し

浅葱色

見出し

深緑色

見出し

緑色

見出し

黄緑色

ライム

見出し

黄色

見出し

アンバー

見出し

オレンジ

見出し

ディープオレンジ

見出し

茶色

見出し

灰色

見出し

見出し

キーカラー

見出し

赤色

見出し

ピンク

見出し

紫色

見出し

深紫色

見出し

紺色

見出し

青色

見出し

天色

見出し

浅葱色

見出し

深緑色

見出し

緑色

見出し

黄緑色

見出し

ライム

ラベルボックス

アイコン部分は見出しの色と連動。見出し部分と本文は別々に色設定が可能です。

さすがにアイコンが見づらいので、白・淡い青・淡い黄色・淡い赤・淡い緑は除外しています。

見出し

キーカラー

見出し

赤色

見出し

ピンク

見出し

紫色

見出し

深紫色

見出し

紺色

見出し

青色

見出し

天色

見出し

浅葱色

見出し

深緑色

見出し

緑色

見出し

黄緑色

見出し

ライム

見出し

黄色

見出し

アンバー

見出し

オレンジ

見出し

ディープオレンジ

見出し

茶色

見出し

灰色

見出し

Cocoonマイクロコピー

こちらはほぼ形状の違いなので、ひとまとめにします。

ボタンブロックとセットで使うのに便利ですね。

マイクロコピーテキスト
マイクロコピーバルーン

Cocoonレイアウト

2カラム

カラムを左右2つに分けます。

単に分割しているだけなので、ブロックもそのままなかに設置できます。

見出し

左のカラム

背景色:青色

見出し

右のカラム

背景色:オレンジ

3カラム

カラムを左・中・右の3つに分けます。

2カラムと同じようにそれぞれブロックを設置できます。

見出し

左のカラム

背景色:青色

見出し

中央のカラム

背景色:緑色

見出し

右のカラム

背景色:オレンジ

おまけ・WordPressデザインブロック・カラム

WordPressのデザインブロックにあるカラムの場合、ブロックの背景色が変更可能です。

カラムブロックの色をグラデーションに、中を段落ブロックにするとこんな感じ。

段落ブロックの背景色を設定しなければ、そのまま全部グラデーションになります。

背景色:白

背景色:薄い緑

背景色:白

背景色:薄い緑

背景色:白

背景色:薄い緑

背景色:白

背景色:薄い緑

背景色:白

背景色:薄い緑

背景色:白

背景色:薄い緑

背景色:白

背景色:薄い緑

背景色:白

背景色:薄い緑

おわりに

WordPressの無料テーマCocoonのブロック一覧をお送りしました。

ボーダー・背景・ブロック・文字の色と、組み合わせ方はさすがに網羅できない数になるので、基本色だけですがいかがでしょう。

選択肢がたくさんあるのは嬉しいんですが、どれが何か分からなくなるのが困りものだったのですよね。

特にアイコン系のボックスが今一つイメージ付きにくいというか……。

Cocoonのブロックは、現在使用中のスキンに合わせて色味が調整されているものもあるようなので、別のスキンを設定していても違和感はそんなにないと思います。

よろしければ、参考までにお使いくださいね。

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