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

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

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

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

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

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

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

画像をメディアファイルへリンクする

設定自体は簡単です。

記事の編集画面

メディアを追加する

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

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

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

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

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

注意したいポイント

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

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

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

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

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

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

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

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

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

コンテンツ領域のサイズ

コンテンツ領域のサイズ

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

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

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

コンテンツ領域のサイズを調べる方法

ここでは Google Chrome を使った方法をご紹介しますが、Firefox、IE、Edge でも似たような操作で可能です。

デベロッパーツール

デベロッパーツール

まず記事ページを開き、[F12]キーを押し、デベロッパーツールを呼び出します。

デベロッパーツールのアイコン

デベロッパーツール

デベロッパーツールの上部・左にある inspectアイコンをクリックします。(上図参照)

inspect の実行中

inspect の実行

inspectの実行中、ページにマウスカーソルを合わせると、その領域の色が変わります。ブルーがHTMLタグの領域、グリーンがpadding、オレンジがmarginを表します。

マウスを上下に動かすとパラパラ色が変わるので、コンテンツ領域がブルーになる場所を探してください。

コンテンツのサイズ

コンテンツのサイズ

inspectを実行中なら、現在マークしている領域のサイズが表示、上図のとおり表示されます。クリックすることでinspectモードは終了します。

デベロッパーツール

デベロッパーツール

なお領域のサイズ情報は、デベロッパーツールウィンドウにも表示されます。

最後に

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

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

あわせて読みたい記事
画像をポップアップ表示させるプラグイン
画像をクリックするとポップアップして拡大表示してくれるプラグイン「Easy FancyBox」をご紹介します。閉じるボタンも付くので、...

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

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

関連記事

ダサいページは、もう作りたくない!なら色数と原色に気を使いなさい

範囲指定してスクリーンショットが作れるWindows標準ソフト

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

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

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

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

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

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

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