【初心者向け】Cocoonブロックの使い方いろいろ【バージョン2.2.8】

こんにちは。あろえです(@blogeraloe)

現在こちらのブログはワードプレスにて【Cocoon】というテーマを利用しながら投稿しています。

【Cocoon】は無料テーマと思えないほど便利な機能が盛り沢山ですが、全ての機能を使い切れていない方も多いのではないではないでしょうか?

今回はその中でもブログを書く際に必須な【Cocoonブロック】について、全13種類を実際に試しながらブログ上でどのように表示されるかを説明していければと思います!

追記

現在はCocoonからSWELLへテーマ変更したことにより、この記事のデザインはことごとく崩れてしまい

ほとんど参考にならない状態となっています…。

もし有料テーマの導入を考えている方は、下記記事を参考にしてみてください。

【ブログ】WordPress有料テーマの購入を迷っている人は今すぐ買うことをおすすめします

実際に試してみて、『こんなこともできたんだ!』ということも多かったので、是非最後までお付き合いください♪

目次

【アイコンボックス】

説明の通り、アイコンを用いて、直感的にメッセージ内容を伝えるボックスです。

ブロック全体を選択することで、ワードプレス右側【スタイル設定】でボックスの種類を選択することができます。

アイコンボックスのタイプは全10種類

補足情報(i)のアイコンボックス

補足情報(?)のアイコンボックス 疑問点などを羅列してみるのも良さそう

補足情報(!)のアイコンボックス 重要な情報などを伝える際に

メモのアイコンボックス 一言何か伝える際に使用できそうです

コメントのアイコンボックス こちらも何か一言伝える際などに

OKのアイコンボックス 下記のNGアイコンボックスと並べて使っても良さそうです

NGのアイコンボックス OKのアイコンボックスの対比で使えそうです

GOODのアイコンボックス 良い点をまとめる際に使用するのが良さそう

BADのアイコンボックス GOODのアイコンボックスと対比で

どれもブログを分かりやすくまとめて書く際には、かなり使えそうですね!

このような形で、文字色・背景色・文字サイズの変更も可能です

案内ボックス

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

タイプは全8種類

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

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

インフォ(薄い青)です

サクセス(薄い緑)です

ワーニング(薄い黄色)です

デンジャー(薄い赤色)です

ライト(白色)です

ダーク(暗い灰色)です

アイコンボックスのようなアイコンはありませんが、デンジャーやサクセスなど色によってイメージされる内容を分かりやすく記載することができそうです。

またこちらもアイコンボックスと同じように文字色・背景色・サイズが変更できます

白抜きボックス

コンテンツを囲むだけのブランクボックスを表示します。

こちらはボックス全体の色・背景色・文字色の3つが変更でき、自分好みにカスタマイズできます。

ボックス色青、背景色黄色、文字色ピンクの例です

ボックス色のみ緑にしてみました。こっちの方がシンプルでいいですね笑

少し見にくいですが薄いピンクも可愛いです

こちらもワードプレス右上の歯車マークをクリックし、【ブロック】のカテゴリをチェックすることで自由にカスタマイズができます。

付箋風ボックス

目立つ濃いめの色で付箋風にメッセージを伝えるためのボックスです。

タイプは全5種類

灰色の付箋風ボックスです

黄色の付箋風ボックスです

赤色付箋風ボックスです

青色の付箋風ボックスです

緑色の付箋風ボックスです

ボックスの色がどれも本物の付箋のようで可愛いらしいですね!

記載内容や項目ごとに色を変えるといいかもしれないです。

文字色・背景色の変更も可能です!

タブボックス

タブにメッセージ内容を伝えるための文字が書かれているボックスです。

こちらはなんと全16種類

チェックボックスです

コメントボックスです

ポイントボックスです

ティップスボックスです

ヒントボックスです

ピックアップボックスです

ブックマークボックスです

メモボックスです

ダウンロードボックスです

ブレイクボックスです

Amazonボックスです

OKボックスです

NGボックスです

GOODボックスです

BADボックスです

プロフィールボックスです

