【無料WordPressテーマ】Cocoon初心者が使いこなしたい装飾系【全部試してみた】

WordPress
悩み
悩み

とりあえず、みんなに勧められて「Cocoon」を入れてみたけど、一体なにが凄いの?


アンパパブログもCocoonを採用しています。

Cocoonは本当に無料と思えないほど、機能が充実しています。

その中でも「装飾系」は特に充実しています。


今回(自分の勉強がてら)、その装飾系を紹介します。


特にブログ初心者、もしくはCocoon初心者であれば、まずは装飾系を全部試してみることをオススメします。そして徐々に使いこなせるようにしていきたいですね!


装飾系を使いこなすことで、より見やすいブログになると思いますよ。



なお、Cocoonのブロック要素は4つあります。それぞれ説明していきたいと思います。

Cocoonブロック要素

  • Cocoonブロック
  • Cocoon汎用ブロック
  • Cocoonマイクロコピー
  • Cocoonレイアウト



スポンサーリンク

Cocoonブロック

アイコンボックス

アイコンボックスとは、下記のようにアイコンと文章をセットにしたボックスです。

重要な情報や注意点などを伝えたい時に使えそうですね。

アイコンボックスでは、こんな感じでインフォメーションが書けますね。

疑問点、質問などはこのアイコンボックスがいいですかね。

注意点とかは「!」のアイコンがいいと思います。



他にも「メモ」「コメント」「OK」「NG」「GOOD」「BAD」「プロフィール」などのアイコンがあります。


案内ボックス

案内ボックスは、下記のように背景色を変えたボックスです。

稼いでいるブロガーさんを見ると、このようなボックスを使いこなして、ただの文字列が続かないように工夫しているようです。

案内ボックスはこんな感じです。背景の色を変えることができ、直感的に情報が伝えることができます。



白抜きボックス

アンパパブログも最近多用している白抜きボックスです。

何か説明文を入れたりする時活用しています。

白抜きボックスはこんな感じです。



付箋風ボックス

これもアンパパブログでよく使います。

付箋のように、タスクやTO DOリストなどを表現するとき活用しています。

付箋風にメッセージを伝えることができます。色は「灰色」「青色」「赤色」「黄色」「緑色」から選べます。



タブボックス

タブボックスは、下記のように何かを紹介したりする時使えますね。

Amazonタブで、Amazonの商品を紹介してもいいかと思います。

タブボックスを使って書けば、ブログのポイントや要旨をひと目で伝えることことができますね。

タブの名称は色々選択できます。「AMAZON」というのもありました。



吹き出し

最近どのブログも吹き出しをよく見ますよね。

Cocoonならデフォルトで吹き出しが使えます。

アンパパ
アンパパ

最近ブログでこんな吹き出しを見けますね。Cocoonなら簡単に作れます。

女性
女性

LINE風な吹き出しもありますよ。



ブログカード

ブログカードを使えば、他の記事へのリンクをオシャレにできますね。

左上の文字は「あわせて読みたい」だけでなく、「人気記事」「参考記事」などにすることもできます。

ボタン

Cocoonならボタンも簡単にできてしまいます。
(下記のボタンを押すと、Amazonのトップページに遷移します)

大きくしたり、丸くしたり、光らせることもできます。



囲みボタン

Cocoonならアフィリエイトのタグもボタン化できます。
(下記ボタンを押すと、Amazonのトップページに遷移します)



トグルボックス

こんな感じで、記事をしまいこむこともできます。

餃子です。



検索案内



タイムライン

こんな感じのタイムラインも簡単につくれます。手順なんかを整理する時にも使えそうですね。

タピオカミルクティーの作り方
  • Step1
    コップにタピオカを入れる

    コップにタピオカを入れます。

  • Step2
    コップにミルクティーを注ぐ

    コップにミルクティーを注ぎます。

  • Step3
    太いストローをさす

    太いストローをさして完成です。



アイコンリスト

Cocoonならただの箇条書きではなく、アイコンを使ってオシャレに箇条書きが書けます。

アイコンリストについて
  • 左側のアイコンは選ぶことができます。
  • 左側のアイコンの色も指定できます。




Cocoon汎用ブロック

見出しボックス

これもアンパパブログでよく使います。
見出しをつけれる汎用的なボックスです。

見出し

見出し付きのブロックも簡単に書けますね。

Amazon

Amazonのマークもあります。左上のアイコンは何種類からか選べます。



タブ見出しボックス

見出しボックスに似ていますが、タブのようなボックスです。

見出し

タブ見出しはこんな感じです。

ラベルボックス

これも見出しボックスに似ていますが、ラベルがついたボックスです。
「見出しボックス」「タブ見出しボックス」「ラベルボックス」どれを使えばいいかは、好みがわかれそうですね。

見出し

ラベルボックスはこんな感じです。



Cocoonマイクロコピー

マイクロテキスト

Cocoonならこんな感じで小さな文字が書けます。

↓ぜひTwitterフォローして下さいね



マイクロバルーン

Cocoonならこんな感じで小さな吹き出しが書けます。

ぜひTwitterフォローして下さいね



Cocoonレイアウト

2カラム

Cocoonなら本文を2カラムに分割することもできます。

左側です。左側には付箋風ボックスをいれてみました。自由自在にブロックを入れることが可能です。

右側です。右側は普通の段落を入れています。

下記のサンプルは、「1:1」ですが、比率を「1:2」「2:1」「1:3」「3:1」に変えられます。

3カラム

Cocoonなら、本文を3カラムに分割することもできます。

左側です。
左側です。
左側です。

真ん中です。
真ん中です。
真ん中です。

右側です。
右側です。
右側です。

まとめ

まとめ

Cocoonの装飾系を全部紹介してみましたが、いかがでしたでしょうか?


もしCocoonを使っているのであれば、Cocoonの凄さがおわかりになったでしょうか?

もしCocoonを使っていないのであれば、乗り換えたくなりませんか?(笑)


本当にCocoonが無料だなんて未だに信じられません。

これからもありがたく使わせていただきます。

ブログを書いている人
アンパパ

ブログがとにかく好き | 4ブログ運営で1万記事目指す | ブログ飯が目標 | 1歳9ヶ月の娘が大好き | 「人生をより楽しく幸せに」がテーマのアンパパブログ執筆中 | ブログ運営ノウハウ発信 | お得情報発信 | 育児便利ネタ発信 | 詳しいプロフィールはコチラ
  \フォロー、はてブお願いします/

アンパパをフォローする
WordPress
スポンサーリンク
アンパパをフォローする
アンパパブログ
タイトルとURLをコピーしました