【WordPress】サイトのタイトルロゴにマウスオーバーで動きをつけるカスタマイズ（コピペでOK）

東鳥子 — Sat, 09 Apr 2022 07:36:30 +0000

このサイトのタイトルロゴ「エンジニアステップ」にマウスを乗せると5px下に動くようになっています。この実装方法をご紹介します。テーマは「diver」です。

実装方法

WordPressのダッシュボード　> 外観　＞カスタマイズ　> 追加CSS　にコードを書きます。

追加CSSにこちらのコードを貼り付けてください。

/* タイトルロゴのマウスオーバー */
#logo:hover {
    -ms-transform: translateY(5px);
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
    border-bottom: none;
    box-shadow: none;
}

ちなみにタイトルロゴのサイズを変える場合はこちらのコードを貼り付けてください。

/* タイトルロゴのサイズ変更 */
#logo img{
height:100px !important;
}

ロゴのサイズは、856×212ピクセルで作っています。

大きさはお好みで、height:○○pxを変更してください。
このサイトのタイトルロゴのサイズは、100pxにしました。

OKならば「公開」をクリックして出来上がりです。

diver - IQパズルステップ

【WordPress】サイトのタイトルロゴにマウスオーバーで動きをつけるカスタマイズ（コピペでOK）

実装方法