雪ん子’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を設置した場所を、「外部スタイルシート」と呼ぶようです。本文から外部スタイルシートにアクセスして設定が反映されるようですね。またまた一つ賢くなりました(笑)