こんにちは、おとです！
最近、はてなブログを書くのにやっと慣れてきました。
アクセス数はまだ１日平均20ぐらいですけどね…
ですが、デザインをカスタマイズして
見やすいページにしたら、
アクセス数が増えるという情報を聞きました！！
なので、デザインを少しずつ加えていきたいと思います。
やはり文章や写真だけだと見づらいし、
するとサイトを離脱してしまう方も多くなります。
なので徐々にカスタマイズしていきます。
今回は、この黄色いマーカーを簡単につけれるようにします。
今まで文を強調したい時は、
『B』や『アンダーライン』『赤文字』
を紹介してましたが、
なんか物足りない感じがしますよね？
独自にわたしが色々調べた結果、
この方法が一番簡単で分かりやすかったので、
ぜひ参考にしてみてください！！
１、黄色いマーカーを使うための設定をする
❶編集サイドバーの⊞を押して『定型文貼り付け』をオンにする。
❷『定型文を作成する』をクリックする。
すると、この画面が出てきます。
ここに、
<span style="background: linear-gradient(transparent 60%, #ffff00 60%);">文章を入れる</span>
HTMLを入力する。
そして、『保存する』をクリックする。
すると編集サイドバーに追加されます。
２、実際に使ってみよう！
❶マーカーをつけたい場所をドラッグし、コピーする。
❷『定型文貼り付け』の『黄色いマーカー』をクリックし、
下の『選択した定型文を貼り付け』をクリックする。
すると「文章を入れる」と表示されます。
❸HTML編集のページを開いて、
「文章を入れる」を消し、
先ほどコピーしたものを貼り付けする。
まとめ
HTMLでは、
transparentはマーカーの太さを意味します。
数値が高ければ細いマーカー（８０％）、
数値が低ければ太いマーカー（２０％）
になります。
そのあとの『#ffff00 』はカラーコードになるので、こちらを参考にしましょう。⬇️
少しは見栄えよくなったかな？
もうひとつ違う方法も
もうひとつ違う方法で黄色いマーカーをつける方法もあります。
わたしはあまり斜体文字は使わないので、斜体文字の『i』に設定する方法も紹介します。
❶『デザイン』を開く。
❷スパナマークを選び、『デザインCSS』を押す。
❸『デザインCSS』内に
/*斜体文字の黄色マーカー*/
article em{
font-style: normal;
text-decoration: none;
background: linear-gradient(transparent 60%, #fff352 40%);
を入力。
❹『変更を保存する』を押す。
これで黄色いマーカーを引きたい場所をドラックし、『i』を押せば線が引かれます。
※『編集見たまま』では表示されませんが、『プレビュー』では表示されます。
まとめ
以上で『B』や『i』を押すだけでカラーコードができる設定を紹介しましたが、
それだと太文字や斜字はどうなるの？？
と考えた結果、あまり使わない斜字の『i』にしました。
ぜひ参考にしてみてください！
次回は、角丸の枠
角丸の枠で囲みます。
の設定の仕方をまとめたいと思います。
最後まで読んでくれてありがとうございました！
