tkd放浪記

tkd放浪記

アニメ好き三十路ドラマーによる、趣味だけで生きるためのブログ

【はてなブログ】マーカーライン装飾の方法を調べて実践してみた!

スポンサーリンク

f:id:tkd_drum:20180424055609j:plain

 

こんにちは、tkd(@tkd_drum)です!

 

ブログ運営初めてもうじき4ヶ月が経ちます。

記事書くのも慣れてくると、「もっと記事の見た目を良くしたい!」と感じることがあります。

 

よくはてなブログ内の先輩方々の記事を見てると、

こういったマーカーラインが引かれているのをよく見かけます。

 

これは自分も実装してみたい!と思い、導入した見たら意外と簡単に設定できてしまいましたw

 

そこで今回は、はてなブログでマーカーライン装飾をする方法を解説していきます!

 

はてなブログでマーカーライン装飾をする方法

やり方に関しては、こちらのそらさんの記事を参考にさせてもらいました!

kumoaozora.hatenablog.com

 

そらさんの記事に書いてある通り、CSSにコードを設定するだけで設定完了です!

 

一応かんたんにまとめると、

  1. はてなブログの『ダッシュボード』を開く
  2. 『デザイン』をクリック
  3. 『カスタマイズ(スパナのマーク)』をクリック
  4. デザインCSSを開く
  5. コードを入力して完了!

 

デザインCSSには、下記のコードを張り付けます。

.marker_yellow {
background: linear-gradient(transparent 60%, #ffff66 60%);
}

 

そして、ブログ内で使うときは、HTML編集にて

 <span class="marker_yellow">ここに入力したい文字を入れる</span>

こんな感じで入力していくだけ!

 

マーカーライン装飾によって、ブログがちょっと楽しくなるw

何事もまず見た目が重要!

ちょっとカッコよく記事書けるようになるだけで、モチベーションが違いますからね!

マーカーライン装飾、是非実践してみてねw

 

あなたへのオススメ記事!

tkd-drum.hatenablog.com