文章に蛍光ペンのような下線を引きたいと思っている方に、コピペ一発で設定できる方法をご紹介します。
そもそも蛍光ペンのような下線って？
こういうのです！
私がやりたいのは
1ボタンだけでマーカーが引ける！
複数色使える！
というのがやりたい！
そこで見つけたのがこの記事です。
ただ、この設定であるといちいちコードを設定しないといけない為
結構めんどくさい。また、複数色使えない…
ボタン1つで蛍光ペンを引きたいし、複数色引きたい！
私としては、１ボタンを押すだけで、蛍光ペンを引きたいし、1色だけでは嫌なのです。
そこで完成をさせたのが下記になります。
これで何ができるかと言うと
太字ボタンを押せば、ピンク色に蛍光ペンが引かれ、斜体ボタンを押すと、イエローの蛍光ペンで引くことができるようになります。
※はてなブログの編集モードによってコードが変わりますのでご注意ください。
コピペ一発CSS追記
それぞれあなたの使っている編集モードに沿って導入してください。
導入する場所は
「ダッシュボード」→「デザイン」→「カスタマイズ」→「デザイン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>
はてな記法、マークダウン記法の方
/* 蛍光ペンでラインマーカーを引く（ピンク） */
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)（イエロー）
色を確認する場合は下記のページで確認をお願いいたします。
カスタマイズの概要とコードが違う理由
それぞれ編集モードによって違う部分があるのでご説明します。
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> → 斜体
まとめ
ということでいつもより多めにマーカーを引かせていただきました！笑
わかりやすいしね。
いかがでしたでしょうか？是非ご利用ください。
ご質問があれば、コメント欄にてお受けいたします。
ありがとうございます。