freoカスタマイズ集

freoのエントリー（またはページ）にYouTube動画を埋め込むには、記事登録の際にHTMLソース編集画面にYouTube動画の埋め込みコードを貼りつけて登録すればいいのですが、HD動画の場合、width（画面の幅）が640pxにするとエントリーのようなサイドメニューがある場合は、はみ出してしまうので、colorboxを使って表示する方法を紹介します。

1. templates/header.html を次のように編集してUPします。

   </head>

   の上に、

   {literal}
   <script>
     $(document).ready(function(){
     $(".complete").colorbox({iframe:true, innerWidth:640, innerHeight:385});
     });
   </script>
   {/literal}

   を追加します。
2. 動画を挿入したい場所で登録画面の「画像の挿入/編集」ボタン（画像の赤丸で囲んだボタン）をクリックします。
   
3. 「画像URL」のところに「https://img.youtube.com/vi/(YouTubeの動画ID)/default.jpg」と入力し、「画像の説明」と「タイトル」のところに適当なタイトルを入力して「更新」ボタンをクリックします。
   
4. 挿入した画像をクリックし、登録画面の「リンクの挿入/編集」ボタン（画像の赤丸で囲んだボタン）をクリックします。
   
5. 「リンクの挿入/編集」ウィンドウが表示されたら、「一般」タブの「リンクURL」のところに「https://www.youtube.com/v/(YouTubeの動画ID)」と入力し、その下の「クラス」のところで「complete」を選択して「更新」ボタンをクリックします。
   
6. 画像に設定が完了したら登録を行います。
   登録した記事から画像をクリックすると、
   
   のようにYouTube動画が表示されます（上の画像をクリックすると実物大で表示され雰囲気がよくわかります）。
   動画を閉じるには、動画右上の[]をクリックします。

※クラスの部分が「complete」だと分かりにくいので「youtube」にしたいときは

1. css/common.css の一番最後に

   .youtube {
   }

   を追加します。
2. 1.の templates/header.html の変更を次のようにします（赤字部分が変更箇所）。

   {literal}
   <script>
     $(document).ready(function(){
       $(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:385});
     );
   </script>
   {/literal}

3. 5.の「リンクの挿入/編集」ウィンドウの「クラス」のところで「youtube」が選択できるようになるので選択して「更新」ボタンをクリックします。