強調表示の太字に蛍光ペン風のラインをつける方法【はてなブログ カスタマイズ】

f:id:b204638:20180406234435j:plain

前回に引き続き、週末に行った「はてなブログ」のカスタマイズその2です。

こちらの記事を参考に、強調表示の太字に蛍光ペン風のラインをつけてみました。

はてなブログの強調表示を蛍光ペン風にマーキングする – むじん島

強調表示の太字に蛍光ペン風のラインをつける方法

(1)HTMLタグを追記する

<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(252,252,84,0.8) 60%) !important;
}
</style>

上記のタグを以下に追加します。

「管理画面」>「設定」>「詳細設定」の中にある「headに要素を追加」の入力スペースに追記

(2)マーカーの色を変更する

(1)のHTMLタグの中の「252,252,84,0」の部分を変更することで、マーカーの色を変更できるようです。

黄色   「252,252,84,0

緑色   「102,255,204,1

青色   「102,204,255,1

ピンク色 「255,153,255,1

(3)マーカーの太さ・濃さを変更する

(1)のHTMLタグの中の「60」の部分の値を変更することで、マーカーの太さや透明度を変更できるようです。

今回、私は細めのアンダーライン風に設定してみました。

前の「60」が”太さ”で、数値が大きいほど細くなります。

後の「60」が”濃さ”で、数値が大きいほど薄くなります。


今回のカスタマイズは「はてなブログPro」にアップグレードしなくても導入できました。導入したら、過去の記事の太字にもすべて蛍光マーカーのラインが引かれ、少し華やかになった気がします。

はてなブログで「強調表示の太字に蛍光ペン風のラインをつける方法」の紹介は以上です。

コメント

  1. ryomiyunz より:

    突然失礼致します!僕もBrooklynを使っています!蛍光のカスタマイズしているのですが、一切反映されないのですが、Brooklynでやる際には何か特別な必要なことがありますか?よろしければ、ご回答お願い致します!

  2. b204638 より:

    id:ryomiyunzさん、コメントありがとうございます。id:ryomiyunzさんの記事を見るとページ上の「人気記事セレクション」のタイトル文字部分にちゃんと反映されていました。
    記事の中の文章には<strong>タグが使われていないので、反映されないのだと思います。
    強調したい文字をタグで挟めば反映されると思います。
    記事編集画面の「B」(太字)のボタンで太字にすればタグがついて反映されると思います。
    ※<strong>タグの括弧は⇒ <>

  3. ryomiyunz より:

    id:b204638 早速のお返事ありがとうございます!なるほど、いままで、ただ太字ボタンを押せばよいと思っていたのですが、自分でをつけるということだったんですね!大変参考になりました。本当にありがとうございます!!!!!

  4. ryomiyunz より:

    自分で(Strong)をつけるということ*
    の間違いです、すみません!

  5. b204638 より:

    id:ryomiyunzさん、普通は「ただ太字ボタンを押せば」タグがつくはずです。もしかしたら「太字」ボタンが上手く機能していないかも。

  6. ryomiyunz より:

    id:b204638 なるほど…それに関しては何がおかしいかわからないので、手打ちで今後は頑張ってみます…

  7. kaakiko より:

    こんにちは。b204638さん、教えていただいたHTMLタグを指定箇所に埋め込んだら、ちゃんと太文字に反映されました!私はピンク色にしています。分かりやすい説明をありがとうございました!

  8. b204638 より:

    id:kaakikoさん、コメントありがとうございます。自分の記事にマーカー引くのってけっこう楽しい気分になりますよね。上手く導入できて私もうれしいです。

タイトルとURLをコピーしました