実験結果

サイドバーで、いろいろやってみました。
そろそろ、整理してみますか・・・

難しそうに見えるけど、たいしたことはやっていません。
ぜひチャレンジしてね。

Harbotの枠

01: <!--３×３のテーブルを作ります-->
02: <!--大きさの指定は、以下の指定をします-->
03: <!--ハーボットの縦方向の２０１ピクセル-->
04: <!--ハーボットの横方向の１２７ピクセル-->
05: <!--横枠の横幅２５ピクセル×２で５０ピクセル-->
06: <!--サイドバーの最大幅の１７７ピクセルに合わせました-->
07: <!--（１７７＝２５＋１２７＋２５）-->
08: 
09: <table border="0" cellpadding="0" cellspacing="0">
10: <!--テーブルのサイズは指定しません（画像の大きさに任せます）-->
11: <!--ここでの指定は、テーブルの装飾をすべてなしにしています-->
12: 
13:  <tr><!--テーブルの１段目（一番上）-->
14:   <td colspan="3"><!--１段の３列を一つにまとめます-->
15:    <img src="/blog/_images/blog/TakeItEasy/上の画像.gif" width="177">
16:   </td><!--縦サイズは指定せず画像の大きさに任せます-->
17:  </tr>
18: 
19:  <tr><!--テーブルの２段目（中央）-->
20:   <td><!--一列目（左側）-->
21:    <img src="/blog/_images/blog/TakeItEasy/左の画像.gif"
             width="25" height="201">
22:   </td><!--ここのサイズは重要なので横縦とも指定する-->
23:   <td><!--二列目（中央）-->
24:    <script language="JavaScript"
             src="Harbox－HarbotのIDを入れる"></script>
25:   </td><!--Harbotは横１２７×縦２０１だが指定せず画像の大きさに任せる-->
26:   <td><!--三列目（右側）-->
27:    <img src="/blog/_images/blog/TakeItEasy/右の画像.gif"
             width="25" height="201">
28:   </td><!--ここのサイズも重要なので横縦とも指定する-->
29:  </tr>
30: 
31:  <tr> <!--テーブルの３段目（一番下）-->
32:   <td colspan="3"> <!--１段の３列を一つにまとめます-->
33:    <img src="/blog/_images/blog/TakeItEasy/2468353.gif" width="177">
34:   </td><!--縦サイズは指定せず画像の大きさに任せます-->
35:  </tr>
36: </table>

画像のサイズを指定した場合、元の大きさと同じであれば、何も影響はありませんが
元の大きさと異なる場合は、指定された値によって、拡大縮小が行われます。
これをうまく利用すれば、素材の元サイズを意識せずに、Harbotのサイズに合わせることが可能になります。

左側に説明用の行番号を付けました。「０１：」は入力しません。
また、「<!--」と「-->」で囲ったところはコメントです。説明なのでなくても構いません。
０９～３６行目までが「ＴＡＢＬＥ」です。
<tr>～段～</tr>と<td>～列～</td>の組み合わせで、段と列を作ります。
１３～１７、１９～２９、３１～３５行目が、それぞれ１～３段目になります。
段の中に列を作るように書きます。ただし、一番多く設定した列が、最大の列設定値になってしまうので、今回のように中央段は３列だけど、上下段は１列・・・とするときには、３列をまとめて１列にします・・・という指定が必要になります。
それが、１４と３２行目です。
実際にはこのようになっています。
１９～２９行目の<tr>の中央段には、<td>の列指定が３つあります。これで中央段は３列の指定になります。これが最大の列数です。
１３～１７、３１～３５行目の、<tr>上下段には、<td>の列指定が１つしかありません。でも、３列を１列にする指定があるので、上下段は１列になります。
これで、上段は１列、中央段は３列、下段は１列というテーブルができます。
後は、<td>～</td>で囲まれたところに、画像を入れれば完成です。

今回、悩んだのは、サイドバーの横サイズでした。
ここで使用しているような分割された枠の場合、１７７ピクセルが最大のようです。
分割されていない場合は、もう少し大きなものでも大丈夫なようです。（１８１ピクセルのものを使用している人もいました・・・でも、未確認情報です。）
Ｈａｒｂｏｔの横サイズが１２７ピクセルなので、残りは５０ピクセルになります。
枠の横が均等なサイズであれば、ここで説明したように２５ピクセルで左右を指定します。
横サイズの合計が１７７ピクセルを超えないように設定すれば、どんなサイズの枠でも使用可能です。
超えた場合、サイドバーの右側に記事の表示がなくなります。サイドバーの一番下から記事が表示されます。このような表示になった時は、横サイズがオーバーしている・・・と思ってください。
ここでの指定によって、強制的に枠の画像サイズを変更することができます。
ただし、枠の絵柄が拡大縮小でずれるので、シンプルな絵柄でしか有効ではありません。
文字がかかれているようなもは、読めなくなることもあるので、やはり適さないです。
でも、確実な方法だと思います。

注意事項：
元になる画像のサイズが変わるということは、素材の改ざんに当たるので、注意してください。
自作の画像なら何も問題ありませんが、そうでない場合には作者に確認を取ってください。

リンクの見直ししました。多分、大丈夫かと思います。
よろしく。