【初心者向け】ブログにパソコンに保存された画像を貼り付ける方法(その3) | アメブロデザイン制作サービス@シンクマックス

アメブロデザイン制作サービス@シンクマックス

オリジナルデザインで印象に残るビジネスブログを作りましょう!

アメブロに画像を貼り付けてみるシリーズ、3回目です。今回は、「ブログに貼るために写真のサイズを変更(リサイズ)する」です。

その2では、画像をリサイズせずに原寸で貼り付ける方法 を解説しましたが、画像がブログの本文の幅より広い場合、はみ出してしまいます。デジカメのデータを取り込むと、画像の大きさもデータの大きさもかなりのものです。ここからブログに適した大きさにリサイズしていくわけですが、今回はフリーウェア(無料で使えるソフト)を使って解説していきます。

1.JTrim をダウンロードして、インストールします
2.リサイズしたい画像を JTrim に取り込みます
3.任意の大きさにリサイズして、保存します

基本は3ステップですが、インストールは1回だけなので、2回目以降はもっと簡単です。

- * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - - * - * - * - * - * -

1.JTrim をダウンロードして、インストールします

ページの中ほどにある「DOWNLOAD」のセットアップ版をダウンロードして、インストールします。
セットアップ版は、落としてクリックするとすぐにインストールができるようになっています。

【JTrim】
http://www.woodybells.com/jtrim.html

インストールしてから起動すると、こんな画面が出てきます。

アメブロスキン制作サービス@エレファント-画像説明3-1



2.リサイズしたい画像を JTrim に取り込みます

左上のメニューから「ファイル」-「開く」を選んで、編集したい写真を指定します。

アメブロスキン制作サービス@エレファント-画像説明3-2

指定した写真を開きました。実際にはお皿が複数ありますが、画像が大きいために一部分しか表示されていません。

アメブロスキン制作サービス@エレファント-画像説明3-3


3.任意の大きさにリサイズして、保存します

写真をリサイズしていきます。上に並んだボタンから、「リサイズ」ボタンを選択します。カーソルを当てると、ボタンの説明が表示されるので、確認してみてください。

アメブロスキン制作サービス@エレファント-画像説明3-4

画像を、リサイズしたいサイズに設定していきます。アメブロに貼り付ける場合の目安ですが、

・3カラムの場合、横幅400ピクセルまで
・2カラムの場合、横幅550ピクセルまで

はみ出さない上限がこのぐらいの横幅です。下にある「縦横の比率を保持する」のチェックは、外さないようにしてください。この機能をオンにしておくと、縦横どちらかを指定するだけで、きれいにリサイズされます。

アメブロスキン制作サービス@エレファント-画像説明3-5

リサイズされて、写真全体が見えるようになりました。これを「ファイル」>>「名前を付けて保存」します。ファイル名は、サイズを含めておくといいかもしれません。
たとえばこの写真であれば、「リサイズ例_400px」みたいな感じですね。あとでわかりやすくなります。

アメブロスキン制作サービス@エレファント-画像説明3-6

- * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - - * - * - * - * - * -

ここまででリサイズのやり方は終わりです。サイズのところにちょっと書いた、「3カラムの場合」と「2カラムの場合」の目安になる横幅の根拠と、実際どうなのかを、ちょこっと解説します。


まずは、3カラムの場合です。このパターンは両側にメニューを配置していますが、本文が右もしくは左側に寄っていても、幅そのものは同じです。

本文全体の幅が、約430ピクセルです。そして、内側の余白を考慮しなければいけません。
そのため、3カラムの場合、上限がだいたい400ピクセルと覚えておいてください。

アメブロスキン制作サービス@エレファント-画像説明3-7

2カラムの場合は、サイドメニューが片方にしかないため、本文の幅が広くなります。画像を大きく載せたり、テキストを読んでもらうことが主眼の場合は、こちらがおすすめです。

アメブロスキン制作サービス@エレファント-画像説明3-8

本当はもうちょっといけますがが、スキンによって余白の設定に多少の違いがあるために、この数字にしてあります。
2カラムの場合、上限がだいたい550ピクセルと覚えておいてください。

- * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - - * - * - * - * - * -

初心者向けの画像貼り付け・加工シリーズ、次回は「画像にリンクをはる方法」についてです。