Atelierで“画像の挿入”タグの付いているブログ記事

2008年8月18日

隠居のBlog備忘録:MT4.1 での lightbox による画像の挿入を簡略化する

 最近、友人の海外旅行の写真集をブログ Studio YAMAKO に作成していることもあって、画像の挿入する機会が増えた。MT4.1 で写真を掲載することは、MT3.3 のときに比べれば少し楽になっているが、まだいろいろと操作をしなければならない。

 私の場合、写真はブログ本文にサムネイルを掲載し、これをクリックすれば画面全体がブラックアウトして、ポップアップ的に原寸の写真が表示される lightbox というプラグインを使用しているので、その分も操作が多い。そこで、私の知識でもう少し手を抜くことはできないかググッテみた。

 MT4.1 で画像の挿入操作をしたときに自動的に貼り付けてくれるHTMLコードは下のようなコードである。
<form mt:asset-id="227" class="mt-enclosure mt-enclosure-image" style="display: inline;">
<a href="http://n-shuhei.net/studio_yamako/xxxxxx/080818_001.jpg">
<img alt="080818_001.jpg" src="http://n-shuhei.net/studio_yamako/xxxxxx/080818_001-thumb-200x132.jpg" width="200" height="132" class="mt-image-right" style="float: right; margin:  0 0 20px 20px;" /></a></form>

今までは作成してくれたコードを、次の青字のように数カ所属性を追加したり、手を加えたりしていた。
<form mt:asset-id="227" class="mt-enclosure mt-enclosure-image" style="display: inline;">
<a href="http://n-shuhei.net/studio_yamako/xxxxxx/080818_001.jpg" title="ABC" rel="lightbox[aa]">
<img alt="クリックすると大きな写真になります" src="http://n-shuhei.net/studio_yamako/xxxxxx/080818_001-thumb-200x132.jpg" width="200" height="132" class="mt-image-right" style="float: right; margin: 5px;" /></a></form>


 このように手を加えることは挿入する写真が多くなると結構な手間になる。
 「モバイルタイプ備忘録」の関連ページなどを参考に、perl なんてこれから晩学するつもりで全く分からないが、画像の挿入時に使われるソース・プログラムを覗いて、「秀丸」でいじってみた。
 ソース・プログラムは、/cgi/mt/lib/MT/Asset フォルダーにある Image.pm である。この320行目あたりにある行を青字のように変えた。
# '<a href="%s"><img alt="%s" src="%s" %s %s /></a>',
'<a href="%s" title="" rel="lightbox[]"><img alt="%s" src="%s" %s %s /></a>'

 私の場合、lightbox は 2.0 を使っているので、グループ表示のための [] とキャプション挿入の title="" を付け加えた。日本語文字列の「クリックすると大きな写真になります」を入れようとしたが、これは上手くいかなかった。 perl の勉強が必要のようだ。この挿入は、「だい」→「クリックすると大きな写真になります」とIME に単語登録して簡単化することにした。
 初期値では、サムネイル写真を表示するボックスの周囲に余白を作る style の margin が私の場合適切ではないので、この部分も先ほどのソース・プログラムで見つけて(279・282行目あたり)、次のように改定すると上手くいった。
# ' $wrap_style .= q{style="float: left; margin: 0 20px 20px 0;"};
    $wrap_style .= q{style="float: left; margin: 5px;"};

# ' $wrap_style .= q{style="float: right; margin: 0 0 20px 20px;"};
 ' $wrap_style .= q{style="float: right; margin: 5px;"};

 ソース・プログラムが少しいじれるようになったので、ブログつくりも面白みが増えたが、リスクとは隣り合わせのようだ。しっかりとバックアップをとってからいじるようにしたいと思う。それにしても、学習しなければならないことが多いので、もうちょっとの間はボケの進行が止まっていて欲しいと祈念している。

2008年6月13日

MT4.1 での画像UP練習:初夏の花など

080612_009.jpg080612_002.jpg MT4.1 にしてからテンプレートばかりいじってきたので、新しいエントリーをアップする機会がなかった。写真をアップする方法が少し違っているようなので練習を兼ねてアップしてみた。
 MT3 のエントリー編集画面では、左メニューに「ファイルのアップロード」という項目があったが、MT4 では、編集画面上に並んだアイコンの右端に、「画像の挿入」と「ファイルの挿入」アイコンがある。
クリックすると大きな写真になります 「画像の挿入」で行うとファイルのアップロードまでの操作は、MT3 のときとほぼ同じだが、エントリー画面に取り入れを指定する方法が少し便利になっている。サムネイル画像を作る指示で、画像の幅を指定すると元の比率を維持したまま、画像の高さを決めてくれる。また、今までエントリーの中で指示していた(私の場合、CSS に属性を作成し、class で指定していた)文章の回り込みが指定できるオプションがある。
 今まで、作られたHTML コードは C&P していたが、MT4 では、自動的にエントリーの先頭に貼り付けられる。場所を移動する場合は、やはり Cut&P しなければならないが。
 それと私の場合、lightbox を導入しているので、そのための属性コードは挿入しなければならないのは、MT3 のときと同じである。

 孫の運動会見物の昼休み、校庭のそばのハルジオンなど野草が茂る土手で、モンシロチョウが羽化(と思うのですが)しているおり、その周りを2羽の蝶が飛び回っているのを見つけた。