FC2ブログでサムネイル画像を作成する方法

ブログが作りたい!FC2ブログの作り方 > FC2ブログでサムネイル画像を作成する方法

FC2ブログでサムネイル画像を作成する方法

FC2ブログでサムネイル画像を作成する方法

自動的に小さい画像(サムネイル)を作る方法

ブログをはじめると、けっこう「サムネイル」という言葉をよく耳にすることがあるのではないでしょうか。

そのたびに、「どこかのネイルサロンかしらん?」とか、「あたしもかわいいネイルにしちゃおうかしら、夏だし!」なんてことを思ったり、思わなかったり。

さてそこで今回は、「サムネイルって何なのよ!」という人のために、FC2ブログにて、サムネイル画像を作成する方法をご紹介いたします。

また、画像1枚だけをサムネイル形式で、記事に表示する方法についても書いています。良かったら、ご覧くださいませ。


「サムネイル画像」とは?

1:「サムネイル画像」とは?

サムネイル画像は、次のような形で小さい画像を並べて表示する仕組みのことを言います。一般的には、小さい画像をクリックすると、大きい画像が表示される仕組みになっています。

※:次の画像は見本なので、クリックしても何も起こりません。

サムネイル画像をきれいに並べる

イメージできない方は、サンプルページをご覧になってみてください。小さい画像(120×90)をクリックすると、大きい画像(640×480)が表示されます。

2:サムネイル画像にする理由

なぜ、画像をサムネイルにする必要があるかというと、おそらく次のような理由によるものと思います。

  • 複数の画像があっても、ユーザ(閲覧者)が見やすくなる。(全体を把握しやすい)
  • 狭いスペースでも、画像を表示できる。(そして、必要とあらば画像を大きく表示することができる)

例えば、あなたがFC2ブログで記事に画像を挿入しようとしたときに、こんな経験をしたことはないでしょううか。

次のように、写真が記事の領域からはみ出して、他の領域へ被ってしまうような場合です。(あるいは、写真がすべて表示されないだとか)

写真が大きくて、記事領域からはみ出してしまっている

複数の小さい画像を並べるときだけでなく、このように少し画像が大きい場合も、サムネイルの仕組みが役立ちます。

つまり、状況にあわせたレイアウト、デザインが可能になるのです。バランスよく、かっこよく見せることができます。


FC2ブログでサムネイル画像を作成する方法

(01)

それでは、サムネイル画像を作成してみましょう。FC2ブログの場合は、画像ファイルをアップロードするときにサムネイルを作成することができるので簡便です。

管理者ページへログインし、左側のメニュー「ツール」の「ファイルアップロード」をクリックしましょう。

「ツール」の「ファイルアップロード」をクリック

(02)

ファイル管理(アップロード)画面が表示されます。ポイントは、設定(サムネイル)のところの次の3つです。

  • 同時に作成する(jpg、gif、png)
  • 横幅
  • 縦幅
ファイル管理(アップロード)画面

各要項をそれぞれ簡単に説明すると、次のようになります。

設定項目

解説

同時に作成する

チェックを入れておくと、ファイルをアップロードしたときに自動的にサムネイルが作成されます。

(jpg、gif、png)

サムネイルが作成できるのは、jpg、gif、pngのファイル形式だけです。

横幅

指定した「横幅」によって、画像を縮小します。

縦幅

指定した「縦幅」によって、画像を縮小します。

ファイルアップロード自体がよく分からないという人は、記事『FC2ブログの記事で画像を使ってみる』をご覧ください。

(03)

例えば、ブログの記事領域が400(ピクセル)で、横640×縦480の写真をアップしたいとします。

そのようなときは、次のように、横幅320、縦幅240を指定すると、わりとおさまりよく表示できるはずです。

横幅320、縦幅240を指定する

記事領域(表示幅)に対して、画像の幅を70~80%にしておくと、バランスが良くなります。

(04)

もろもろ指定したら、[アップロード]ボタンをクリックしましょう。

[アップロード]ボタンをクリック

(05)

サムネイルを作成しつつファイルをアップロードすると、次のように[サムネイルで記事を書く]というボタンが作成されます。これで完成です。

[サムネイルで記事を書く]というボタンが作成される

FC2ブログでサムネイル画像を使う方法

それでは、ブログに画像を1枚だけサムネイル表示してみましょう。

1:画像をアップロードしておく

(01)

画像をアップロードしながら作業するのはややこしいので、記事で使用する画像はすべて先にサーバへアップしておいてください。

前述の方法を参考にすれば分かるかと思います。ファイルをアップロードするときにサムネイルを指定し、画像を作成しておきましょう。

2:「高機能テキストエディタ」モードへ切り替え

(02)

FC2ブログ管理者ページへログインし、左側メニュー「ホーム」の「新しく記事を書く」をクリックしてください。

