「画像と動画の設定とプラグイン」の記事一覧

Seesaaブログやファンブログでの画像の向きや大きさなどの設定方法

別のページで ブログの写真のタテヨコがおかしく表示されてしまう時のプラグイン というのを公開していますが、そもそもブログに写真を投稿する時にちゃんと設定すればいいのに、していないのはもしかしてやり方がわからないんじゃないか?という事で、Seesaa Blogやファンブログでの画像設定方法をまとめます。

ブログによっては自動で向きを正してくれるようですが、Seesaa Blogやファンブログではしてくれません。でも、考えようによっては、その写真が縦に見ても横に見ても通用する時は自分で向きを変えられるのは便利でもあります。

Seesaa Blogでの画像設定

先にSeesaa Blogでの方法をまとめます。

記事を書くページの本文の下に「ファイルのアップロード」という場所があるのでそこを見ます。

ファイルのアップロード

もし赤い+印になっていたら、その+印をクリックすると画面が開きます。そこで「クリック、もしくはここにファイルをドロップ」と書かれた所に画像のアイコンを乗せると自動でアップロードされます。

ファイルのアップロード画面

画像の配置がうまく出来なくてこのページを読まれているのであれば、恐らくここまではご存知だと思います。

アップロードされた画像の一覧

アップロードされた一覧の中の画像を押すと、その画像が記事本文に挿入されますが、向きや大きさを変えたい場合は画像ではなく、その下に小さく書かれた「 編集」を押します。

「編集」をクリック

すると次の画面が浮かび上がるので、そこで向きや大きさの設定が出来ます。

画像設定のポップアップ画面

画像の向きの修正

画像の向きは「 画像の回転」という項目で設定出来ます。

画像の回転

これで好きな向きへ変更するように選択しますが、それだけでは画像の向きは変わりません。向きを決めた後で「 保存」ボタンを押します。

「保存」ボタンを押して、はじめて画像の向きが変更されます。

「保存」を押すと向きが変わる

後は「 挿入」を押すと浮かび上がっていた画面が消えて元の状態に戻り、先ほどの画像が本文中に挿入されています。

画像の向きだけでなく大きさや場所を変えるには「挿入」ボタンを押す前に更に設定します。

画像の大きさの変更

画像の大きさを変えるには「貼り付け」欄にある「 サムネイルを表示」に印が付いている必要があります。この印が外れていると、アップロードした画像そのままのサイズでブログに表示されます。表示させたい大きさに調整済みの画像をアップロードしている場合は「サムネイルを表示」の印を外してください。

サムネイルを表示

アップロードした画像と違うサイズにする場合は「サムネイルを表示」の印をつけたままで「 サムネイル長辺のpx数」を指定します。縦長の場合は縦の長さを、横長の場合は横の長さをピクセル単位で指定すれば縦横の残った方のサイズは自動で決めてくれます。

サイズの指定は「保存」ボタンを押す必要はないようです。そのまま「貼り付け」を押せば本文に反映されます。

ピクセルで指定と言ってもイメージが沸かない。という場合は、とりあえず記事に挿入してプレビューしてみるです。

YouTubeのサイズ設定方法やスタイルシートの書き方は下でリンクしているページを参考になさってください。

関連ページ:

表示場所(左、真ん中、右)の設定

左、真ん中、右の表示場所指定は「 配置指定」で行ないます。

配置指定

これも「保存」ボタンを押す必要はなく「貼り付け」を押せば本文に反映されます。

ファンブログでの画像設定

ファンブログもベースはSeesaa Blogなので基本は同じですが、割と違います。

本文編集画面から画像をアップロードしたり、挿入したりするには本文を書いている上のボタン一覧でYouTubeのひとつ左を押します。

ファンブログ管理画面

すると次の画面が浮かび上がります。画像のアップロードは左側の「 アップロードしたいファイルを選択」の下の枠内に画像のアイコンを置けば自動でやってくれます。

画像挿入ポップアップ

アップロードされた画像は、その右側に一覧表示されています。その画像部分を押せば記事本文に挿入されます。

しかし、そのままでは浮かび上がった画面が消えないので、右上の「 閉じる」を押して、本文編集画面に戻ってください。

画像の向きの設定

この時、画像の向きや大きさを編集するには画像ではなく、画像の下の「 90°と書かれた丸矢印」を押します。恐らく、ここに気づかないために向きを直せない方がいるのではないかと思います。

90°の丸矢印

この時「90°と書かれた丸矢印」を押しても画面が変わらないように感じるかも知れませんが、よく見ると押した上の画像が時計回りに90度回っています。

90°の丸矢印90°の丸矢印

もうこの時点で画像の向きは保存されているので、画像を押せば修正された向きで本文に挿入されます。

