上下に帯

いつの頃からかは忘れましたが当ＨＰの写真は上下に帯があります。

まあ上下というのは横写真の場合なんですが、縦写真の場合には左右に黒の帯が入ります。

理由を説明する前に当ＨＰの写真入れ替え手順を説明すると・・・

【1】デジタルカメラからＰＣへ写真を移動

【2】ＲＡＷ現像

【3】ＰａｉｎｔＳｈｏｐでナンバー処理等

【4】写真の大きさをＨＰ用に縮小

【5】ファイル名をＨＰ用に変更

【6】ＦＴＰｅｘｐで写真をアップロード

以上の工程です。

ここで疑問？

ＨＰ作成ソフト等でＨＰを作成したことある人ならわかるかナ？

【5】と【6】の間に”ｈｔｍｌファイルの作成”というものが必要になりますね。

写真をＨＰの上に貼り付けるような作業です。

これがわりと面倒くさい。

写真の枚数分必要となりますからね～。

基本構造はｈｔｍｌファイルに○×．ｊｐｇという画像を貼り付けるという命令があるだけ。

だから、違う写真ファイルを同じファイル名でＨＰ上に上書きすれば入れ替えることも可能です。

で、ここからが本題。

ＨＰ用のｈｔｍｌファイルを作るのがわりと手間　→　この作業を省きたいということです。

考えたのが写真ファイルのみの上書きという手法。

まず、ＨＰの写真をそのまま上書きしてみましょう。

【例】

　先月アップした　哥麿会の写真　＝　p01～p50.jpg

　今回アップした　遊楽会の写真　＝　p01～p50.jpg

　そのまんまＦＴＰｅｘｐでサーバ上にアップロードします。

　ｗｉｎｄｏｗｓでいうとフォルダに写真をコピーする感覚でアップロードできます。

　見事に画像だけ入れ替わりました。

　そりゃあそうですよねｈｔｍｌファイルには”p01.jpgを表示しなさい”という命令文がそのまま残っているのですから。

ここで問題発生！！

前回（哥麿会）のp01.jpgは横写真で、今回（遊楽会）のp01.jpgは縦写真です。
その結果、横に大きく引き伸ばされた縦写真が掲載されてしまいました。

ｈｔｍｌには”横１２４０ｄｏｔで表示しなさい”と書いてあるのにアップロードしたファイルは縦が１２４０ｄｏｔ。

当然の結果です。

写真の縦横比が６：４とか４：３なのでこのような問題が起こるのです。

だから１：１にしてしまえばいい。

正方形です。

デジタルカメラで撮影した写真は縦横比６：４が多いので、まずは左右を切り落として４：４＝１：１にしてみましょう・・・・。

うーん、個性的ですが違和感抜群！

次は６：６。

上下に背景と同色の余白を足してみます。

ＨＰの画面が少しおかしくなりましたけど先ほどよりマシ。

この方法で行くことにしました。

ＨＰ上の画像配置スペースを全て１２４０×１２４０ｄｏｔに修正し、画像は横写真なら上下に余白、縦写真なら左右に余白を入れます。

そして一気にＦＴＰｅｘｐでアップロード。

これで完成です。

次回からは画像ファイルのみをこのサイズで作成すればページ自体は何度でも使えるという仕組みです。

たまにｙａｈｏｏブログやｆａｃｅｂｏｏｋに上下、または左右黒余白の画像がアップされるのはＨＰ用の画像を流用しているため。

全ては管理者のめんどくさがりから始まったのです。