Travelogue(トラベローグ)

Travelogue

WordPressギャラリー投稿手順

WordPressのギャラリー機能を使って、エントリーに写真ギャラリーを投稿する手順を解説します。
ギャラリーとは以下の画面のようにサムネイル(小さな写真)を並べてクリックすると写真が拡大するようなコンテンツのことです。
WordPressにはプラグインや追加のカスタマイズを施さなくても、標準の状態でギャラリーを作成できる機能が備わっています。

WordPressのギャラリー機能

目次

本エントリー執筆時点(2011年5月27日)における最新バージョンのWordPressを対象として解説しています。
その他のバージョンでは仕様が異なる場合がありますのでご注意ください。

手順1 写真の準備

まずは写真を準備します。
最近のデジカメは撮影する画像の解像度が大きいのはいいのですが、そのままだとWebページで見るには大きすぎますしサイズが重いです。そのため、これをそのままサーバーにアップしてしまうと、ご利用中のレンタルサーバーの契約容量を圧迫して近い将来パンクしてしまうかもしれません。そもそもそんなに解像度の大きい写真をWebにアップしても大抵の場合はあまりメリットがありませんので、写真はリサイズ(縮小)してからアップすることをお勧めします。

写真はお使いの画像編集ソフトで縮小してください。大きさの目安は、現状で一般的なPCのディスプレイで見ることを考えるならだいたい長辺(つまり横長の写真の場合は横、縦長の写真の場合は縦)が600~700ピクセル程度で十分かと思われますが、これはそれぞれの用途などによっても違いますし、適宜判断してください。

ギャラリーですので、おそらくアップしたい写真は一枚だけではないと思います。
必要な枚数分の写真をリサイズして保存して準備しておきます。

手順2 アップロード

エントリーの投稿画面から写真をアップロードします。

まずは必要に応じて本文のテキストを入力します。
文章の入力が終わったら、キュレット(点滅)を写真ギャラリーの挿入位置に合わせ、画像を追加ボタンを押します。

画像を追加ボタンを押します

ウィンドウ内の「ファイルを選択」ボタンを押します。

「ファイルを選択」ボタンを押します

写真は一枚ずつではなくまとめてアップできます。(Ctrlキーを押しながらクリック)

まとめてアップ

手順3 写真の設定

複数枚の写真をアップすると、以下の画面のようにリスト表示になると思います。

「表示する」というテキストをクリック

右側の「表示する」というテキストをクリックして、それぞれの画像に対して必要情報を入力します。
ここでご注意いただきたいのが、ギャラリーを挿入の操作時は画像を一枚普通にエントリーに挿入するときとは違って、この画面の「投稿に挿入」ボタンは押しません。
ここでは以下のことだけやってください。

  • 「表示する」をクリックして出てきた画像情報の入力欄を表示させます。
  • 必要な情報を入力します。
    場合によっては特に入力しなくていいこともあるかもしれませんが、一応「タイトル」と「代替テキスト」くらいは入力しておくことをお勧めします。htmlの話ですが、「タイトル」は画像のtitle属性、「代替テキスト」はalt属性になります。
    また、「キャプション」はサムネイル画像の下に表示されるテキストになります。無くていいなら入れなくても構いませんが、表示させたい場合は入力しておきます。
    「説明」「リンクURL」「配置」「サイズ」はここでは何も入力しなくて構いません。これらは、画像を一枚普通にエントリーに挿入するときは関係のある項目ですが、今回のようにギャラリー機能で表示させるときは関係ありません。
  • もし「アイキャッチ画像」の機能を使っているなら、ギャラリーの中でアイキャッチ画像に設定したい画像ではページ下部の「アイキャッチ画像に設定」のテキストメニューをクリックしておきます。(アイキャッチ画像の機能を使っていない場合や、ギャラリーの中でアイキャッチ画像に設定する必要がない画像ではこれをクリックする必要はありません)
  • ここまできたらページ右上の「隠す」をクリックすると画像情報の入力欄が閉じます。上にも書きましたが、「投稿に挿入」ボタンを押さないようにご注意ください。