「ホーム」の「新しく記事を書く」をクリック

過去の記事へ画像を貼りたいのであれば、もちろん「過去の記事の管理」をクリックし該当する記事を開いてください。

(03)

分かり良くなるので、「高機能テキストエディタ」モードに、切り替えます。

「高機能テキストエディタ」モードに切り替える

3:文章の入力

(04)

サムネイル画像を挿入する前に、何か文章を書く場合は、どうぞ書いてください。

そして、文章を書いたら、「Enterキー」を 2回打鍵しましょう。

文章を書いて、「Enterキー」を 2回打鍵

1回目の「Enterキー」は文末改行のため、2回目の「Enterキー」は文章と画像の間の余白のためです。

4:サムネイル画像を挿入する

(05)

[ファイル挿入]ボタンを、クリックしましょう。(空と山が描かれているようなボタンです)

[ファイル挿入]ボタンをクリック

(06)

「ファイル管理」画面が、別ウィンドウで表示されます。

前述(01)でファイルをアップロードしておけば、「ファイル管理」画面を少し下にスクロールさせると、次のように、今回記事で使う画像が見つかるはずです。

挿入したい画像の「サムネイルで記事を書く」を、クリックしてください。

「サムネイルで記事を書く」をクリック

(07)

記事を編集する画面を見ると、次のように画像が挿入されます。

記事に画像が挿入される

5:プレビュー表示

(08)

プレビュー表示すると、次のような感じになります。

プレビュー表示

画像を中央揃えにしたい場合は、記事『高機能エディタで画像を中央にセンタリングする』をご覧ください。

(09)

ちなみに、実際にこのブログに表示すると、次のようになります。ここでのサイズは、横320×縦240の写真です。クリックすると、横640×縦480の写真が表示されます。

6:記事の保存

(10)

保存するのであれば、記事のタイトルなどを入力したか、しっかり確認してから、[記事を保存]ボタンをクリックしましょう。

記事を保存ボタンをクリック

サムネイルの縦幅、横幅の指定について

前述にて、横640×縦480の写真のときに、「横幅320×縦幅240を指定しましょう」と書きました。

しかしそれにしても、計算が面倒ですよね。今回のように、2分の1くらいなら暗算でもできますが、割り切れない場合だってあるはずです。

さて、どうしたものか?・・・これじつは、必ずしも両方計算しなくても大丈夫です。

横640×縦480の写真を、横320にしたいのであれば、横幅320×縦幅999と指定しておいてもOKです。横幅320×縦幅240のサムネイルを作成してくれます。

つまり、片方の小さい数で指定した数値にあわせて、うまいこと画像を縮小してくれるわけです。

両方入れれば、もちろん間違いはないわけですが、おそらく、たいていの場合は、横幅で調整するはずなので、縦幅には常に999を入れておくと良いかもしれません。

前の記事へ
次の記事へ

次回予告

お疲れさまでした。次回は、FC2ブログで複数の画像をサムネイル表示する方法をご紹介します。


関連記事

FC2ブログの作り方をご紹介している記事です。

作成日:2010/08/07 更新日:2010/08/07

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

サムネイル画像の作り方(1)(2)役立ちました。

 お世話になります。丁度、勉強しているところでとても役立ちました。サムネイル画像の作成、特に横幅/縦幅、ピクセル等の数字が有難かったです。試してみましたが、うまく行きました。複数画像に横並びも大丈夫です。後は慣れるまで練習します。正式にブログを公開するまでにはもう少し時間が掛かりそうですが、よろしくお願いいたします。 有難うございました。

画像の横に説明文を入れる方法も書きました

komonjiさん、こんばんは!( ・∀・)ノHappy Sunday
コメントありがとうございます。

サムネイル作成など、お役に立ったようで何よりです。
良かった、良かった。(´▽`)♪らーらーらー

画像の横に説明文を入れる方法も書いたので、
良かったらご覧ください。

http://kumacrow.blog111.fc2.com/blog-entry-667.html

おはようです。^±^ノ

サムネイルでひとつ・・・。
時間が経つと元の大きな画像に戻ってしまいますね。
これにはご注意を・・・ですね。^±^
2年以上前の記事を見ましたら、写真が大きいままになってました。

例えばこの1枚目の画像ですが。
http://tekukame.blog135.fc2.com/blog-entry-1024.html
サムネイルで入れたのですが、いつの間にかこの状態になってました。

知らなんだーコリアンダー

てくっぺさん、こんばんは!( ・∀・)ノ
コメントありがとうございます。

ん? よく分からないのですが、勝手に戻ってしまうのですか?
知らなんだ。(´Д`;)

問題がおありでしたら、
FC2サポートさんへ問い合わせてみるとよろしいかもしれませぬ。


コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/665-8c8f51d2
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて