今日もボチボチやっていこう

【はてなブログ】蛍光ペン風マーカーの設定方法(カスタマイズ)

スポンサーリンク

みなさん、こんにちは。

 

ブログを始めてしばらくすると、自身のブログのデザインをあれこれイジってみたいと思ってきますよね。

 

いろんな方のブログを読んでいると、自身のブログでも取り入れてみたいなぁと思うデザインを沢山目にします。

 

そんな僕も、ブログ運営されている先人の知恵をお借りして(公開しているデザインのコードをコピーさせてもらって)少しでも見栄えが良くなるように、ちょとずつアップグレードしています(少しずつですが(汗))

 

そこで、今回はいろんなブロガーさんがされている

 

”蛍光ペン風マーカー”

 

を使えるようにする方法をご紹介したいと思います。

スポンサーリンク

 

 

蛍光ペン風マーカーとは

ノートに文章を書く時に、蛍光ペンを使って文字を強調させることってありますよね。

 

学生の時は無駄に蛍光ペンを沢山使って、逆に分かりづらくなると言う…。

 

そんなことがありましたが、それをブログ内で書く文字にも同じようにしてみようというわけです。 

 

  • ここが重要です! (マーカーなし)
  • ここが重要です! (マーカーあり)

 

こう見ると一目瞭然ですよね。

このマーカーの描写は、かなり前からやってみたかったのですが、勝手に難しそうと思い込んでやっていませんでした。

 

ブログを始めて数ヶ月経過し、少しブログに慣れて余裕が出てきたのでやってみました。

 

いろいろ調べて、説明が分かりやすいブログにたどり着き、そこに書かれているコードをコピーさせてもらうと簡単にできました。今回、その参考にさせてもらったブログを紹介したかったのですが、何とそのブログ名を忘れてしまいました!

 

参考にさせてもらったブロガーさん、紹介も出来ずにすいません。思い出し次第必ずURLを貼っておきます。

 

f:id:chacha-cat:20210602181913j:plain

設定方法

ステップ1

設定方法は簡単で、以下のコードをコピーします。

 

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%, #f5deb3 60%) !important;

}

article i{

font-style:oblique !important;

}

 

ステップ2

はてなブログの管理画面に行き、デザインをクリックします。

f:id:chacha-cat:20210602161958p:plain

 

ステップ3

次に、スパナマークをクリックします。

f:id:chacha-cat:20210602162943p:plain

 

ステップ4

1番下にある{}デザインCSSをクリックしたら、その欄の1番下に先ほどコピーしたコードを貼ります。ここでは89~99にあるコードが今回のコードです。

 

ちなみに、86~88に書いてあるのは89~99に書いてあるコードが何か忘れないようにするために書いてある但し書きです。

 

f:id:chacha-cat:20210602163950p:plain

 

コードを貼り付けたら忘れないよう変更を保存して終了です。これで文章の中で蛍光ペン風マーカーが使えるようになりました。

 

ちなみに、95に書いてある「#f5deb3」は今回使用しているマーカーの色になります。これを変更することでいろんな色を表現することができます。

 

カラーコードはこちら⤵️

www.colordic.org

スポンサーリンク

  

 

蛍光ペン風マーカーの使い方

はてなブログでいつも通りに文章を書きます。

 

文章を書いた後に、蛍光ペン風マーカーを使用したい箇所を選択します。

f:id:chacha-cat:20210602170730p:plain


そして、左上にある斜体表示にする「i」をクリックすると完成です。

 

見たまま編集では斜め表示になっていますが、プレビュー画面ではちゃんとマーカーが表示されていますので安心してください。

f:id:chacha-cat:20210602171510p:plain

 

 注意点

この方法を使うと斜体が使えなくなるのが難点です。

 

しかし、僕の経験上では文章を書く時に斜体は使用したことがないので問題はないと思います。どうしても斜体が使用したい場合は、他の方法で試してみてください。

 

その他のカスタマイズもどうぞ

chacha-cat.hatenablog.com

 

chacha-cat.hatenablog.com

 

chacha-cat.hatenablog.com

 

さいごに

思った以上に簡単なので、是非みなさんもやってみてはどうでしょうか。

 

今後も、僕でもできるレベルのデザインを見つけたら、自身のブログに積極的に取り入れてみようと思います。

 

それでは。

 

 

最後まで読んでいただきありがとうございます。
よろしければ読者登録よろしくお願いします。

 

にほんブログ村 その他日記ブログ 日々のできごとへ
にほんブログ村