freoカスタマイズ集

2012年9月からTwitterのタイムラインを表示するウィジェットの仕様が変更になりましたが、この新ウィジェットでは最小幅が220pxと決められており、設置するとfreoでもWeb Diary ProやWeb Gallery Proでもデフォルトのテンプレートではサイドバーからはみ出てしまいます。

なので幅を自由に変更できる旧ウィジェット（Join the conversation ウィジェット）を設置したままという人も多いと思いますが、旧ウィジェットはAPI v1.0からv1.1への移行に伴い2013年3月6日以降は使えなくなる予定です。
「 Join the conversation ウィジェット」提供終了のお知らせ（Twitterブログより）

そこで新ウィジェットをなんとかはみ出さずに設置する方法を紹介します。

1. まずは新ウィジェットのコードをテンプレートに貼り付けます。
   Twitterにログインして Twitterのウィジェット より「新規作成」を押して、ユーザーウィジェットの設定より設定をして、コードをコピーします。
   templates/utility.html（Web Diary ProやWeb Gallery Proの場合は skin/navigation.html）にコピーしたコードを貼り付け、その前後を {literal}～{literal} で囲んだものをアップします。
   設置コードの例：

   <div class="utility">
     <h3>Twitter</h3>
     <div class="content">
       {literal}
         <a class="twitter-timeline" href="https://twitter.com/(Twitterのアカウント名)" data-widget-id="(ウィジェットのコード番号)" lang="ja">@(Twitterのアカウント名) からのツイート</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
       {/literal}
     </div>
   </div>

   ※Web Diary ProやWeb Gallery Proの場合は {literal}～{literal} で囲まずコードをそのまま使用します。
   ※日付などの表示が日本語にならない場合は lang="ja" を追加します。

【2013.3.26追記】

1. freoの ブログパーツ管理プラグイン を使用する場合は、templates/utility.html の適当なところに

   <!--{foreach from=$plugin_parts|smarty:nodefaults item='plugin_part'}-->
   <!--{if $plugin_part.status == 'publish'}-->
     <div class="utility">
     <h3>{$plugin_part.name}</h3>
       <div class="content">
         {$plugin_part.text|smarty:nodefaults}
       </div>
     </div>
   <!--{/if}-->
   <!--{/foreach}-->

   を追加（freoの公式サイトに記載されているものとは異なります）し、
   プラグインの登録画面の内容に

   <a class="twitter-timeline" href="https://twitter.com/(Twitterのアカウント名)" data-widget-id="(ウィジェットのコード番号)" lang="ja">@(Twitterのアカウント名) からのツイート</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

   と登録すれば同じように表示することができます。
2. css/common.css（Web Diary ProやWeb Gallery Proの場合は skin/common.css）に

   .twitter-timeline {
     min-width: 180px!important;
   }

   を追加します。

【追記】firebugでiframeのidを調べなくてもclass名で事足りることが判明したので書き換えました。

【2014/1/29追記】Twitterウィジェットのコードが一部変更になっているようなので修正しました（太字部分を追加）。

すると以下のようになります。