FC2ブログで画像の横に説明文を入れる方法

ブログが作りたい!FC2ブログの作り方 > FC2ブログで画像の横に説明文を入れる方法

FC2ブログで画像の横に説明文を入れる方法

FC2ブログで画像の横に説明文を入れる方法

複数の写真とその説明を入れたいんだ!

今回は、複数の画像の横に、その説明文を入れたいときの方法をご紹介いたします。

例えば、どこか旅行に行ったときの写真をずらりと並べて、その写真ごとの説明を入れたいような場合に役立つ方法です。

必ずしも完全に「これは、いい方法!」とは言えないのですが、良かったらご覧になってみてください。


「画像と横の説明文」とは?

1:「画像と横の説明文」とは?

「画像と横の説明文」というのは、例えば次のように、左側に画像(写真)、右側にその説明文を書くということです。

プレビュー表示:画像と横の説明文

今回ご紹介する方法では、一覧表を使います。Web制作(マークアップ)の王道からすると、必ずしも正しい方法ではありませんが、簡便に行うためには他に方法はなさそうです。

tableタグは、一覧表を書くためのタグなので、今回のようなレイアウトに近い使い方は、あまり好まれません。

2:今回ご紹介する方法のデメリット

今回ご紹介する方法で「画像と横の説明文」を配置した場合、次のようなことがデメリットとなる可能性があります。

  • ブログ全体(テンプレート)が tableタグによってレイアウトされている場合は、tableタグの入れ子になるので、表示が遅くなるかもしれない。また、検索エンジンがコンテンツをうまく理解できなくなるかもしれない。
  • 画像を大量に使った場合に、表示が遅くなるかもしれない。

ただ、今どきブログ全体を tableタグによってレイアウトしているテンプレートは、かなりレア(珍しい)です。非常に起こる確率が低いお話ではあります。

また、画像を大量に使わないか、もしくは、多くなってしまう場合は、一覧表(テーブル)を分けて作成すると、それほど影響はないはずです。

適宜、ご自分の判断にて、ご利用くださいませ。


FC2ブログで画像の横に説明文を入れる方法

それでは、画像とその横に説明文を入れてみることにしましょう。

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

(01)

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

今回は、写真を 2枚ほど使います。各写真の右横に説明文を入れるので、それなり小さい画像でなければいけません。

テンプレートにもよりますが、横幅120(ピクセル)以下くらいがよろしいかと思います。もともと小さい画像をアップするか、サムネイル画像を作成しておいてください。

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

(02)

FC2ブログ管理者ページへログインし、新しく記事を書く(もしくは、過去の記事を編集する)ページを表示しましょう。

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

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

3:土台となる一覧表をつくる

(03)

画像と説明文を並べるために、一覧表(テーブル)をつくります。

[テーブル 挿入/編集]ボタンを、クリックしましょう。

[テーブル 挿入/編集]ボタンをクリック

(04)

「テーブル プロパティ」画面が、表示されます。

次の箇所を変更し、[OK]ボタンをクリックしましょう。

  • ボーダーサイズ
  • テーブル目的 / 構造
  • テーブル幅
  • セル内間隔
行「2」、ボーダーサイズ「0」、テーブル目的 / 構造「山寺」、テーブル幅「350」、セル内間隔「5」

内容はお好きなように変更していただいて構いません。以下、良かったら参考にしてください。

2

ボーダーサイズ

0(ゼロ)

テーブル
目的 / 構造

(お好きなようにどうぞ)

テーブル幅

350

セル内間隔

5

以下、それぞれの項目の簡単な説明と、変更理由です。

一覧表の行数です。今回は写真が2枚なので、2にしています。

ボーダーサイズ