必要情報を入力

「隠す」を押すとまた最初の一覧表示状態になったと思いますので、ギャラリーで使う他の画像についても同様の操作でひとつひとつ画像情報を入力していきます。
全部の写真について入力が終わったら、一覧の下にある「すべての変更を保存」ボタンを押します。

「すべての変更を保存」ボタンを押します

手順4 ギャラリーの設定

上記の手順3の最後のところで、「すべての変更を保存」ボタンを押すと、同ウィンドウ上部のタブメニューに「ギャラリー」というのが出てきたと思います。この画面でギャラリーの設定を行います。

まずはページ上部の一覧右側の四角い箱の中に数字を入力し、ギャラリーで表示させる写真の並び順を設定します。入力したら一覧の下の「すべての変更を保存」ボタンを押しておきます。

写真の並び順を設定

次に同ページ下部のギャラリー設定を行います。

  • サムネイルのリンク先では、「画像ファイル」か「添付ファイルのページ」かを選択できます。
    Lightboxなどのプラグインで表示させる場合は「画像ファイル」を選択してください。Lightboxはいくつかのプラグインがありますが、このギャラリー機能で使えるものと使えないものがあります。
    ちなみに初心者の方のために一応書きますが、Lightboxというのは写真をクリックして拡大するのにポピュラーなプログラムで、当ブログでも使っています。(画面上が黒っぽくなってその中に拡大写真が表示される仕様)
    既にギャラリーで使用可能なLightboxプラグインがインストール済みの場合はここでは「画像ファイル」のラジオボタンを選択してください。
  • 「画像の順序」ではプルダウンメニューから選択することができますが、既に上述の手順で画像順は任意に設定していると思いますのでここは特に選択する必要はありません。
    その下の「順序」も同様です。
  • 「ギャラリーの列数」は、列:縦のラインの数です。(行:横のラインの数でありません)
    ここで列数を選択できますが、最適な列数は設定済みのサムネイルサイズと枠のデザインとの兼ね合いがありますので、適宜ご自身の環境に合わせてください。
    なお、表示されるサムネイルのサイズは、WordPressのメディア設定のサムネイルサイズになります。

以上が済んだら、ページ下部の「ギャラリーを挿入」ボタンを押します。

ギャラリー設定

以下の画像のようなものが本文入力欄に表示されたと思います。「公開ボタン」を押してエントリーを公開します。

「公開ボタン」を押してエントリーを公開

公開済みギャラリーの編集

一度公開したギャラリーに変更を加える場合、本文欄のギャラリーコンテンツを一回クリックし、表示された写真とカメラのアイコンをクリックします。

本文欄のギャラリーコンテンツを一回クリック

ギャラリー設定のウィンドウが表示されます。
上述の手順3で書いた要領で、一覧右側の「表示」をクリックすれば写真情報の入力欄が出ます。
また、上述の手順4の要領で写真の並び順などを編集し、「すべての変更を保存」を押します。
編集が済んだら、ウィンドウ下部の「ギャラリー設定を更新」ボタンを押します。するとギャラリー設定ウィンドウが閉じます。

「ギャラリー設定を更新」ボタンを押します

最後には忘れずに「更新」ボタンを押します。

「更新」ボタンを押します

公開済みギャラリーの削除

ギャラリーを削除する場合は、エントリーの編集画面でギャラリーコンテンツを一回クリックし、赤い駐禁マークみたいなアイコンをクリックします。

赤い駐禁マークみたいなアイコンをクリック

ギャラリーコンテンツが本文入力欄から消えたと思います。
忘れずに最後は「更新」ボタンを押します。

ギャラリーコンテンツが本文入力欄から消えた
Pagetop