ドリームウィバー8(Dreamweaver8)で簡単にサムネイル指定

質問

ドリームウィバー8でサムネイル画像を作成する方法は？

現在、次の様な手順でサムネイル画像を作ってます。

469px　×　423pxの画像を幅300pxのサムネイル表示にして、右クリックで拡大表示させたいとき・・・

１．画像を貼り付ける(画像の説明HTMLソース）
<img src="http://○○○○○○.jpg" width="469" height="423" alt="画像の説明" />

２．サムネイル表示用のHTMLタグを手入力する
つまり、１番のHTMLソースを間に挟む
<a href="http://○○○○○○.jpg" target="blank">画像の説明HTMLソース</a>

３．サムネイルの大きさを計算する。
サムネイル幅を300px。元画像の大きさが469pxなので
300÷469=0.63
たて横同じ比率で縮小したいので縦に同じ比率を掛ける
423×0.63=266.49

４．HTMLソースの幅と高さをそれぞれwidth="300" height="266"に修正
完成HTMLソース
<a href="http://○○○○○○.jpg" target="blank"> width="469" height="423" alt="画像の説明" /></a>

この手順どう考えてもめんどうだと思います。ドリームウィバー8(Dreamweaver8)で簡単に出来るのではないかと調べているのですが、なかなか見つかりません。どなたか良い方法をご存知でしたら教えてください

回答No.2

thila · ベストアンサー

Dreamweaverの機能としてはわからないです、お役に立てずごめんなさい。
正規のサイズの数値入力（数値修正）機能ならいっぱい見つかるんですけどね…。
画像表示サイズを、widthとheightを使って強制変更するのは、DWでは非推奨なのでしょうかね。
（いじってみて思った感想なので、本当にそうなのかはわかりません）

更にDWじゃなくてもいい話ですが、CSSを使ってサイズを指定すると、サイズの一括調整がもっと簡単になります。
こちらの場合は古いブラウザだと未対応のものもあります。

質問とはずれた話ですが、4の完成のソースが自分には
<a href="http://○○○○○○.jpg" target="blank"> width="469" height="423" alt="画像の説明" /></a>
のように見えています。
<a href="http://○○○○○○.jpg" target="blank"><img src="http://○○○○○○.jpg" width="300" height="266" alt="画像の説明" /></a>
話の流れから察するにこういう記述なのかなと思ったのですが、jpg画像が同じものを使っているのかどうかだけが気になって、確認を取らせて頂いた次第です。

お礼

回答ありがとうございます。
２つほど実験しました。
１．画像を貼り付けた後-->プロパティインスペクタの幅だけを小さくする
　　幅４６９－－＞３００
　　高さ４２３－－＞スペース
　　これは、前回（１）で教えていただいた方法
２．imgタグにClass名をつけてCSSで指定（２の方法）
　　.img {
width: 300px;
　　　　}
　　　おしゃる様にこの指定だと一括調整が発生したときなどに有効ですね

ーーサムネイルは、やはり、手入力ですよね。。

今回私は、ブログにPC画面をアップ（説明文を画像に書き入れて）しようとしているのですが、ブログでは（バランスからいって）画像の幅はせいぜい３００pxくらいだと思うのです。よってサムネイル表示させてクリックしてくれたら拡大させて説明文を読んでもらう。としたいのです。

不思議なのですが、みなさんこのような要求のとき、手入力でHTMLソースを打ち込んでいるのでしょうか？

質問が長くなってすみません。thilaさんだったら手入力ですか（暇な時にでもおしえてください）

PS。ソースが崩れる件は、私も同じように見えてます　＾＾；
＆；とかの記号が表示されているのかと勘違いしていました

回答No.3

thila

自分もブログでサムネイルを利用することがありますが、サムネイルを勝手に作る機能があるので、それを愛用しています。（seesaaブログです）
seesaaはサムネイルのサイズ指定まで可能なので、労せずして好みのサイズのサムネイル画像を作成できます。
横幅だけ指定すれば勝手に縦の比率は計算してくれるので、質問者さんの思っている操作が簡単に出来る仕様です。

その他のブログも、大きすぎる画像はブログのデザインを崩すので、サイズまで指定できるかどうかは怪しいですが、サムネイルを作成する機能はついているのではないかと思います。
どのような条件でどうなるかというのがブログ毎に異なると思いますので、そちらはヘルプやユーザーコミュニティなりをご覧になったり、ブログカテゴリで再度質問されてみた方が、わかりやすいかもしれません。
自分はseesaa以外はそこまで使い込んでいないので、ブログサービス名を聞いても、詳しくは回答出来ない予感がひしひしとします。

ソースの見栄えの件、安心しました。
自分が間違っていたのかとひやひやしておりました…。

お礼

お返事ありがとうございます。
わたしの使っているブログはJUGEMです。
以前、ユーザーコミュニティに質問したのですが、回答が得られませんでした（その頃から悩んでましてｗ）

いろいろありがとうございました。
簡単にサムネイルを実現させることが
・ドリームウィバー(Dreamweaver)では出来ない
・JUGEMではサポートされていないがseesaaブログではサポートされている

スッキリしました。

回答No.1

thila

完成ソースが崩れているようなので、微妙に判断しかねていますが、大きい画像をwidthとheightでサイズを指定して縮小して、それをサムネイルとして表示しているのですよね。

正攻法ではないですが
<a href="http://○○○○○○.jpg" target="blank"><img src="http://○○○○○○.jpg" width="300" alt="画像の説明" /></a>
というようにheightを書かないと、横幅300pxに合わせた縦幅に自動調整されて表示されます。
（確認してないので、もしかしたらIE以外のブラウザでは崩れるかもしれません）

大きすぎる画像を並べて表示する場合は、面倒ですが別個サムネイル用画像を用意する方が、一覧画面が重たくなくて便利です。
例に出されている程度のサイズなら、同一画像をサムネイルにしても、少々サムネイルの見た目が荒くなる程度で問題ないと思います。

お礼

アドバイスありがとうございます。

ドリームウィバー(Dreamweaver)でその様な機能はないのかも知れませんね

また、width="300"だけの指定で横幅300pxに合わせた縦幅に自動調整されるとは知りませんでした、これで電卓を使わなくともOKですね。ずいぶん楽になりそうです。ありがとうございました。

IE以外のブラウザでも確認してみます

PS　完成ソースが崩れていますか？わたしのPCでは大丈夫なのですが、HTMLソースを貼り付けるときには何かしなければいけないのかも知れませんねm(..)m