ブログ編集記 ASP ・・・個人的メモ
<< 19.コメントの「鍵マーク」や... | blog-top | 17.投稿記事の文字サイズを大... >>
18.投稿画像サイズの設定
デジカメで撮影した画像は普通は1600x1200、1280x960、1024x768などで4:3になっています。ブログに載せる場合は、これを640x480以下に縮小して使います。撮影の目的がブログに載せることだけであれば、デジカメの設定を640x480に設定しておくと良いでしょう。

画像を中央配置で一枚ずつ載せる場合はこれで何の問題もありません。
しかし、画像を左右に並べたい場合は、二枚が整然と並ぶように、編集画面でサイズを変更しなければなりません。
この場合は、二枚とも左配置で640x480ならば、例えば220x165に変更します。
通常左画像と右画像の両方とも左配置を指定します。
また、左画像を左配置に、右画像を右配置に指定してもかまいません。
大きいサイズを小さく圧縮していますので、ブログの画像をクリックすると、元の画像サイズまで拡大して、別ウィンドウで表示されます。

これでも良い訳ですが、いちいち640x480を220x165にサイズ変更するのは面倒ですね。
以下のようにすれば、いちいちサイズ変更しなくても自動的に圧縮されます。

1.設定→スキン変更→編集→(スキン編集が初めての場合は「スキン編集を始めます」)と順次クリックします。・・・要するにスキン編集の画面にする訳です。
2.スキン編集の■各部分別横幅:本文450・・・・
  この数字をメモするか、覚えておいてください。
  ・・・・使っているスキンによって数字が異なります。
  (例)紅葉:400px、ダイアリー:450px、ナチュラル:500px、ノートパッド:550px
3.CSS編集を見て、下記のようなソースコードを探してください。
  <スキンによっては、IMG.IMAGE_RIGHT{}がCSSに欠落している場合があります。
    この場合、下記のIMG.IMAGE_RIGHT{}をコピーして、
    IMG.IMAGE_LEFT{}の下に追加してください。>

   IMG.IMAGE_LEFT{
                 MARGIN-RIGHT: 15PX;
                 MARGIN-BOTTOM: 15PX;
                 }
   IMG.IMAGE_RIGHT{
                 MARGIN-LEFT: 15PX;
                 MARGIN-BOTTOM: 15PX;
                 }
4.赤字のように変更、追加してください。
   IMG.IMAGE_LEFT{
                 MARGIN-RIGHT: 15PX; ・・・・・・・・・(1)
                 MARGIN-BOTTOM: 15PX;
                 width: 210px; height: auto; ・・・(2)
                 }
   IMG.IMAGE_RIGHT{
                 MARGIN-LEFT: 15PX; ・・・・・・・・・・・(3)
                 MARGIN-BOTTOM: 15PX;
                 width: 210px; height: auto; ・・・(4)
                 }
ここで下記のようになることを確認してください。(本文横幅=450pxの場合)
(1)+(2)+(3)+(4)=15+15+210+210=450
この450が、さっきメモした450と同じか、小さくなるように、widthの数字を設定してください。
もし、本文横幅が400pxならば、(400-15-15)/2=185 すなわち、width は 185px です。

  MARGIN-RIGHT ・・・画像の右側の余裕サイズ・・・お好みで調整可
  MARGIN-LEFT  ・・・画像の左側の余裕サイズ・・・お好みで調整可
  width  ・・・・・・・・・・・画像の横幅
  height: auto  ・・・・画像の高さを横幅に合わせて自動調整
                  (サイズが決まっている場合は数字で指定しても可)
  width height auto px は半角大文字でも可
  width:210px;などのスペース(の部分)は無くても可

追加:
画像を2枚横に並べた場合は、2枚目の最後に必ず<br clear=all> タグを入れてください。

動作確認したブラウザはInternet Explorer 6.0/7.0 および Firefox 2.0です。
なお、適用は自己責任でお願いします。
[PR]
by yasousuki | 2006-11-04 15:33 | スキン編集


« blog-top ----- << 19.コメントの「鍵マーク」や... 17.投稿記事の文字サイズを大... >>