A wolf looking into the bottom

 

気ままに更新中♪

カスタマイズボックス(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
.