タグ: メディアの利用

WordPress(2.5以降)の標準機能に、サムネイル画像を並べて表示させる「ギャラリーを作成」という機能があります。
この機能を使うと、新たにギャラリー表示のためのプラグインを追加しなくても、簡単にギャラリーを作成することができます。
　

ギャラリーの作成

　
①まずは、作成したいページの、作成したい位置にカーソルを移動させてください。
　



②カーソルの位置が決まったら、
次に左上にある「メディアを追加」をクリック。
　



③左メニューの中から、「ギャラリーを作成」を選択してください。
　



④メディアライブラリから、ギャラリーに追加したい写真を選択してください。
1度のクリックで選択、選択したものの右上の「チェックマーク」をクリックすることで選択解除できます。
　



⑤今回は5枚の写真を選択しました。
選択が完了しましたら、右側にある「ギャラリーを作成」をクリックしてください。
　



⑥続いて、ギャラリーの編集画面に移ります。
各画像のキャプション(説明文)部分を入力してください。
説明を表示させたくない場合は、空白でもかまいません。
　



⑦ギャラリーの表示順を変更したい場合、移動させたい写真をドラッグさせれば、順番を変更できます。
　



⑧右側にある「ギャラリーの設定」では、サムネイル画像をクリックしたときの挙動やカラム数を設定できます。
　
リンク先は「添付ファイルのページ」「メディアファイル」「なし」の3つ。
「添付ファイルのページ」は画像用のページが別途開きます。
「メディアファイル」はアップされた画像がそのまま表示されます。
「なし」はサムネイルだけが表示されます。
　
「カラム」では、横並びで表示されるサムネイルの数を選択できます。
カラム数に合わせてカラムの幅は自動調整されますが、多すぎると見栄えが悪くなるので、適宜調整してください。
　
「ランダム」にチェックを入れると、画像の並びがランダムになります。
　
「サイズ」で、表示させたいサイズを選択してください。
「サムネイル」「中」「大サイズ」「フルサイズ」の4つのサイズから選択できます。
　



選択が完了しましたら、右下にある「ギャラリーを挿入」をクリックしてください。
ページの方へ、自動的にショートコードが挿入されます。
　



⑨ギャラリーが作成されました。
ページを表示させてみてください。
　



ギャラリーが作成されました。

【画像ファイルのタイトル設定】

画像ファイルが多くなってくると、サーバー内で探すのが大変になってきます。
今後の編集を効率的に進めるためにも、画像ファイルのタイトルは、下記の解説を一例にルールに基づいて設定をされることをおススメします。
　
画像ファイルのタイトルは、掲載順の左上から右下へ、1ページ目の1枚目なら「1-1」、2ページ目の3枚目なら「2-3」というように、掲載希望順にタイトルを付けてください。
送っていただくものは、PhotoshopやIllustratorなどの編集途中のデータではなく「.jpg .jpeg .gif .png」などの画像形式で保存したものに限ります。
　

画像をアップロードする時に、元の画像のサイズは十分な大きさがあるのに
「サムネイル」や「中」「大」が選択できない場合があります。

上記では元の画像のサイズが 800×600 あるにも関わらず「サムネイル」と「中」が選択できない状態となっています。

このような場合はPHPでGDモジュールが有効になっていない可能性があります。
GDモジュールは現在のPHPでは別途インストールは不要で設定変更だけを行なえば利用可能です。

「php.ini」ファイルを開き「extension=php_gd2.dll」が書かれている場所を検索して下さい。

;extension=php_bz2.dll
;extension=php_curl.dll
;extension=php_fileinfo.dll
;extension=php_gd2.dll
;extension=php_gettext.dll
;extension=php_gmp.dll
;extension=php_intl.dll
;extension=php_imap.dll

「extension=php_gd2.dll」の先頭に「;」がが付いていたら削除して下さい。

;extension=php_bz2.dll
;extension=php_curl.dll
;extension=php_fileinfo.dll
extension=php_gd2.dll
;extension=php_gettext.dll
;extension=php_gmp.dll
;extension=php_intl.dll
;extension=php_imap.dll

