数日前から適用していますが、「もっと見る」リンクのデザインを変更してみました。
「もっと見る」リンクは、サイドバーの最新記事に表示されているものです。
「もっと見る」リンクがだいぶ簡素だなと思い、変更してみました。
ちょっとした変更なのですが、良い気分転換になりました。
それでは本題へ。
変更内容（画像）
まずは変更前後の画像を貼ります。
変更前
変更後
変更前はシンプルなリンクでした。
変更後はボタンっぽいデザインにしました。
クリックしたくなる雰囲気を意識してみました。
「もっと見る」リンクの表示設定
「もっと見る」リンクはデフォルトだと非表示になっているようです（たぶん）。
詳しい手順は割愛しますが、以下で表示/非表示が設定できます。
適用したCSS
/***サイドバー：最新記事（もっと見るリンク）***/ .recent-entries-see-more-link { display: block; background-color: #FAFAFF; border-bottom: 3px solid #CCC; text-align: center; padding: 5px; } .recent-entries-see-more-link:hover { text-decoration: none !important; } .recent-entries-see-more-link:after { font-family: FontAwesome; content: "\f078"; } /***サイドバー：最新記事（もっと見るリンク）ここまで***/
「もっと見る」リンクを表示設定にしたうえで上記のCSSを適用すると、「もっと見る」リンクのデザインが変更されます。
アイコンに関して
アイコンはFont Awesomeのものを使用しています。
Font Awesomeを使えるようにするには少し準備が必要です。
はてなブログが用意しているアイコンに差し替える場合、以下の部分を変更すればいけるはずです。
.recent-entries-see-more-link:after { font-family: FontAwesome; content: "\f078"; }
↓↓↓
.recent-entries-see-more-link:after { font-family: "blogicon"; content: "\f008"; }
Font Awesomeのアイコンを使いたい場合は、少し準備が必要です。
以下の記事を参考にして頂ければと思います。
デザインの適用手順
一応、適用手順を載せておきます。
注意事項
はてなブログで適用したものです。
はてなブログ以外では試してないので、うまく動かない可能性があります。
今使っているSilenceというデザインテーマに追加でCSS適用した形となります。
他のデザインテーマを使っている場合や、他にもCSSやJSを埋め込んでいる場合はうまく動かない可能性があります。
もし今回記載のCSSを適用しようとしている場合、その辺りご了承ください。
おわりに
ということで『最新記事（サイドバー）にある「もっと見る」リンクのデザインを変更』に関してアレコレ書いてみました。
今回はかなりピンポイントな変更でした。
そもそものことを言うと、ヘッダ部分の最新記事がリンクになっていることを最初は知りませんでした。
はてなブログを始めて、しばらく経ってから気付きました。
そんな経緯もあるので、最新記事ページへの導線となる「もっと見る」リンクを目立たせることには多少の意味があるかなと思っています。
またなにかブログカスタマイズしたら記事にします。
関連記事
HTML・CSSに関連する記事は他にも書いています。
気になる記事があればぜひ。
