サイトマップ(すべてのページ)










ver1 FC2ブログで複数の画像やバナーを横に並べる方法。テキスト回りこみも可能。

注意: このブログページはもやは古いバージョンです。
次に示す最終バージョン(2種類)のページに行ってください。
 ┣ 最終バージョン(fc2ブログでないブログや通常サイトでも使える)
 ┗ 最終バージョン(fc2ブログで使える。ものすごく便利)



詳しい説明は下の方にあります。では始めます。


◆一段のみのタイプ

1左寄せ 上揃え2左寄せ 上揃え

以下はそのソース:

<table border="1" width="100%"><tbody><tr><td align="left" valign="top">1左寄せ 上揃え</td><td align="left" valign="top">2左寄せ 上揃え</td></tr></tbody></table>


必要に応じて取り替え可能:
左寄せ align="left"(取り替え前)
中央寄せ align="center"
右寄せ align="right"
上揃え valign="top"(取り替え前)
中央揃え valign="middle"
下揃え valign="bottom"
境界線あり border="1"(取り替え前)
境界線なし border="0"






◆2段のタイプ

1左寄せ 上揃え2左寄せ 上揃え
3左寄せ 上揃え4左寄せ 上揃え

以下はそのソース:

<table border="1" width="100%"><tbody><tr><td align="left" valign="top">1左寄せ 上揃え</td><td align="left" valign="top">2左寄せ 上揃え</td></tr><tr><td align="left" valign="top">3左寄せ 上揃え</td><td align="left" valign="top">4左寄せ 上揃え</td></tr></tbody></table>


必要に応じて取り替え可能:
左寄せ align="left"(取り替え前)
中央寄せ align="center"
右寄せ align="right"
上揃え valign="top"(取り替え前)
中央揃え valign="middle"
下揃え valign="bottom"
境界線あり border="1"(取り替え前)
境界線なし border="0"





◆ではこのページの説明をします。
●このページの内容の目的:
FC2ブログで記事(エントリー)の部分に画像を2つ横に並べたり、画像の右または左にテキストを表示させたり(回り込み)させる方法です。
管理ページの「新しく記事を書く」のページの下に、
行の扱い 自動改行  HTMLタグのみ
という欄があって、HTMLタグのみにすれば、出来るのですが、ここでは自動改行モードでも出来る方法を書きます。自動改行モードで、複数の画像やバナーを横に並べたりテキスト回り込みしたり出来れば、かなりページ作製が簡単になるはずです。

●ひとことで言うと:
簡易モードOFF 高機能テキストエディターはではないモード(重要) 自動改行のモード(自動改行のモードでも複数画像を横に並べたり、テキストを画像にも割り込ませれるようにするため)

●では、手順を書きます。
fc2ブログにログイン

管理ページ

新しく記事を書く(リンクの名前)

簡易モードをOFFにする

ずーっと下にスクロールして、自動改行になっていることを確認(慣れていれば確認するまでもないが)。

上記のソースを画像やバナーや回り込みテキストを載せたい部分に貼り付ける

「1左寄せ 上寄せ」などの部分を、掲載したい文字や画像ソースやバナー広告ソースに差し替える。



