前回の記事ではcocoonでブログ全体を「今っぽく」する方法を紹介しました。
さぁ、次は記事を書いていきましょう！
基本的な使い方
ダッシュボードから「投稿」→「新規追加」と選ぶと以下のような画面になります。
ここに文章や画像を入れていきます。
基本的な使い方はhitodeblogさんでわかりやすく説明されているので参考にしましょう。
見やすいデザインにこだわってみる
いくつか記事を書いていると
- 「ここわかりやすくしたいんだけどなぁ…」
- 「注意点を強調したい…」
「対話っぽくしてみたいんだけど…」
…と、表現の幅を増やしたくなると思います。
そんなときは cocoonブロック を使いましょう！
cocoonブロックの使い方
cocoonブロック一覧の出し方
記事作成画面の右側か左上の「＋」を押すとブロック一覧が出てきます。
一番下の方までスクロールしてみましょう。
すると「cocoonブロック」という項目が出てきます。
マウスを上に置くと右側にサンプルが出てきます。
cocoonブロックのスタイルを変更する
同じブロックでもスタイルや色を変更することでイメージをガラッと変えることができます。
アイコンと色が変わるので、状況に応じて使い分けをしていきましょう！
cocoonブロックの紹介
ではここからはcocoonブロックをそれぞれ紹介していきます。
スタイルが多いものや変化に乏しいものは
一部割愛してます。
実際に使って試してみるがよかろう…
当ブログはcocoonテーマのスキンを「season(spring）」に設定しています。
適用するスキンによってデザインや項目の内容が変わる可能性がありますのでご注意ください。
cocoonブロック
アイコンボックス
「ボックス」とついているブロックは
中に更にブロックを設置することもできます
案内ボックス
こんなイメージです。
カラーもいくつかありますよ！
白抜きボックス
シンプルな白抜きボックスです。
枠の色や文字色を変えることもできます！
付箋風ボックス
カワイイ付箋風のボックスです。
もちろん色も変更できます！
タブボックス
タブにラベルがついているボックスです。
他にも「コメント」「ポイント」「ティップス」「ヒント」「ピックアップ」「ブックマーク」「メモ」「ダウンロード」「ブレイク」「Amazon」「OK」「NG」「GOOD」「BAD」「プロフィール」など種類がたくさん！
自由に色が変えれるのもいいですね！
吹き出し
キター、吹き出し！
案内をわかりやすくするのに必須よな！
吹き出しのスタイルや色も変更できます。
デフォルトでも十分そうですが…
ブログカード
URLを入力するとブログカードが表示されます。
右上の「あわせて読みたい」は「関連記事」「参考記事」「参考リンク」「人気記事」「詳細はこちら」「チェック」「ピックアップ」「公式サイト」「ダウンロード」「前回の記事」「続きの記事」などに変更が可能。
ボタン
リンクボタンを作ることができます。
wordpress標準よりデザイン性に優れているのでオススメです。
囲みボタン
アフィリエイト用のボタンのようです。
アコーディオン
ここに隠されていた文章が表示されます
検索案内
「検索」を押すと入力している内容を検索してくれるボタンです。
タイムライン
流れを説明するときに便利そうなブロックです。
- ６時起床
早起きは大事
- ７時朝ごはん
野菜中心の生活を
- ９時仕事開始
コーヒーを飲んで今日も一日がんばろう
アイコンリスト
cocoon汎用ボックス
見出しボックス
見出し付きのボックスがつくれます
アイコンをつけることも！もちろん色も変更できます
タブ付き見出しボックス
タブのラベルを編集できるボックスです
ラベルと編集できる点以外はタブボックスと同じです
使い道が広がるのでこれはこれでイイですね！
ラベルボックス
上部のラベルの文章を変更できるボックスです
もちろん色やアイコンも変更できます
cocoonマイクロコピー
マイクロバルーン
マイクロテキスト
cocoonレイアウト
２カラム
中に更にブロックを配置できます。
商品比較などに使えそう！
３カラムもあります。
まとめ
今回はcocoonブロックを紹介しました。
cocoonに最適化されていてデザイン性がいいのでガンガン使っていきましょう！
使いこなして見やすいブログを心がけたいですね！
コメント