無料WordPressテンプレート「Cocoon」の装飾機能のすごさに感動。Cocconの装飾系全部試してみた。

Coccon

本ブログ「起業夢見るパパブログ」ですが、WordPressで作られていて、また無料WordPressテンプレートの「Coccon」を採用しています。

実は、WordPressはまだ初めて1ヶ月くらいだし、正直「テンプレートっていったい何?」という状態でスタートしました。

ですので、テンプレートについては、色々検討したわけでなく、ネットで簡単に検索して、使いやすく機能が豊富なテンプレートと紹介されていたので、まずはCocconを採用しました。

とりあえず使ってみて、良ければそのまま使い、ダメだったら違うテンプレートを試してみようというくらいの気持ちではじめました。

実際にCocconを使ってみて、今の所ダメと思えるところがないです。というよりも、お世辞抜きで良いところしかありません。特に装飾系の機能の凄さにはびっくりしました。

ずっと昔、FC2の無料ブログを使っていましたが、装飾系はできても、文字に色をつけるとかアンダーバーを引くくらいしかできなかった記憶があります。もし色々やりたければ、ソースをいじったりしなければいけませんでした。

一方Cocconでは、ソースをいじったりしなくても、デフォルトでの装飾機能が豊富です。今回は、そんな装飾機能について紹介したいと思います。

最近はブロクエディタが主流となってきたので、Cocconのブロック要素4つを紹介したいと思います。

Cocconのブロック要素
  • Cocconブロック
  • Coccon汎用ブロック
  • Cocconマイクロコピー
  • Cocconレイアウト

(…といいつつ、裏のテーマは自分の学習目的です。色々試してみて、使いこなせるようにしたいと思います。)

スポンサーリンク

Cocconブロック

アイコンボックス

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

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

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

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

案内ボックス

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

白抜きボックス

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

付箋風ボックス

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

タブボックス

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

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

吹き出し

アントレパパ
アントレパパ

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

女性
女性

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

ブログカード

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

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

ボタン

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

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

囲みボタン

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

トグルボックス

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

餃子です。

検索案内

タイムライン

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

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

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

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

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

  • Step3
    太いストローをさす

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

アイコンリスト

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

Coccon汎用ブロック

見出しボックス

見出し

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

Amazon

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

タブ見出しボックス

見出し

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

ラベルボックス

見出し

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

Cocconマイクロコピー

マイクロテキスト

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

マイクロバルーン

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

Cocconレイアウト

2カラム

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

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

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

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

3カラム

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

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

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

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

まとめ

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

今回は、裏テーマは「Cocconを使いこなせるように色々試してみよう」という自分の学習目的でもありましたが、改めてCocconの装飾系はすごいと感じました。

色変えるとか、アンダーバーをつけるといった文字の装飾の枠をはるかに超えていますよね。付箋風ボックスとかタブボックス、そして吹き出しも簡単にできるし、タイムラインといった表現も簡単にできてしまいます。

文字だけだと、どうしても途中で見るのをやめてしまう人もいるかと思います。途中途中で、上記のような装飾を入れて見やすくすることが効果的かと思います。

これからも、どうしたらもっと読みやすくわかりやすいブログになるかを考えながら、記事を書いていきたいと思います。


★☆★☆★☆★☆★☆★☆★☆
Twitterでこのブログの最新情報をお伝えしております。
この記事を気に入ってくれた方は、ぜひこちらからフォローをお願いします!

ブログランキング参加しています!

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