目次

はじめに

ブログ写真掲載の際に基本的なことを知っておかないと、数十記事も溜まってから画像のトラブルが起きると大変です。

先日、画像のトラブルが発生し、自分の力量では処理できなかったので、トラブルの回復を業者の方にお願いして直してもらいました。

基本的な操作をしなかったことが原因と反省して画像設定の仕組みについて基本的なことを勉強することにしました。

参考にしていただければ嬉しいです。

画像設定(この場合はサイズ設定の意味)に必要な基本知識

公開された記事の記事欄と画像の各最大幅を抑えておく必要があります。

ミラーレスカメラ(EOSM100)を使用した画像の場合

画像比率       : 0・667(幅:高さ)一定

公開時の画像サイズ  : 698✕466Px(最大幅)

オリジナル画像サイズ : 6000✕4000Px(最大サイズを試験的に使用)


Iphone6sを使用した画像の場合

画像比率       : 0・75(幅:高さ)一定

公開時の画像サイズ  : 698✕524Px(最大幅)

オリジナル画像サイズ : 4032✕3024Px等(最大サイズを試験的に使用)


(最大幅以上の画像はテンプレートによって設定出来ません。)


公開記事の記事幅

公開記事の記事幅は780Px、テンプレートによるもので画像はこれより小さく設定されます。

公開記事の幅

(この画像は「Page Ruler Redux」の確認画像なので実画像より縮小表示されています。)


「サイズ」ボックスで指定したサイズの公開記事の画像サイズ

大サイズの1024✕683Pxの画像を指定したが公開記事の画像は698✕466Pxです。

自動でテンプレートにより縮小されているという意味になります。

(この画像は「View Image Info」の確認画像なので実画像より縮小表示されています。)


使用したサイズ計測器(Chrome拡張機能)

Page Ruler Redux

View Image Info

管理画面>設定>メディアで設定されている画像サイズ(デフォルト)を確認します。

・ 通常はデフォルトでサムネイル、中サイズ、大サイズの3種類が設定されています。

・ 各サイズの幅と高さの最大値が決められています。

・ オリジナル画像の幅と高さの大きい方を基準に、画像比率によって「添付ファイルの表示設定」の3種類のサイズが決まります。

メディア設定画面

「添付ファイルの表示設定」の「サイズ」欄で選択できる4種類を確認します。

・ 画像をアップロードするとオリジナルサイズ(フルサイズ)を含め、4種類のサイズが作られます。

・ これはメディアで設定されているサイズに基づいたもので、オリジナル画像の画像比率によって幅か高さのどちらかの最大値が変わります

・ 上記画像では、6000✕4000Px(画像比率≒0.66)の大きな画像をそのままオリジナルとして使用してみましたが、メディア設定3種類のサイズは比率変換されて表示されています。

サイズ欄

「サイズ」ボックスで記事に掲載する画像を指定するわけですが、使用頻度の多い画像比率を考慮し事前にメディアのサイズ設定をしておくことが大切です。

・ 4種類の画像のうち、幅が698Px以上の画像を指定(通常大サイズかフルサイズ)すると、公開記事の画像の幅は698Pxになり高さはオリジナル画像の比率で自動的に決まります。

・ どんなに大きな画像をオリジナルとして使用しても公開記事の画像サイズは変わらず、4種類とも保存するサーバーの負担になってきますので考慮事項の一つと思います。

・ 私の結論は、メディアの大サイズの設定を幅660高さ660に設定です。

追記2019.03.11

当初、上記の「メディア大サイズの設定」を高さ「495」にしていましたが、縦画像を考慮してなかったので「660」に変更しました。ご迷惑おかけしました。

公開時の画像の最大幅698Pxに余裕をもたせ660Pxを選びました。

メディア設定の変更

大サイズの幅の上限660Pxはミラーレス(EOSM100)とIphone6sに共通で、高さの上限も縦画像の条件を満たす660Pxに設定します。

メディアの設定

ミラーレス(EOSM100)「添付ファイルの表示設定」

添付ファイルの表示設定

公開時のサイズ

公開時のサイズ

(この画像は「Page Ruler Redux」の確認画像なので実画像より縮小表示されています。)

Iphone6s「添付ファイルの表示設定」

添付ファイルの表示設定

公開時のサイズ

公開時のサイズ

(この画像は「Page Ruler Redux」の確認画像なので実画像より縮小表示されています。)

その他の基本知識

リンク先の設定

画像をアップロードするとリンク先を指定出来ます。

各画像をクリックしてみてください。設定された表示をします。

リンク先の設定

リンク先「なし」を選択

「なし」を選択した場合は単に画像だけが挿入され、公開記事の画像をクリックしても変化ありません。

リンク先「メディアファイル」を選択

「メディアファイル」を選択した場合は、公開記事の画像をクリックするとオリジナル画像を表示します。

リンク先「添付ファイル」を選択

「添付ファイル」を選択した場合は、公開記事の画像をクリックすると記事の中に画像だけのページが表示されます。

リンク先「カスタムURL」を選択

「カスタムURL」を選択した場合は、テキストボックスの中にURLを挿入して公開記事の画像をクリックすると、リンクしたURLに移動します。

今回は「Yahoo」の画面にリンクします。

画像の配置位置の設定

「メディアファイルの表示設定」の「配置」からアップロードする画像の位置を設定します。

画像配置位置の設定

配置を「左」に設定した場合


配置を「左」に設定すると、画像は左側に寄り、続いて文字を挿入した場合、文字は右側に回り込んで表示されます。






配置を「中央」に設定した場合


配置を「中央」に設定すると、画像は中央に寄り、続いて文字を挿入した場合、文字はどちら側にも回り込まず、通常の行を表示します。



配置を「右」に設定した場合


配置を「右」に設定すると、画像は右側に寄り、続いて文字を挿入した場合、文字は左側に回り込んで表示されます。






配置を「なし」に設定した場合


画像は左側に寄り、続いて挿入した文字はどちら側にも回り込まず、通常の行を表示します。

記事に挿入した画像を修正する方法

画像挿入後に修正が必要な場合、画像をクリックすると、ツールボタンが表示されます。

画像修正

「編集ボタン」をクリックすると「画像詳細」画面が表示され、詳細な編集が可能です。

画像詳細画面

まとめ

私は、画像の取扱での失敗が多いのですが、とりあえずの小手先の修正で何とかその場をしのいでいました。 最近は小手先の修正では対応できなくなり「チョット勉強が必要」と重い腰をあげました。

冒頭で述べましたように経験値からの私的解釈もあるのでご理解くださいませ。 長くなりましたが、参考にしていただければうれしいです。