簡単にYouTube等の動画をレスポンシブル対応に変えるjQueryプラグイン「FitVids.JS」

サイトをレスポンシブルに改造していたら、動画が画面からはみ出した・・・！

そんな時に簡単に動画をレスポンシブル対応に変えてくれる魔法の様なアイテムを紹介します。

それがjQueryプラグインの「FitVids.JS」です。

今回はこちらを使った動画のレスポンシブル対応を解説します。

1　プラグインをダウンロード

http://fitvidsjs.com/のDOWNLOADからGitHubへ

GitHubへ進んだら、右下のDownload ZIPを押してダウンロードします。解凍が面倒な方は、「jquery.fitvids.js」クリックしてソースコードをコピーしてください。

解凍後、「jquery.fitvids.js」をサーバの適当な場所にアップします。

2　使用方法

jQueryとプラグインを読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.fitvids.js"></script>

当たり前のことなのですが一応。
jQuery本体より後に、プラグインの読み込みの記述、です！

・任意のID、クラスを指定

ｊQuery、プラグインの読み込みの記述が終わったら、下記のコードを追加します。

<script>

$(function(){

　　　　$("任意のID、クラス").fitVids();

});

</script>

・動画のソースを、指定したID、クラスで「div」で囲む

<div id="任意のID、クラス">

動画のソース
</div>

動画のソースはYouTubeだと、動画下の方で生成できる埋め込みコードです↓

たったこれだけで動画が簡単にレスポンシブルに対応できます。

YouTube、Vimeo、Blip.tv等々主要な動画サイトに対応しているのも魅力的です！



最後に、WordPressで動画をレスポンシブルに対応する際は、下記のようなプラグインもあるようです。使ったことはないですが、Ustream、Dailymotionに対応しているのがイイですね♪

決定版! YouTubeやVimeo動画のレスポンシブ対応化プラグイン

3　関連リンク

[Å] YouTubeやVimeoなど固定サイズになった外部の動画をレスポンシブに対応させる方法

Youtubeなどの動画コンテンツをスマートフォンの横幅に合わせてくれるjQuery「FitVids.js」の搭載手順

Twitter、Facebookのボタンをオリジナルにする方法

ソーシャルメディアの影響がますます高まり、最近ではあたりまえのように設置されているソーシャルボタン。

既存の画像(デザイン)ではなく、自作したオリジナル画像や無料で配布されているオシャレなソーシャルボタンにしたい！という時の方法を紹介します(主要なTwitter、Facebookのみ)。

他のサイトと変化をつけて、少しでも読者の意識をボタンに向けさせましょう！

1　Twitterのボタンをオリジナルにする

基本コードはこちら。とっても簡単ですね。

<a href="http://twitter.com/share?url=ここにURL&text=ここにページタイトル">
<img src="画像のパス">
</a>

日本語が含まれていると動作しない場合がありますので、『URL』、『ページタイトル』にはエンコード後の文字を入れましょう。

その際URLエンコード・デコードフォームが便利です。文字コードはUTF-8にセットしてください。

WordPressに対応させたい場合は、
URLの部分を→<?php the_permalink(); ?>
ページタイトル部分を→<?php the_title(); ?>
に変えてください。

文字化けしたら・・・
【WordPress】自作ソーシャルボタンを設置する際のポイント
エンコードの記述を参考に修正してみてください。

2　Facebookのボタンをオリジナルにする

<a href="http://www.facebook.com/sharer.php?u=ここにURL&amp;t=ここにページタイトル">

<img src="画像のパス">

</a>

WordPressへの対応はTwitterのボタンと同様です。

3　javascriptで新しいWindowで開く

より既存のボタンの動作に近づけたい、という方はこちらのコードを。

<a href="http://twitter.com/share?url=ここにURL&text=ここにページタイトル" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">
<img src="画像のパス">
</a>

menubar=no、toolbar=no・・・なんだ？？って思った方はこちらの記事を参考にしてみてください。

4　Google+、はてな等その他ソーシャルボタンを設置したい方は

SNS投稿ボタンをオリジナル画像にするためのカスタマイズ。という記事が参考になります。ほぼ網羅されています。

無料でかわいいアイコン『Dripicons』をWebフォントとして使う方法

シンプルで可愛く、フラットデザインにぴったりの無料アイコンセット『Dripicons』


ダウンロードはこちらから
使用イメージが紹介されていますが、かなりオシャレなのでオススメです。

aiやpsdなど様々なフォーマットが用意されているのですが、今回はWebフォントの使用方法についてまとめたいと思います。

1　Webフォントをダウンロード、読み込む

ダウンロードしたフォルダ「webfont」→「fonts」からフォントファイルを任意の場所に設置します。


次にWebフォントを読み込むCSSを記述します。
※fontsフォルダごと移動した場合は下記の通りです。


@font-face {
  font-family: "dripicons";
  src:url("fonts/dripicons.eot");
  src:url("fonts/dripicons.eot?#iefix") format("embedded-opentype"),
    url("fonts/dripicons.ttf") format("truetype"),
    url("fonts/dripicons.svg#dripicons") format("svg"),
    url("fonts/dripicons.woff") format("woff");
}

2　before セレクター、contentプロパティで表示

<div data-icon="デモサイトから使いたいアイコンのコードを入力"></div>

次に :before セレクター、contentプロパティで要素の前に新たな要素を追加します。これがアイコンになります。

CSSに下記を記述します。

[data-icon]:before {

  font-family: "dripicons";

  content: attr(data-icon);

}

属性セレクタを使って、data-icon属性を持つ要素の前（:before）にcontentプロパティでアイコンを挿入します。ここではattr()を利用し、date-iconの属性値を取得し挿入しています。

詳しくはダウンロードしたファイルの中にwebfont.cssというのが入っているのでこちらを参考にするといいと思います。