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

画像を拡大するcoding

takato@enjoying_freeです!

サイト内に画像を入れた際小さくて見えづらいということがありますよね。そんな時は画像をクリックして拡大表示できるようにしましょう。

ワードプレスで画像を拡大表示する設定方法を皆さんに紹介します!

この記事でわかること

 ・ワードプレスで画像をクリックすると拡大表示される設定方法

クラシックエディターに設定する

ワードプレスのエディター設定をクラシックエディターにします。現在もクラシックエディターを使用している方はこのまま次の段落に進んでください。

ワードプレスはバージョン5,0よりクラシックエディターからブロックエディターに変更されました。

バージョンアップ以降にワードプレスをインストールした方は、ブロックエディターを使用していることになります。

そのためエディターをクラシックエディターに戻す必要があります。

クラシックエディターに戻すには、「Classic Editor」というプラグインをインストールする必要があります。

エディターがブロックエディターの方は、こちらのプラグインをインストールしてください。

プラグインをインストールして有効化するだけでクラシックエディターに変更されます。

画像の拡大設定を行う

クラシックエディターで設定を行うことで、画像の拡大表示設定を行うことができます。

まずは画像を配置します。「ビジュアル」の状態で、「メディアを追加」を選択してください。

画像を選択して右下の「挿入」という青いボタンをクリックすると、画像が配置されます。

上記のように画像が反映されたら、配置された画像をクリックして「編集」を選択します。

リンク先」をメディアファイルに設定します。この設定を行うことで、画像をクリックした際に拡大表示されます。

最後に記事編集画面右側にある青い「更新」をクリックしたら完成です。

プレビューで確認すると、画像をクリックしたらしっかりと拡大表示されますよね。


ここで2点気づいたことがあるかと思います。

1つ目は、拡大表示が滑らかではないということです。クリックするとただ画像が拡大表示されるので、見ている側としてはあまり楽しく無いです。

この点については対処法があります。次の段落で説明しますね。

2点目は、そもそも画像が拡大されない可能性があるということです。

ワードプレスにアップロードした画像のサイズが小さいと、拡大することができません。

そのためワードプレスにアップロードする際は、拡大表示した際のサイズにしてください。

僕は横800px縦532pxのサイズでアップロードしています。参考にしてみてください。

滑らかに拡大するには

画像をクリックした際滑らかに拡大表示されるように設定するには、「Easy FancyBox」というプラグインを導入する必要があります。

上記のプラグインは、画像拡大表示の動きをすむーずにしてくれます。また「✖️マーク」の表示もしてくれるので、元に戻る動作もわかりやすいです。

Easy FancyBoxはインストールして有効化するだけで機能します。もし興味があれば上記のプラグインをインストールしてみてください。

ワードプレスに関するおすすめ記事

他にもワードプレスに関するおすすめの記事を紹介しますので、合わせて読んでみてください。


僕は未経験でwebデザイナーになりました。

デザイン・コーディングに関する記事も書いております。


デザインに関するおすすめ記事はこちら


コーディングに関するおすすめ記事はこちら