ファイルを保存し、Apache等を再起動して下さい。これで完了です。

改めて同じ画像をアップロードしてみると次のように表示されます。

元の画像のサイズから選択可能な「サムネイル」「中」が選択可能となっていることが確認できます。

WordPressでは画像をアップロードした後でトリミング(画像の一部を切り出すこと)を行うことができます。
トリミングした画像を元に全てのサイズの画像を作成することもできますし、サムネイル用にだけオリジナルの画像からトリミングして任意の部分をサムネイルとして設定することも可能です。
ここでは画像のトリミングに使い方について解説します。
　
1.メディアの編集画面
2.画像のトリミング
3.幅と高さの比率を固定してトリミング
4.画像の回転と反転

メディアの編集画面

　
①管理画面左側にある「メディア」メニューの中の「ライブラリ」メニューをクリックして下さい。
　



②「メディアライブラリ」の画面が表示されます。
アップロード済のメディア一覧が表示されますので操作を行いたい画像にマウスを合わせ、表示されたメニューの中から「編集」メニューをクリックして下さい。
　



③メディアの編集画面が表示されます。
　



④画像の左下付近に表示されている「画像を編集」ボタンをクリックして下さい。
　



⑤メディアの編集画面が表示されます。
　



この画面にて画像のトリミングや回転といった操作を行います。
　

画像のトリミング

　
①オリジナルの画像の一部分だけを切り出して(こういった操作をトリミングと言います)
新しい画像を作成しオリジナルの画像と置き換えることができます。
　
②トリミングを行うには表示されている画像の上でまず切り出したい部分の左上にマウスを置き、ドラッグしながら切り出したい右下まで持っていって下さい。
　






③選択した領域の幅と高さは右側の「選択範囲」というところに表示されています。
　



④領域の左上は変更できませんが、幅と高さは数値を直接入力することができます。
例として幅を450px、高さを300pxにしてみます。
「選択範囲」のところのテキストボックスに表示されている数値を変更して下さい。
　



⑤画像の選択されている範囲も変更されています。
　
⑥次にトリミングした画像をどの画像と置き換えるのかを指定します。
画像をアップロードすると「大」「中」「サムネイル」の3つのサイズで画像が自動的に作成されます。
この中のどの画像を新しくトリミングして作成した画像と置き換えるのかについて「すべての画像サイズ」「サムネイル」「サムネイル以外の全サイズ」から選択できます。
　



⑦「すべての画像サイズ」を選択した場合は、トリミングした画像をオリジナル画像として、改めて「大」「中」「サムネイル」の3つの画像が作成されます。
「サムネイル」を選択した場合はサムネイルだけが作成されます。
「サムネイル以外の全サイズ」を選択した場合は「大」と「中」だけが改めて作成されます。
(いずれの場合も新しい画像が作成されるのは「大」「中」「サムネイル」に設定されている上限サイズなどの条件をクリアして画像の作成が可能な場合だけです)。
　
⑧今回は「すべての画像サイズ」を選択しておきました。
　
⑨選択範囲や変更の対象を選択しましたら、画像の上部に表示されているボタンの中から一番左にある「トリミング」ボタンをクリックして下さい。
　



⑩トリミングした画像が新しいオリジナル画像として画面に表示されます。
　



⑪トリミング操作が終了しましたら画像左下に表示されている「保存」と書かれたリンクをクリックして下さい。
　



⑫画像の保存が完了します。
　



⑬サーバ側に保存されているメディアを確認すると、新しいオリジナル画像を含む5つの画像ファイルが作成されていました。
　



⑭元の画像はファイルとしては残っていますが、記事に挿入したりする場合に使用できるのは新しく作成された画像だけです。
　

幅と高さの比率を固定してトリミング

　
トリミングする時に選択範囲の幅と高さの比率を指定しておくことができます。
　
①指定する場合はトリミングを行う前に先に幅と高さの比率を入力して下さい。
　



