本サイトはアフィリエイト広告を利用しています

Cocoon【案内ボックス】Sample-各スキンごとの比較あり

- PR -

Cocoonの場合、選択しているスキンによって各ボックスのデザインが異なることがあります。それに加えて、各利用者が独自のカスタマイズを加えている場合もあります。

ということで、

このサイトの「今!」現在の状況をパッと確認するため、ボックスのサンプルページを作りました。また、スキンごとのサンプルもあります。

こちらはCocoonの「案内ボックス」のサンプルです。

案内ボックス:現在のデザイン

このサイトでの現況を確認するためのサンプルです。

補足情報(i)

補足情報(?)

補足情報(i)

メモ

コメント

OK

NG

GOOD

BAD

プロフィール

スキンごとのデザイン比較

Cocoonデフォルト

「スキンなし」を選択した時のデザインです。

スキンの中には、このデザインのまま使用しているものも多いです。

スキンによってデザインされた案内ボックス

デフォルトデザインからカスタマイズされているものだけを抜粋しています。

クリックすると拡大表示できます。

追加スタイル

[追加CSS]に以下のコードを追加して、任意で線の種類を変更できるようにしています。

/* 破線ボックス */
.box-dashed {
    border-width: 1px;
    border-style: dashed;
}

/* 点線ボックス */
.box-dotted {
    border-width: 1px;
    border-style: dotted;
}

破線にしたい時

案内ブロックを選択し、
ブロック設定サイドバーの[高度な設定]→[追加CSSクラス]にbox-dashedと入力します。

BAD

点線にしたい時

案内ブロックを選択し、
ブロック設定サイドバーの[高度な設定]→[追加CSSクラス]にbox-dottedと入力します。

プロフィール

タイトルとURLをコピーしました