【初心者用】WordPress (ワードプレス)Cocoonブロックの使い方について。(Cocoon バージョン1.0.8使用)

スポンサーリンク

こんにちは。
当ブログ管理人の「ポイ」と申します。

コチラはCocoonについての記事になります。

現在(2019年時点)
ワードプレスを利用してブログを書いています。
使っているテーマは「Cocoon」です。

記事を編集していて思ったのですが
Cocoonブロックという項目の中で

まだ使ったことの無い機能があるかもしれない!?
もっと何か面白そうな機能があるかもしれない!

そう思ったので、
今回は「Cocoonブロック」の中の項目について
実際に「ブロック」をイロイロとお試しで作成しながら
どのように表示されるのかを見てみたいと思います。

※Cocoonブロックとは…

Cocoonブロックの内容は全部で13項目あるようでした。

実際に全ての項目を試しながら記事を書いてみます。
それでは、どのような感じになるのか見ていきましょう。
(※まだまだ初心者なので、実験に少々お付き合いくださいませ♪)

ピーちゃん
ピーちゃん

記事の書き方の勉強です♪

スポンサーリンク

Cocoon ブロック「吹き出し」について。

男性
男性

これが「吹き出し」機能です。
吹き出しスタイル「デフォルト」です。
イラスト下(「男性」の部分)
変更可能となっています。

ビジネスウーマン
ビジネスウーマン

吹き出しスタイル「LINE風」。
人物位置を「右」にしました。

男性医師
男性医師

吹き出しスタイル「フラット」にしました。
アイコンスタイル(枠の部分)を「四角」に設定。

どや顔女性
どや顔女性

吹き出しスタイル「考え事」に設定しました。
アイコンスタイル は「枠線なし」です。

吹き出しに入っているサンプル
(全10種類)

男性

女性

ビジネスマン

ビジネスウーマン

悩むおじさん

悩むおばさん

男性医師

女性医師

どや顔男性

どや顔女性

ポイ
ポイ

吹き出しは得意です☆
画像を追加することで
新しい人物も吹き出しに出せます♪

Cocoon ブロック「アイコンボックス」について。

アイコンを用いて直感的にメッセージを伝える為のボックスです。

これが「アイコンボックス」です。

補足情報の「i」マーク。

補足情報の「?」マーク。
疑問点などを書きましょう。

補足情報の「!」マーク。
注意点などが書けそうです。

「メモ」タイプ。
一口メモなどが書けそうです。

「コメント」タイプ。
なにかコメントが書けそうです。

「OK」タイプ。
OKな事を書きましょう。

「NG」タイプ。
NGな事を書きましょう。

「GOOD」タイプ。
GOODな事を書きましょう。

「BAD」タイプ。
BADな事を書きましょう。

「プロフィール」タイプ。
自己紹介とか書きましょう。

Cocoon ブロック「案内ボックス」について。

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

「案内ボックス」濃い水色。

「案内ボックス」 濃い灰色。

「案内ボックス」 薄い青。

「案内ボックス」 薄い緑。

「案内ボックス」 薄い黄色。

「案内ボックス」 薄い赤色。

「案内ボックス」 白色。

「案内ボックス」 暗い灰色。

Cocoon ブロック「白抜きボックス」について。

「白抜きボックス」はコンテンツを囲むだけのボックスだそうです。

これが「白抜きボックス」です。

ボーダー(枠の色)・背景色・文字色が変更可能。
こちらの設定は…
ボーダー「紺色」
背景「淡い緑」
文字色「茶色」

ボーダー(枠の色)の種類は以下のようになっていました。

Cocoon ブロック「付箋風ボックス」について。

付箋風にメッセージを伝えるためのボックスです。

これが「付箋風ボックス」です。
「灰色」タイプです。

「黄色」タイプです。

「赤色」タイプです。

「青色」タイプです。

「緑色」タイプです。

Cocoon ブロック「タブボックス」について。

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

ラベル=POINT 

ラベル=COMMENT
枠色・背景色・文字色
それぞれ変更可能。

こちらの設定は…
ボーダー「茶色」
背景「淡い黄色」
文字色「緑色」

ラベル=CHECK

ラベル=TIPS
【TIPSとは】
ちょっとしたコツやテクニックの事だそうですよ。
(コンピュータの使い方などで使われるそうです。)

ラベル=HINT

ラベル=AMAZON

ラベル=PROFILE

