雪ん子’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


  • 角の丸さを変えたい場合

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って偉大!

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


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



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