FC2ブログにユーチューブの検索ボックスを設置する






YOUTUBEの検索ボックス(サーチボックス)をFC2ブログに設置する際の説明です。

ユーチューブ検索ボックス設置方法。
!このコードを取得するには、グーグル様の無料アカウントを取得し、ログインしている必要があります。

まずこちらののGoogle AJAX Search API (Beta)Video Search Wizardへアクセスします。
取得方法の説明は左上メニューの検索ボックスを取得する説明から参照下さい。

検索ボックスを設置するにはFC2のテンプレートの編集から作業します。
ブログ管理画面にログインして以下の様にテンプレート編集画面を開きます。


AJAX Search APIのコードの張り方

まず検索ボックスを表示するタグを探して、WEBページやブログに検索ボックスとして表示させるタグを切り取ります。
以下の<div>〜〜</div>までの記述を任意の場所に貼り付けることでユーチューブ検索ボックスを表示しなさいとすることが出来ます(上から10行目)
<div id="videoControl">
<span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span>
</div>

上記のコードを切り取り出来ましたら
FC2ブログのテンプレート編集画面を開き、表示させる位置に貼り付けます。

コードの貼り付け位置は以下の様に設置すると、ブログの一番上に表示されます。
まずFC2の<!-- contents -->と言う記述を探し、その下にユーチューブ検索ボックス表示コードを貼り付けてみたサンプルです。<div id=〜〜>〜〜</div>は切り取りして貼り付けしてください。


サンプルはこちら

もしくはブログノ一番したに表示させる場合。(※デザインテンプレートによって異なる場合がありますのでご了承下さい)
テンプレート中にある<!-- /primary-column -->と言うコードを探します。

<!-- /primary-column -->のスタイル指定の終わりを示す</div>を探しその上に検索表示ソースを貼り付ける事で、ブログ記事の一番したに表示させることが出来ます。


サンプル

上記の作業が完了出来ましたら、残りのコードを全てコピーし、テンプレートの<head>と言うコードの直ぐ下に全て貼り付けします
<!-- ++Begin Video Search Control Wizard Generated Code++ -->

中略

<!-- ++Begin Video Search Control Wizard Generated Code++ -->


上記の作業が完了出来ましたら、「更新」ボタンをクリックして作業完了です。
検索ボックスの表示位置が思った通りに表示出来ない場合
<div id="videoControl">
<span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span>
</div>
上記の貼り付けしたコードを、再度表示修正位置に貼り付けし直してお試し下さい。


簡単ですが説明は以上です。

ページトップへ戻る

動画ツールの紹介です。取り扱う動画データは必ず自分の所有物動画(ビデオで撮影した動画や、家庭内でビデオ録画した動画を自分で楽しむ目的のみ)であり、決して諸作権を侵害したりしないようにお願い致します。文化庁 | 著作権

注意、YOUTUBEでは動画のダウンロードはサポート外となります。公式動画のダウンロードについて

エンコードや保存の便利ツール

VIDEO search(ビデオ検索)ボックス設置関係