ラベル=BAD

ラベル=GOOD

ラベル=OK

ラベル=BREAK 
休憩。一息入れましょう。

ラベル=DOWNLOAD

ラベル=MEMO

ラベル=BOOKMARK

ラベル=PICKUP

タブボックスの中にタブボックスを入れてみました。

ポイ
ポイ

いろいろ実験中です♪

Cocoon ブロック「ブログカード」について。

記事に関連するページにリンクさせたい時に使いたいのが「ブログカード」。

普通に文字でリンクを促すよりも、ブログカードは目立つので効果的にリンクに誘導する効果がありそうですね。

ブログカードは以下のようになります。

ブログカード
ラベルの種類

ラベルなし
関連記事
参考記事
人気記事
あわせて読みたい
詳細はこちら
チェック
ピックアップ
公式サイト
ダウンロード

ピーちゃん
ピーちゃん

いろいろ活用できそう♪

Cocoon ブロック「ボタン」について。

ボタン」はクリックするとリンク設定した指定のページに行くようです。(以下のボタンは当ブログの先頭ページにリンクする設定にしています。)

ボタンの設定では
「サイズ」(小・中・大)
「円形にする」
「光らせる」

などの項目がありました。
コレはなんだか面白そうですね。

面白そうなので、試しにいろいろボタンを作ってみます。

ピーちゃん
ピーちゃん

ボタンってつい押したくなるのよ♪


光っているとクリックしたくなる効果があるかもしれませんね。

Cocoon ブロック「囲みボタン」について。

囲みボタン
「リンクタグ」
「ショートコード」
これらを設定して、そのページにリンクさせるボタンのようでした。

※ちなみにこちらの囲みボタンは
リンクタグ・ショートコードとして以下のように設定してあります。

Cocoon ブロック「トグルボックス」について。

トグルボックス」はクリックすると中身が表示される機能のようです。
いわゆる「クリックすると開くシステム」ですね。
こんな便利なシステムは今まで知りませんでしたっ。
これはネタバレ要素などに使用すると良さそうです。

試しに「トグルボックス」を作成してみました↓

こちらがトグルボックスの「中身」です。
クリックすると表示されたり隠れたりするようです。

ピーちゃん
ピーちゃん

そう言われると…
どうしても開けたくなるのよね。

Cocoon ブロック「検索案内」について。

訪問者に検索を促すためのボックスです。
検索をクリックすることで検索結果が表示されるようです。

それでは試しに何個か「検索案内」を作ってみます。
「検索」の所をクリックすると実際にそのキーワードで検索されます。

URLをそのまま入力しちゃうのもアリかも!?

ポイ
ポイ

検索って便利♪

Cocoon ブロック「タイムライン」について。

時系列を表現するためのブロックです。
それでは「タイムライン」を実際に作ってみます。

管理人のスケジュール
  • 朝6時

    起床。

    朝はとっても眠いですよね♪

  • お昼12時
    ランチタイム。

    お昼を食べるとなんか眠たくなる♪

  • 夜12時
    就寝。

    夜もなんだか眠たいです♪

ピーちゃん
ピーちゃん

ざっくりしてるなぁ~。

タイムラインの丸いポチっとしたところは「アイテム数」で変更可能となっていました。色も変更可能のようです。

Cocoon ブロック「アイコンリスト」について。

リストを作成する時に便利な機能「アイコンリスト」です。
改行するごとに選択した「アイコン」が出てきます。

それでは試しに「アイコンリスト」を作成してみます。

ここにタイトルを入力。
  • ここにリストを書きます。
  • ←こちらのマークが
  • 改行するごとに出てくるので
  • リストを作る時は
  • とっても便利な機能です。
ポイ
ポイ

たとえば…

筋トレのメニュー
  • 腕立て
  • 腹筋
  • スクワット
  • ジョギング
  • ストレッチ
ピーちゃん
ピーちゃん

イイ感じのリストができるね。

Cocoonブロックの使い方のまとめ

Cocoonブロックに含まれる項目(全13種類)について実際見てみました。

ワタシもまだまだ使った事の無い項目がたくさんありました。

Cocoonブロックの項目を必要に応じて利用して、より見やすいブログ記事が書けるようになりたいですね。

ポイ
ポイ

それでは、また♪

ブログ作り
スポンサーリンク
シェアしてくれたらうれしいです!
ポイをフォローする
スポンサーリンク
ポイブログ