写真に説明文をつけて右寄せにする。

　写真に説明文をつけて右寄せにするために、表の中に入れちゃう作戦（ちょっと懐かしめな技かも）。

　僕はこのブログの記事を「はてな記法」で書いてるのですが（画像のオプション指定が簡単だから）、「はてな記法」での表組みでは、表を右寄せにすることができないっぽい（よくわかんないけど、たぶん）。なので、テーブルタグを使うことにしました（はてな記法モードでも、タグはちゃんと認識されるんですね）。

説明です。 ネコですよ。

　こんな感じ。
　これによって、同じくはてな記法ではできない（よくわかんないけど、たぶん）、セル内の改行もできるようになるようです。

　ついでに、写真と説明の一体感を出すために、表に背景色（bgcolor）を着けています。
　

以下、ソースです。

<table style="float:right; width:300px; margin-left:15px; background-color:#ddd; ">
<tr><td style="border:0; padding:0;">[f:id:masa-m:20131113233744j:plain:w300]</td></tr>
<tr><td style="border:0; padding:2;">説明です。
ネコですよ。</td></tr>
</table>

　鳥海さんの文字塾の記事でも使えればよかったんですけど、やっぱりちょっと焦ってたのかな、思いつきませんでした。
　次回（があれば）がんばります。がんばるかもしれません。そのうちがんばります。

---

　最初に「はてな記法で書くのは画像のオプション指定が簡単だから」と書きましたが、ついでにそのことについても書いときます（自分の記憶用に）。

　長くなってきたので、以下は「続きを読む」で。

　上の例で、画像の記述（f:idナントカというやつ）の後ろに「:w300」とついてるのは、写真の見ためのみ左右300pxにしている、という意味です。「:h300」にすると天地が300pxになります（写真の原寸は長辺600pxです）。
　こうやって表示サイズを指定するのも簡単ですが、これだけで、クリックすると原寸のものがびよ〜んと拡大表示されるようになってくれるのも嬉しいです。

　また、「:w300」の後ろに「:right」とつけると、画像は右寄せになります。これもカンタンで素敵。
　鳥海さんの文字塾の記事の画像には、全部に「:w300:right」または「:h300:right」がくっついています。説明なしに写真だけ載せるときは、これで済ませることができて、超楽チンでした。

　あ、「クリックすると原寸のものがびよ〜んと拡大表示」と書きましたが、「:w300」の前（画像を挿入したときに末尾についてる文字）が「:plain」になってると画像クリックで拡大表示されますが、「:image」になってると「はてなフォトライフ」にジャンプするようです。比較のために、例を書いておきますね。

[f:id:masa-m:20131113233744j:plain:w300:right]

[f:id:masa-m:20131113233744j:image:w300:right]

　これは、ちょっとハマっちゃいました。書く人の好みによると思いますが、僕的には、いちいち「はてなフォトライフ」に飛ばされちゃうのは嫌だなーと思いました。

　ただ、実を言えば、画像を挿入した際には自動的に「:plain」になってるのです。つまり、勝手に「:image」にした僕が悪いだけのことなのですがｗ　「:w300:right」の書き方について調べてるときは、作例がほとんど「:image」になってたので、そーゆーもんだと思い込んで書き換えていました。だめだめだーｗ

　なので、ふつうは、デフォルトで挿入される文字列に「:w300:right」を付け加える程度の処理でだいじょうぶだと思います。

　締まらない感じですけど、これで終わりですｗ　おそまつさまでした。