最新記事・人気記事をクリックさせたくなるようなデザインに変更する方法
今回はずっと探していたサイドバーの記事をオシャレかつクリックしたくなるようなデザインを探していました。
現在私のサイドバーで実践しているようなデザインが今回紹介するものそのものです。
それでは、3つのパターンについて説明していきます。
記事デザイン実践例
今回紹介するのはパソコンのサイドバーのデザイン性を良くするものです。
私のサイトでは以下の画像のように表示されるようになりました。
このデザインでは、マウスカーソルを記事に合わせると、表示されている文字が下にずれるアクションが起きます。
最新記事をオシャレに
今回紹介する方法は全てちろるさん制作のデザインです。
まずは、最新記事をこのようにする方法を紹介したいと思います。
以下のリンクを参考にすれば、すぐに完成させることができます。
注目記事をオシャレに
この注目記事のモジュールはCSSをコピペし、サイドバーにはてな公式の注目記事モジュールを追加すれば完成です。
結局は、CSSで注目記事のデザインを変更するだけですね。
人気記事をオシャレに
こちらは最新記事と同様にデザインを変更すれば大丈夫なので、簡単です。
注意点
私のブログデザインでは、ある部分のCSSのwidthを100％にしないと、うまく表示されませんでした。
この現象については、ちろるさんの記事に詳しく書いてあるので、同じ現象に陥った人は参考にしてみてください。
