はてなブログ記事でホバーアクション！トップメニューを浮かせる方法紹介

そんな疑問にお答えします。

どうも、ブログ運営者のポチ（@sunrise_033）です。

結論からいうと、デザインCSSにHTMLコードを記入すると、トップページの記事一覧がホバーするように浮いた感じに調整することができます。

完成系はこちらです

このようにトップページの記事一覧がホバーするように浮いた感じに調整することができます。

この記事では、ホバーアクションでトップページを浮かせる方法を詳しく解説します。

トップページが浮くとワードプレスサイトのようにデザインがとってもかっこよくなりますよ。

トップページを浮かせる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デザインです。

この部分に貼り付けます。基本的に↓から順に優先して反映されていきます。記事冒頭にも載せていますが、完成するとこんな感じになります。

このコードで、サイドバーの注目記事や関連記事にも応用できるので、詳しいコードや詳細は上記の参考サイトを見てみてください。

まとめ

はてなブログは基本的にシンプルなデザインが多いです。

ワードプレスのようなホバーアクションを活用して、スタイリッシュでかっこいいトップページにしたい人には、簡単にできる方法なのでおすすめです。

この機会に、はてなブログの外観をおしゃれにアレンジしてみてはいがかでしょうか。