ブログを始めてしばらくすると、自身のブログのデザインをあれこれイジってみたいと思ってきますよね。
いろんな方のブログを読んでいると、自身のブログでも取り入れてみたいなぁと思うデザインを沢山目にします。
そんな僕も、ブログ運営されている先人の知恵をお借りして(公開しているデザインのコードをコピーさせてもらって)少しでも見栄えが良くなるように、ちょとずつアップグレードしています(少しずつですが(汗))
そこで、今回はいろんなブロガーさんがされている
”蛍光ペン風マーカー”
を使えるようにする方法をご紹介したいと思います。
蛍光ペン風マーカーとは
ノートに文章を書く時に、蛍光ペンを使って文字を強調させることってありますよね。
学生の時は無駄に蛍光ペンを沢山使って、逆に分かりづらくなると言う…。
そんなことがありましたが、それをブログ内で書く文字にも同じようにしてみようというわけです。
- ここが重要です! (マーカーなし)
- ここが重要です! (マーカーあり)
こう見ると一目瞭然ですよね。
このマーカーの描写は、かなり前からやってみたかったのですが、勝手に難しそうと思い込んでやっていませんでした。
ブログを始めて数ヶ月経過し、少しブログに慣れて余裕が出てきたのでやってみました。
はてなブログで蛍光ペン風マーカーを設定する方法
ステップ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
はてなブログの管理画面に行き、「デザイン」をクリックします。
ステップ3
次に「スパナマーク」をクリックします。
ステップ4
1番下にある「{}デザインCSS」をクリックしたら、その欄の1番下に先ほどコピーしたコードを貼ります。ここでは89~99にあるコードが今回のコードです。
ちなみに、86~88に書いてあるのは89~99に書いてあるコードが何か忘れないようにするために書いてある但し書きです。
コードを貼り付けたら忘れないよう変更を保存して終了です。これで文章の中で蛍光ペン風マーカーが使えるようになりました。
ちなみに、95に書いてある「#f5deb3」は今回使用しているマーカーの色になります。これを変更することでいろんな色を表現することができます。
カラーコードはこちら⤵️
スポンサーリンク
蛍光ペン風マーカーの使い方
はてなブログでいつも通りに文章を書きます。
文章を書いた後に、蛍光ペン風マーカーを使用したい箇所を選択します。
そして、左上にある斜体表示にする「i」をクリックすると完成です。
見たまま編集では斜め表示になっていますが、プレビュー画面ではちゃんとマーカーが表示されていますので安心してください。
蛍光ペン風マーカーの注意点
この方法を使うと斜体が使えなくなるのが難点です。
しかし、僕の経験上では文章を書く時に斜体は使用したことがないので問題はないと思います。どうしても斜体が使用したい場合は、他の方法で試してみてください。
さいごに
思った以上に簡単なので、是非みなさんもやってみてはどうでしょうか。
今後も、僕でもできるレベルのデザインを見つけたら、自身のブログに積極的に取り入れてみようと思います。
また、蛍光ペン風マーカーだけでなく、はてなブログを運営していくうえで収益化を考えている人であれば、無料版のはてなブログではなく有料版のはてなブログProにすることをおすすめします。
違いやメリット・デメリット等を書いた記事があるので、ブログで収益化を考えている人は参考にしてみてください。
【参考記事】
【はてなブログ】無料版と有料版(Pro)の違いとは|ブログ初心者ははてなブログで - ちゃちゃの備忘録的なブログ