バラバラクイズです！

画像置き換えのタグなど、現在は動かなくなっているものがあります。 残念ですが、頑張って作ったので記念にここに置いておきます。

さて、私は何の花でしょう？ え？簡単すぎるよって？？では・・・ ？それぞれの花はいくつ？ ちょっこっと難しいと思うんだけどなー。 頭と目を グルグルさせて考えてみてくださいませね！！

レイアウトタグ２回目。

いろいろアレンジもしてみたいんですけどね、何せセンスの方が…。いつものパターンとなりますが、２列で文字を入れるタグです。前々回の１枠のタグの中箱の部分と改行でつなぎ合わせ、画像を増やして大作にチャレンジはどうでしょうか？

今日のパターンはこんな感じです。

まだ秋が始まったばかりの頃でした。公園のアベリアの植え込みが、キラキラと輝いて、どの花もにっこりと微笑みかけてくれました。一段と寒くなったこの頃です。こんな秋の一日が懐かしく思い出されました。 今日はこんなふうに画像の横に文字を入れてみたいと思いました。

画像は横幅250ピクセルで用意しておき、画像を左に、文字を右横に上から流し込みました。




■こちらはコピー用のタグです。縦方向は改行で調節してあります。

---

<Table width="520" bgcolor="#cbea93">
<tr><td><Table width="480" Align="center">
<tr><td width="255" valign="top">
<img src ="画像"></td>
<td width="225" valign="top">
<font size="2" color="black" style="line-height:160%;">文章
</font></td></tr></table>
</font></td></tr></table>

---

簡単な文章タグを利用して

前回は枠の中に画像を入れてレイアウトする記事を書きましたが、今日はもっと簡単にできる文章中の装飾について書こうと思います。

文章にいろいろアレンジをすると楽しくなりますが、その中で頻繁に使う簡単なものをまとめてみました。例えばgooのFONTボタンを押すと というタグが出てきますが、これを利用して簡単に変化をつける事ができます。 ただ今HTML修行中！　文字サイズ５でリンク。 ただ今HTML修行中！ 上記のタグを応用して size=5　（1～5までで文字サイズを調整します） color="black"　または　color="#8B0000" 　　black以外にもカラーコード表から＃以下６桁の記号番号が使えます。 style="line-height:160%;　の部分は行間を指定しています。 このタグの160%の数字を変えてみてください。行間が調節できます。例えば、120%の狭い行間にして詩のような文章を書いてみます。 澄みきった青い空 午後の太陽が 大きな白い雲を ゆっくりと 押して行きました。 200%など大きな数字を入れて行間を広げ、文章をゆったり表示させて読みやすくしてもよいでしょう。また、文章中に目立たせたい箇所がある場合には 太字にしたり　　　　　　太字にしたり 色をつけたりします。　　色をつけたりします。 色つきの太字にするには　　色つきの太字にするには 左寄せにして 文字長さのジグザグラインを 活かしたり 何も指定しなければ 左寄せになります。 中央寄せにして ソフトな 文字の流れを作ったり 右端に写真タイトル 左寄せ 中央寄せ 右寄せ グレーの横線内のタグをお持ち帰りください。記事内にあるグレーの横線は を入れると表示できます。たくさんの工夫ができると思いますので、色を変えたり、文章の流れに変化をつけて応用してくださいネ。

１枠に１画像と文章のタグ

今日は久しぶりのHTML修行中。例により試行錯誤です。間違いだらけのHTML、実は思い込みのタグかもしれませんが、親切なgooブログさんでなら表示できますよ！　作成例は赤い小さなルコー草のレイアウトです。

◆　　◆　　◆　　コピー用【タグ】　　◆　　◆　　◆

<table width="520" STYLE="border: 1px #000000 solid; border-collapse: collapse; Align="center">
<tr><td Align="center">
<img src ="画像">
<Table width="480">
<tr><td Align="left">
<font size="2" style="line-height:160%;">本文</font>
</td></tr></table>
</td></tr></table>

=====================================

簡単に言うと
　１　全体に520の細い罫線枠のテーブルを作り
　２　その中央に横が480ピクセルの画像を表示させ
　３　１行あけて
　４　次に480のテーブルをセンターに作って文章を流し込みます。

箱の中に箱があるような感覚です。テーブル内の左右のアキスペースで作る方法もありますが、これだとアキスペースの自由がきかない（私はうまくいかない）ので、この方法を取っています。たくさんのテーブルを並べる時などもこの方法を使うと自由に配置する事ができます。良かったらどうぞお試しください。

昨日のマウスオン・答えは・・・

答えは「さるすべり」分かりました？「百日紅」と書きます。百日間咲き続けるという名前の由来とか。滑らかな幹が特徴の夏の代表花木です。賞品は…なしでーす！

昨日の「私は誰でしょう」の並べ方のタグは、８枚の画像をマウスオン＆アウトのタグで順番に並べただけです。慎重に！慎重に！急がば回れですよ！

ポイントは全ての画像を250×250（２枚で520以内）のサイズにしておくとよいと思います。

私のような細身タイプのテンプレートをお使いの方は520が限界だと思います。

私は誰でしょう？

ちょっと待って！マウスは１番から順にね！
この花は何でしょう。ゆーっくりお考えください。

何番で分かった？答えはお分かりでしょうけど…明日にしようかなー。

今日の「ただ今HTML修行中！」は、きりちゃんBoxの「マウス・オン＆アウト」を参考に作りました。簡単で、楽しいですよ！

＜TABLE＞タグを使って。

ただ今タグ修行中！毎回試行錯誤を繰り返し、何とか表示させていますが、実は私のタグはTAG＜index＞さんを参考にした、まったくの自己流。恥ずかしながら「表示されればいいや形式」。goo以外だとうまくいかない事もあるかもしれません。間違っているところがあったら、是非ご指摘くださると嬉しいです。

まず、何と言っても私の記事には表（TABLE）を多用しております。簡単に下の図にまとめてみました。






２列１段のタグ（コピー用）

---

＜Table width="520">＜tr>
＜td width="000" valign="top">＜font size="2" style="line-height:160%;">＜img src ="画像">or文章＜/font>＜/td>
＜td width="000" valign="top">＜font size="2" style="line-height:160%;">＜img src ="画像">or文章＜/font>＜/td>＜/tr>＜/table>

---

　使用の際には最初の＜を全て半角の＜に書き換えてください。
　gooブログではTABLEの幅がwidth="520"ぐらいが適当なサイズかと思います。
　width="000"には入れる画像のサイズ、セルの横幅を入れます。
　　（入れる数字も合計が520になるように。）
　valign="top"を指定しないと、デフォルトの中央揃えになります。
　＜tr>～＜/tr>までをコピーして＜/table>の前に貼り付ければ何段でも追加できます。


少しずつ私の記事内のタグをアップさせていこうかと考えています。どうぞよろしく！
TAG＜index＞さんのアドレスはbookmarkに入れました。素晴らしいHPをありがとうございます。