元アベンジャーのCOJ

読者です 読者をやめる 読者になる 読者になる

元アベンジャーのCOJ

チョコとポテチとコーラが好き。

【はてなブログ】続きを読むボタンが分かりづらかったのでオシャレにしてみた

続きを読むボタン

先日、トップ画面で表示される記事の数を5つにし、『続きを読む』ボタンを導入しました。

 

投稿する記事内に『続きを読む』を仕込むことを含めて、初めての経験でしたが、問題なく動作しているようです。

 

少しだけ気になる

 

ただ、ちょっと気になることがありまして。

以下が先日までの『続きを読む』ボタンなのですが。

 

f:id:motoavenger:20160122195738j:plain

 

どうです?

上の画像内のボタンだと、上手く背景に溶け込んじゃってますね?

 

 

敵地に忍び込む伊賀者とかならこれで問題ないのでしょうが、ボタンという役割を果たすためには、もっと自己主張してもらわないと困るわけです。

 

そこで、今回はボタンのデザインを変更することにしました。

shun (id:shun_prog0929)さんの、以下の記事を参考にしています。

 

www.ituore.com

 

参考というか、実際はコードを丸ごとコピーさせていただきましたがw

 

簡単に出来ました!

 

記事内にある気に入ったボタンを選び、その下にあるコードを全文コピー。

 

その後、はてなブログのデザイン内にある【デザインCSS】にコードをそのままペーストします。

 

すると、以下のような感じになりました。

 

f:id:motoavenger:20160122202557j:plain

 

おおー!

これは分かりやすいですね!

※後日、黒系統のボタンに変更しました。

 

 

以前と比べて随分とオシャレになり、視認性も上がったのではないかと思います。

 

shunさんにはこの場を借りてお礼を申し上げます。

 

ありがとうございました!