WordPressで画像をクリックして拡大表示させる方法を紹介!

WordPressで画像をクリックして拡大表示させる方法を紹介!

takato(@n8takato)です!

WordPressで画像をクリックしたら拡大表示されるようにしたい

この記事では上記の課題を解決します。

WordPressでwebサイトを制作した際、画像をクリックしたら拡大表示されるように設定することが出来ます。

ポートフォリオなど、画像を多く使用するサイトにはおすすめな機能です。

この記事ではWordPressで画像をクリックした際に拡大表示される設定方法を紹介します。

この記事でわかること

  • WordPressで画像クリック後に拡大表示させる方法

画像の拡大表示は通常のコーディングでも実装することが出来ます。

詳しくは「画像をクリックして拡大させる方法を紹介!コピペ可能なコードあり!」を読んでください。

あわせて読みたい
画像をクリックして拡大させる方法を紹介!コピペ可能なコードあり! 画像をクリックすると拡大されるように設定したい この記事では上記の課題を解決します。 webサイトの制作をしていると、画像を大きく見せるために上記の手法を取ること...

また、別の記事でWordPressで画像の拡張子をwebpに変換する方法を紹介しています。

詳しくは「WordPressで画像の拡張子をwebpに変換する方法を紹介!」を読んでください。

TAKATO BLOG
WordPressで画像の拡張子をwebpに変換する方法を紹介! WordPressにアップロードされている画像の拡張子をwebpに変換する方法を紹介します!webpに変換するには「EWWW Image Optimizer」というプラグインを使用します。
目次

WordPressで画像をクリックして拡大表示する方法

WordPressで画像クリック後に拡大表示させるには、エディターをクラシックエディターにする必要があります。

WordPressのバージョン5.0以降はブロックエディターに変更されたので、現在クラシックエディターを使用している方は多くないと思います。

そのためエディターをクラシックエディターに変更する方法から紹介します。

クラシックエディターに変更する方法

ブロックエディターからクラシックエディターに変更するには、プラグインを使用します。

Classic Editor」というプラグインをインストールしてください。

WordPress管理画面の「プラグイン」>「新規追加」>「Classic Editor」>「今すぐインストール」を選択してください。

「Classic Editor」のインストール
「Classic Editor」のインストール

インストールが終わったら有効化してください。

有効化するだけでエディターがクラシックエディターに変わります。クラシックエディターに変換する方法は以上です。

画像を用意する

ここから画像クリック後に拡大画像が表示される設定を行います。

その前にサイトのページ内に載せる画像と拡大表示させる画像の2つを用意する必要があります。

拡大表示用の画像はページ内に載せる画像と同じものを用意します。拡大表示するので、拡大した際に荒くならない程度にサイズの大きい画像を用意する必要があります。

そのため画像を用意する際は、先に拡大用画像を用意して、次にページ内画像のサイズまで縮小してください。

画像のサイズ変更はiloveimgというwebツールがおすすめです。こちらは無料で画像のサイズ変更を行うことが出来ます。

さらに拡張子の変更や容量の圧縮も行うことが出来ます。是非使用してみてください。

2つの画像が用意できたら、WordPressにアップロードしてください。

クラシックエディターで拡大表示の設定を行う

2つの画像をWordPressにアップロードしたら、クラシックエディターを使用して画像の拡大設定を行います。

まず、サイトのページ内に画像を配置します。クラシックエディターの「ビジュアル」>「メディアを追加」でページ内に入れる画像を選択します。

クラシックエディターで画像を配置する
クラシックエディターで画像を配置する

画像の配置が完了したら下記のように表示されます。

画像の配置完了
画像の配置完了

次にクリックしたら拡大表示されるように設定していきます。

先ほど配置した画像をクリックして編集を選択してください。

クラシックエディターの画像拡大設定
クラシックエディターの画像拡大設定

編集画面の中に「リンク先」という部分があります。ここに拡大用の画像のリンクを配置します。

最後に更新ボタンを押したら終了です。

クラシックエディターで拡大用画像を選択
クラシックエディターで拡大用画像を選択

実際に画像が拡大されるか、プレビュー画面で確認してみてください。

拡大の動きを滑らかにする方法

画像をクリックして拡大表示した際に、拡大表示の動きが滑らかで無いと感じた方がいるかと思います。

デフォルトのままだと拡大表示の動きが滑らかではありません。サイトをかっこよくするためにはスムーズに拡大表示されるように設定する必要があります。

画像の拡大表示をスムーズにする方法を紹介します。

WordPressはプラグインで画像の拡大表示をスムーズに行うことが出来ます。「Easy FancyBox」というプラグインが拡大表示をスムーズにしてくれます。

クラシックエディターのプラグインをインストールした時と同じように、Easy FancyBoxをインストールします。

WordPress管理画面の「プラグイン」>「新規追加」>「Easy FancyBox」>「今すぐインストール」を選択してください。

Easy FancyBoxのインストールが終わったら有効化してください。有効化が終わったら完了です。

サイトをリロードした上で再度画像をクリックしてみてください。今度はスムーズに拡大表示されたと思います。

また、拡大表示された際に閉じるボタンが表示されるようになります。UXが向上されたサイトになったかと思います。

最後に

この記事ではWordPressで画像をクリックした際に拡大表示される設定を紹介しました。

ポートフォリオサイトなど複数の画像を羅列する場合は、一つ一つの画像が小さくなってしまいがちです。

そんな時に拡大設定を行っていると、画像を細かくみることが出来るようになります。webサイトのUXが向上するので、是非やってみてください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次
閉じる