子育て専業主婦の日常

子育て専業主婦の日常

日常生活で欲しいもの便利だと思ったもの、困った時の対処法を綴る

【はてなブログ無料版】【超初心者】簡単に黄色いマーカーを使えるようにしよう!!

こんにちは、おとです!

 

最近、はてなブログを書くのにやっと慣れてきました。

 

アクセス数はまだ1日平均20ぐらいですけどね…

ですが、デザインをカスタマイズして

 

見やすいページにしたら、

アクセス数が増えるという情報を聞きました!!

 

なので、デザインを少しずつ加えていきたいと思います。

 

やはり文章や写真だけだと見づらいし、

するとサイトを離脱してしまう方も多くなります。

なので徐々にカスタマイズしていきます。

 

今回は、この黄色いマーカーを簡単につけれるようにします。

 

今まで文を強調したい時は、

B』や『アンダーライン』『赤文字』

を紹介してましたが、

 

なんか物足りない感じがしますよね?

 

独自にわたしが色々調べた結果、

この方法が一番簡単で分かりやすかったので、

ぜひ参考にしてみてください!!

お名前.com

 

1、黄色いマーカーを使うための設定をする

 

❶編集サイドバーの⊞を押して『定型文貼り付け』をオンにする。



f:id:jisoku80km19830523:20220426134909j:image

❷『定型文を作成する』をクリックする。


f:id:jisoku80km19830523:20220426134950j:image

 

すると、この画面が出てきます。

ここに、

 

<span style="background: linear-gradient(transparent 60%, #ffff00 60%);">文章を入れる</span>

 

 

 

f:id:jisoku80km19830523:20220426135015j:image

 

HTMLを入力する。

そして、『保存する』をクリックする。

 

f:id:jisoku80km19830523:20220426135049j:image

すると編集サイドバーに追加されます。

 

2、実際に使ってみよう!

❶マーカーをつけたい場所をドラッグし、コピーする。

 

❷『定型文貼り付け』の『黄色いマーカー』をクリックし、

下の『選択した定型文を貼り付け』をクリックする。

 

すると「文章を入れる」と表示されます。

 

HTML編集のページを開いて、

「文章を入れる」を消し、

先ほどコピーしたものを貼り付けする。

 

まとめ

HTMLでは、

transparentはマーカーの太さを意味します。

数値が高ければ細いマーカー(80%)、

数値が低ければ太いマーカー(20%)

になります。

 

そのあとの『#ffff00 』はカラーコードになるので、こちらを参考にしましょう。⬇️

https://www.colordic.org/

少しは見栄えよくなったかな?

 

もうひとつ違う方法も

もうひとつ違う方法で黄色いマーカーをつける方法もあります。

わたしはあまり斜体文字は使わないので、斜体文字の『i』に設定する方法も紹介します。

 

❶『デザイン』を開く。

 

 

スパナマークを選び、『デザインCSS』を押す。

 

 

❸『デザインCSS』内に

 

/*斜体文字の黄色マーカー*/
article em{
    font-style: normal;
    text-decoration: none;
    background: linear-gradient(transparent 60%, #fff352 40%);

 

を入力。

 

❹『変更を保存する』を押す。

 

これで黄色いマーカーを引きたい場所をドラックし、『i』を押せば線が引かれます

『編集見たまま』では表示されませんが、『プレビュー』では表示されます。

 

まとめ

以上で『B』や『i』を押すだけでカラーコードができる設定を紹介しましたが、

それだと太文字や斜字はどうなるの??

 

と考えた結果、あまり使わない斜字の『i』にしました。

 

ぜひ参考にしてみてください!

 

次回は、角丸の枠

 

ここに本文を入力して、
角丸の枠で囲みます。

 

の設定の仕方をまとめたいと思います。

 

最後まで読んでくれてありがとうございました!

 

お名前.com