FC2ブログで複数の画像をサムネイル表示する方法

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

FC2ブログで複数の画像をサムネイル表示する方法

FC2ブログで複数の画像をサムネイル表示する方法

複数画像の横並び(2)

FC2ブログでサムネイル画像を作成する方法は分かったかしら?

そこで今回は、さらなる応用編です。複数の画像をサムネイル表示させてみようと思います。

これができるようになると、「サムネイラー」の称号を賜ることができるとかできないとか。良かったら、お試しあれ。


「FC2ブログで複数の画像をサムネイル表示する」とは?

「FC2ブログで複数の画像をサムネイル表示する」というのは、記事『FC2ブログでサムネイル画像を作成する方法』でご紹介したとおりです。

例えば、次のように記事内で画像をサムネイル表示させることをいいます。

記事内で画像を横並びにさせた状態

記事『FC2ブログで複数の画像を横並び表示させる方法』での画像横並び方法との違いは、サムネイルの場合はクリックすると、大きい画像が表示されることです。

木の写真は、記事『無料写真素材 木(3)』にあります。良かったら今回の練習にご利用ください。


FC2ブログで複数の画像をサムネイル表示する方法

それでは、さっそく複数の画像をサムネイル表示してみましょう。

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

(01)

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

今回は、3枚の写真をサムネイルとして横並び表示にしようと思います。

また、サムネイル画像は、ご利用になっているテンプレートにあわせて、横幅100 ~ 120くらいで指定しておいてください。

サムネイル画像を作成する方法が分からない場合は、記事『FC2ブログでサムネイル画像を作成する方法』をご覧ください。

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

(02)

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

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

3:文章の入力

(03)

サムネイル画像を挿入する前に、何か文章を書きたい場合は書いてください。いえいえ、そんなもうどうぞご遠慮なさらずに。

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

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

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

4:「1枚目のサムネイル画像」を挿入する

(04)

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

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

(05)

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

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

横並びにしたときに、左から1枚目、2枚目、3枚目と表示されるようにしたいと思います。

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

(06)

左から1枚目で表示したい画像の「サムネイルで記事を書く」を、クリックしましょう。

左から1枚目で表示したい画像の「サムネイルで記事を書く」をクリック

(07)

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

1枚目の画像が記事内に挿入される

また、カーソルは、画像の右横にチッカチッカと表示されます。もし1枚目の画像と 2枚目の画像の間に余白が多めに必要であれば、スペースキーを打鍵しておいてください。

5:「2枚目のサムネイル画像」を挿入する

(08)

2枚目のサムネイル画像を挿入します。

[ファイル挿入]ボタンを、クリックしましょう。

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

もしくは、「ファイル管理」画面が、別ウィンドウで表示されたままであれば、そのまま使っても構いません。

(09)

左から2枚目で表示したい画像の「サムネイルで記事を書く」を、クリックしましょう。

左から2枚目で表示したい画像の「この画像で記事を書く」をクリック

(10)

記事を編集する画面を見ると、次のように2枚目のサムネイル画像が横並びで挿入されているはずです。

2枚目の画像が記事内に挿入される

いかがでしょうか?「なーんだー」って感じがしたのではないかしら。つまりは、1枚目のサムネイル画像を挿入したときと作業自体は同じです。

同じことの繰り返しですから、やり方が分かってしまえば、じつはこれ簡単なお話なのです。

6:「3枚目のサムネイル画像」を挿入する

(11)

3枚目のサムネイル画像を挿入する場合も、同様です。

[ファイル挿入]ボタンを、クリックしましょう。

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

ここも、「ファイル管理」画面が、別ウィンドウで表示されたままであれば、もちろんそのまま使っても構いません。

(12)

左から3枚目で表示したい画像の「サムネイルで記事を書く」を、クリックしましょう。

左から3枚目で表示したい画像の「この画像で記事を書く」をクリック

(13)

記事を編集する画面を見ると、次のように3枚目のサムネイル画像が横並びで挿入されているはずです。

画像の挿入が終わったら、「ファイル管理」画面は閉じてしまっても構いません。

3枚目の画像が記事内に挿入される

さらに画像の下に文章を書きたい場合は、「Enterキー」を打鍵すれば改行できるので書き続けることができます。

7:プレビュー表示

(14)

記事をプレビュー表示させると、次のような感じになります。とりあえず、サムネイル画像の横並び表示はできました。

記事内で画像を横並びにさせた状態

複数の画像を中央揃えにしたい場合は、記事『FC2ブログで複数の画像を横並び表示させる方法』の最後の方で書いています。

8:記事の保存

(15)

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

記事を保存ボタンをクリック
前の記事へ
次の記事へ

次回予告

お疲れさまでした。次回は、画像の横に説明文を書く方法をご紹介したいと思います。


関連記事

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

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

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

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

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

コメントの投稿

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

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/666-02450c77
 | トップページ | 

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
ありのごとくあつまりて