一覧表の枠です。ここで、0(ゼロ)を指定することで、一覧表の枠が見えなくなります。(※1

テーブル
目的 / 構造

この一覧表の概要(summary)を書きます。今回は「山寺」の写真なので「山寺」と書いています。ブログ上では表示されませんが、入れておくと、検索エンジンがこの表を理解しやすくなります。

テーブル幅

一覧表の横幅を指定します。お使いになっているテンプレートの記事領域にあわせて長さを決めてください。

セル内間隔

セルの内側の余白です。少し増やしておいてあげると、画像や文字に余裕ができます。

※1:テンプレート(CSS)の指定内容によっては、一覧表の枠(罫線)が見える場合もあります。

(05)

2行2列の一覧表(テーブル)が作成されます。

2行2列の一覧表(テーブル)が作成される

4:画像を入れる

(06)

1つ目の画像を、一覧表内へ挿入します。(カーソルはそのままです)

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

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

(07)

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

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

1つ目の画像の[サムネイルで記事を書く]ボタンを、クリックしましょう。(あるいは、もともと小さい画像でアップしている人は、[この画像で記事を書く]ボタンです)

[サムネイルで記事を書く]ボタン(あるいは[この画像で記事を書く]ボタン)をクリック

(08)

指定した1つ目の画像が、挿入されます。

さらに、2つ目の画像を挿入するため、挿入先のセル内をクリックしましょう。(カーソルが移動します)

挿入先のセル内をクリック

(09)

2つ目の画像を、一覧表内へ挿入します。

[ファイル挿入]ボタンを、クリックしてください。(空と山のような絵が描かれたアイコンです)

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

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

(10)

2つ目の画像の[サムネイルで記事を書く]ボタンを、クリックしましょう。(あるいは、もともと小さい画像でアップしている人は、[この画像で記事を書く]ボタンです)

[サムネイルで記事を書く]ボタン(あるいは[この画像で記事を書く]ボタン)をクリック

5:説明文を入れる

(11)

写真の説明文を入れていきます。

1つ目の説明文を入れるセル内を、クリックしましょう。

1つ目の説明文を入れるセル内をクリック

(12)

1つ目の説明文を書いてください。

1つ目の説明文を書く

(13)

同じようにして、2つ目の説明文も書きましょう。

2つ目の説明文を書く

6:プレビュー表示

(14)

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

プレビュー表示:画像と横の説明文

テーブル幅は、400くらいでも良かったかもしれませんね。一覧表については、次の記事が参考になります。いろいろとお試しになってみてください。

7:記事の保存

(15)

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

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

次回予告

お疲れさまでした。次回は、コメントスパムの対応について書く予定です。


関連記事

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

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

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

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

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

凄く参考になりました。私は今まで画像を横に並べる場合 jtrimで連結したものを縮小してました。一度クマさんのやり方でやってみます。 今回の説明文の入れ方もテ-ブルを使うやり方で なるほどと感心しました。回り込みとはまた違うんですね。説明文をセルの範囲内におさめないといけないんですね。次は是非回り込みのやり方について教えて下さい♪

回り込み

shizukaさん、こんにちは!( ・∀・)ノへろー
コメントありがとうございます。

今回の方法は、説明文がすべて短いと、きれいに整わないことも
ありますが、それ以外はわりとおさまりは良いはずです。

回り込みは、どうなんでしょうね。

高機能テキストエディタ上には、
これといったボタン(機能)がないみたいだから、

やりたいのであれば、
HTMLとCSSを駆使してやることになりそうです。

回り込み用のボタン(機能)をつけてほしいと、
要望を出した方が楽かもしれませんね。(´ー`)


URLのアドレスが間違っているようです。
「r」が足りないみたい。

訂正よろしくお願いします。
(誤ったURLのコメントは削除対象になります)

がぞう

tableタグを使わないで、CSSでポジションを細かく指定すると、
後で改変する時に気が遠くなってくるので(笑)ついつい
tableで定義してしまいます(ーー;)
だからWebのスキルが伸びないのでしょうね…

短い夏休み終了いたしましたので、またよろしくお願いいたします!

サマーバケーション

fuminchuさん、こんにちは!( ・∀・)ノへろー
お久しぶりーふッス。

CSS、慣れるまでがけっこう大変ですよねー。

サマーバケーションは、
いかがでしたでしょうか。(´▽`)♪

今夜メールしまーす。

「画像と横の説明文」に2つの疑問点があります。

早速希望を叶えてくださり有難うございます。直ぐに試してみました。今回、次の疑問が生じました。
(1)ボーダーサイズをゼロ(0)に設定したにもかかわらず、罫線が薄く表示されています。IEでは止むをえませんか?
(2)表は左に張り付いていますが、中央揃えのボタンを使うが動きません。表の中央揃えは無理ですか?
 以上お尋ねします。よろしくお願いいたします。敬具

罫線と中央揃え

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

【回答1】:罫線について
> ボーダーサイズをゼロ(0)に設定したにもかかわらず、
> 罫線が薄く表示されています。IEでは止むをえませんか?
>
これはブラウザ(IE)に原因があるのではなく、
記事中でも書きましたが、次の理由によります。

+----+----+----+----+----+----+----+----+----+----+----+
※1:テンプレート(CSS)の指定内容によっては、
一覧表の枠(罫線)が見える場合もあります。
+----+----+----+----+----+----+----+----+----+----+----+

つまり、原因は、お使いになっているテンプレートにあります。

それでは、どうすればいいのか?ということになりますが、
考えられる選択肢は、次の2つくらいかと思います。

 ・HTML、CSSを勉強し、ご自分でテンプレートを修正する。
 ・他のテンプレートを使う。


【回答2】:中央揃え
> 表は左に張り付いていますが、中央揃えのボタンを使うが動きません。
> 表の中央揃えは無理ですか?
>
私はできているので、おそらくできるものと思います。
操作もれがないか、もう一度ご確認ください。

 1:画像を選択する。
 2:中央揃えボタンを、クリックする。

あるいは、勘違いという可能性もあるかと思うので、
何度か試してみてください。

例えば、セル幅が画像の幅とあまり違わないようでしたら、
画像が中央に移動しても、気付き難い場合があります。

また、どうしてもできないという場合は、
FC2側のシステムの不具合の可能性もあります。

コレ便利だー♪

お久しぶりでーす^0^
サムネイルはアップロード時の最初の設定になっていたのか、ハナから作成されていて自分で撮影した画像を入れる時には大抵サムネイル使います♪
横並びはカーソルで合わせれば並んでくれますよね?サイズさえ大丈夫なら^^;w
一覧表は以前教えていただいた時に作成し、その時に今回の方法に気づきましたん^m^・・・でも記事自体なかなか凝った作りにできてないので、あまりやってないワー(T▽T)コレ使うとみやすくキレイな画面になりそうですよね~♪

CSS

隣のオバちゃん(ありんこ)さん、こんにちは!( ・∀・)ノへろー
コメントありがとうございます。

そうですねー。
tableを使うと、きれいに配置できますよねー。

ただ、これをやってしまうと、
本来の意味での一覧表として使いたい場合、

CSSによるもうひと工夫が必要になるんですよね。

そもそも簡単にレイアウトできる方法が、
CSSにちゃんとあればいいのよー。(゜з゜)ぷーすかぷーすか

「画像の横に説明文を入れる」で再度の質問お願いします。

 お世話になります。ご説明のようにテンプレートを別のに変えてみました。枠は消えていました。有難うございました。このテクニックは幅広く活用できそうです。有難うございます。 再度のお願いで済みません。一覧表全体を中央に配置できるのでしょうか?表全体は左に張りついたままでしょうか?表全体ををアクティブにして中央配置のボタンをクリックしても動きません。また、カーソルを右に幾つか寄せて表を貼り付けてみましたが、左一杯に張り付きます。セルの中の画像の中央配置はうまくいっています。専門用語が分らず、分り辛い質問になっています。ご理解いただけることを願っています。敬具

一覧表全体を中央に配置する方法

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


【01】一覧表全体を中央に配置する方法
> 一覧表全体を中央に配置できるのでしょうか?
>
あー、ごめんなさい。画像だと勘違いしてしまいました。
失礼いたしました。(-人-;)

一覧表全体の中央揃えは、一覧表を作成するときの画面の
「キャプションの整列」によってできます。

そこで、中央を選択するだけでOKです。

記事『高機能エディタで一覧表を作成する方法(1)』の
「テーブル プロパティ」の各入力項目の解説にて、

簡単にではありますが、位置揃えについても解説を書いているので、
良かったらご覧になってみてください。
 →http://kumacrow.blog111.fc2.com/blog-entry-620.html

ちなみに、一覧表を作成してしまったあとであっても、

一覧表を選択し、[テーブル挿入/編集]ボタンを、クリックすれば、
一覧表の編集は可能です。

お試しくださいませ。

一覧表の中央揃えもうまく行きました。

 KumaCrow様 表の中央揃えもできました。疑問がすべて解けました。心より御礼申し上げます。素晴らしいホームページを見つけました。初心者には本当に助かります。有難うございます。秀和システムの"初めてのブログ入門”で勉強中です。立ち上げるまで時間が掛かりそうですが、ヨロシクお願い申し上げます。皆様は、コメントの中でとても楽しそうに会話されていますね。親しみを感じます。近々また質問を願い致します。敬具
 

お気軽に♪

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

解決したようで、何よりです。
良かった、良かった。(´▽`)♪らーらーらー

ご不明なことがあれば、
お気軽にコメントしてくださいませー。

No title

ブログは初めてまだ4日目です。写真を入れその横に文を入れれないものかとブログ仲間に尋ねたところ探してくれました。クマクロさんのアドレス・・・すごくわかりやすく説明されています。さっそくブログで挑戦してみます。ありがとうございました。

4日目

ひだまり2さん、こんにちは!( ・∀・)ノ
コメントありがとうございます。

4日目にしてここまで出来るなんて、すごいですねえ。(´▽`)♪
良いブログ仲間をお持ちのようで、何よりです。

ご不明な点があれば、お気軽にコメントしてください。


今後もどうぞよろしくお願いしまーす。ヾ(*´∀`*)ノ


コメントの投稿

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

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/667-25240dda
 | トップページ | 

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