※フォレスト利用者向け
初心者向けのタグのルールと素材の使い方
とりあえず機械初心者に超優しいフォレストページ利用者でもサイトを作ろうと思うからには「タグ」がなんなのかくらい知ってます……よね。
＜a href="URL"＞コンテンツ名＜/a＞
↑こういうのがタグです。(実際に使うタグは＜＞が半角です。タグとして機能させないようにするためにわざと全角にしてます。実体参照を使ってタグを表示させる方法もあるんですが森だとちょっとめんどくさ…ごにょごにょ)
ともかくPCからだろうとスマホからだろうと管理ページを隅々まで探せば「作成サポート」や「タグ作成」というリンクが見つかるはずで、そこでタグを作れます。
今回は、そんなタグ作成機のコピペにお世話になっているHTML初心者さんに、「タグというものがある」の次に知って欲しいルールをお教えします。
まず、一つ目。
終了タグを忘れてはなりません。
終了タグというのは……
＜a href="リンク先のURL"＞リンクの名前＜/a＞
＜font color="red"＞赤色にしたい文字＜/font＞
＜div align="right"＞右寄せにしたい文字＜/div＞
などのタグの中の、＜/a＞とか、＜/font＞とか、＜/div＞とかのことです。これがないとタグの効果が終わりません。……使ったことあるならわかりますよね。仮にここに＜font color="red"＞だけをぽんと書いたら、ここ以降の文章が全部真っ赤になってしまいます。＜/font＞で終わらせないかぎり。
そしてそれを踏まえての、つぎです。
タグを組み合わせるときのルールがあるんです。
①＜a href="リンク先のURL"＞＜font color="red"＞文字＜/font＞＜/a＞これが○
②＜font color="red"＞＜a href="リンク先のURL"＞文字＜/a＞＜/font＞これが×
ついでに
③＜a href="リンク先のURL"＞＜font color="red"＞文字＜/a＞＜/font＞これも×
なんです。
まず③から説明。タグは内側から順に「入れ子」で閉じてください。つまり
＜div＞＜a＞＜font＞文字＜/font＞＜/a＞＜/div＞が正しくて、
＜div＞＜a＞＜font＞文字＜/div＞＜/a＞＜/font＞と記述するのは間違いです。
ブラウザが補正してくれる場合もあるけど不具合の元なのでルールは守りましょう。
②がなんでだめかっていうと……面倒なので割愛。そういうもんなんです。どうしても知りたい場合は「インライン要素 ブロックレベル要素」で検索してくださいよ。
素材の独自タグのこと。
私が本当に言いたかったのはここからです。
フォレストでサイト作ったらわかると思うんですが、「TOP画像の設定」ってところにフォレスト利用者が自由に使えるイラスト･写真素材がいっぱい用意されてるの、ご存知ですか？
とか
こういうの。
フォレスト専用の独自タグ→##tOP1300##こんなのを貼るだけでサイトに素材が表示されます。＜＞とか使わなくてもいいんですよ。簡単です。
で、そのなかに、「上下セット」の素材があるのにお気づきですか？
今回はこれ↓を例に説明します。
ちなみにこれは##tOP744##と##top743##「アンティーク着物柄(緑)上･下」のセットです。
こういった素材は大体幅が240px(ピクセル)に統一されています。なんでかっていうと、この幅ならどんなスペックのガラケーでも画像が見れるっていう絶対のサイズだからです。なので素材置き場にもこんなことが書いてあります。
「画面表示を中央寄せにすることでテーブルを使っているように見えます」と。ステキなサンプルつきで。
ですが今やスマホが主流の時代……画面幅は240pxをゆうに超えているし、横画面にされたらそれ以上に……！ 第一PCでネットサーフィンしてる人から見れば、ただ上下に小さめの絵がぽつぽつと置いてあるようにしか見えません。
そのためこれらの素材をキレイに使いたいなら、やっぱり実際に「テーブル」を使うしかないんですよね。
テーブルのこと。
ちなみに「テーブル」っていうのは枠とか余白とか素敵配置とかの事を指すのではなく、tableタグという表作成用のタグの事を指します。それがこれです。
＜table＞＜tr＞＜td＞内容＜/td＞＜/tr＞＜/table＞
tableタグは基本的にこれでワンセットで、これに色んなものを付け加えることで画面上に「枠」を付けることができるようになるんです。
こんなふうに。
①tableタグを使った枠
内容
内容
内容
|
ちなみに枠はtableでなくても作れます。
②divタグを使った枠
内容
内容
内容
画面上のコンテンツを全部中央寄せにしただけじゃこんな風にはなりませんよね。枠の幅は素材に合わせて240pxでなければなりません。
今回はこんなのを作れるタグをご用意します。
はい！投下！
##TOP●##には好きな素材の数字を入れてください。
ちなみに私的にはtableよりdiv style～のタグのほうがおススメです。応用が利きますし。tableはもともと表を作るタグで、レイアウトに使うものじゃありませんしね…。(二重テーブルがauガラケーで不具合を起こすことは有名)
ブラウザによっては見え方に結構違いも出ると思います。
まぁでも、最終的にはお好きなほうをどうぞ、というやつです。
タグと素材の使い方２へ