freoカスタマイズ集

※1.の部分を templates/header.html の編集から js/default.js の編集に修正しました。(2012/10/24 12:37）

もし前の方法で使用されている方は templates/header.html の

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

の部分を削除して1.の編集をしてください。

※YouTubeのスクリーンショット画像の表示が元通りに表示できるようになったのでファイルを修正しました。(2012/6/25 7:20）

修正以前にプラグインをダウンロードされた方は
freo/tiny_mce/plugins/youtube/js/youtube.js の21行目あたりにある

<img src="https://cccabinet.jpn.org/tiny_mce/plugins/youtube/img/youtube.png"

の部分を、

<img src="https://img.youtube.com/vi/' + code + '/default.jpg"

に修正してお使いください。
記事を修正する場合はjsファイルをアップ後、該当記事のYouTubeロゴ画像を選択してYouTubeアイコンをクリックしそのまま挿入しなおしてください。

以前「freoのentry（またはpage）でYouTube動画をcolorboxで表示する場合」という記事を上げましたが、それを書いた当時はYouTube用のTinyMCEプラグインは古いバージョン用のものしかなく、仕方なくあんな方法を編み出しましたが、たまたまググってみたら ココ にあるではないか!!
喜び勇んでダウンロードし、freoに設置するとTinyMCEが表示されない(^_^;)よく調べてみると日本語対応ファイルがなかったからでした。英語版のファイルをコピーしファイル名と表示の部分をen→jaに置換してとりあえず表示はできるようになったのですが、使ってみるとスクリーンショット画像が貼られるだけで肝心の動画へのリンクがないっ...（ハナからそういうものらしい）。結局jsファイルを加工して何とか使えるものにしました。

1. js/default.js の下から2行目にある

   $('a.colorbox').colorbox({ width:'80%', height:'80%', iframe:true });

   の下に、

   $(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:385});

   を加入します。
   ※以前の記事を見て既に導入されている方で「.youtube」の部分を「.complete」にされている方は
   templates/header.html の

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

   の部分を削除して、js/default.js の下から2行目にある

   $('a.colorbox').colorbox({ width:'80%', height:'80%', iframe:true });

   の下に、

   $(".complete").colorbox({iframe:true, innerWidth:640, innerHeight:385});
   $(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:385});

   を加入します。

   • ダウンロード
     （このプラグインはfreo用に調整してありますのでTinyMCEを導入している他のブログで使えるかどうかはわかりません）
2. ダウンロードしたファイルを解凍したら youtube フォルダを tiny_mce/plugins/ フォルダの中に入れてアップします。
3. js/admin.js の「//TinyMCE」以降のうち赤字部分を追加してアップします。

   >//TinyMCE
   tinyMCE.init({
   ～（略）～
     plugins: 'advimage,advlink,autosave,contextmenu,fullscreen,inlinepopups,pagebreak,searchreplace,table,visualblocks,youtube',
   ～（略）～
     theme_advanced_buttons2: 'forecolor,backcolor,removeformat,|,link,unlink,image,youtube,charmap,pagebreak,|,search,replace,|,undo,redo',
   ～（略）～
   });

   編集画面にYouTubeアイコンが表示されます。
   
4. YouTubeアイコンをクリックすると「YouTube動画の挿入/編集」ダイアログが出るのでそこにYouTube動画のURLまたは動画のIDを入れて挿入ボタンをクリックします。
   
   ※URLは「https://www.youtube.com/watch?v=xxxxxxxx」の後に文字があってもOKです。
5. 動画のスクリーンショット画像が表示されます。
   
   ※この状態でスクリーンショット画像を選択してYouTubeアイコンをクリックすると動画IDの編集ができます。
   ※またスクリーンショット画像を選択したままメディア→挿入で画像を差し替えることもできるようです（画像にサムネイルがないことが条件です）。
6. エントリー（またはページ）を登録すると動画のリンクが完了します。
   
7. スクリーンショット画像をクリックするとcolorboxウィンドウが表示され自動的に動画の再生が始まります（下の画像をクリックすると実物大で表示され雰囲気がよくわかります）。
   
   動画を閉じるには、動画右上の[]をクリックします。
   ※実装してみた感じ ⇒ こちら

※表示されるスクリーンショット画像をオリジナルの画像から変更したい場合は

1. 使いたい画像を freo/tiny_mce/plugins/youtube/img/ フォルダに入れてアップします。
2. freo/tiny_mce/plugins/youtube/js/youtube.js の21行目あたりにある

   <img src="https://img.youtube.com/vi/' + code + '/default.jpg"

   の部分を、

   <img src="https://～tiny_mceまでのURL～/tiny_mce/plugins/youtube/img/（画像のファイル名）"

   に変更してアップしてください。

※動画を埋め込み表示する場合は 別の記事 を参照してください。