WordPressにて画像サイズの管理を行う方法(Luxeritasでの設定方法)

小説家のためのブログ運営WordPress, WordPressテーマ

こんばんは、しろもじです。

以前WordPressでのメディア(写真・画像)のアップロードと記事への添付方法を解説しました。

基本的には上記記事の通りでOKなのですが、場合によっては「ブログに載せる画像を大きくしたい(小さくしたい)」という場合もあるかもしれません。

そこで今回はメディアサイズの設定やリサイズの行い方、また(前回はサラッと流してしまったのですが)画像のalt設定についてのお話をしたいと思います。

WordPressにアップロードできるメディアにはjpeg、pngなどの画像データに加えて、動画データ、PDFなどもあるのですが、今回は画像系のみに絞っておきます。

スポンサーリンク

WordPressでの画像サイズの変更方法

まず、WordPressにおける画像データの扱いについて、先に解説しておきます。

WordPressの管理画面(ダッシュボード)を開き、左のサイドバーから「設定」→「メディア」を開いてみましょう。

 

次のような画面が表示されます。

WordPressではアップロードした画像に対して、デフォルトでこの3つの画像が自動的に生成されるようになっています。

つまりアップロードした画像に加えて更に3つの画像が作られ、計4つの画像がサーバに保存されるというわけです。

「いや、1個でいいよ」と言いたくなりますが(笑)、これはWordPressの仕組みの問題でリアルタイムに画像をリサイズするのではなく、予め用意していくとなっていますのでしょうがないところです。

 

上記の画像のように「サムネイル」「中」「大」と3つの画像は、投稿時にその中からどれを選ぶか選択することができます(後述)。

またサイズを変更することにより、それ以降にアップロードされた画像の大きさを変更することもできます。

例えば「中サイズはもう少し大きい方が良いんだよなぁ」という場合には、300(px)となっているところの数字を上げてやれば良いというわけですね。

Luxeritasで簡単にサイズ設定・リサイズを行う

WordPressテーマでLuxeritasを使っている場合、上記の以外に任意の画像サイズを設定することができます。

WordPress管理画面から「Luxeritas」→「管理機能」をクリックしてみましょう。

 

Luxeritas管理機能の画面に移行します。

上にいくつかあるタブから「サムネイル管理」を選びます。

ここの一覧でチェックの付いているものが、アップロード時に作成されるものになります。

上部のグレーアウトしているものはWordPress自体で設定されているものなので、ここでは設定できないようになっています。

不要なものをチェックから外すことでサーバのストレージの節約になりますね。

ただし、一部のサムネイルなどはサイドバーなどの「新着記事」「人気記事」などに使われていることもありますので、その辺りは注意しましょう。

 

と言っても、そこまで画像をバンバンアップロードしない場合は、あまり気にしなくてもいいかと思います。

ここTEXT FIELDでは、約1年間で現在530記事程度がアップロードされており、サーバの使用ストレージは1GB程度となっています。

mixhostなどでしたらスタンダードプランでも150GBのストレージをなっています(この前アップグレードしたばかりですね)。

単純計算でも150年分……ですから(笑)。

一応前提として「EWWWww Image Optimizer」というプラグインを入れて画像の圧縮を行っています。

 

Luxeritasのおすすめプラグインなので、安心して使える画像圧縮のプラグインかと思います。

プラグインの詳細は以下の記事をどうぞ。

 

またLuxeritasではアップロード済みの画像を再構成する機能も付いています。

同じページの「サムネイル再作成」のタブをクリックすると、その機能を利用することができます。

これは「サムネイル管理」にて設定した(チェックを入れた)ものに再作成されるというものです。

「サムネイル管理」で必要なものにチェックを入れて、このタブの「再作成開始」を押すとサーバ内の画像が再作成されます。

注意点として上にも書かれていますが、サーバに負荷がかかります。

そのため「何度も連続で行わないこと」「サーバアクセスの少ない時間帯に行うこと」などが必要です。

ブログ記事に画像を挿入する際の補足

