SNSアカウントを目立たせたい！ホバー時の色を変えるとちょっとお洒落に
こんにちは。koochablendです。
今日の昼頃、メインで続けている雑記ブログ（半分は放置）を
久々に更新してみようと、サイトを見回っていたところ…
このサイドバーのSNSリンクのデザインが少し気になりました。
「ちょっとシンプルすぎるなあ」
と感じた私は、
ホバー時に色を変えてみて少し人目につくようにしようと思いました！
今日は、その結果と方法について軽く紹介したいと思います。
従来のデザインはこんな感じ
さて、作業にとりかかる前に、初めはどんなデザインをしているのか確認します。
以前編集した時は、
マウスのカーソルを当てた時（これをホバーを言います）、
何もしてないときは四角だったSNSアイコン（画像のインスタ、FB）が、
ホバー時は丸く変形するように遊び心を込めていました！！……
でも、正直このアイコンを押してくれてる人は皆無な気がするし、
なにより私自身、このアイコンを設置していること自体忘れていました！笑
なので、今回、このアイコンをなんとかしてもう少し目立たせてみたいと思います！
CSSの確認はChromeのデベロッパーツールを使用！
「デベロッパーツール」は
ブログデザインを確認・変更するのにとても重宝します。
ブログを作成する際に、CSSを用いたデザイン等を変更したい方は
Chromeブラウザをぜひインストールしてみましょう！
しかしここでは、「デベロッパーツール」の使い方についての説明は省きます。
気が向いたら、その記事もそのうち書こうかなと思いますのでお待ちください。
Hover時のアクションを変更する
2. 確認したい箇所を選択し、「hover時」の状態にする
3. 新たなCSSを以下のように追加してみる。
<code> セレクタ:hover {background-color:deepskyblue}<code> 
4. すると、マウスをホバーすると、このようなTwitterっぽい色に。
5. ほかのSNSアイコンもこんな感じにしてみました。
あとはこのCSSをブログのスタイルシートに貼るだけ
私はWordpressを使用しているので、そこのスタイルシートに貼ります。
1. Wordpressのダッシュボード＞外観＞テーマの編集
2. スタイルシートを選択。
3. 以下のように入力して、「ファイルを更新」をクリック
4. 変更完了！
まとめ
これといった効果があるかは分かりませんが、
ちょっとお洒落になりました。（気がする）
それよりも、久しぶりにブログをいじったので
CSSの勉強の復習になりました。
てな感じで、完全自己満足な記事ですが、参考になれば幸いです。
それより、今日工事したブログもよければのぞいてみていただければとっても嬉しいです！！
koochablendのブログ：こちゃまぜ
それでは！
From koochablend
