見出し以外の強調方法 - 雪ん子’s report

ここまで画像の余白や、見出しなどを変更してきました。
　
そこまでできると欲が出て、
「文の中の文字を強調するために背景やマーカーを付けることはできるのか？」
と思いついてしまいました。
　
　
ということで今回はその設定を探ってみました。
　

背景に色をつける
文中にマーカーで下線をひく

背景に色をつける

　
今回お世話になったのはこちら。ありがとうございます。
www.ituore.com
　
紹介されている呪文はこちら。
　
.accent-box {
background:#E8E8E8; /* 背景色 */
border-radius:10px; /* 角を丸く */
padding:1.5em; /* 文字周りの余白 */
}
　

背景色を変えたい場合

#E8E8E8の部分を好みのコードに変更します。
　
色コードの検索はこちらでできますよ。

www.peko-step.com
　
html-color-codes.info
　

角の丸さを変えたい場合

border-radius:10px;
の数字を増減させて下さい。

文字上下の色つき部分の幅を変えたい場合

padding:1.5em;
の数字を変更すればOKです。
（単位はpxでも大丈夫。）

　
こちらを利用させてもらうことにしたのですが、何種類か色分けをしたいので、一か八かの行動に出てみます。
　
そして、背景を付けた部分の外側にもスペース（背景色の周りの余白）を取りたいと思います。
　

背景色の周りの余白を作る場合

marginを挿入します。
　
margin:上右下左;
とそれぞれのスペースを記載します。

　
デザインCSS等への設置方法はこちらで確認してください。
　

デザインCSSに入力

　
.accent-boxa{
background:#E3F6CE; /* 背景色 */
border-radius:10px; /* 角を丸く */
padding:10px; /* 文字周りの余白 */
margin:20px 6px 20px 6px; /* 背景色の周りの余白 */
}
　
.accent-boxb{
background:#E3F6CE; /* 背景色 */
border-radius:10px; /* 角を丸く */
padding:10px; /* 文字周りの余白 */
margin:20px 6px 20px 6px; /* 背景色の周りの余白 */
}
　
※項目の後ろにある「/* 背景色 */」などの注意書もコピペで貼って大丈夫ですよ。
　

スマホの記事下等に入力

　
<style type=text/css>
　
.accent-boxa{
background:#E3F6CE; /* 背景色 */
border-radius:10px; /* 角を丸く */
padding:10px; /* 文字周りの余白 */
margin:20px 6px 20px 6px; /* 背景色の周りの余白 */
}
　
.accent-boxb{
background:#E3F6CE; /* 背景色 */
border-radius:10px; /* 角を丸く */
padding:10px; /* 文字周りの余白 */
margin:20px 6px 20px 6px; /* 背景色の周りの余白 */
}
　
</style>
　

文中には

　
divで挟む
　
<div class="accent-boxa">あかさたな</div>
　
<div class="accent-boxb">あかさたな</div>
　
　
spanで挟む
　
<span class="accent-boxa">あかさたな</span>
　
<span class="accent-boxb">あかさたな</span>
　

結果は

　
divで挟む
　

あかさたな

　
spanで挟む
　
あかさたは
　
あかさたな
　
　
できました～！
少なくともアルファベットの個数分のパターンを作れそうです。作りませんけどね(笑)
　

文中にマーカーで下線をひく

　
こちらを参考にさせていただきました。ありがとうございます。
itbenricho.com
　
紹介されている呪文はこちら。
　
.marker_yellow_hoso {
background: linear-gradient(transparent 60%, #ffff66 60%);
}
　

太さを変える

transparent 60%が太さです。
　
なんと！　0%の方が太いのです。
60%減少ということなんですね。

色を変える

#ffff66が色ですので好みの色に変更してください。

最後の60%は謎です。調べているのですが答えに辿りついていません。数字を変えても何も変わらないように見えました。

　
　
私はピンクのマーカーにしてみました。
　

デザインCSSに入力

　
.marker_pink{
background: linear-gradient(transparent 60%, #F6CEEC 60%);
}
　

スマホの記事下に入力

　
<style type=text/css>
　
.marker_pink{
background: linear-gradient(transparent 60%, #F6CEEC 60%);
}
　
</style>
　

文中には

　
<span class="marker_pink">あかさたなはまやらわ</span>
　

結果は

　
あかさたなはまやらわ
　
　
これもできました～！
　
という事で、文中にずらずらと「paddingがいくつで～」と書かずに済むようになりました。
　
　
　
CSSって偉大！
　
そして、色々紹介してくださっている皆様に感謝です。
　
以上、これで当分は設定はいじりません(笑)
　
　
　