【hoverで簡単】CSSでスタイリッシュな動きをブログに

他の方のブログを見ていると、あるボタンに触ったときに色が変わったり、サイズが変わったりと、動きのあるサイトを見たことがあるかと思います。

動きがついていると印象には残るもの、再訪の機会も増えるのではないでしょうか。

そこで今回はCSSの設定で、ブログに動きを付ける方法をご紹介します。

【この記事を読むメリット】

マウスを置いた時の動きをつけられるようになる
WEBデザイナーの基礎知識が身につく

ブログをデザイン面からもクオリティアップ！

それでは今回のコンテンツです。

【hoverで簡単】CSSでスタイリッシュな動きをブログに

トップページはブログの顔である

この記事をご覧くださっている方は、ブログを書いている、またはブログに興味があっていろいろ調べているという方かと思います。

いきなり質問ですが、ブログで最も見られるページはどこになるでしょうか。

定期的に閲覧数を確保できる記事・瞬間的に流行する記事があるにしても、長くブログを続けていくと多くのサイトでトップページなるかと思います。

トップページはブログの顔。

第一印象を作りこんでいくことは、閲覧者の方にもよい印象を持ってもらいやすいポイントになるのです。

マウスを置いたときに動きをつける

早速、設定の仕方を見ていきます。

動きを付けるおなじないは

:hover

です。

たった一言ですが、かなりの働き者なのです。

色を変える
ふわっとラインを出す
大きさを変える

１．色を変える

まずは色を変える方法です。

アイコンの上にマウスを置いたときに、色が変わるような設定をしてみます。

このような画面の見た目の変更を行うにはCSSという設定ファイルの変更が必要になりますので、初めての方やこれからの方は、下記の記事も参考になさってみてください。

はてなブログでCSSを編集する手順をイメージつきでご紹介しています。

www.blog.biz-thinking-k.com

それでは、今回は当サイトのトップページにある、カテゴリー名のアイコンの色を変えてみます。

キャプチャのため、動きまでは見えませんが、赤枠のアイコンの色が反転します。

動きを見たい方は当サイトのトップページをご覧いただければと思います。

【before】

【after】

【hoverで簡単】CSSでスタイリッシュな動きをブログに

考え方はとてもシンプルで、「今の色」と「変えたい色」をそれぞれ設定してあげるだけです。

CSSのコードはこちらです。

【マウスを置く前の色の設定】

.categories a {
color: 5f9ea0;
background: #ffffff;
}

【マウスを置いた後の色の設定】

.categories a:hover {
color: #ffffff;
background: 5f9ea0;
}

赤で着色しているところが変更点です。

３行の記載がありますが、上から順番に、

カテゴリーのリンクの設定をするという宣言
文字の色の設定
背景色の設定

となっています。

ここを好きな色に変えれば、すぐに動きができてしまいます。

色の設定はカラーコードで行いますので下記のページをご覧ください。

www.blog.biz-thinking-k.com

思っていたよりも簡単にできるものなんだな。

２．ふわっとラインを出す

次は下線をふわっと表示する方法です。

当サイトのトップページでメニューバーにマウスを置いていただくと動きが見られます。

こちらは少し長いのでコードのご紹介だけ。。

メニューバーのリンクに対して「:hover」の設定をしています。

:afterについてはまた別の機会にご紹介したいと思います。

【マウスを置いた後の動きの設定】

.main-navigation a::after {
position: absolute;
bottom: 0px;
left: 0;
content: '';
margin:0 10% 0 10%;
width: 80%;
height: 2px;
background: #fff;
opacity: 0;
visibility: hidden;
transition: 0.2s;
}
.main-navigation a:hover::after {
bottom: 10px;
opacity: 1;
visibility: visible;
}