beikunのブログ

日々感じた事を綴っていきます。偶然を楽しもう!

ブログアイコンが横になる件と解決方法

ブログアイコン

を設定することにしました。

この写真を使います。

f:id:beikun:20190104070230j:image

旅先で撮った自分の影です。

基本設定の中にあるブログアイコンの写真をアップロードしました。

なぜか横になる

ところが、何度やっても横になるんです。

小さくて見にくいかもしれませんが、こんな感じです。

反時計回りで回転されています。

f:id:beikun:20190104071822j:image

元々何だかよく分からない写真を使っているのに、横になったら益々分からない写真になってしまっています。

とりあえず、加工してアップしてみる事にしました。

逆に回転させる

最初にやったのは、反時計回りに回転される事を考慮して、時計回りに回転させる事です。

こんな感じです。

f:id:beikun:20190104073934j:image

しかし、結果はこうなりました。

f:id:beikun:20190104080438j:image

そのままアップされてるじゃん…

四角く切ってみる

今度は少し四角く切ってみます。

こんな感じです。

f:id:beikun:20190104074624j:image

かなり分かりにくいと思いますが、伸びた足が少し短くなってます。

結果は…

f:id:beikun:20190104080706j:image

上手くいきました!

なぜ、回転されるのか?

とりあえず、ある程度問題ない感じで、画像登録できましたが、根本的な解決になっていません。

そこで、理由を調べてみました。

結論から言うと、写真のExif情報が影響しているとの事。

参考サイト:iPhoneの写真が勝手に回転している事に悩まされた話(解決できました) - Kumi-Log 海外ノマド放浪5年め

なぜExif情報で回転されるのか?

Exifの「Orientation情報」が影響するようです。

iPhoneで撮影した写真には内部的には傾いた状態になっており、傾きはEXIFのOrientation情報として保存されます。ブラウザによってこのEXIFのOrientation情報を反映するか無視するかで対応がまちまちです。

(出典:iPhoneからアップロードしたJPEG写真が横向きになる問題(EXIF, Orientation) - Qiita)

実際に回転してしまう写真のExif情報を確認してみました。

iPhoneでのExifオリエンテーション確認方法

写真アプリだけでは確認できないみたいです。

そのため、確認可能なアプリをダウンロードします。

こちらのサイトiPhoneの写真アプリで写真/画像の「Exif情報」を表示・確認する方法 | iPhone Waveを参考に、下記のアプリをダウンロードしました。

f:id:beikun:20190104124935j:image

確認手順は、以下の通りです。

①アプリを起動(写真へのアクセスを許可)し、対象の写真を開き、メタデータをタップします。

f:id:beikun:20190104205320j:image

②すべて表示をタップします。

f:id:beikun:20190104205626j:image

オリエンテーションの部分の数字を確認します。

f:id:beikun:20190104210106j:image

④該当ファイルのオリエンテーションは「6」でした。

オリエンテーションの数字の意味は?

オリエンテーションの数字を確認しても、意味がわからないですよね。

1から8まで、次のようなイメージになります。

f:id:beikun:20190104212619j:image

(出典:JPEG Exif Orientation の操作 - awm-Tech)

つまり6は90度反時計回りした状態の画像です。

f:id:beikun:20190104212726j:image

Exif情報が正しく解釈されると、1の位置になるそうです。

逆にいうと、正しく解釈されない為に、ブログアイコンが反時計回りになっていた訳です。

まとめ

とりあえず、画像設定できましたし、回転する理由が判明して良かったです。

ただし、調べている中で、わかったのですが、Exifの位置情報が残ったままだと撮影場所が特定されたりする場合があるみたいです。

でも、はてなブログは自動で削除されるみたいなので安心しました。

動画配信ならTSUTAYA TV!

まずは15日間【無料】お試し利用から!大容量200GB~レンタルサーバー『HETEML