上下に帯
いつの頃からかは忘れましたが当HPの写真は上下に帯があります。
まあ上下というのは横写真の場合なんですが、縦写真の場合には左右に黒の帯が入ります。
理由を説明する前に当HPの写真入れ替え手順を説明すると・・・
【1】デジタルカメラからPCへ写真を移動
【2】RAW現像
【3】PaintShopでナンバー処理等
【4】写真の大きさをHP用に縮小
【5】ファイル名をHP用に変更
【6】FTPexpで写真をアップロード
以上の工程です。
ここで疑問?
HP作成ソフト等でHPを作成したことある人ならわかるかナ?
【5】と【6】の間に”htmlファイルの作成”というものが必要になりますね。
写真をHPの上に貼り付けるような作業です。
これがわりと面倒くさい。
写真の枚数分必要となりますからね~。
基本構造はhtmlファイルに○×.jpgという画像を貼り付けるという命令があるだけ。
だから、違う写真ファイルを同じファイル名でHP上に上書きすれば入れ替えることも可能です。
で、ここからが本題。
HP用のhtmlファイルを作るのがわりと手間 → この作業を省きたいということです。
考えたのが写真ファイルのみの上書きという手法。
まず、HPの写真をそのまま上書きしてみましょう。
【例】
先月アップした 哥麿会の写真 = p01~p50.jpg
今回アップした 遊楽会の写真 = p01~p50.jpg
そのまんまFTPexpでサーバ上にアップロードします。
windowsでいうとフォルダに写真をコピーする感覚でアップロードできます。
見事に画像だけ入れ替わりました。
そりゃあそうですよねhtmlファイルには”p01.jpgを表示しなさい”という命令文がそのまま残っているのですから。
ここで問題発生!!
前回(哥麿会)のp01.jpgは横写真で、今回(遊楽会)のp01.jpgは縦写真です。
その結果、横に大きく引き伸ばされた縦写真が掲載されてしまいました。
その結果、横に大きく引き伸ばされた縦写真が掲載されてしまいました。
htmlには”横1240dotで表示しなさい”と書いてあるのにアップロードしたファイルは縦が1240dot。
当然の結果です。
写真の縦横比が6:4とか4:3なのでこのような問題が起こるのです。
だから1:1にしてしまえばいい。
正方形です。
うーん、個性的ですが違和感抜群!
次は6:6。
上下に背景と同色の余白を足してみます。
HPの画面が少しおかしくなりましたけど先ほどよりマシ。
この方法で行くことにしました。
HP上の画像配置スペースを全て1240×1240dotに修正し、画像は横写真なら上下に余白、縦写真なら左右に余白を入れます。
そして一気にFTPexpでアップロード。
これで完成です。
次回からは画像ファイルのみをこのサイズで作成すればページ自体は何度でも使えるという仕組みです。
たまにyahooブログやfacebookに上下、または左右黒余白の画像がアップされるのはHP用の画像を流用しているため。
全ては管理者のめんどくさがりから始まったのです。