Cocoon-無料テーマ-

【WordPress】無料テーマ-Cocoon-ブロックの種類説明 (Part1)

今回はなんと無料でかなりのカスタマイズ性を兼ね備えている無料テーマ【-Cocoon-】での”ブロック”の使い方を図や写真にして一覧にしました。

これどんなブロックだったっけ??と思い出すときにでも見て使っていただけるとありがたいです。

今回は【Part1】です。

アイコンボックス(補助説明を載せる)

左側に「i」の文字が入るアイコン。基本的には補助情報を表示させるときに使います。

設定の変更

右の「スタイル設定」にてタイプをプルダウンすると他のタイプが出てきます。

補足情報(?)

補足情報(!)

メモ

コメント

OK

NG

GOOD

BAD

プロフィール

白抜きボックス(枠線で囲う)

全体を囲うボックス。WordPress上では「 コンテンツを囲むだけのブランクボックスを表示します」とのこと。まぁ単純に囲うだけのものですね。強調させたりするときなどに使えそうです。

設定の変更

囲うボックスの色を変更することができます。

雰囲気も結構変わりますね。

付箋ボックス(付箋風スタイル)

目立つ濃いめの色で付箋風にメッセージを伝えるためのボックスです。こちらも色の展開があります。

設定の変更

「スタイル設定」よりタイプの変更が出来ますが、試した結果、色が変わるぐらいでその他で特に変化はありませんでした。

黄色

赤色

タブボックス(タブ付きボックス)

タブにメッセージ内容を伝えるための文字が書かれているボックスです。 これはすごく使えそう。要チェックやー!

設定の変更

スタイル設定-タイプの変更と、色の変更が出来ます。タイプの変更を色々試してみましたが、基本的に上の「check」のところの文字がタイプごとに変わるだけとなっております。いつくか例を出しておきます。

タイプ-[memo]、色[緑色]

タイプ-[DOWNLOAD]、色[紫色]

案内ボックス(塗りつぶしボックス)

ボックスの背景色により、直感的にメッセージ内容を伝えるためのボックスです。白抜きボックス色付き版!のイメージ。

設定の変更

[スタイルの設定」のみで名前は色々付いているが、要するに色が変わるだけ。こちらも事例を出しておきます。

インフォ(薄い青)

デンジャー(薄い赤色)

検索案内

訪問者に検索を促すためのボックスです。検索をクリックすることで検索結果へ跳びます(※AMPページ以外)。

※キーワードに関しては入力したり変更は出来ず元々入力されている言葉を検索することしか出来ない(間違ってたらごめんなさい。。)

以上で、Part1を終了します。