どうも、スマコマのコマ太郎です。
ウェブページを見ていて画像をクリックすると大きなサイズの画像が見られるページを見たことがありませんか？
このサイトもそうなっていますが、どうやって設定しているのでしょうか？
今回はクリックすると大きな画像のファイルが見られるようにする WordPress の設定方法をご紹介しようと思います。
設定自体は簡単ですが、事前に知っておくとよいこともまとめておきました。
クリックすると大きな画像を表示する設定
画像をメディアファイルへリンクする
設定自体は簡単です。
記事の編集画面
まず記事を編集する画面の上部にある [メディアを追加]ボタンをクリックします。
メディアへのリンクを追加する
メディアを選択する画面の右側にある [リンク先] でメディアファイルを選択するだけです。これでページに埋め込まれた画像がリンクになり、クリックするとフルサイズのメディアファイル（画像）が表示されるようになります。
WordPress の設定を変更していなければ、[サイズ] は大サイズあたりが妥当だと思いますが、これはあなたが使っているテンプレートによっては違うことがあります。サイズについては後述しました。
注意したいポイント
画像をクリックすると大きくなるように設定するなら、まずは大きなサイズの画像を用意しておくことがポイントになります。クリックしても同じサイズの画像が表示されるのでは意味がありませんからね。(笑)
先ほどメディアを追加する画面の [サイズ] で大サイズを選びましたが、こうすることでクリックしたとき、サイズが違うサイズで画像が表示されることになります。
なお、[サイズ] に表示される画像サイズは、WordPress の設定で変更することができます。
メディアサイズの設定箇所
管理画面の[設定]-[メディア] を開くと、その設定箇所が表示されます。
サムネイル、中サイズ、大サイズの設定を行うことができ、画像をアップロードすると元の画像に加え、少なくともこの３つのサイズが自動生成されるようになっています。
サムネイルは小さいサイズのサムネイル画像、中サイズは中サイズのサムネイル画像として使われることが多いと思います。
なので記事内で利用するのは、ほぼ大サイズ一択になります。大サイズのデフォルトが1024pxですが、コンテンツ領域で 1024px あるテンプレートは稀です。
コンテンツ領域のサイズ
なので、この設定はあなたが使っているテンプレートのコンテンツ領域の最大サイズにすると無駄がありません。文字や画像の両側にマージンがあるなら、それを差し引いたサイズですね。
このサイトの場合、パソコンで見たときの最大サイズが756pxになっています。なので大サイズは756pxか、両端のマージンを差し引いた696pxが最適化したサイズになります。
まあ、実際にはそこまで最適化していないので、大サイズは800pxに設定していますが。(笑)
コンテンツ領域のサイズを調べる方法
ここでは Google Chrome を使った方法をご紹介しますが、Firefox、IE、Edge でも似たような操作で可能です。
デベロッパーツール
まず記事ページを開き、[F12]キーを押し、デベロッパーツールを呼び出します。
デベロッパーツールのアイコン
デベロッパーツールの上部・左にある inspectアイコンをクリックします。（上図参照）
inspect の実行中
inspectの実行中、ページにマウスカーソルを合わせると、その領域の色が変わります。ブルーがHTMLタグの領域、グリーンがpadding、オレンジがmarginを表します。
マウスを上下に動かすとパラパラ色が変わるので、コンテンツ領域がブルーになる場所を探してください。
コンテンツのサイズ
inspectを実行中なら、現在マークしている領域のサイズが表示、上図のとおり表示されます。クリックすることでinspectモードは終了します。
デベロッパーツール
なお領域のサイズ情報は、デベロッパーツールウィンドウにも表示されます。
最後に
WordPress の基本機能だけではクリックした先が画像だけのページとして表示され、戻るにはブラウザの戻るボタンを使う必要があります。あまり使い勝手がよくないんですね。
そこでおすすめなのが、「Easy FancyBox」プラグインです。このプラグインについては、以下の記事に書きましたのでご覧ください。
↓↓
