画像をクリックすると大きなサイズの画像を表示する設定

クリックすると大きなサイズの画像を表示する

どうも、スマコマのコマ太郎です。

ウェブページを見ていて画像をクリックすると大きなサイズの画像が見られるページを見たことがありませんか?

このサイトもそうなっていますが、どうやって設定しているのでしょうか?

今回はクリックすると大きな画像のファイルが見られるようにする WordPress の設定方法をご紹介しようと思います。

設定自体は簡単ですが、事前に知っておくとよいこともまとめておきました。

クリックすると大きな画像を表示する設定

設定自体は簡単です。

メディアを追加する

まず記事を編集する画面の上部にある [メディアを追加]ボタンをクリックします。

メディアへのリンクを追加する

メディアを選択する画面の右側にある [リンク先] でメディアファイルを選択するだけです。これでページに埋め込まれた画像がリンクになり、クリックするとフルサイズのメディアファイル(画像)が表示されるようになります。

WordPress の設定を変更していなければ、[サイズ] は大サイズあたりが妥当だと思いますが、これはあなたが使っているテンプレートによっては違うことがあります。サイズについては後述しました。

注意したいポイント

画像をクリックすると大きくなるように設定するなら、まずは大きなサイズの画像を用意しておくことがポイントになります。クリックしても同じサイズの画像が表示されるのでは意味がありませんからね。(笑)

先ほどメディアを追加する画面の [サイズ] で大サイズを選びましたが、こうすることでクリックしたとき、サイズが違うサイズで画像が表示されることになります。

なお、[サイズ] に表示される画像サイズは、WordPress の設定で変更することができます。

メディアサイズの設定箇所

管理画面の[設定]-[メディア] を開くと、その設定箇所が表示されます。

サムネイル、中サイズ、大サイズの設定を行うことができ、画像をアップロードすると元の画像に加え、少なくともこの3つのサイズが自動生成されるようになっています。

サムネイルは小さいサイズのサムネイル画像、中サイズは中サイズのサムネイル画像として使われることが多いと思います。

なので記事内で利用するのは、ほぼ大サイズ一択になります。大サイズのデフォルトが1024pxですが、コンテンツ領域で 1024px あるテンプレートは稀です。

コンテンツ領域のサイズ

なので、この設定はあなたが使っているテンプレートのコンテンツ領域の最大サイズにすると無駄がありません。文字や画像の両側にマージンがあるなら、それを差し引いたサイズですね。

このサイトの場合、パソコンで見たときの最大サイズが756pxになっています。なので大サイズは756pxか、両端のマージンを差し引いた696pxが最適化したサイズになります。

まあ、実際にはそこまで最適化していないので、大サイズは800pxに設定していますが。(笑)

ちなみに、WordPress の基本機能だけではクリックした先が画像だけのページとして表示され、戻るにはブラウザの戻るボタンを使う必要があります。あまり使い勝手がよくないんですね。

そこでおすすめなのが、「Easy FancyBox」プラグインです。このプラグインについては、以下の記事に書きましたのでご覧ください。

あわせて読みたい記事
画像をポップアップ表示させるプラグイン
どうも、スマコマのコマ太郎です。 1つ前の記事「画像をクリックすると大きなサイズの画像を表示する設定」で、その設定方法を解説しました。 ...

 コメント/質問、お気軽にどうぞ。

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

リンク色を青、アンダーバー付きに変更する方法

ウェブサイトの色をワンクリックで調べる無料ツール

余白をコントロールして分かりやすくする

文章と対応する画像が分かりにくかったのでCSSで調整してみた

画像形式はどれがいいの?

ブログを作るなら知っておきたい画像ファイル形式の話(JPG、PNG、GIF)

画像加工ソフトのおすすめは、どれ?

画像加工/編集ソフトは、どれがいいの?有料と無料の両方教えます。

画像をポップアップ表示させるプラグイン

画像をクリックするとポップアップさせ、閉じるボタンも表示するプラグイン