はみ出たYouTube動画をフィットさせるプラグイン -MOJO FIT- | MOJOのブログ

MOJOのブログ

洋楽ミュージックビデオやコマーシャルフィルムなど

WEBデザインのネタ-MOJO FIT1

アメブロを徘徊してると、上の画像のようにアメブロの記事からYouTube動画がはみ出てるブログをよく見ます。
みなさんのブログは、はみ出てないですか?
はみ出てたら、見た目が悪いだけでなく動画に見えない部分が出てしまいますよね。
これでは、せっかくの記事が台無しです。

修正しようと思うと過去の記事を順番に見ていって、サイズ指定したYouTube動画を貼り付けなおすってことになってしまいますよね。。。orz
考えただけで気が遠くなります。

私は、YouTubeのページで動画の高さと幅を指定して、動画の幅と記事の幅をピッタリいっしょにしていますが、これって結構時間がかかるんですよね。。。
しかも、アメブロのスキンを変更するときには、現在設定しているYouTube動画の幅よりも記事の幅が大きなスキンに変更する必要があるわけです。。。選択の幅が狭まります。

そんなこんなでプラグインを作ってみました。
みなさんにも使っていただければと思い、無料のプラグインとして公開します。
プラグインの名前は、『MOJO FIT』です。

説明ではイメージがわきにくいので、はみ出したYouTube動画を用意しみました。
動画下のFITボタンをクリックしてみてください。






はみ出していたYouTube動画が記事にフィットしたはずです。
実際にMOJO FITを設置した際には、ページにアクセスした瞬間、記事に貼り付けたすべてのYouTube動画がぴったりフィットします。
※FITボタンは表示されません。



設定方法は、とても簡単です。
アメブロのマイページを開いて、メニューから"ブログを書く"→"サイドバーの設定"→"プラグインの追加"の順で進んでください。

"プラグインの追加"で「フリープラグイン」を選択し、以下のコードを入力スペースに貼り付けて、[保存]をクリックしてください。
※他のプラグインをご利用中の方は、コードをコピーして最後尾に追記してください。


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://plugin.mojoxdesign.com/js/mojofit.js"></script>


WEBデザインのネタ-MOJO FIT2

"サイドバーの配置"でフリープラグインを使用する機能に移動させて、[保存]をクリックしてください。


WEBデザインのネタ-MOJO FIT3

これで設定は、完了です。
プラグインが正常に動作している場合は、画面右上に小さなマークが表示されます。
はみ出ていたYouTube動画が記事の幅に収まっているはずです。


WEBデザインのネタ-MOJO FIT4

MOJO FITは、過去の記事のはみ出したYouTube動画を記事の幅にフィットさせるプラグインです。
記事更新の際にYouTube動画と記事の幅を気にする必要がなくなります。
スキン変更の際にも、変更されたスキンの記事の幅に合わせて、はみ出したYouTube動画がフィットします。
また、記事のデータ自体を編集しないので、プラグインを削除すれば設置前の状態に戻すことができます。

プラグインのバージョンアップやメンテナンスなどのお知らせは、Twitterで行います。
ご使用の際は、Twitterのフォローをお願いします。


$WEBデザインのネタ-Twitter Follow Me

ブログの記事からYouTube動画がはみ出してしるお友達がいたら、『MOJO FIT』を教えてあげてください。
みなさんのブログでもご紹介していただけると、とてもうれしいです。
今後ともよろしくお願いいたします。