Cocoonに初めから用意されている文字装飾のスタイルを好みのデザインや色にカスタマイズしてみます。
文字装飾の一覧は以下にまとめています。
この記事はボックス（アイコン）のカスタマイズ方法です。
カスタマイズ方法
簡単なCSS追記のみです。
CSS追記は以下のいずれかから行って下さい。
外観→カスタマイズ→追加CSS
外観→テーマエディター→style.css
ボックス（アイコン）
Before
補足情報（ｉ）
初期値のCSS
デフォルトのCSSは以下の通り。
.information-box{
padding: 20px 20px 20px 72px;
border-radius: 4px;
position: relative;
display: block;
margin-top: 1em;
margin-bottom: 1em;
background: #f3fafe;
border: 1px solid #bde4fc;
}
.information-box::before {
font-family: "FontAwesome";
font-size: 42px;
position: absolute;
padding-right: .15em;
line-height: 1em;
top: 50%;
margin-top: -.5em;
left: 13px;
width: 44px;
text-align: center;
content: 'f05a';
color: #87cefa;
border-right: 1px solid #bde4fc;
}
以降、カスタマイズに必要な部分のみを追記してご利用下さい。
枠の形状・太さを変える
二重線
.information-box{
border: 3px double #bde4fc;
}
破線
.information-box{
border: 3px dashed #bde4fc;
}
色を変える
.information-box{
background: #E5F2FF; /*背景色*/
border: 1px solid #0066cc; /*枠線形状・色*/
}
.information-box::before {
border-right: 1px solid #0066cc; /*アイコン右側の線*/
}
アイコンを変える
.information-box::before {
font-family: "FontAwesome";
content: 'f0a1'; /*アイコンフォント*/
color: #0066cc;
border-right: 1px solid #0066cc;
}
アイコンフォントはこちら Font Awesome
余白を変える
少しスリムにする
.information-box{
padding: 10px 10px 10px 72px;
border-radius: 10px; /*角丸めのサイズ*/
}
その他のボックス（アイコン）のクラス名
上記のカスタマイズサンプルは「補足情報（ｉ）」のものです。
.information-box
その他の装飾をカスタマイズする場合は、以下のクラス名を参考に、補足情報（ｉ）のカスタマイズCSSの「information-box」部分を変更してご利用下さい。
補足情報（？）
.question-box
注意喚起（！）
.alert-box
メモ
.memo-box
コメント
.comment-box
ＯＫ
.ok-box
ＮＧ
.ng-box
ＧＯＯＤ
.good-box
ＢＡＤ
.bad-box
プロフィール
.profile-box
その他の文字装飾
その他、文字装飾のカスタマイズは以下をご覧ください。
Cocoonの文字装飾マーカーの色やデザインをカスタマイズ
Cocoonに初めから用意されている文字装飾のスタイルを好みのデザインや色にカスタマイズしてみます。 文字装飾の一覧は以下にまとめています。 この記事はマーカーのカスタマイズ方法です。 カスタマイズ方法 簡単なCSS追記のみです。 CSS追...
ayaito.net
2020.03.04
Cocoonの文字装飾ボックススタイルをカスタマイズ（白抜き・タブ・付箋風）
Cocoonに初めから用意されている文字装飾のスタイルを好みのデザインや色にカスタマイズしてみます。 文字装飾の一覧は以下にまとめています。 この記事はボックス（白抜き）、ボックス（タブ）、ボックス（付箋風）のカスタマイズ方法です。 ボック...
ayaito.net
2020.03.03
Cocoonの文字装飾ボックススタイルをカスタマイズ（アイコン）
Cocoonに初めから用意されている文字装飾のスタイルを好みのデザインや色にカスタマイズしてみます。 文字装飾の一覧は以下にまとめています。 この記事はボックス（アイコン）のカスタマイズ方法です。 カスタマイズ方法 簡単なCSS追記のみです...
ayaito.net
2020.03.04
Cocoonの文字装飾バッジの色やデザインをカスタマイズ
Cocoonに初めから用意されている文字装飾のスタイルを好みのデザインや色にカスタマイズしてみます。 文字装飾の一覧は以下にまとめています。 この記事はバッジのカスタマイズ方法です。 カスタマイズ方法 簡単なCSS追記のみです。 CSS追記...
ayaito.net
2020.03.05
Cocoonの文字装飾ボタンの色やデザインをカスタマイズ
Cocoonに初めから用意されている文字装飾のスタイルを好みのデザインや色にカスタマイズしてみます。 文字装飾の一覧は以下にまとめています。 この記事はボタンのカスタマイズ方法です。 カスタマイズ方法 簡単なCSS追記のみです。 CSS追記...
ayaito.net
2020.03.05
カラーの変更
お好きなカラー設定には以下もご利用下さい。
マカロンビビッドパステル伝統色和色セーフ色名赤桃青紫黄橙緑茶黒
コメント