【cocoon ボックス(囲み枠)】レイアウト全種類一覧

cocoon(コクーン)の囲み枠(ボックス)のレイアウトとカスタマイズ可能箇所、見出しやその他よく使う機能の一覧

レイアウトの参考にするため、ブログ立ち上げのときに自分用に作ったサンプルページです。

せっかくなので備忘録として残しておきます。

ご注意いただきたいこと
  • H2〜6 見出し
  • アンダーラインマーカー
  • 付箋風ボックス

についてはスタイルシート(style.css)で
デザインをカスタマイズしてありますのでcocoon初期値とは表示が異なります。

上記3つ以外はシンプルにレイアウトをのせています。

ボックスデザイン一覧をご覧になりたい方は冒頭の見出しサンプルをとばして、目次『cocoonボックス』以下の項をご参照ください。

というわけであくまでも自分用なんですが、もしどなたかの参考になれば…

上記3つのカスタマイズ用CSSも、落ち着いたら載せておこうかしら。
せっかくなので、ね。

もし“ 今知りたいっ!”という方がいたらお問い合わせくださいませ。

見出しH2

こちらサンプルページです。

見出しH3

こちらサンプルページです。

見出しH4

こちらサンプルページです。

見出しH5

こちらはサンプルページです。

見出しH6

こちらはサンプルページです。


cocoonボックス

アイコンボックス

補足情報 (i)

補足情報 (?)

その他 種類
  • 補足情報 (!)
  • メモ
  • コメント
  • OK
  • NG
  • GOOD
  • BAD
  • プロフィール
※ PC表示

案内ボックス

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

その他 種類
  • セカンダリー(濃い灰色)
  • インフォ(薄い青)
  • サクセス(薄い緑)
  • ワーニング(薄い黄色)
  • デンジャー(薄い赤色)
  • ライト(白色)
  • ダーク(暗い灰色)
※ PC表示

白抜きボックス

白抜きボックス

  • 枠線・背景・文字色 = 変更可能

付箋風ボックス ※カラーカスタマイズ済

灰色

黄色

赤色

青色

緑色


タブボックス

タブボックス(チェック)

タブボックス(コメント)

その他 種類
  • ポイント
  • ティップス
  • ヒント
  • ピックアップ
  • ブックマーク
  • メモ
  • ダウンロード
  • ブレイク
  • Amazon
  • OK
  • NG
  • GOOD
  • BAD
  • プロフィール
  • 枠線(含タイトル背景)・背景・文字色 = 変更可能

吹き出し

サンプル
サンプル

吹き出し

アイコン種類
  • 丸(枠線あり)
  • 丸(枠線なし)
  • 四角(枠線あり)
  • 四角(枠線なし)
吹き出し種類
  • デフォルト
  • フラット
  • LINE風
  • 考え事
  • アイコン画像・左右位置 = 変更可能

アコーディオン(トグル)

サンプル1

サンプル2
サンプル3

  • 枠線(含タイトル背景)・背景・文字色 = 変更可能

タイムライン

タイムライン
  • サンプル


    サンプル
    サンプル

    サンプル

    サンプル

  • アイテム2
    アイテム2

    アイテム2

  • アイテム3
    アイテム3

  • 枠線・背景・ポイント丸・文字色 = 変更可能

アイコンリスト

アイコンリスト1
  • リスト1
  • リスト2
  • リスト3
アイコンリスト2
  • リスト1
  • リスト2
  • リスト3
  • アイコン色・枠線・背景・文字色 = 変更可能

ブログカード

ラベル種類
  • 関連記事
  • 参考記事
  • 参考リンク
  • 人気記事
 
  • あわせて読みたい
  • 詳細はこちら
  • チェック
  • ピックアップ
 
  • 公式サイト
  • ダウンロード
  • 前回の記事
  • 続きの記事

Ad 広告


cocoon汎用ブロック

見出しボックス

見出しサンプル

見出しボックス

  • 見出し … 自由テキスト・アイコン
  • 枠線(含タイトル背景)・背景・文字色 = 変更可能

タブ見出しボックス

タブ見出しサンプル

タブ見出しボックス

  • 見出し … 自由テキスト・アイコン
  • 枠線(含タイトル背景)・背景・文字色 = 変更可能

ラベルボックス

ラベルサンプル

ラベルボックス

  • 見出し … 自由テキスト・アイコン
  • 枠線・背景・文字色 = 変更可能

cocoonマイクロコピー

マイクロバルーン

マイクロバルーン
マイクロバルーン

  • アイコン
  • 矢印方向(上下)
  • 四角 or 円

  • 枠線・背景・文字色 = 変更可能

マイクロテキスト

マイクロテキスト

  • アイコン
  • 文字色 = 変更可能

cocoonレイアウト

2カラム

サンプル(左カラム)

サンプル(右カラム)

3カラム

(左カラム)
アイコンボックス

(真ん中カラム)
白抜きボックス

(右カラム)
タブボックス


サンプルリンク

NOT FOUND


学び
advertisement
follow
advertisement
advertisement
タイトルとURLをコピーしました