Web Tips!!!

普段は、SEO対策でWebマーケティングをしている人が、睡眠、引越し、不動産、ミステリーについて記事をまとめたサイト

はてなブログで2色の蛍光ペンで文字を強調する方法!【コピペ一発】

f:id:amber_owl:20170927154706j:plain

文章に蛍光ペンのような下線を引きたいと思っている方に、コピペ一発で設定できる方法をご紹介します。

 

 

そもそも蛍光ペンのような下線って?

こういうのです!

 

私がやりたいのは
1ボタンだけでマーカーが引ける!
複数色使える!

というのがやりたい!

そこで見つけたのがこの記事です。

 

vdeep.net

 

ただ、この設定であるといちいちコードを設定しないといけない為
結構めんどくさい。また、複数色使えない…

 

ボタン1つで蛍光ペンを引きたいし、複数色引きたい!

私としては、1ボタンを押すだけで、蛍光ペンを引きたいし、1色だけでは嫌なのです。


そこで完成をさせたのが下記になります。

これで何ができるかと言うと
太字ボタンを押せば、ピンク色に蛍光ペンが引かれ、斜体ボタンを押すと、イエローの蛍光ペンで引くことができるようになります。

f:id:amber_owl:20170927162031p:plain

※はてなブログの編集モードによってコードが変わりますのでご注意ください。 

 

コピペ一発CSS追記

 

それぞれあなたの使っている編集モードに沿って導入してください。
導入する場所は
「ダッシュボード」→「デザイン」→「カスタマイズ」→「デザインCSS」に下記のコードを入れてください。

見たまま編集の方

 

<style type="text/css">
/* 蛍光ペンでラインマーカーを引く(ピンク) */
article strong{
margin:0 0.1em;
padding:0.1em 0.2em;
background:#fcfc60 !important;
background:linear-gradient(to bottom, transparent 60%, rgba(255,153,255,1) 60%) !important;
}
/* bタグは太字にする */
article b{
font-weight:bold !important;
}

/* 蛍光ペンでラインマーカーを引く(イエロー) */
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%, rgba(252,252,84,0.8) 60%) !important;
}
/* iタグは斜体*/
article i{
font-style:oblique !important;
}

</style>

 

はてな記法、マークダウン記法の方

 

<style type="text/css">
/* 蛍光ペンでラインマーカーを引く(ピンク) */
article b{
margin:0 0.1em;
padding:0.1em 0.2em;
background:#fcfc60 !important;
background:linear-gradient(to bottom, transparent 60%, rgba(255,153,255,1) 60%) !important;
}
/* strongタグは太字にする */
article strong{
font-weight:bold !important;
}

/* 蛍光ペンでラインマーカーを引く(イエロー) */
article i{
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%, rgba(252,252,84,0.8) 60%) !important;
}
/* emタグは斜体*/
article em{
font-style:oblique !important;
}

</style>

 

※色を変更するのであれば、それぞれ下記の部分を変更してください。
RGBA形式です。
rgba(255,153,255,1)(ピンク)
rgba(252,252,84,0.8)(イエロー)

色を確認する場合は下記のページで確認をお願いいたします。

16進数・RGB・RGBAカラーコード変換ツール

 

カスタマイズの概要とコードが違う理由

 

それぞれ編集モードによって違う部分があるのでご説明します。

htmlにて太字は<strong>と<b>があります。
また、斜体には<em>と<i>があります。
編集モードで違う理由を下記にてご説明します。

見たまま記法の場合

 

はてなブログ見たまま編集の場合は太字ボタン「B」は<strong>に対応していて、斜体ボタンは<em>に対応しています。
※太字、斜体は利用が出来なくなります。念のためコードでは<b>では太字になるよう、<i>では斜体になるよう記載はしています。

 つまり、下記のような設定になります。
<strong>太字</strong> → 太字

<em>斜体</em> → 斜体

はてな記法マークダウン記法

 

はてな記法マークダウン記法の方は上記と逆になります。
太字ボタン「B」は<b>に対応していて、斜体ボタンは<i>に対応しています。
※設定後に、もともとの太字、斜体は利用できます。

太字を使いたいときには、<strong>文章</strong>を使ってください。
また、斜体を使いたいときには、<i>斜体</i>をつかってください。

つまり、下記のような設定になります。
<strong>太字</strong> → 太字
<b>太字</b> → 太字
<em>斜体</em> → 斜体
<i>斜体</i> → 斜体

 

 

まとめ

ということでいつもより多めにマーカーを引かせていただきました!笑

わかりやすいしね。

いかがでしたでしょうか?是非ご利用ください。

ご質問があれば、コメント欄にてお受けいたします。

ありがとうございます。