マウスカーソルを置くとヘッダー画像が白くなるように設定する。

ブログデザイン

どうも、taigaです。

唐突ではありますが、当ブログを「直感的に使い方が分かるデザインにしたい」と思い立ったので、これから徐々にサイトをカスタマイズしていこうと思います。

今日はその第一弾で、ヘッダー画像にマウスカーソルを置いたら画像の色が白くなるようにしていきます。

ヘッダー画像が白くなることによって、

  • 画像が選択されていることが分かる。
  • クリックしたらトップページが表示されることが分かる。
    →視認性が高くなる!

というように、ユーザーに優しいサイトになると思います。

完成形のイメージはこんな感じです!

僕と同じように、「マウスカーソルを置いたら画像が白くなるように設定したい!」という方は、是非見ていって下さい。

どうやって設定するの?

今回はお馴染みのcocoon設定からは設定不可能だったので、自分でコードを打ち込みます

コードを打ち込むと聞くと、「失敗したら、サイトがぶっ壊れたりしない…?」と心配される方もいるとは思います。

ですが、この作業は本体のコードを弄らないので壊れる心配はないです。

あと作業も超簡単なので、そっちも心配ないです。

taiga
taiga

プログラミングの知識がない僕が設定できたので、超簡単なのは間違いないです。

手順① 「カスタマイズ」を開く。

まず、ダッシュボードの「外観」から「カスタマイズ」を選択します。

手順② 追加CSSを開く。

カスタマイズ画面の一番下にある「追加CSS」をクリックします。

「追加CSS」は、リスクなく自由にコードを書ける場所です。

ミスった時はコードを削除すれば良いだけなので、気楽にコードを書いていきましょう。

手順③ コードを入力する。

追加CSSに、実際にコードを入力します。

今回は、以下のコードをコピペして下さい。
(記載したコードについては最後に説明するので、興味がある方は「おまけ。」をご一読ください。)

.header-site-logo-image:hover{
opacity:0.5;
}

入力をして、実際に画像が白くなることを確認したら、公開をクリックします。

 

以上で作業は終わりになります!

taiga
taiga

言ったとおり、超簡単だったでしょ?

完成。

実際にサイトでヘッダー画像にカーソルを置くと、画像が白くなりました。

これで、ヘッダーを押すとトップページに飛べるというのが直感的に分かるデザインになりました。

他にも幾つか気になる点があるので、今後も「直感的に分かるデザイン」を考えながらカスタマイズしていこうと思います。

 

以上!

おまけ。

先ほど割愛したコードの説明をしていきます。

超簡単に解説していきますので、興味があればお付き合い下さい。

.header-site-logo-image:hover{
opacity:0.5;
}

このコードは3つの要素で構成されています。
①「.header-site-logo-image」②「:hover」③「opacity:0.5;」の3つですね。 

①は、ヘッダー画像を意味してます。
「ヘッダー サイト ロゴ イメージ」と書いてある通りですね。プログラミングも読もうと思ったら意外と読めちゃうもんですね。

②は、「前の要素にマウスカーソルが置かれているときに」という意味です。
今回は①に続いて記載されているので、「ヘッダー画像にマウスカーソルが置かれている時に」という意味になります。

③は、不透明度が0.5(50%)という意味です。
数値を1.0にすると完全に不透明なので変化がなく、0にすると完全に透明なので画像が消えます。
説明の都合上「白くする」と言っていましたが、正確には、今回行った作業は「画像を透過させて背景の白が見えるようにする」というものですね。
なので、背景色が赤なら、赤色になります。

ということで、3つを組み合わせると「ヘッダー画像にマウスカーソルが置かれている時、画像を50%不透明にする」というコードになります。

コメント

タイトルとURLをコピーしました