【賢威6.2】WordPressで記事のアイキャッチ画像をマウスオーバー時に拡大させる方法 | LIVE YOUR LIFE

 

【賢威6.2】WordPressで記事のアイキャッチ画像をマウスオーバー時に拡大させる方法

 

よくTCDからリリースされているテーマなどで実装されているのですが、アイキャッチ画像がマウスオーバーに合わせて拡大される仕様を見たことがあるかもしれません。

次の画像のような感じです、実際にマウスオーバーしてみてください。

 

 

このようにマウスオーバーで画像が拡大される仕様を、当サイトで使用しているWordPressテーマ『賢威6.2』で実装してみようと思い立ち、今回の記事に至ります。

 

もし、賢威を利用していく中でアイキャッチ画像のカスタマイズを行いたくなった際には、ぜひとも参考までに。

CSSだけで簡単に実装することができるので、一緒に設定を進めていきましょう。

 

賢威6.2のアイキャッチ画像のタグ名は?

 

まず設定を進めていく上で、賢威6.2においてアイキャッチ画像はどのようなタグで指定されているのか?というところを知っておかなければなりません。

 

実際に、Google Chromeのディベロッパツールでアイキャッチ部分のコードを確認してみます。

 

すると、上の画像の赤枠で囲ってある『<div class=”left”>』というコードからもわかるように、賢威6.2では『left』というタグ名でアイキャッチ画像が指定されています。

なぜ『left』なのか?というと、おそらくアイキャッチ画像が左側に配置されような仕様だからではないか(憶測)と勝手に思っています。

 

というように、プログラミング言語について細かく理解していなくとも、自由自在にブログをカスタマイズすることができるのがWordPressおよび賢威の良いところ。

 

アイキャッチ画像を指定するタグ名がわかったということで、あとはCSSでマウスオーバー時に画像が拡大されるようコードを足していくだけです。

 

アイキャッチ画像をマウスホバー時に拡大させる方法

 

それでは早速、賢威6.2のCSSをいじって設定を施していきましょう。

 

WordPressのダッシュボード画面から『外観』→『テーマの編集』→『design.css』を選択します。

 

ここに記載されているコードの中には、先ほどの『left』タグに当たるものが存在していないため、一番下に以下のコードを追記しましょう。

 

ここでは、アイキャッチ画像がマウスホバーされた際に、『400×300px』の範囲内で画像が拡大されるように設定しています。

もしアイキャッチ画像のサイズを変更したい(特に変更する必要はないが)場合には、上にあるpx値の数字を変更していただければと思います。

 

これで無事、アイキャッチ画像がホバーアクション時に拡大されるようになりました。

予想以上にとても簡単な設定で済ませることができましたね。

 

最後に

 

以上、賢威6.2で記事のアイキャッチ画像をマウスオーバー時に拡大させる方法について解説しました。

 

賢威はデフォルトの状態こそシンプルなデザインではありますが、やはりそのカスタマイズ性の高さは他のブログテーマと比べ物にならないほどです。

ぜひとも、自由自在にブログデザインをカスタマイズしていき、独自性の高いサイト運営を心がけていきましょう。

 

何より、そうして自分の意思で自由にブログをデザインすることで、記事を作成するのが楽しくなったり、単純にサイトを見ていて楽しくなったり、モチベーションの向上にもつながります。

 

より楽しいブログライフを送っていくためにも、ブログデザインのカスタマイズやその他お悩みのことがありましたら、気軽に何でもご相談くださいね。

 


MAIL MAGAZINE

RIKU

最後まで読んでいただきありがとうございます!

僕のコンサルなど最新の情報は、
無料のメール講座にご登録いただいた方に優先的にお届けしていきます。

その他ビジネスに関する情報からプライベートに関する何気ない話題まで
表のブログではできないお話を楽しくお届けしているので、
ぜひ気軽にご参加くださいね:)

 

 

     

公開日:2017/07/01 更新日:2017/07/26

コメントを残す

サブコンテンツ
FEATURED ARTICLE

TO THE TOP