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>
上記の貼り付けしたコードを、再度表示修正位置に貼り付けし直してお試し下さい。
簡単ですが説明は以上です。
▲
ページトップへ戻る