カテゴリー別アーカイブ: blog

[kz] スマホで見ると縦長になってしまう写真を直す

こんにちは、@kazscapeです。

ブログを書くのは「Marsedit」というアプリを使用しています。

Flickrに保存した写真をドラッグアンドドロップでブログに貼り付けられるところがとても楽です。

でも、一つだけ難点がありました。

スマホだと写真が縦長

PCで写真を見る時はいいのだけれど、スマホの小さい画面で見ると、縦幅が長くなってしまって、どうにも間延びした写真になってしまうのが許せないんです。

どうやら写真を貼り付けたときに自動で生成してくれるHTMLの”height(高さ)”の記述がよろしくないようだ。

いつもは縦長になってしまった投稿を見つけるや、この”height”の記述を削除する手作業を行っていたのですが、どうにも許せない、面倒くさい。

ということで、調べました。

ブログに貼り付ける写真は、長すぎる場合は横幅500で統一するようにしているのですが、縦幅は横幅500に見合う比率の数値が”height”に設定されているので、スマホで見るとバランスが崩れているようです。

でも元の写真の比率があるのだから、スマホの画面で表示した場合にはそれに見合う縦幅にしてくれりゃいいじゃないの。

で、「お任せ縦幅」な記述はないものかと調べたらありました!

縦幅を“auto”にすりゃいいようです。

貼り付けと同時にautoに

heightをautoにすればいいことはわかりました。

では、Marseditで写真を貼り付けたら自動でheightをautoにする方法は?

答えはこうでした!

Marseditのメニューから[Window]-[Upload Utility]を選択します。

marsedit-image-height001

適当に写真を[Choose file…]で選択します。

marsedit-image-height002

左側にあるStyleのプルダウンから[Customize…]を選択します。

marsedit-image-height003

[+]ボタンで新しいTemplateを作ります。

marsedit-image-height004

これがTemplateの入力画面です。

marsedit-image-height005

新しいTempleteを入力しました。

marsedit-image-height006

Nameには私のブログ用ということで、ブログの名前のkazscapeにしました。

Opening Markupはこんな感じにしました。

<img src="#fileurl#" width="#imgwidth#" height="auto" border="0"  title="#displayname#" alt="#alttext#" /></a>

貼り付けられた写真のHTMLを比較すると、こちらが以前までのもの。

marsedit-image-height009

height=”434″という記述が途中にありますね。

こちらが新しいTemplateでの写真の貼り付け結果。

marsedit-image-height010

記述される場所が変わっていますが、height=”auto”になってるのわかりますか?

結果とまとめ

ここまでで、Marseditで写真を貼り付ける際に縦幅は写真の縦横の比率で設定してくれるようにしました。

さて、結果を見てみましょう。

あえて、以前の設定で貼り付けた写真がこちら。

kindle-mac006

そしてこちらが新しい設定で貼り付けた写真。

kindle-mac006

PCで見る分には違いはないのですが、スマホで見るとこうなります。

marsedit-image-height-iphone-1

一画面で収まらなかったので、こちらが縦幅が正しい方。

marsedit-image-height-iphone-2

縦幅おかしいでしょ。

多分スタイルシートとかでもっとスマートにやる方法もあるのだろうけど、まだまだ知識が追いつかないので今回はこのやり方で楽にしておきました。

ではっ!