はてなブログで2色の蛍光ペンで文字を強調する方法！【コピペ一発】
文章に蛍光ペンのような下線を引きたいと思っている方に、コピペ一発で設定できる方法をご紹介します。
そもそも蛍光ペンのような下線って？
こういうのです！
私がやりたいのは
1ボタンだけでマーカーが引ける！
複数色使える！
というのがやりたい！
そこで見つけたのがこの記事です。
ただ、この設定であるといちいちコードを設定しないといけない為 結構めんどくさい。また、複数色使えない…
目次
ボタン1つで蛍光ペンを引きたいし、複数色引きたい！
私としては、１ボタンを押すだけで、蛍光ペンを引きたいし、1色だけでは嫌なのです。
そこで完成をさせたのが下記になります。
これで何ができるかと言うと 太字ボタンを押せば、ピンク色に蛍光ペンが引かれ、斜体ボタンを押すと、イエローの蛍光ペンで引くことができるようになります。
※はてなブログの編集モードによってコードが変わりますのでご注意ください。
コピペ一発CSS追記
それぞれあなたの使っている編集モードに沿って導入してください。
導入する場所は
「ダッシュボード」→「デザイン」→「カスタマイズ」→「デザイン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%, rgba(252,252,84,0.8) 60%) !important; } /* iタグは斜体*/ article i{ font-style:oblique !important; }
</style>
はてな記法、マークダウン記法の方
/* 蛍光ペンでラインマーカーを引く（イエロー） */ 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> → 斜体
まとめ
ということでいつもより多めにマーカーを引かせていただきました！笑
わかりやすいしね。
いかがでしたでしょうか？是非ご利用ください。
ご質問があれば、コメント欄にてお受けいたします。
ありがとうございます。
