記事一覧

ブログに投稿した縦の写真が横に表示されてしまうなどという時に正しく表示してくれるプラグインです。

例えば、本当は次のように表示したいんだとします。

それが下のようになってしまう時に修正します。

本当は写真をアップロードする時に、タテヨコの情報を直しておくのが一番いいんですが、それができない時にお使いください。

ただ、画像のタテヨコが変わるという事は近くの文字を隠してしまう可能性もあります。それはブログの本文を修正するしかありません。ご了承ください。

変換前

変換後

画像アップロード従来の機能でも向きを修正できます

ファンブログにアップロードした画像は、ブログ掲載前に向きを直せます。このプラグインを使う前に、それで直すことを先に検討してください。

2014年5月2日追記：
ファンブログでは、すでに一部の写真の向きを手動修正している場合、このプラグインは使えません。90度修正済みの写真の向きまで更に90度補正してしまいます。（Seesaa Blogなど、ファンブログ以外のブログでは使えます。）理由と詳細は次のページをご覧ください。「ファンブログで向きを修正した写真のExif、Orientation情報は変更されずに残っているみたいな話」

具体的には次のようにします。

画像を選択する画面で、画像の下に90°と書かれた丸矢印とゴミ箱があります。

この90°と書かれた丸矢印を一回クリックする毎に時計回転で90度、画像の向きが変わります。

更に詳しい説明は別記事で。
「Seesaaブログやファンブログでの画像の向きや大きさなどの設定方法」

これで画像の向きは修正できますので、このページのプラグインは、すでに公開してしまった画像が大量にあって修正しきれないという場合以外のご使用はお勧めしません。

このプラグインについて

このプラグインを設置しても表示が修正されるのは、自分のブログにアップロードした画像だけです。自分のブログ以外からリンクしている画像の表示は修正されません。

それから、このスクリプトは設置方法を簡単にするために画面を全部読み終わってから作動させています。そのため画面の表示直後のタテヨコはおかしなままです。しばらくしてから正しい配置になります。

どういうことかというと、「必ずここに設置」してくださいというような説明をしても出来ない人がいるので、そうならないように簡単に設置できる変わりに作動が遅くなるようにしています。

また、今回のプラグインはhttps://github.com/jseidelin/exif-jsで公開されているexif.jsというライブラリを使っています。ライセンスはMIT Licenseです。本来、他者の作成されたライブラリを使う場合は、そのライブラリを配布サイトから各自がダウンロードするべきなんですが、そうすると設置方法がわからないという方がいますので、このブログにアップロードしたものにリンクして使ってもらいます。MIT Licenseなので、それでも問題ないでしょう。

The MIT License (MIT)

Copyright (c) 2008 Jacob Seidelin

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

プラグインの設置方法

次の青い背景の部分をコピーして別のページに説明してある方法で設置してください。

パソコン用テンプレートへの設置方法「プラグインの設置方法」
スマホ用テンプレートへの設置方法「スマホ版プラグインの設置方法」

<script src="https://fanblogs.jp/techs/file/exif.js"></script>
<script src="https://fanblogs.jp/techs/file/imagerotate.js"></script>

なぜタテヨコの表示がおかしくなるのか？

画像ファイルには画像そのものだけでなく、画像のサイズなどのいろいろな情報が含まれています。写真を投稿した際にその写真が縦なのか横なのかという情報もあります。そのデータを見て、それに合わせて表示を直しています。

それに関しては、次のページの説明がとてもわかりやすいです。
ブログに写真を投稿したら、向きが変わる時の対処法 | ヒーリングソリューションズ