アップロードした画像のスタイル
BLOGで画像をアップロードすると、テキストを回り込みするためのalign="left/right"タグや、画像とテキストの間にスペースを空ける為のhspace="10"タグを、毎回手で入力していたので、どうにかならないものかと思っていた。
いろいろ調べると、アップロード時に”左寄せ・右寄せ・指定なし”を選べるコードを公開しているJuanlogさんのサイトを知った。素晴らしい。これはぜひやってみなくては。
でも、今はじっくりといじっている暇がないので、とりあえず応急処置ということで、EMBEDDED IMAGE時のみのカスタマイズをすることにした。
内容は
・回り込み指定を簡単にできるように→align="left" の挿入
・画像にスタイルシート指定をつけられるように→class="photo"
だ。
上記内容だと、画像のレイアウトは常に左になるが、右にしたい時はleftをrightに指定しなおすだけなので、一々”align・・・”と入力することを思えば、良しとしよう。
また今までは画像の周りのスペースをHspace="*" Vspace＝”*” などで空けていたが、せっかくなのでスタイルシートでスペースやその他デザインをできるようにした。
＊＊変更箇所＊＊
\lib\MT\Appの中のCMS.pmファイルをテキストエディタで開く。
altで検索をかけると、下記記述が見つかる。
それを、
に変更しよう。
保存したら、対象箇所にFTPする。
続いて、スタイルシートを追加。
border:1px solid #ccc;
padding:3px;
margin:0px 10px 5px 10px;
}
この設定で、画像に対して3pxの余白と1pxのボーダー線ができる。そして、テキストとのスペースは
上が0px、両脇に10px、下に5pxという設定だ。
（この辺の変更はご自由にどうぞ！）
スタイルシートをリビルドして、作業は終了です。
次回のアップロードから表示されるHTMLソースに上記変更が加わります。
※今までの画像にもスタイルシートを反映させたいという方は、地道にエントリーを編集（class="photo"の追加）してください。
そんなことしなくても、良い方法があるよ！っていう方は教えてください。
Posted by JOJO at 09:50
JOJOLOGを