【はてなブログ】「続きを読む」をよく見る感じに。


実はこのブログもちょくちょくカスタマイズしてます。自分が見やすいようにやっているのですが、まだまだたくさんやりたいことありますね。今回は「続きを読む」についてカスタマイズしてみました。デフォルトの続きを読むリンクは単なる文字リンクなのでわかりにくいし、味気ないのでね。

参考記事はこちら
blog.sumaho-design.com



こんな感じ↓になります。続きを読めば設定コードが!



以下のコードを「デザインcss」の中に貼り付けます。

/*続きを読むボタン*/
a.entry-see-more {
    word-wrap:break-word;
    border: solid 1px darkcyan;
    padding: 5px 20px;
    color:darkcyan;
    background:white;
    border-radius: 5px; 
}

/*続きを読むボタンのマウスオーバー*/
a.entry-see-more:hover {
    word-wrap:break-word;
    border: solid 1px darkcyan;
    padding: 5px 20px;
    color:white;
    background:darkcyan;
    border-radius: 5px; 
}


通常時
f:id:demacassette:20160121000128p:plain
マウスオーバー時
f:id:demacassette:20160121000138p:plain


どうすかね。ターコイズ(ダークシアン)という色が個人的に好きなので基調色にしてみてます。

他にも色はたくさんあり、コード内でどう入れていいかわからない時にはこちらを参照
www.tagindex.com


またカスタマイズしたらメモします。


はてなブログカスタマイズ一覧