②それではトリミングを行いますが幅と高さの比率を固定したまま領域を選択するには、
[Shift]キーを押したまま最初に選択範囲の左側にマウスを置き、
[Shift]キーを押したままドラッグして範囲を指定して下さい。
すると自動的に指定した縦横比になるように選択されます。
　



③幅と高さの比率を2対1と指定したので、選択された領域の幅が408pxで高さが204pxと2対1となっています。
　
④サムネイルを作成する場合で幅と高さが1対1のサイズになるように選択したい場合は、縦横比を1対1に指定しておくと便利です。
　



　

画像の回転と反転

　
①画像の編集機能には画像を時計回りと反時計回りに回転させる機能や水平または垂直方向に反転させる機能も用意されています。
　
②時計回りに90度回転させる場合は、画像の上部に表示されているボタンの中の左から3番目の「時計回りに回転」ボタンをクリックして下さい。
　



③画像が時計回りに90度回転しました。
　



④時計を水平方向に反転させる場合は、画像の上部に表示されているボタンの中の左から5番目の「水平方向に反転」ボタンをクリックして下さい。
　



⑤画像が水平方向に反転しました。
　



⑥通常こういった処理は画像をアップロードする前に行うことが多いと思いますが、
サムネイル画像を任意の範囲の画像に設定できる機能などは便利かなと思います。

画像ファイルをアップロードすると、オリジナルの画像の他にいくつかのサイズの画像が自動的に作成されます。
この自動で作成されるサイズを変更したり、不要なものを作成しないようにする設定について解説します。
　
1.自動で作成される画像ファイルの詳細
2.画像サイズが「大」や「中」の上限に設定されているサイズより小さい場合
3.大/中/サムネイルの上限サイズを変更
4.画像を自動で作成しないように設定
5.サムネイルを実寸法にトリミングする
6.アップロードした画像を年月のフォルダに分けて格納するかどうか

自動で作成される画像ファイルの詳細

　
①メディアとして画像を新規追加したり、記事に画像を挿入したりするとオリジナルの画像がサーバ側にアップロードされます。
同時にオリジナルとは異なるサイズの画像ファイルが自動的に生成されます。
　
②例えば1600×1200のサイズの画像をメディアに新規追加してみます。
　



③アップロード先のディレクトリを見てみると次のようにオリジナルの画像の他に5つの画像ファイルが作成されています。
　



④このように画像ファイルをアップロードすると、「サムネイル」「中」「大」の3つの画像ファイルが自動で作成されます。
「サムネイル」は正方形、「中」と「大」はオリジナルの画像の幅と高さの比率を維持したままオリジナルよりも小さいサイズに画像を縮小して作成されています。
　
⑤「サムネイル」「中」「大」がどのサイズになるのかは設定で次のように定義されています。
　

サムネイル：幅 150px 高さ 150px

中サイズ　：幅 300px 高さ 300px

大サイズ　：幅 1024px 高さ 1024px

　
⑥先ほど1600×1200のサイズの画像をアップロードしましたが、次のように各画像ファイルが作成されます。
　
⑦サムネイルはオリジナルの画像を150×150のサイズに縮小して作成されます。
　
中サイズと大サイズはオリジナルの幅と高さの比率を維持したまま、設定されている上限のサイズの範囲内で最大の大きさになるように縮小されます。
例えば中サイズで考えてみるとまず幅を上限の300pxとします。
比率は同じままなので高さは300×(1200÷1600)＝225pxとなります。
この高さは上限の範囲内です。次に高さの方を上限の300pxとします。
比率は同じままなので幅は300×(1600÷1200)＝400pxとなります。
この幅は上限を超えていますのでこのサイズは不可です。
結果として幅が300pxで高さが225pxの画像ファイルが作成されます。同じように大サイズの画像ファイルも作成されます。
　
改めて自動生成された画像を確認してみると、サムネイルや「大」「中」の画像ファイルがそれぞれどれなのかが分かります。
　



例えば記事に画像を挿入する場合、オリジナルの画像と自動で生成された「中」や「大」の画像を選択して記事に挿入されることになります。
　

