【SWELL】ヘッダーロゴ横に画像を配置してマウスオーバーでアニメーション

今回は、かなりお遊び的なCSSカスタマイズをご紹介します。

ヘッダーロゴ横に任意の画像を表示させて、マウスカーソルをヘッダーに載せたときにアニメーションする挙動です。下記動画をご覧ください。

ヘッダーにカーソルを合わせると、わんこがクルクル回ります。かわいい。

ちなみに今回のわんこは、フリー素材ぴよたそさまの「犬っころ」をつかわせていただきました。

なおスマホではマウスオーバーできないため、ただ画像が表示されているだけになるかと思います。原則PCユーザー向けの隠しギミック的な感じに実装するカスタマイズになります。

にもかかわらず、CSSで実装するときは各々の環境ごとに画像サイズや位置を調整せねばならず「完全コピペでOK」とは言えないカスタマイズです。

また今回はヘッダーロゴを左端に表示させているレイアウトを前提に解説していますので、中央表示している場合などは、位置を大幅に調整していただく必要があります。

初心者の方がCSSで位置調整をする初歩を学ぶのには、ちょうど良い教材になるかもしれませんので、ぜひチャレンジしてみてください。基本をおさえれば、ヘッダーロゴ以外のいろいろなところに応用が効きます。

  • カスタマイズ内容は、記事最終更新日時点のSWELL最新バージョンで動作確認しております。
  • カスタマイズは自己責任にてお取り組みください。心配な方は、作業前にバックアップを取っておくことをおすすめします。
お知らせ

この記事は、当サイト文亭の賛助会員さん限定で「会報」として公開しています。
500円払いきりで、すべての会報がずっと読み放題になります。

テーマを作りました

「シンプルすぎるWordPressテーマ」がコンセプトの無料WordPressテーマを制作しました。

自作・カスタマイズを前提としたテーマになっています。テーマ制作の学習やベーステーマに興味がある方は、ぜひ活用してみてください。

記事をシェア
  • URLをコピーしました!
  • URLをコピーしました!
時間割