デフォルト色がグレーのため、このままだと味気無さが残りますが、ボックスの色も変更可能です!

枠の色を変更するだけでこんなにも見やすくなります!

タブの種類ごとに色を変更するのといいかもしれないですね!

吹き出し

登録されている吹き出しのオプションを変更できます。

Cocoonにはデフォルトで人物の吹き出し画像が登録されています。

人物は全10種類。吹き出しは全4種類。それ以外にも人物の左右と、アイコンのスタイルが変更可能です。

ここも変更できます!
ここも変更できます!

丸スタイルの男性のアイコンです。喋ってるように見えますね

四角スタイルの女性アイコンです。

右側に配置することで会話しているかのように見えます

ビジネスマンのアイコンです。吹き出しはフラットを使用してます

ビジネスウーマンのアイコンです。吹き出しはLINE風を使用してます

LINE風の吹き出しは人物位置【右側】でのみ使用できます

悩むおじさんのアイコンです。吹き出しは考え事風を使用しています

悩むおばさんのアイコンです

男性医師のアイコンです

女性医師のアイコンです

どや顔男性のアイコンです

どや顔女性のアイコンです

あろえ
あろえ

人物部分は自分で画像を登録して、自画像にすることも可能です!

私の画像もこのようにしてしゃべらせています

吹き出しボックスを利用することで、より読者が共感しやい記事になるかと思います!

ブログカード

ブログカードには自分の別記事のURLを貼ることができます!

こちらはブログカードにつくラベルの種類が全10種

このように、ボックス内に自ブログのURLを入れることで別記事へ案内を促すことができます。

ラベルを変更してみました。

各記事のアイキャッチ画像も見えるので見やすいですね!

ボタン

リンクボタンを作成できます。

飛ぶ先のURL

ボタンの色・サイズ・形・光らせるか否か

リンクの開き方

をそれぞれ設定できます。

光らせた丸ボタン

大きめの四角ボタン

小さめ黒ボタン

などなど、カスタマイズ次第で自分好みのものが作成できます!

囲みボタン

こちらは主にアフィリエイトサイトへのリンクを貼り、目立たせるためのボタンとなります。

【ボタン】と同じ設定ができ、こんな感じで広告のリンクボタンを貼り付けることができます。

実際の表示はこの通り。(クリックするとA8.netへ飛びます)

うまく作れば広告のクリック率も上がりそうです。

トグルボックス

クリックすることでコンテンツ内容の表示を切り替えることができるボックスです。

どんなものかというと

正解:生魚

A.3万円
(推しイベはなかったのに;;)

こんな感じの見開きできるボックスが作れます!

色々と面白いことができそうですね。

検索案内

訪問者に検索を促すためのボックスです。

検索ボタンをクリックすることで実際に検索結果へ跳びます。

使い道はあるのでしょうが、私にはまだ難しいです…。

タイムライン

時系列を表現するためのブロックです。

タイムラインの丸ポチの色や、丸ポチの数(最大50個)が変更可能です

ブロガーの1日
  • 6時
    起床
  • 7時
    ブログを書く
  • 12時
    お昼
  • 13時
    ネタ探し
  • 16時
    ブログを書く

こんな感じであっという間にタイムラインを作成することができちゃいます!

アイコンリスト

リストポイントにアイコンを適用した非順序リストが作成できます。

アイコンは全40種

ここにタイトルをいれます
  • アイコンを選ぶことで
  • 右側のアイコンが変更可能です。
  • エンターキーを押すと
  • 下に羅列できます

例えばこんな感じで作成できます。

本日のタス
  • 読書
  • ブログを書く
  • イベントを進める
  • 早く寝る

箇条書きをする際も、アイコンがあることでとても見やすくなりますね!

まとめ

いかがでしたでしょうか?

まだまだ使用したことがないブロックがあった方も多いのではないでしょうか。

読者にとって分かりやすく見やすいブログを作成するためにも、cocoonブロックはとても大切です。

実際にブログを書く時に使いながら覚えていくのがいいかと思います!

よかったらシェアしてね!

コメント

コメントする

CAPTCHA


目次
閉じる