FC2ブログで複数の画像を横並び表示させる方法

ブログが作りたい!FC2ブログの作り方 > FC2ブログで複数の画像を横並び表示させる方法

FC2ブログで複数の画像を横並び表示させる方法

FC2ブログで複数の画像を横並び表示させる方法

複数画像の横並び(1)

今回は、FC2ブログの記事内で、複数の画像を横並び表示させる方法をご紹介いたします。

おそらく、写真などはサムネイル表示にしてしまう人が多いかもしれませんが、人によっていろいろな状況があると思うので書いておくことにしました。

また、複数の画像を横並び表示させる基本的な操作が理解できるので、サムネイルにする前に一度作業を試しておくと分かり良くなるかもしれません。良かったらご覧ください。


「FC2ブログで複数の画像を横並び表示させる」とは?

例えば、次のような写真が 3枚あるとします。写真の大きさは、横120×縦90(ピクセル)です。

「このような複数の縦並びの画像を、FC2ブログの記事内において横並び表示させたいときもあるよね」というのが今回のお話です。

無料写真素材 青空32
無料写真素材 青空33
無料写真素材 青空34

一般的に、記事の領域(横幅)はたいてい400~500ピクセルくらいはあるはずですから、その領域におさまるのであれば横並びにしても問題ないわけです。

※:記事の領域(横幅)は、お使いになっているテンプレートによって違います。

例えば、記事の領域(横幅)が、500(ピクセル)だとした場合、次のような組み合わせなら、おさまりますよね。

画像の横幅

画像の枚数

計(ピクセル)

120

3

360

200

2

400

120

4

480

以下、記事内で画像を横並びにさせたときのサンプルです。こんな感じになります。

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

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


FC2ブログで複数の画像を横並び表示させる方法

それでは、さっそく画像を横並びにしてみましょう。

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

(01)

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

ちなみに今回は、もともと小さい画像なので、サムネイルは作成していません。(サムネイルにしたい場合は、記事『FC2ブログで複数の画像をサムネイル表示する方法』をご覧ください)

画像のアップロード方法が分からない場合は、記事『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)

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

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

でも、画像の位置が左揃えになっていて、右側に余白ができてしまっているので、ちょっとアンバランスかもしれません。

8:複数画像の中央揃え

(15)

複数画像を中央揃えにしたい場合は、さらに次のようにします。

画像がない辺りから、画像のない辺りへ、複数の画像に対して線をひくようにマウスでドラッグします。(右からでも左からでもOK牧場)

ドラッグして複数の画像を選択する

(16)

前述(15)を行うと、複数の画像が選択された状態になります。(色が少し変化します)

複数の画像が選択できたら、[中央揃え]ボタンをクリックしましょう。

[中央揃え]ボタンをクリック

(17)

記事をプレビュー表示してみてください。次のように、複数の画像が中央揃えになっているはずです

複数の画像が中央揃え

9:記事の保存

(18)

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

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

次回予告

お疲れさまでした。次回は、FC2ブログでサムネイル画像を作成する方法について書いています。


関連記事

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

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

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

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

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

お礼

写真を2枚並べる時どうすればよいか検索しました。
わかりやすく書かれていて助かりました。
ありがとうございました。

コメントの投稿

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

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/664-115602a9
 | トップページ | 

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