はてなブログで記事を書いているけど、トップページとかワードプレスのようにふわっとかっこよく浮かせるようにしたい！
そんな悩みを解決します。
今回は、ホバーアクションでトップページを浮かせる方法を詳しくみていきたいと思います。
完成系はこちらです。
このようにトップページの記事一覧がホバーするように浮いた感じに調整することができますよ。
スポンサードリンク
トップページを浮かせるHTML
今回は、こちらのサイトを参考にさせていただきました。
ガテン系ブロガーの「フジグチ」さんのサイトです。
はてなブログのカスタマイズをメインにされているサイトで、実用できるカスタマイズ内容をわかりやすく解説されています。
コードを詳しく知らない人でも直感でできるような記事が多い素敵なサイトです。
それでは、早速その手順を見ていきます。
＊はてなブログのテーマによっては正しく反映されないこともあるかもしれません。
下記のCSSデザインコードを貼り付けます。
.page-archive .archive-entry {
transition: .3s; /*変化するまでの時間*/
}
.page-archive .archive-entry:hover {
transform: translateY(-4px); /*上に4px移動*/
box-shadow: 0 6px 10px rgba(0,0,0,.2); /*影の距離 ぼかし幅 色*/
}
.urllist-with-thumbnails {
box-shadow: 1px 1px 5px #000, -1px -1px 5px #000;
}
少し詳しく解説すると、:hoverから後がふわっと浮かせる動作を指示しているコードなのですが、その上にtransition:をつけることで、スムーズに落とすような動きにできます。
HTMLを貼り付ける場所
貼り付ける場所は、CSSデザインです。
この部分に貼り付けます。基本的に↓から順に優先して反映されていきます。記事冒頭にも載せていますが、完成するとこんな感じになります。
このコードで、サイドバーの注目記事や関連記事にも応用できるので、詳しいコードや詳細は上記の参考サイトを見てみてください。
まとめ
はてなブログは基本的にシンプルなデザインが多いです。
ワードプレスのようなホバーアクションを活用して、スタイリッシュでかっこいいトップページにしたい人には、簡単にできる方法なのでおすすめです。
この機会に、はてなブログの外観をおしゃれにアレンジしてみてはいがかでしょうか。
最後まで読んでいただき、ありがとうございます。
この記事が良いと思ったら、ポチっ！してくれると嬉しいです！
「ブログ村ランキング」参加中!
