雪ん子’s report

スマホ1つでブログは書けるか⁉ スマホの使い方(初級編)と日々のことをお伝えします。

見出し以外の強調方法



ここまで画像の余白や、見出しなどを変更してきました。

そこまでできると欲が出て、
「文の中の文字を強調するために背景やマーカーを付けることはできるのか?」
と思いついてしまいました。


ということで今回はその設定を探ってみました。


目次

背景に色をつける

今回お世話になったのはこちら。ありがとうございます。
www.ituore.com

呪文はこちら。

.accent-box {
background:#E8E8E8;
border-radius:10px;
padding:1.5em;
}


#E8E8E8の部分が色ですので、好みの色コードに変更してくださいね。

色コードの検索はこちらを使わせていただきました。
www.peko-step.com
html-color-codes.info

文字上下の色つき部分の幅を変えたい方は
padding:1.5em;
の数字を変更すればOKです。

こちらを利用させてもらうことにしたのですが、何種類か色分けをしたいので、一か八かの行動に出てみます。

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

デザインCSSに入力

.accent-boxa{
background:#E3F6CE;
border-radius:10px;
padding:1.5em;
}

.accent-boxb{
background:#E8E8E8;
border-radius:10px;
padding:1.5em;
}

スマホの記事下等に入力

<style type=text/css>

.accent-boxa{
background:#E3F6CE;
border-radius:10px;
padding:1.5em;
}

.accent-boxb{
background:#EEEEEE;
border-radius:10px;
padding:1.5em;
}

</style>

文中には

divで挟む

<div class="accent-boxa">あかさたな</div>

<div class="accent-boxb">あかさたな</div>


spanで挟む

<span class="accent-boxa">あかさたな</span>

<span class="accent-boxb">あかさたな</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って偉大!

そして、色々紹介してくださっている皆様に感謝です。


以上、これで当分は設定はいじりません(笑)



追記)どうやらCSSを設置した場所を、「外部スタイルシート」と呼ぶようです。本文から外部スタイルシートにアクセスして設定が反映されるようですね。またまた一つ賢くなりました(笑)



最後まで読んでいただき、ありがとうございます!!!

読者登録&フォローしていただけると励みになります。
お気軽にどうぞ♪