画像サイズが「大」や「中」の上限に設定されているサイズより小さい場合

　
画像をアップロードすると自動的に3つの画像ファイルが作成されますが、
オリジナルの画像のサイズが「大」や「中」よりも小さかった場合は「大」や「中」の画像は作成されません。
例えばオリジナルの画像が1000×1000だった場合には「大」に設定されている上限の値1024pxよりも小さいため「大」の画像は作成されません。(「中」の上限は300×300ですので「中」の方は画像が作成されます。)
　
①例えば900×600のサイズの画像をメディアに新規追加してみます。
　



②アップロード先のディレクトリを見てみると、今度は「サムネイル」と「中」はありますが「大」のサイズの画像がありません。
　



③このように設定されている上限サイズよりも小さいサイズの画像をアップロードした場合には「大」や「中」の画像が作成されません。
　

大/中/サムネイルの上限サイズを変更

　
①自動で作成される画像の上限は決まっていると書きましたが値は変更することができます。
変更した場合には管理画面左側の「設定」メニューの中にある「メディア」メニューをクリックして下さい。
　



②「メディア設定」の画面が表示されます。
　



③「サムネイル」「中」「大」の上限サイズがそれぞれ設定されていますので変更したい場合には新しい値を設定して下さい。
今回は例として「サムネイル」のサイズを100×100、「大」のサイズを500×500に変更してみます。
変更が終わりましたら「変更を保存」ボタンをクリックして下さい。
　



④変更された設定は変更した以降にアップロードされる画像に適用されます。
既にアップロードされた画像が新しく設定したサイズで作り直されるようなことはありません。
　
⑤それでは先ほどアップロードした900×600のメディアをいったん削除してから、改めて900×600のサイズの画像をメディアに新規追加してみます。
　



⑥アップロード先のディレクトリを見てみると、新しく指定したサイズで画像が自動的に生成されていることが確認できます。
　

画像を自動で作成しないように設定

　
①画像をアップロードするたびに「大」「中」「サムネイル」の画像ファイルが自動で作成されていくと、ファイルがどんどん増えていってしまいます。
もし「中」サイズや「大」サイズのファイルを使う機会がないのであれば作成しないようすることも可能です。
　
②作成して欲しくないサイズがある場合は、「メディア設定」の画面にて幅及び高さの上限サイズを0に設定して下さい。
例として「サムネイル」と「大」の上限サイズを0にしてみました。
　



③それでは先ほどアップロードした900×600のメディアをいったん削除し、改めて900×600のサイズの画像をメディアに新規追加してみます。
アップロード先のディレクトリを見てみると、「中」サイズの画像だけが作成されており、「大」と「サムネイル」は作成されていないことが確認できます。
　



④このように自動で作成したくない画像サイズがある場合は、上限サイズを0に設定されてみて下さい。
　

サムネイルを実寸法にトリミングする

　
①自動で作成される画像の中で「大」と「中」についてはオリジナルの画像の幅と高さの比率を維持したままサイズが縮小されて作成されますが、
「サムネイル」はオリジナルの幅と高さの比率と関係無く、指定した上限のサイズに幅と高さを設定してサムネイルを作成します。
(オリジナルの画像を縮小した上で、指定のサイズで一部分を切り抜いて作成されるようです)。
　



②「サムネイル」についても「大」や「中」と同じような方式で画像を作成したい場合には、
「メディア設定」の画面で「サムネイルを実寸法にトリミングする」の箇所に付いているチェックを外して下さい。
　



③変更を保存した後で改めてメディアをアップロードして「サムネイル」画像を作成すると、
オリジナルの幅と高さの比率を維持したままサムネイルの上限サイズになるように縮小された画像が作成されました。
　



④サムネイル画像の使い方に合わせてどちらの方式がいいのか選択されてみて下さい。
　

アップロードした画像を年月のフォルダに分けて格納するかどうか

　
①メディアをアップロードすると、アップロードした年月毎のフォルダに分かれて格納されます。
　



↓



↓



