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

気ままに殴り書き

日々感じたことを、気ままに書き記す予定でしたが。。。

はてなブログ、”続きを読む”のデザインを変更してみた

はてなブログ

はてなブログの開設当初から、変更したいと思っていたデザインの1つとして「続きを読む」がありました。

初期設定では画像①の赤丸のとおり、あるのかないのか、わからないほど存在が薄いです。ところが、ここはさすがに「はてなブログ」の良いところ。「はてなブログ、続きを読む」で検索すると、諸先輩方のカスタマイズが多数ヒットします。

そこで、私も以下のブログを参考に、いやいや参考どころではなく、コピペをベースに背景色を変更し、四隅の角度を多少修正したのみですが、デザインを変更してみました。

私がここで、そのコードを記載するのも憚られるので、デザイン変更の方法は以下のリンク先を参照くださいませ。私はその結果のみ掲載します。

 

スポンサーリンク

 

 

”続きを読む”、デザイン変更のBefore、After

Afterはあえてご紹介しなくとも、当ブログのパソコンサイトを参照の方は一目瞭然ですが、ご参考までに記載します。なお、各画像はクリックで拡大表示となります。

 

▼画像① Before。赤丸部分のとおり、あるのかないのか わからないような、控え目な「続きを読む」です。

f:id:kminebg1110:20151012193708p:plain

 

▼Afterです。昨日まではタイトルの青に近い(カテゴリー欄にある水色)にしていましたが、「次のページ」の赤系と同色にしました。少しインパクト強すぎかもですが、これぐらいの強烈アピールが良いのでは、と思います。いづれ近いうちに変更するかもしれませんが。。。

f:id:kminebg1110:20151012195314p:plain

 

▼マウスオーバーの透明度があるものになります。

f:id:kminebg1110:20151012195702p:plain

▼ここで1つ問題が。文字色を白に指定しているにもかからわらず、「既に続きを読んでいた場合」だと思いますが、文字色が白になりません。インストールしたテーマを弄らないと変更が効かないものだと思います。

「こちらを修正してから記事にしよう」と思っていたものの、私の知識のなさのあまり修正できずにいます。

f:id:kminebg1110:20151012195814p:plain

 「はてなブログ」はこのようなカスタマイズネタが多数あり、デザインを考えてみたり、諸先輩方のブログを拝見するのも、新しい発見があり楽しいですね。