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

最新記事・人気記事をクリックさせたくなるようなデザインに変更する方法

まとめ まとめ-デザイン

 

f:id:mataro1:20150814161102j:plain

 

今回はずっと探していたサイドバーの記事をオシャレかつクリックしたくなるようなデザインを探していました。

現在私のサイドバーで実践しているようなデザインが今回紹介するものそのものです。

それでは、3つのパターンについて説明していきます。

 

記事デザイン実践例

今回紹介するのはパソコンのサイドバーのデザイン性を良くするものです。

私のサイトでは以下の画像のように表示されるようになりました。

 

このデザインでは、マウスカーソルを記事に合わせると、表示されている文字が下にずれるアクションが起きます。

f:id:mataro1:20150814161426p:plain

 

 最新記事をオシャレに

今回紹介する方法は全てちろるさん制作のデザインです。

まずは、最新記事をこのようにする方法を紹介したいと思います。

以下のリンクを参考にすれば、すぐに完成させることができます。

chiroru.hatenablog.com

 

 

 

 

 注目記事をオシャレに

 この注目記事のモジュールはCSSをコピペし、サイドバーにはてな公式の注目記事モジュールを追加すれば完成です。

 結局は、CSSで注目記事のデザインを変更するだけですね。

chiroru.hatenablog.com

 

 

 人気記事をオシャレに

こちらは最新記事と同様にデザインを変更すれば大丈夫なので、簡単です。

chiroru.hatenablog.com

 

注意点

私のブログデザインでは、ある部分のCSSのwidthを100%にしないと、うまく表示されませんでした。

この現象については、ちろるさんの記事に詳しく書いてあるので、同じ現象に陥った人は参考にしてみてください。

おすすめ記事

www.mataro1.com

www.mataro1.com

www.mataro1.com