ファンブログの場合、画像のサンプル表示が小さいので、アップロードした時点でどっちを向いているのかわからないと何回時計回りさせればいいのかわからないで「今、何時デェ?」状態になると思います。その場合は、仕方が無いので一度そのまま本文に挿入してプレビューするのがいいと思います。プレビューして向きが違うなら、その部分の本文を消してやり直すしかないでしょう。 90°の丸矢印ボタンは画像画面を一度閉じてから、また開き直した後でも編集しなおせます。

画像の大きさの設定

大きさの設定は右側の「 ファイル一覧」と書かれた文字の下にある「 サムネイルで表示」の印をつけるか外すかの設定しか出来ないみたいです。

ファイル一覧

印がある状態だと画面に収まる小さめのサイズで表示されます。縦長なら縦が、横長なら横が、恐らく320ピクセル程度ではないかと思います。

もっと大きく表示させたい場合は、「サムネイルで表示」の印を消せば、画像本来の大きさで表示されます。

大きさを指定するには本文の中で<img>タグに自分でサイズを書かなくてはなりません。HTMLやスタイルシートはよくわからないけど、画面からはみ出さない状態で大きくしたいという方は別ページ「 大きな画像が枠から絶対はみ出さないスタイルシートの設定 」をお試しください。

また、静止画像ではなくYouTube動画のサイズ変更の場合は「 YouTubeをはみ出させずにサイズを自動調整するプラグイン 」をご覧ください。

表示場所の設定

表示場所の設定は「 配置指定」と書かれたところで行ないます。

配置指定

ここに書かれている「左回り込み」と「左寄せ」がどう違うのかというと、下のような感じです。

「回り込み」は画像の横に文章が来ますが、「寄せ」の場合は文章を置けません。

回りこみと寄せの違い

ファンブログの配置指定方法はもうひとつあります。左側の下にある「 レイアウト画面へ」と書かれたボタンを押すと画面が変わります。

もうひとつのレイアウト画面

ただ、項目はこちらの方が少なく、前の画面で同じ事が出来ます。

レイアウト画面

レイアウト画面に変わるとファイルのアップロードができなくなるので、アップロード画面に戻るには下にある「 アップロード画面へ戻る」ボタンを押します。

または右上の「 閉じる」ボタンを押せば、本文記入画面に戻れます。

ブログの写真のタテヨコがおかしく表示されてしまう時のプラグイン

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

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

ふなっしー
ふなっしーふなっしー

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

ふなっしー
ふなっしー横向きふなっしー

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

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

変換前
変換前
変換後
変換後

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

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

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

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

画像挿入画面3

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

画像挿入画面2

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

画像挿入画面1

更に詳しい説明は別記事で。
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>

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

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

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

YouTubeをはみ出させずにサイズを自動調整するプラグイン

YouTube

ファンブログにYouTubeを貼りつけて、スマホで見てもパソコンで見ても、はみ出さず、常に横幅いっぱいに表示させるプラグインです。

これは Seesaa Blog では、動作確認していません。この記事の通りにやっても、うまくサイズが変わらなければ教えてください。

このブログはレスポンシブ(可変)に作ってあるので、パソコンでご覧でしたらブラウザのサイズを変えると、下のYouTube動画のサイズが自動で変わるのが確認できると思います。

サイズ変更に関連するページ:

プラグインの設置方法

[注意] このプラグインは、この後説明する方法でYouTubeを貼りつけている場合のみ、サイズを自動調整します。

下のソースコードをPC用テンプレートと、スマホ用テンプレートの両方に設置します。スマホ用のテンプレートに設置するのを忘れると、スマホでの動画は、はみ出したままになります。

ソースコード

<script type="text/javascript" src="https://fanblogs.jp/techs/file/youtube.js"></script>

パソコン用テンプレートへの設置方法は、別の記事「 プラグインの設置方法 」をご覧ください。

スマホ用テンプレートへの設置方法は「 スマホ版プラグインの設置方法 」に書いてあります。

プラグインの設置が終わったら、YouTube動画を記事に挿入します。


ファンブログでのYouTubeの貼り付け方

このプラグインは、次のやり方でYouTubeを貼りつけている場合のみ、サイズを自動調整します。

すでにこれまで貼りつけてきたYouTube動画があっても、このやり方でやっていたなら、記事の変更は必要なく、プラグインを設置するだけで、サイズが可変になります。

YouTubeのサイトでURLをコピー

まず、 YouTube のサイトから、貼りつけたい動画のURLを取得します。

使いたい動画のページを開き、動画の下にある「共有」という文字をクリック。

開いた部分にあるURLをコピーします。

URLの上に「この動画を共有」「埋め込みコード」「メール」という3項目が表示されていますが、「この動画を共有」の文字が太く、下線が付いていることを確認して、URLをコピーしてください。

YouTube

ファンブログの記事に挿入

ここからは、ファンブログの記事編集画面での作業です。

記事を書き込む場所の上に、YouTubeのマークがあるのでクリック。