こちらのページ(http://dejitaruanarogu.blog.fc2.com/blog-entry-8.html)(別ウインドウ)にはかなり豊富に雛形が出ています。





以下は今までのバージョンです。削除してもいいのですが、とりあえず残しました。
●●●●●●

●このページの内容の目的:
FC2ブログで記事(エントリー)の部分に画像を2つ横に並べたり、画像の右または左にテキストを表示させたり(回り込み)させる方法です。
管理ページの「新しく記事を書く」のページの下に、
行の扱い 自動改行  HTMLタグのみ
という欄があって、HTMLタグのみにすれば、出来るのですが、ここでは自動改行モードでも出来る方法を書きます。自動改行モードで、複数の画像やバナーを横に並べたりテキスト回り込みしたり出来れば、かなりページ作製が簡単になるはずです。

●ひとことで言うと:
簡易モードOFF 高機能テキストエディターはではないモード(重要) 自動改行のモード(自動改行のモードでも複数画像を横に並べたり、テキストを画像にも割り込ませれるようにするため)

●では、手順を書きます。
fc2ブログにログイン

管理ページ

新しく記事を書く(リンクの名前)

簡易モードをOFFにする

ずーっと下にスクロールして、自動改行になっていることを確認(慣れていれば確認するまでもないが)。


<table border="0" cellspacing="0" cellpadding="0"><tr><td VALIGN="top">●あ●</td><td VALIGN="top">●い●</td></tr></table>

を画像やバナーや回り込みテキストを載せたい部分に貼り付ける

するとプレビューには以下のように表示されるはず:

●あ●●い●


●あ● や ●い● は 画像のソース や バナーのソース や テキストの文章 と取り替えることが出来るので、必要に応じてそれらと取り替える。

以下がその例である。●あ●はテキストの文章と取り替え、●い●はバナーのソースと取り替えた。
ちなみに、●あ●は、「私はパソコンを・・・・使うことにしました。」と取り替え、●い●はほぼ正方形の形のバナー広告である。

私はパソコンを買った。ネットも出来ればもっとそのパソコンを活用できると思った。ではどうすればいいのかな?って思ったので、友だちに電話した。そしたら、友達がいい光ファイバーの契約のしかたを教えてくれた。なので、その光ファイバーを契約して使うことにしました。



テキストの部分を枠いっぱいに書くことも出来るのですが、ブラウザの種類や設定によっては文字が多すぎてしまうことも大いにありうるのでこの程度の長さでやめておきました。

なお、●あ● も ●い● も上寄せになっています。すなわち、文字も画像もバナーも上から配置されるということ。で、
もし、中央寄せにしたいなら、
VALIGN="top" を 削除してださい(中央寄せはデフォルトなので削除するだけでいいのです)(直前の、半角スペースも削除です)。
また、
もし、下寄せにしたいなら、
VALIGN="top" を  VALIGN="bottom" に取り替えてください。

また、同様に

の形の配置の方法も同様に以下のとおり説明します。
これならば、画像を2つ並べて、上にタイトルを書けます。
●あ●●い●
●う●●え●
という配置になります。
ではそのソースです:

<table border="0" cellspacing="0" cellpadding="0"><tbody><tr><td VALIGN="top">●あ●</td><td VALIGN="top">●い●</td></tr><tr><td VALIGN="top">●う●</td><td VALIGN="top">●え●</td></tr></tbody></table>

なお、●あ● も ●い● も ●う● も ●え● も上寄せになっています。すなわち、文字も画像もバナーも上から配置されるということ。で、
もし、中央寄せにしたいなら、
VALIGN="top" を 削除してださい(中央寄せはデフォルトなので削除するだけでいいのです)(直前の、半角スペースも削除です)。
また、
もし、下寄せにしたいなら、
VALIGN="top" を  VALIGN="bottom" に取り替えてください。


さらにこれを応用したページの例と、ソースのページも作りました。

上寄せとか中央寄せとかの参考というか詳しいページはこちらのページです。
また、皆様にはあまり関係ないけど、タグの説明を表示する為の方法についてのページはこちらのページです。

このページで使う言葉の意味:
♢ このページで言うバナーとは「バナー広告」に代表される「リンク付きの広告画像」のことです。
♢ 回り込みと書きましたが、ここで書いている回り込みの意味は厳密な意味の回り込みではありません。右側にテキストを書けるけれど、書ききれないで余ったテキストが自動で画像等の下に表示されるわけではありません。
ところが、この方法のほうが良い点が幾つかあるのです。良い点とは:
・作るのが簡単。
・本来の回り込みの方法だと、バナーのソースに加工を加えざるを得なくなり、規約等に違反するおそれが出てくる。
●●●●●●
以下はテストです。
1左寄せあいうえお 上寄せ2左寄せ 

Lenovo G565 15.6型 HD液晶 ノートPC ブラック 438593J

新品価格
¥39,800から
(2011/3/9 01:09時点)


上寄せ
3左寄せ 上寄せ4左寄せ 上寄せ


●●●●●●

●●●●●●




スポンサーサイト
[ 2011/02/03 00:17 ] 未分類 | TB(0) | CM(0)

コメントの投稿













管理者にだけ表示を許可する

トラックバック:

この記事のトラックバック URL
http://dejitaruanarogu.blog.fc2.com/tb.php/3-5dc94fc1




 スポンサード リンク


















ページを開くだけで使える:
カウントダウンタイマー
(例:7分後にアラーム) (直リンク) 「リリリリ-ン」が5秒間
カウントダウンタイマー
(例:PM2:58にアラーム) (直リンク) 自由指定の動画と音声で知らせる
時間計算機 (直リンク
電卓 (直リンク
●ストップウォッチ(直リンク












光ファイバーの広告
寝ている猫を小鳥が突っついて起こす動画。





っっt