えー、それではリクエストにお応えしまして、
アメブロの記事で画像を大きく表示させる方法
の改訂版を書いてみちゃいます。
まず基本的なところからいきましょうか。
といっても、
ログイン→記事を書く→画像を記事に挿入→公開･･･という基本の基本な部分については、アメーバブログのヘルプで説明されているので説明は省きます。
あ、基本の基本がよく解らないっていう人は
とりあえず公式ヘルプのここ↓読んできてね。
Amebaヘルプ｜記事を書こう
さて、基本の基本が解っている人も、上のヘルプをちょいとクリックして見てくださいな。
『STEP3.画像を記事に挿入しよう』の部分なんですが、これって画像を大きく載せるための説明が足りていないんですよ。結構重要な所なんで、足りない部分を補足しながら話を進めていきます。
ヘルプ『STEP3.画像を記事に挿入しよう』によると･･･
(1)画像の追加ボタンをクリック。
↓
(2)アップロード画像を選択。タイトルを入力して「アップロード」をクリック。
↓
(3)「この画像を使う」をクリック。
と、ざっとこんな風に説明されていますよね。でも(3)の手前でやらなきゃいけない大切なことがあるんです。
それは大きさの指定。
＜使用する画像の設定＞という項目で「サムネイル（小）」と「オリジナル」が選べるようになっていますよね。
この2つ、それぞれを選択することでどうなるのかというと
「サムネイル（小）」 は
記事内に表示される画像が横幅220px（ピクセル）に縮小
「オリジナル」 は
記事内でオリジナルの大きさのまま画像を表示
となります。
ですから、記事内でなるべく大きく画像を表示させたいというときには「オリジナル」を選択してください。
ここでね↓
デフォルトでは「サムネイル（小）」が選択されているので、特に何も変更しないでそのまま「画像を使う」ボタンを押してしまうと、横幅が220pxに縮小された画像が記事内に貼り付けられることになりますからご注意を。
ちなみに、もともとの幅が220px以下の画像ならば
表示されるサイズもそのまま変わりはありません。
幅150pxの画像であれば記事内でも幅150pxで表示されます。
ま、なにはともあれ実際にやってみましょうか。
まず最初に、幅380pxの画像を使って。
A → 「サムネイル（小）」で画像を記事に載せた場合 と
B → 「オリジナル」で画像を記事に載せた場合 の、
表示の違いを比べてみましょう。
A
B
こんなふうに表示されます。
A ･･･ 幅220pxに縮小されていますね。
画像をクリックすると画像拡大ページが開いてオリジナルの大きさ（幅380px）で表示されます。
B ･･･ オリジナルの大きさ（幅380px）で表示されていますね。
ウチのブログの場合、記事欄の幅が400px程度なので、400pxよりも小さい画像（今回使用している幅380pxの画像など）ならば「オリジナル」を選択すれば記事内でもオリジナルの大きさで表示されるというわけですね。
ってことは、もともとは大きな画像でもアップロード前にあらかじめ記事欄に合わせてサイズダウンしておけば良いってことでありまして、実際にこの方法でアメブロに画像を載せている人って結構多かったりします。
それじゃあ、記事欄の幅より大きな画像はいったいどうなっちゃうんでしょう？
というわけで、次に用意したのは幅800pxの画像です。
これを使って先程と同じように
C → 「サムネイル（小）」で画像を記事に載せた場合 と
D → 「オリジナル」で画像を記事に載せた場合 の、
表示の違いを見てみましょう。
C
D
C ･･･ Aと同じく幅220pxに縮小されています。
クリックすると画像拡大ページが開いて800px（オリジナルの大きさ）で表示されますね。
D ･･･ オリジナルの大きさで表示されています。
大きいです。つーか大きすぎます。
記事内に収まりきれず盛大にはみ出してしまいました。画像全体が表示されていないせいで、なんの写真かわかりにくいですね。全体を見るためにはクリックしなければなりません。
だけど右側が見えないことを逆手にとっての「クリックしてのおたのしみ」的なお遊びっていうのもアリかもしれませんね。
さて、と。 次の課題に移ります。
記事内で画像全体をできるだけ大きく表示させて、なおかつ、クリックするとさらに拡大･･･っていうのをやってみましょう。
もう一度 幅800pxの画像を使います。
E
こんなふうになります。
どうやっているのかといえば、
まず D と同じ手順で画像を記事に載せて、その後にHTMLタグを編集して幅を380pxに指定しただけです。
具体的にはこんなかんじ。
「記事を書く」画面の下の方にある「HTMLタグを表示」をクリック。
すると、タグやら何やらがゴチャゴチャと表示されますから、
その中から縮小したい画像のタグがある場所を探してください。
たとえばウチの場合はこんなでした。（分かりやすく色をつけました）
----------------------------------------
<a href="http://stat.ameba.jp/user_images/20090531/11/tabisuke/
dd/45/j/o0800053710189127938.jpg">
<img height="537" alt="オリジナルは幅800px" src="http://stat.ameba.jp/user_images/20090531/11/tabisuke/
dd/45/j/o0800053710189127938.jpg" width="800" border="0" /></a>
----------------------------------------
タグを見ると、width属性とheight属性で幅と高さが指定されているので、
これらを変更しなければなりません。
今回は画像を幅380pxで表示させたいので、
width="800" を width="380" に書きかえて
height="537"のほうは削除してしまいます。
----------------------------------------
<a href="http://stat.ameba.jp/user_images/20090531/11/tabisuke/
dd/45/j/o0800053710189127938.jpg">
<img alt="オリジナルは幅800px"
src="http://stat.ameba.jp/user_images/20090531/11/tabisuke/
dd/45/j/o0800053710189127938.jpg" width="380" border="0" /></a>
----------------------------------------
はい、できあがり。
で、「HTMLタグを表示」から「タグの非表示」画面に移動すると、
幅380pxに縮小されているはずです。 たぶんね。
あ、さっき検証した B と E なんですけど、
記事内表示での画質は B の方が E より良いんですよ。
長文になってきたので別ページ↓で比較してみました。
『「オリジナル」と「タグで拡大縮小」の画質比較』
あとですね、
タグを使っての拡大についてなんですけど、
オリジナルの画像が小さくても
タグをいじれば無理矢理大きくできるんですが、
それだと画像が荒れて汚くなってしまいます。
この件についても↑の別ページで比較しています。
他に書き忘れてることはないかなあ･･･
ああそうだ、
ブログに写真を大きく載せるためには、スキンの選択も大切ですね。
当然、記事欄の幅が広いスキンの方が大きい画像を載せられます。
スキンのカラムを3じゃなくて2にするとか、
「横幅可変」を選択するとかって方法もあるんで、
自分でいろいろ試してみてくださいな。
設定はこのあたり↓でね。
最後に、画像アップロードについての注意点。
アメブロにアップできる画像のサイズには制限があります。
・1枚あたり500KB以下
・1記事あたり5000KB（10枚）以下
・1ブログあたり2GB以下
だそうで。
（有料サービスはこの限りではありません）
んで、アメーバブログの仕様なんですけど、
横幅800pxより大きい画像をアップロードしても
すべて幅800pxにリサイズされちゃいますからね。
幅1000pxの画像も2000pxの画像も
アップすれば幅800pxになっちゃいます。
こればかりはどうしようもありません。
てなところで、もう終わってもいいですかね？
終わりますよ。
それじゃ、おしまい。
おまけ：
画像の幅を自分のブログの記事欄に合わせたいんだけど
何ピクセルにすればいいのか分からない･･･っていう人のために、
800pxまで計れるものさしを作ってみました。
っていっても、ぜんぜんたいしたものじゃないんですけどね。
使いたいという奇特な方がいましたら
こちら↓へどうぞ。
＜2009/05/31 たびすけ＞