すると、その下に新しいウインドウが浮かび上がります。「キーワードもしくは動画のURLを入力してください。」という文字の下の枠に、先程取得したURLを貼り付け、「検索」ボタンをクリックします。

記事にYouTubeを貼り付け1

画面の表示が変わって、YouTubeの画像が表示されます。

先程「キーワードもしくは動画のURLを入力してください。」に、キーワードを入力した場合は、関係する複数の動画が表示されますが、今回はURLを入力したので、そのURLの動画ひとつだけが表示されています。

動画の下に大中小とあって、表示する大きさを選べます。しかし、このプラグインを使う場合は常に横幅いっぱいに自動でサイズ調整されるので、どれを選んでも一緒です。どれでもいいので、クリックしてください。

記事にYouTubeを貼り付け2

大中小のどれかをクリックすると、動画が表示されます。その画面の右にある、スクロールバーを下に動かすと「著作権について重要なお知らせ」が表示されています。それを確認したら、いちばん下の右側「貼り付け」ボタンをクリックします。

記事にYouTubeを貼り付け3

すると、動画を表示していたウインドウが消えて、記事の中に下のようなコードが埋め込まれています。これが記事を表示した時にYouTube動画になる部分です。

記事にYouTubeを貼り付け3

あとは、記事を完成させて公開すれば、プラグインが適用されて、横幅いっぱいにYouTube画像が表示されます。

今回使ったスタイルシート

今回のプラグインは、次のサイトで公開されているスタイルシートを参考にアレンジさせて頂きました。

WordPressのoEmbedを利用したYouTube動画をレスポンシブ対応させる方法 | モンキーレンチ

このプラグインの中身は以下のとおりです。

(function(func){
	if(document.addEventListener){
		window.addEventListener('load',func,false);
	}else if(document.attachEvent){
		window.attachEvent('onload',func);
	}
})(function(){
	var style=document.createElement('style');
	var obj=document.querySelectorAll('object');

	style.setAttribute('type','text/css');
	style.innerHTML='.video-container{position:relative;padding-bottom:56.25%;padding-top:30px;height:0;}.video-container object,.video-container embed{position:absolute;top:0;left:0;width:100%;height:100%;}';
	document.body.appendChild(style);

	for(var i=0;i<obj.length;i++){
		var div=document.createElement('div');
		div.setAttribute('class','video-container');
		obj[i].parentNode.insertBefore(div,obj[i]);
		div.appendChild(obj[i]);
	}
});

大きな画像が枠から絶対はみ出さないスタイルシートの設定

この記事はファンブログで大きな画像が絶対にはみ出さなくなる方法です。書いてあるものをコピーして貼り付けるだけでそうなります。

詳しい説明はメインブログ Big Bangの記事「 絶対はみ出さない画像!自動でサイズ調節するスタイルシート 」に書いてあります。他のブログで困っている方はそちらをお読みください。

貼り付けるのは、下のソースコードです。

.entryBox .text img,
.entry .entryBody img,
.entry .text img {
	max-width: 100%;
	height: auto;
}

2014/04/02 古いテンプレートで適用されないものがあったので、スタイルシートに1行追加しました。

これをスタイルシートに追記します。スタイルシートは次の手順で開きます。

ファンブログにログインした最初の画面で、設定したいブログの「 デザイン」をクリック。

plugin1.jpg

ログイン直後のページにいない場合は、画面上部の「 デザイン」にマウスを合わせ、出てきたメニューの「 デザイン設定」をクリックしても同じページが開きます。

css1.jpg

開いたページで「PC」「スマートフォン」「ケータイ」と並んでいる中の「 PC」がオレンジ色になっている事を確認して、その下の行の「 CSS」をクリック。

css2.jpg

正しく開かれれば「 CSSの編集」と書かれたページになります。

CSSはカスケードスタイルシート(Cascading Style Sheets)の頭文字です。

css3.jpg

このページの大きな編集エリアにたくさん書かれているのが スタイルシートです。このスタイルシートの いちばん最後に、先ほどのソースコードを貼り付けます。

そして忘れずに「 保存」ボタンを押して保存します。「 設定を変更し、CSSをビルドしました。」と表示されたら完了です。

設定終了後、まだ自分のブログの画像がはみ出しているようなら、ページを見ているブラウザをリロード(再読み込み)するために「 F5」ボタンを押してください。

スマホの方は設定しなくても、すでに画面からはみ出さない画像になっているので大丈夫です。

2014/04/02追記スマホはアップロードした画像しかサイズ調整されないみたいです。外から読み込んだ大きな画像ははみ出します。それが嫌な場合は、その記事の中に下の1行を追記してください。そうすれば、はみ出さなくなります。

<style type="text/css"> #content .text img { max-width: 100%; height: auto; } </style>
サイズ変更に関連するページ: