実用性の高い記事中で使えるボックス・背景色CSSカスタマイズ

2018年8月4日2018年8月9日

どうも。

最近になって、また記事を見やすくなるように書き直そうと思い直したわけですが。

どうせならボックス系の装飾も作り変えてみようと、色々作成してみました。

「あ～、そう…で？」と言われてしまいそうな話の流れなんですけどせっかくなんで、CSSでも晒しておこうかと思った次第です。

ただ、素人製なので無駄な記述とかあるかもしれませんがその辺は勘弁願います。

ご自身でも使えそう、と思っていただければぜひご利用ください。

またLuxeritasバージョン3.0.0以降であればショートコードとしてインポートも可能ですので、簡単に導入出来ます。そのやり方もご説明します。

インポート方法については、次回更新となりますのでまずはこちらをご覧くださいまし。

Contents

1. 実用性の高いCSSカスタマイズ
2. まとめ

実用性の高いCSSカスタマイズ

背景色編

適当に使用しながらサンプルを。

―――――

今日はとてつもなく暑い。

意外と例文が思いつかないので困り果てる。

あと2色もあるので、どうしたもんか。

今日のお昼はカレーライスです。

――――――

ご自身のサイトの「line-height」等の設定によっては、表示がカブってしまう可能性がありますので要検証。

CSS

span.bg-green{
background: linear-gradient(transparent 0%, #96f2a5 );
}
span.bg-red{
background:linear-gradient(transparent 0%, #f2ae96 );
}
span.bg-yellow{
background:linear-gradient(transparent 0%, #f2ea82 );
}
span.bg-blue{
background:linear-gradient(transparent 0%, #9cd9fc );
}
span[class^=bg-]{
border-radius:5px;
font-weight:bold;
padding:1px 3px;
box-shadow:0 0 1px silver;
}

細かい説明は割愛しますが、それぞれの色部分を変えるとお好みのものに変えられます。％指定されていない方の色ですね。

背景色を使おうと思った際に意外と、余白（色が付く部分）がギチギチだったのでその調整と、あとは何かカスタマイズしてみようと、丸みも付けてみました。

マーカー風に範囲を狭くするのも流行ってるみたいで迷ったんですがこっちで。うっすらと色が付いてるパティーンです。

実際に書く場合は、上記CSSを追記したあと

<span class="bg-〇〇">色変えたいところ</span>

と書けば変更できます。

背景色編2

続いてはシンプルなものを。

――――――

設定するには管理画面＞設定＞プライバシーを選択します。

――――――

↑この使い方をしたいが為に作りましたｗｗ

CSS

span.b-gray{
display:inline-block;
padding:1px 3px;
margin:2px 3px;
background:#eee;
color:#21a823;
font-size:12px;font-size:1.2rem;
box-shadow:2px 2px gray;
font-weight:bold;
}

クラス名はさっきの分が反映されないように、少し変えてますので注意です。除外指定しても良かったんですが調べてうんぬんする時間ももったいないので、これで良いや、ってな感じですｗ

書き方はさっきと一緒なので割愛。

メモ用ボックス

なんかちょっとした補足とか、箇条書きとか。

汎用性は高い（と思われる）_φ(･_･メモボックスを。

MEMO

ここに文章を書く

下は箇条書きバージョン↓

MEMO

じゃがいも
人参
玉ねぎ

CSS

.box-memo{
display:block;
box-sizing:border-box;
padding:.5em 1em;
background:#e8f5fc;
width:80%;
margin:1em auto;
color:#666;
border-top-left-radius:20px;
box-shadow:3px 2px 4px gray;
}
.box-memo li{
line-height:1.5;
padding:.5em 0;
list-style-type:none!important;
font-weight:700;
font-size:14px;
color:#666;
}
.box-memo li:before{
font-family:'Font Awesome 5 Free';
content:"\f101";
font-weight:900;
position:relative;
left:.1em;
color:#fca4e0;
padding:0 8px
}
.box-memo ul{
margin:0;
padding:0;
}
.box-memo ul{
list-style:none;
margin-left:0;
padding-left:1em;
text-indent:-1em
}
@media(max-width:540px){
.box-memo{
width:90%
}
}
.box-memo .box-title{
position:relative;
display:block;
color:#fca4e0;
font-size:16px;
border-bottom:1px solid #fca4e0;
margin-bottom:.3em
}
.box-memo .box-title::before{
font-family:'Font Awesome 5 Free';
content:"\f044";
font-weight:400;
position:relative;
left:.1em;
color:red;
padding:0 8px
}
.box-memo p{
padding:0;
margin:0;
}

少し長いですが。

一応モバイルで見た時狭いままだと使い方によっては、おかしくなってしまう可能性があるので、ある程度広めになるよう（width90％に）設定してます。

これに関してはボックスタイトルというクラスで「MEMO」を書いてます。なので変えたい場合は、

<div class="box-memo"><div class="box-title">ここにタイトル</div>ここに本文（内容）</div>

…という感じになってますので「ここにタイトル」としている部分を書き換えていただければ変更出来ます。

注意書きボックス

ここでそれはやっちゃダメなやつ！

例文が良くわかりませんが、特に注意を引きたい文言を書けば目立つかと思います。

<div class="box-caution">ここに本文</div>

CSS

.box-caution{
position:relative;
box-sizing:border-box;
background:#f5f7be;
font-size:14px;
margin:.5em auto;
border-top-right-radius:15px;
border-bottom-right-radius:15px;
color:#ed651c;
padding:5px;
padding-left:2.7em;
font-weight:bold;
box-shadow: 0 0 5px silver;
}
.box-caution::before{
display: inline-block;
position: absolute;
padding:2px 4px;
border-right:3px solid pink;
text-align: center;
left: 0;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
font-family: 'Font Awesome 5 Free';
content:"\f071";
font-size:18px;
color:red;
font-weight:900;
}

大幅に見た目変更しました。

最初に書いてたものだと、2行以上になるとめちゃくちゃブサイクだったので、シンプルなものに変更。

この文章が、2行にわたってしまっても表示が崩れないようにあえてシンプルな見た目にしてみたのです。

まとめ（要約用）ボックス

最後はシンプルなものを。

記事の最後なんかでまとめに使う、普段のもの（箇条書き）よりは少しフォントを大きく、目に付きやすい配色にしてます。

大きいフォントは見やすい
暖色系は目に付きやすい
よってこのデザインである

<div class="box1">適当な箇条書き</div>

CSS

.box1{
display:block;
box-sizing:border-box;
border:4px solid #f7a999;
padding:.5em .3em .5em 1em;
width:70%;
margin:1em auto;
color:#666;
border-radius:20px;
}
.box1 li{
line-height:1.5;
padding:.5em 0;
list-style-type:none!important;
font-weight:700;
font-size:18px;
}
.box1 li:before{
font-family:'Font Awesome 5 Free';
content:"\f00c";
font-weight:900;
position:relative;
left:.1em;
color:#f45f42;
padding:0 8px
}
.box1 p,.box1 ul{
margin:0;
padding:0
}
.box1 ul{
list-style:none;
margin-left:0;
padding-left:1em;
text-indent:-1em
}
@media(max-width:540px){
.box1{
width:90%
}
}