②年月毎のフォルダを使用されたくない場合は、「メディア設定」の画面で「アップロードしたファイルを年月ベースのフォルダに整理」の箇所に付いているチェックを外して下さい。
　



③変更を保存した後でいったんアップロード済のメディアを全て削除します。
その後で改めてメディアをアップロードしてみると、今度は年月毎のフォルダを使用せずに「uploads」フォルダの中にファイルが格納されています。
　



↓



サーバ側のファイル管理などで変更した方が都合がいい場合などには変更されてみて下さい。

WordPressでは画像や動画・音楽などをメディアと呼んでいます。
記事に画像を表示させたい場合などには記事作成時に画像をアップロードすることもできますが、あらかじめ画像などをアップロードしておき、アップロード済のメディア一覧から選択することもできます。
ここでは画像などのメディアをアップロードする方法を解説します。
　
1.メディアのアップロード方法
2.メディアのタイトル/キャプション/説明などを編集
3.メディアの削除
　
※ アップロード先ディレクトリは設定で変更が可能です。設定方法は「画像ファイルの大/中/サムネイルのサイズの設定」をご参照下さい。

メディアのアップロード方法

①画像などのメディアをWordPressにアップロードするには、管理画面にログインし左側メニューの中の「メディア」メニューの中にある「新規追加」メニューをクリックして下さい。
　



②「メディアのアップロード」画面が表示されます。

③画面には「最大アップロードファイルサイズ: 30MB」と表示されており、30MBまでのファイルをアップロードできます。

それではファイルをアップロードしてみます。
いくつか方法がありますが、画像ファイルをドラッグアンドドロップで画面上の点線で囲まれた中にドロップして下さい。
　



④ファイルのアップロードが完了します。
　



⑤また「ファイルを選択」と書かれたリンクをクリックすることでもファイルをアップロードすることができます。
　



⑥ファイル選択ダイアログが表示されますので、アップロードしたファイルを選択し「開く」ボタンをクリックして下さい。
　



⑦ファイルのアップロードが完了します。
　



　

メディアのタイトル/キャプション/説明などを編集

　
①アップロードしたメディアにはファイル名などから自動的にタイトルが設定されています。
タイトルを編集したり、メディアの説明を付け加えるにはアップロード済のメディアの右に表示されている「編集」と書かれたリンクをクリックして下さい。
　



②メディアの編集画面が表示されます。
　






③「タイトル」は自動的に設定されています。
それ以外に「キャプション」「代替テキスト」「説明」などを追加で入力することができます。
　
④またアップロードしたメディアの格納場所が次のように表示されています。
「/wp-content/uploads/」ディレクトリの下にアップロードした日付毎にディレクトリが作成されメディアが格納されています。
　

https://(URL)/wp-content/uploads/2013/12/tori.jpg

　
⑤「タイトル」などを変更した場合には「更新」ボタンをクリックして下さい。メディアの更新が完了します。
　



⑥メディアをアップロードした直後はアップロード画面の下にアップロードしたファイルが表示されていますが、
後からメディアを編集したい場合には左側メニューの中の「メディア」メニューの中にある「ライブラリ」メニューをクリックして下さい。
　



⑦「メディアライブラリ」画面が表示されます。この画面ではアップロード済のメディア一覧が表示されます。
　



⑧編集したいメディアにマウスを合わせて頂くと次のようなメニューが表示されます。
この中から「編集」と書かれたリンクをクリックして下さい。
　



⑨メディアの編集画面が表示されます。この編集画面は先ほどと同じですので、タイトルを変更したり説明を追加したりすることができます。
　



　

メディアの削除

①アップロードしたメディアを削除したい場合には、先ほどと同じく「メディアライブラリ」画面を表示し、削除したいメディアにマウスを合わせて下さい。
次のようなメニューが表示されますので「完全に削除」と書かれたリンクをクリックして下さい。
　



②確認ダイアログが表示されます。削除して宜しければ「OK」ボタンをクリックして下さい。
　



③メディアが削除されました。
　



④メディアの削除ではゴミ箱のようなものはありませんので、削除してしまうと元に戻すことはできません。ご注意下さい。