前回の「WordPressで記事内にメディアを追加する方法」の補足として「記事に添付する画像の大きさの変え方」と「altの設定方法」を書いておきます。

 

記事内で「メディアを追加」をクリックすると、メディアの一覧が表示され右側に選択したメディアの詳細が表示されます。

 

まず添付するメディアの設定を見ていきましょう。

配置」とはメディアをどのように配置するかのことで「右」「左」「中央」から選ぶことができます。

やってみましょう。

「なし」もしくは「左」を選ぶと次のように表示されます。

「中央」を選ぶとこのように。

「右」を選ぶとこうなります。

 

 

 

 

スマホなどでは少し見えにくいかもしれませんが、要は水平方向に「左」「中央」「右」に配置が変わるということですね。

ちなみに「なし」と「左」の違いは「画像の右側にテキストを回り込ませるか」の違いになります。

「なし」では回り込みはありませんが、「左」では画像の右側にテキストを表示させることができます。

通常は「なし」で良いと思います。

 

リンク先」とは投稿したあと、画像をクリックした際にどのようになるのかの設定です。

「メディアファイル」では画像が別タブ、もしくはポップアップして表示されます。

「添付ファイルのページ」では、画像の場合は変わりません。別タブで画像が表示されるはずです。他のメディアの場合では、そのメディアのURLが直接開かれることになります。

「カスタムURL」では別途URL(アドレス)を設定することができます。画像をクリックすると任意のページに移動することができるというわけですね。

 

サイズ」は画像をブログに表示させる大きさの設定になります。

「フルサイズ」ではアップロードしたサイズになってしまいますので少し大きい場合は、ここで調整しておきましょう。

上で設定したものがプルダウンリストで選べます。

またこれらの設定は「画像を添付時」に変更すると、次の画像の添付の際に同じ設定となります。

「画像を添付後」に変更した場合はそうなりません。

「alt」設定について

alt設定とは「画像がどういうものであるのかを、文字で説明する」というものになります。

考えてみれば当たり前の話なのですが、googleなどの検索エンジンでは画像がどういったものなのかを理解することはできません(現在のAIではある程度の判断はできるようになっているそうですが、それでも完璧ではないようです)。

 

googleをよくお使いの方ならご存知だと思いますが、検索結果で「画像」を選ぶことができますよね。

この際ブログなどにアップロードされた画像が何を指し示しているのかを、テキストで判断するわけです。

画像に「Amazon」と入っていれば、googleは「これはAmazon関連の画像なんだな」と分かりますし「Amazon Echo」となっていればそう理解することができます。

 

このテキストをaltといい、WordPressでは「代替テキスト」となっています。

先程の「添付ファイルの詳細」をもう一度見てみましょう。

真ん中くらいに「代替テキスト」がありますね。

ここに「検索して欲しい語句」を入れておくことで、検索エンジンに引っかかりやすくなるとともに、万が一画像が表示されない場合には、そのテキストが変わりに表示されるようになります。

 

全ての画像に設定する必要はありませんが、検索して欲しいなぁと言う場合には入れておきましょう。

また「キャプション」も似ていますが、こちらは画像の補足テキストになります。

 

こんな感じで画像の下にテキストが追加されます。

上のように画像の補足をしたり、コピーライト(著作権表記)などを記載することが一般的です。

 

タイトル」はそのまま画像のタイトルになります。

ここを適切な言葉にしておくことで、メディアの挿入時に検索できるようになります。

(例としては「Echo」「Echo Dot」などと付けておくことで、検索欄に「Echo」と入れればそれらが全て表示されるように鳴り、後日の使いまわし時に便利というわけです)

 

説明」はメモ的なものです。

あくまでも自分が理解するために入力する項目なので、無視しても構いません。

 

以上が簡単ではありますがWordPresssにおけるメディアサイズの管理になります。

特にコダワリがなければデフォルトの運用でもOKですし、Luxeritasの場合はリサイズも可能ですから、そこまで神経質にならなくても良いかな、とは思います。

 

ただ、alt設定(代替テキスト)は大切なので、できるだけ行うようにしておきましょうね(私はサボりがち)。