A wolf looking into the bottom

気ままに更新中♪

[toc]

カスタマイズボックス（cbox）

いちいちボックスごとにCSS設定するのはめんどくさいので、共通部分は一括でまとめました。

CSS（共通部分）

.cbox {
    margin: 2em 0;
    padding: 1.5em 1em;
    border: 2px solid;
    color:#5a5a5a;
}
.cbox ul {
    position: relative;
    margin: 0;
    list-style-type: none;
}
.cbox li:before {
    position: absolute;
    left: 0;
    content: "\f111";
    font-family: "font awesome 5 free";
}

①

うっすら優しい枠線のボックスです。文字色も優しい黒にしています。

HTML

[box class="cbox c1"]文章[/box]

CSS

.c1 {
    border-color: #f9f9f9;
    color: #797979;
}

②

背景がうっすら灰色のいい感じのボックス

HTML

[box class="cbox c2"]文章[/box]

CSS

.c2 {
    border: none;
    background: #f9f9f9;
    color: #5a5a5a;
}

③

いい感じの
箇条書きボックス

HTML

[box class="cbox c3"]文章[/box]

CSS

.c3 {
    border: 4px dotted #eee;
    border-left: none;
    border-right: none;
}
.c3 li:before {
    color: #ff6e6e;
}

④

いい感じの
箇条書きボックス2

HTML

[box class="cbox c4"]文章[/box]

CSS

.c4 {
    border: 4px dotted #eee;
    border-left: none;
    border-right: none;
}
.c4 li:before {
    content: "";
    margin-top: 7px;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    background: radial-gradient(circle,#ff6e6e 4px,#ffd6d6 5px);
}

⑤

グーグルっぽいボックス。それっぽくできた感じです。

HTML

[box class="cbox c5"]文章[/box]

CSS

..c5 {
    box-shadow: 0 1px 6px rgba(32, 33, 36, 0.18);
    border-radius: 5px;
    border: none;
    border-top: 5px solid #ff6e6e;
}

⑥

これはいいね！が詰まったボックスです。

HTML

[box class="cbox c6"]タイトル
文章[/box]

CSS

.c6 {
    background: #ebf7ff;
    border: none;
}
.c6:first-line {
    font-weight: 600;
    color: #3478f6;
}
.c6:before {
    content: "\f164";
    display: inline-block;
    font-family: "Font Awesome 5 Free";
    width: 40px;
    height: 40px;
    border-radius: 50%;
    line-height: 40px;
    background: white;
    text-align: center;
    margin: 0 5px 5px 0;
}

⑦

おすすめー

文章がね、苦手なんだ

HTML

[box class="cbox c7"]タイトル
文章[/box]

CSS

.c7 {
    border: 1px solid #f3f3f3;
    border-radius: 5px;
    padding-top: 0;
}
.c7 .box-title {
    border-bottom: 1px solid #f3f3f3;
    margin: 1em -1em;
    padding: 0.5em 1em;
    color: #6D6D71;
    font-size: 1.1em;
}

⑧

文章がね、苦手なんだ。そんなときはね。書くしか無いんだよね。頑張ってたくさん書かないといけないんだ。でも語彙力もひどいんだ。

つづき

HTML

[box class="cbox c8"]文章
リンク[/box]

CSS

.c8 {
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    border: none;
}
.entry-content .c8 a {
    color: #fff;
    display: inline-block;
    text-decoration: none;
    background: #1a73e8;
    padding: 4px 7px;
    margin: 1em 0 0;
    border-radius: 3px;
}
.entry-content .c8 a:hover {
    opacity: .8;
}

⑨

食パンが大好き

パンの中でもなんにでも合う食パンが好き。食パン好きのすべての人が使うためのボックスです。

HTML

[box class="cbox c9" title="食パンが大好き"]文章[/box]

CSS

.c9 {
    padding-top: 0;
    padding-bottom: 1em;
    border-color: #bf9e8c;
}
.c9 .box-title {
    background: #cdae6b;
    color: #fff;
    text-align: center;
    font-weight: 500;
    margin: 0 -1em 1em;
    padding: 0 0 10px;
}
.c9 .box-title:before {
    content: "\f7ec";
    font-family: "font awesome 5 free";
    font-weight: 900;
    height: 100px;
    display: block;
    font-size: 4em;
}

⑩

これを伝えたい！

吹き出しがタイトルになっているちょっと変わったボックスです。

HTML

[box class="cbox c10" title="タイトル"]文章[/box]

CSS