[WordPress] I tried to create image replacement content using jQuery

【WordPress】jQueryを使った画像入れ替えコンテンツを作ってみた

公開日: Wordpressのこと
【WordPress】jQueryを使った画像入れ替えコンテンツを作ってみた

自作テーマを作っている(このサイトでも実際に稼働している)ので、こんなことで感動するな!と言われそうですけど、WordPressを動かすためのプログラムであるPHPやデザインを指定するCSSに関してはある程度分かって調べれば大抵のことは対処できるものの、動きのあるコンテンツを作るjQueryについては完全にコピペプログラマーだった私。

そんな私でもいろいろと勉強して、ついについにできるようになりました!!

感動の?小さい画像をクリックすると大きい画像が入れ替わるコンテンツがこれ。

【WordPress】jQueryを使った画像入れ替えコンテンツを作ってみたの画像|Ordinary Life
【WordPress】jQueryを使った画像入れ替えコンテンツを作ってみたの画像|Ordinary Life 【WordPress】jQueryを使った画像入れ替えコンテンツを作ってみたの画像|Ordinary Life 【WordPress】jQueryを使った画像入れ替えコンテンツを作ってみたの画像|Ordinary Life 【WordPress】jQueryを使った画像入れ替えコンテンツを作ってみたの画像|Ordinary Life 【WordPress】jQueryを使った画像入れ替えコンテンツを作ってみたの画像|Ordinary Life

きゃ~~っ、やっぱり我が家のモモはきゃわいい💛💛

じゃなかった、通販サイトなどでよく使われているコンテンツなので、今後いろいろと利用できそうです。日々お勉強ですネ★

小さい画像の左から順に「2016年」「2017年」「2018年」「2019年」「2020年」と成長記録的なものにしています。切り替えて見るとだんだん大人になっていってるようないないような・・・。猫の成長期は1年程度ですから、実際にはあんまり変わらないんですね・・。

自学した内容や作り方は私が管理するメインサイトの以下のページで公開しています。

【WordPress】サムネイルをクリックすると画像が切り替わるコンテンツを作る方法、動作不具合時の対応

私と同じようにjQuery初心者の方、なんだかうまくいかなかった方は一度見てみてください。

  • 白黒ハチワレ猫の「モモ」、サバトラ猫の「ココ」という2匹の保護猫と暮らしています。
    WordPressというツールを使ったホームページ作りをしています。
    ココナラというサービスでWordPressサイトのカスタマイズ・修復・引っ越しなどを受け付けていますので、お困りのことなどあれば気軽にお問合せください。

QR Code

このページはモバイル端末でもご覧いただけます

左のQRコードを読み取っていただくと、このページのURLが表示され、簡単にアクセスできます。ぜひモバイル端末でもご覧ください。