はてなブログ初心者向け！蛍光ペン風ラインを引く方法【カスタマイズ】

ブログでよく見かける蛍光ペンを使ったみたいなラインってどうやったら引けるのかな？カスタマイズ詳しくわからないけど簡単に出来るのかな？

こんな疑問にお答えします。

本記事の内容

•はてなブログで「蛍光ペン風ライン」を引く方法

•カスタマイズ実装

※ブログカスタマイズ初心者の方にも分かりやすく簡単に実装できます。

はてなブログで「蛍光ペン風ライン」を引く方法

いろいろなブログでお見かけする

この蛍光ペン風のライン。

こういうやつです。

蛍光マーカーとでもいいましょうか。

ブログを書いていくとこういうのを引いて

ブログを華やかにしたい！！って

思ってきますよねー！！

そうやって調べていくとふむふむ…。

どうやらCSSコードを記述して反映させたい

部分にHTMLでクラス指定してあげる方法が

一般的なのがわかりました。

しかし！

これいちいち指定するの…

めんどくさい…。

なんかもっと手軽にライン引きたいし、

自分はそもそもシンプルなサイトを構成してい

てそんなにたくさんの装飾をしたいわけでは

ない。

1色か2色の蛍光マーカーでいい！

と思って調べいたら、こんなにいい記事を

書いてくださっているサイトを発見いたしました。

www.sanhacchi.net

38_さんはちさん、ありがとうございます！

これは「斜体」ボタンを押すとその部分が

太文字＋蛍光ペン(イエロー)

になるという素晴らしく簡単な方法です。

これや〜！！俺の探して求めてたやつはー！！

と飛び跳ねて喜びました(笑)

まず簡単でいいのと

個人的には斜体をあんまり使わないこと。

使わないので眠らせておくよかは

こういうので使用してあげることは斜体を

喜ばせることにもつながる！

{…すいません、何言ってるかよくわかんなくなってきました(-_-;)  ｝

で、もう一つ個人的に使っていないのが

アンダーラインなので、このアンダーラインにも蛍光マーカーを引けるようにコードを

追加して多少アレンジさせていただきました！

カスタマイズ実装

私が使用してるコードはこちら↓

<style type="text/css">

/* 斜体表示を蛍光ペン (イエロー) 風に */

article em{

font-weight:bold;

font-style: normal;

margin:0 0.1em;

padding:0.1em 0.2em;

background:#fcfc60 !important;

background:linear-gradient(to bottom, transparent 60%, #ffff00 60%) !important;

}

/* iタグは斜体*/

article i{

font-style:oblique !important;

}

/* アンダーライン表示を蛍光ペン (シルバー) 風に */

article u{

font-weight:bold;

font-style: none;

margin:0 0.1em;

padding:0.1em 0.2em;

background:#fcfc60 !important;

background:linear-gradient(to bottom, transparent 60%, #c0c0c0 60%) !important;

}

</style> 

このコードをはてなブログ設定→「詳細設定」→「headに要素を追加」の枠の中に

ぶっ込んでください！

最後に変更ボタンを押すのを忘れずに。

※カスタマイズの基本

コードを貼り付ける前にバックアップを必ずとってください！

これは基本です。

やったあとに万が一仕様がめちゃめちゃになってしまった！ってことに

ならないように注意してください。

で見たまま編集モードで文章を書いて、

斜体でまるっとくくると

こんな感じ

文字が華やかになりますね〜！

アンダーラインでくくると

こんな感じ

シルバーでcoolな印象になりました！

色とマーカーの太さ

色は#ffff00の部分で自由に変更できます。

形式は

RGBA形式「rgba(255,165,0,1)」でも

16進数形式「#ffa500 」

でもどっちでもオーケー。

マーカーの太さは色の前のコード

transparent 60%

のパーセントの部分を変えると変更できます。

このパーセントの部分は

数値が0%の時が線の太さが一番太いです。

なので、90%とかにすると細い線になりますね。ここ間違わないでください。

補足

アンダーライン【下線】は＜u＞タグで完全に書き換わってしまい、使用できなくなりますので導入される際には注意してください。

まとめ

蛍光ペン風のラインを引くカスタマイズ法

いかがしでしたか？

すっごく簡単に設定できて、しかもマーカーを

引きたい時はそれをくくって当該ボタンを押す

だけといったシンプルかつ素晴らしい方法なの

で自分みたいに斜体やアンダーラインはあんま

り使ってないよって方は是非参考にしてみて

ください！

今回は以上になります。