※フォレストユーザー専用
森専用画像を使ったテンプレ
フォレストページ利用者が、自由に使える公式素材「TOP画像」。ログイン後、ロビーから「HP編集」→「TOP画像の設定」→「フォレスト公式画像」と進んでいくと、膨大な種類のなかから好きな素材を選べます。
このページは、そんな森の公式素材を使ったテンプレートを置きます。使用している画像のタグは独自タグ(##TOP数字##←こういうの)ではなく、
＜img src="/img/top_icon/数字.gif" border="0"＞
このようになっていますが、フォレストのサイト上ならこれで認識します。(コピーボックスの中に独自タグを置けないので…)
MYアルバムに絵をアップロードしなくていいから楽。タグコピーして貼るだけ。
コピペ後はアンカー(aタグ)に各コンテンツのURLを入れたり、カウンターの独自タグを入れれば完成です。
▼ページ内ジャンプ
着物柄のTOP
もみじのTOP
桜のTOP
ハロウィーンのTOP
教室のTOP
ねこのTOP
クローバーのTOP
真夏のTOP
月夜の狼のTOP
文字色
■
ブラック(#000000)
リンクの色
■
グレー(#666666)
クリック済みリンクの色
■
グレー(#666666)
クリック中リンクの色
■
シルバー(#c0c0c0)
背景色
■
ホワイト(#ffffff)
Site Title
▼visitor number 12345
5/20 長編up
▼contents
first
/
main
/
memo
clap
/
re:
▼site owner なまえ
prof
/
mail
/
bkm
▼ranking links
rank
/
rank
/
rank
------キリトリ------
タグと素材の使い方１
で使ったタグをもとにしたもの。いちばんスタンダードな形かと。
<div style="text-align:center;" align="center"><div style="border:1px solid #aaaaaa;background-color:#ffffff;color:#a9a9a9;width:240px;margin:0 auto;padding:0;text-align:left;"><img src="/img/top_icon/744.gif" border="0"><br><div style="width:95%;margin:0 auto;line-height:1.3;"><span style="font-size:x-large;color:#666666;line-height:1.5;">Site Title</span><br><br>▼visitor number 12345<br>5/20 長編up<br><br><br>▼contents<br><a href="URL">first</a>/<a href="URL">main</a>/<a href="URL">memo</a><br><a href="URL">clap</a>/<a href="URL">re:</a><br><br><br>▼site owner なまえ<br><a href="URL">prof</a>/<a href="URL">mail</a>/<a href="URL">bkm</a><br><br><br>▼ranking links<br><a href="URL">rank</a>/<a href="URL">rank</a>/<a href="URL">rank</a></div><br><img src="/img/top_icon/743.gif" border="0"></div></div>
△ページ先頭へ
Site Title
▼visitor number 12345
5/20 長編up
▼contents
first
/
main
/
memo
clap
/
re:
▼site owner なまえ
prof
/
mail
/
bkm
▼ranking links
rank
/
rank
/
rank
------キリトリ------
透過素材を背景として。右上配置。
<div style="text-align:center;" align="center"><div style="color:#ffffff;background:#aabfd5 url(/img/top_icon/653.gif) no-repeat 100% 0;width:240px;margin:0 auto;padding:15px;text-align:left;line-height:1.3;border-radius:10px;box-sizing:border-box;"><h2 style="color:#666666;font:bold x-large/1.5 serif;margin:0;padding:0;text-align:center;">Site Title</h2><br>▼visitor number 12345<br>5/20 長編up<br><br><br>▼contents<br><a href="URL">first</a>/<a href="URL">main</a>/<a href="URL">memo</a><br><a href="URL">clap</a>/<a href="URL">re:</a><br><br><br>▼site owner なまえ<br><a href="URL">prof</a>/<a href="URL">mail</a>/<a href="URL">bkm</a><br><br><br>▼ranking links<br><a href="URL">rank</a>/<a href="URL">rank</a>/<a href="URL">rank</a></div></div>
△ページ先頭へ
Site Title
▼visitor number 12345
5/20 長編up
▼contents
first
/
main
/
memo
clap
/
re:
▼site owner なまえ
prof
/
mail
/
bkm
▼ranking links
rank
/
rank
/
rank
------キリトリ------
タイトルの位置をpaddingで調整してます。リンク色を黒にしたほうがいいかも。
<div style="text-align:center;" align="center"><div style="color:#ffffff;background-color:#cc0201;background-image:url(/img/top_icon/501.gif);background-repeat:no-repeat;background-position:50% 0;width:240px;margin:0 auto;padding:0;text-align:left;"><div style="width:95%;margin:0 auto;line-height:1.3;"><div style="font-size:x-large;color:#000000;padding:60px 10px 0 0;text-align:right;">Site Title</div><br>▼visitor number 12345<br>5/20 長編up<br><br><br>▼contents<br><a href="URL">first</a>/<a href="URL">main</a>/<a href="URL">memo</a><br><a href="URL">clap</a>/<a href="URL">re:</a><br><br><br>▼site owner なまえ<br><a href="URL">prof</a>/<a href="URL">mail</a>/<a href="URL">bkm</a><br><br><br>▼ranking links<br><a href="URL">rank</a>/<a href="URL">rank</a>/<a href="URL">rank</a></div><br></div></div>
△ページ先頭へ
Site Title
visitor number 12345
5/20 長編up
contents
first
/
main
/
memo
clap
/
re:
site owner なまえ
prof
/
mail
/
bkm
ranking links
rank
/
rank
/
rank
------キリトリ------
CSS3対応端末からならBOX内背景色は紫からオレンジのグラデーションに見えるはず。
ちなみにアイコンはBBSアイコン。取得場所→作成サポート内。
<div style="text-align:center;" align="center"><div style="border:2px solid #000000;color:#000000;background-color:#ffbf80;background:-webkit-linear-gradient(#aa72e2,#ff8000);background:-moz-linear-gradient(#aa72e2,#ff8000);background:linear-gradient(#aa72e2,#ff8000);width:240px;margin:0 auto;padding:15px 15px 0;box-sizing:border-box;text-align:left;border-radius:10px;line-height:1.3;"><img src="/img/bbs/31.gif" border="0"> <span style="font:bold x-large/1.3 serif;">Site Title</span><br><br><img src="/img/bbs/32.gif" border="0">visitor number 12345<br>5/20 長編up<br><br><br><img src="/img/bbs/32.gif" border="0">contents<br><a href="URL">first</a>/<a href="URL">main</a>/<a href="URL">memo</a><br><a href="URL">clap</a>/<a href="URL">re:</a><br><br><br><img src="/img/bbs/32.gif" border="0">site owner なまえ<br><a href="URL">prof</a>/<a href="URL">mail</a>/<a href="URL">bkm</a><br><br><br><img src="/img/bbs/32.gif" border="0">ranking links<br><a href="URL">rank</a>/<a href="URL">rank</a>/<a href="URL">rank</a><div align="right" style="text-align:right;padding-right:5px;"><img src="/img/top_icon/680.gif" border="0"></div></div></div>
△ページ先頭へ
site title
▼visitor number 12345
5/20 長編up
▼contents
first
/
main
/
memo
/
clap
/
re:
▼site owner なまえ
prof
/
mail
/
bkm
▼ranking links
rank
/
rank
/
rank
------キリトリ------
幅240pxしかない素材を、幅300pxのboxに合わせて拡大。
<div style="text-align:center;" align="center"><div style="border:1px solid #aad5d5;color:#387272;background-color:#ffffff;background:-webkit-linear-gradient(#afeeee,#ffffff 70%,#ffffff);background:-moz-linear-gradient(#afeeee,#ffffff 70%,#ffffff);background:linear-gradient(#afeeee,#ffffff 70%,#ffffff);width:300px;margin:0 auto;padding:0;text-align:left;"><div style="width:95%;margin:0 auto;line-height:1.3;"><br><div align="center" style="font:bold x-large/1.3 sans-serif;">site title</div><br>▼visitor number 12345<br>5/20 長編up<br><br><br>▼contents<br><a href="URL">first</a>/<a href="URL">main</a>/<a href="URL">memo</a>/<a href="URL">clap</a>/<a href="URL">re:</a><br><br><br>▼site owner なまえ<br><a href="URL">prof</a>/<a href="URL">mail</a>/<a href="URL">bkm</a><br><br><br>▼ranking links<br><a href="URL">rank</a>/<a href="URL">rank</a>/<a href="URL">rank</a></div><img src="/img/top_icon/1138.gif" border="0" style="width:100%;"></div></div>
△ページ先頭へ
site title
こちらは××の二次創作を取り扱っています。原作者、出版社とは関係の無い非公式サイトです。
▼contents
???
/
main
/
memo
clap
/
re:
▼ranking
rank1
/
rank2
/
rank3
visitor number 12345
site owner なまえ
since 2000/00/00
------キリトリ------
タグで作る吹き出し。
<div style="text-align:center;" align:center;><div style="position:relative;width:240px;margin:0 auto 20px;padding:20px;box-sizing:border-box;border:2px solid #000000;background:#fcfced;border-radius:30px;text-align:left;line-height:1.3;"><div style="color:#555500;font-size:x-large;text-align:center;">site title</div><p style="text-align:left;font-size:x-small;margin:5px 0;">こちらは××の二次創作を取り扱っています。原作者、出版社とは関係の無い非公式サイトです。</p><br>▼contents<br><a href="URL">???</a>/<a href="URL">main</a>/<a href="URL">memo</a><br><a href="URL">clap</a>/<a href="URL">re:</a><br><br>▼ranking<br><a href="URL">rank1</a>/<a href="URL">rank2</a>/<a href="URL">rank3</a><br><br><div style="text-align:right;font-size:small;">visitor number 12345<br>site owner なまえ<br>since 2000/00/00</div><div style="position:absolute;bottom:-20px;left:100px;width:0;height:0;border-top:20px solid #000000;border-left:10px solid transparent;"></div><div style="position:absolute;bottom:-13px;left:100px;width:0;height:0;border-top:20px solid #fcfced;border-left:8px solid transparent;"></div></div><img src="/img/top_icon/723.gif" border="0"></div>
△ページ先頭へ
Site Title
12345 hits!
Infomation
attention
last update
Contents
textbook
web clap
response
Ranking links
ranking1
ranking2
ranking3
------キリトリ------
ひとつのボックスに背景画像をふたつ設置する。
<div style="text-align:center;"><div style="background-color:white;background-image:url(/img/top_icon/937.gif),url(/img/top_icon/932.gif);background-repeat:repeat-y,no-repeat;background-position:center top,50% 5%;width:90%;max-width:300px;background-size:100%,auto;margin:0 auto;padding:20px;box-sizing:border-box;text-align:center;line-height:1.5;color:#556b2f;"><h2 style="color:#000000;font:bold 30px/1 serif;margin:5% 0 0;padding:0;">Site Title</h2>12345hits!<br><br><div style="border-bottom:3px dotted;width:60%;margin:0 auto;"><img src="/img/bbs/110.gif" border="0"> Infomation</div><a href="URL">attention</a><br><a href="URL">last update</a><br><br><div style="border-bottom:3px dotted;width:60%;margin:0 auto;"><img src="/img/bbs/110.gif" border="0"> Contents</div><a href="URL">textbook</a><br><a href="URL">web clap</a><br><a href="URL">response</a><br><br><div style="border-bottom:3px dotted;width:60%;margin:0 auto;"><img src="/img/bbs/110.gif" border="0"> Ranking links</div><a href="URL">ranking1</a><br><a href="URL">ranking2</a><br><a href="URL">ranking3</a></div></div>
△ページ先頭へ
SITE TITLE
▼Infomation
attention
last update
▼Contents
textbook
web clap
response
▼Ranking links
ranking1
ranking2
ranking3
visitor num.12345
------キリトリ------
ひとつのボックスに背景画像三つ……盛りすぎかな。夏っぽい素材をかき集めました。
<div style="text-align:center;"><div style="background-color:white;background-image:url(/img/top_icon/626.gif),url(/img/top_icon/1081.gif),url(/img/top_icon/1101.gif);background-position:50% 2px,75px 40px,99% 99%;width:240px;background-repeat:no-repeat;border:3px dotted #87cefa;margin:0 auto;padding:15px 15px 2px;box-sizing:border-box;text-align:left;line-height:1.5;color:#87cefa;"><h2 style="color:#000000;font:bold 30px/1 serif;margin:60px 0 0;padding:0;text-align:center;">SITE TITLE</h2><br><div style="border-bottom:3px dotted">▼Infomation</div><a href="URL">attention</a><br><a href="URL">last update</a><br><br><div style="border-bottom:3px dotted">▼Contents</div><a href="URL">textbook</a><br><a href="URL">web clap</a><br><a href="URL">response</a><br><br><div style="border-bottom:3px dotted">▼Ranking links</div><a href="URL">ranking1</a><br><a href="URL">ranking2</a><br><a href="URL">ranking3</a><br><br>visitor num.12345</div></div>
△ページ先頭へ
▽CONTENTS
INDEX
LAST UPDATE
MAIN CONTENTS
WEB CLAP
RESPONSE
BBS
BOOKMARK
▽RANKING LINKS
ranking1
ranking2
ranking3
count no.12345
SITE TITLE
------キリトリ------
タイトルをbox下部に設置。
<div style="width:95%;max-width:300px;margin:0 auto;padding:20px 8px 8px 20px;background-color:#000000;color:#95bfea;box-sizing:border-box;background-image:url(/img/top_icon/601.gif),url(/img/top_icon/917.gif);background-position:100% 2%,0% 100%;background-repeat:no-repeat;text-align:left;font:15px/1.5 sans-serif;">▽CONTENTS<br><a href="URL">INDEX</a> <a href="URL">LAST UPDATE</a><br><a href="URL">MAIN CONTENTS</a><br><a href="URL">WEB CLAP</a> <a href="URL">RESPONSE</a><br><a href="URL">BBS</a> <a href="URL">BOOKMARK</a><br><br>▽RANKING LINKS<br><a href="URL">ranking1</a><br><a href="URL">ranking2</a><br><a href="URL">ranking3</a><br><div style="text-align:right;margin:auto 0 0;padding-top:40px;">count no.12345<br><h2 style="margin:0;padding:0;font:bold 32px/1 serif;">SITE TITLE</h2></div></div>
△ページ先頭へ
[
TOPへ
]
[
ｶｽﾀﾏｲｽﾞ
]
©フォレストページ
visitor number 12345
Infomation