SITE TITLE
12345
◆contents
info
novel
album
clap
res
bkm
◆last update
履歴→
log
2015/1/3 長文更新
2015/1/2 短文更新
2015/1/1 拍手更新
◆ranking
rank1
rank2
rank3
master-なまえ
since-2000/00/00
designed by
hkgaigai
--------キリトリ--------
歯車素材の活用。
更新履歴は＜div class="up"＞と＜/div＞の間に挟んだ文章がスクロールボックスに入るようCSSで設定してます。(実際のタグは＜＞が半角です) ちなみにスクロールは中の文章が３行以上で出現。
CSSってどこに貼ればいいの？っておっしゃるフォレストユーザーさんは
CSSとタグの使い方
も合わせてご覧ください。
※google fonts使用。
CSS。貼るだけ。
<link href='http://fonts.googleapis.com/css?family=Quantico' rel='stylesheet' type='text/css'><style type="text/css">.up{color:#666666;border:1px solid #666666;background-color:#ffffff;font-size:10pt;overflow:auto;max-width:240px;height:40px;margin:5px;padding:2px;text-align:left;box-sizing:border-box;}.deco{font-family:'Quantico', sans-serif;}.deco a{text-decoration:none;}.deco a:link{color:#c0c0c0;}.deco a:visited{color:#d3d3d3;}.deco a:hover{color:#666666;position:relative;top:1px;left:1px;}.deco a:active{color:#d3d3d3;}</style>
タグ。毎度のことですがbackground:black url(歯車素材URL)…の、カッコ→url()は消しちゃだめです。
<div style="text-align:center;"><div class="deco" style="background:black url(歯車素材URL) no-repeat 0 0;margin:0 auto;width:90%;max-width:300px;padding:3px;line-height:1.3;color:#ffffff;text-align:left;font-size:16px;box-sizing:border-box;"><br><br><br><div style="font-size:x-large;text-align:center;">SITE TITLE</div><div style="font-size:small;text-align:center;">12345</div><br><br><br><br>◆contents<br><a href="URL">info</a> <a href="URL">novel</a> <a href="URL">album</a><br><a href="URL">clap</a> <a href="URL">res</a> <a href="URL">bkm</a><br><br><br><br>◆last update<div class="up">履歴→<a href="URL">log</a><br>2015/1/3 長文更新<br>2015/1/2 短文更新<br>2015/1/1 拍手更新<br></div><br><br><br>◆ranking<br><a href="URL">rank1</a> <a href="URL">rank2</a> <a href="URL">rank3</a><br><br><br><div style="text-align:right;">master-なまえ<br>since-2000/00/00</div><br><br><div style="text-align:center;font-size:small;">designed by <a href="http://id35.fm-p.jp/291/western442/">hkgaigai</a></div></div></div>
文字色
■
グレー(#666666)
リンクの色
■
グレー(#666666)
クリック済みリンクの色
■
グレー(#666666)
クリック中リンクの色
■
グレー(#666666)
背景色
■
ホワイト(#ffffff)
歯車素材 240×170px jpg
別素材バージョン
↓
SITE TITLE
12345
◆contents
info
novel
album
clap
res
bkm
◆last update
履歴→
log
2015/1/3 長文更新
2015/1/2 短文更新
2015/1/1 拍手更新
◆ranking
rank1
rank2
rank3
master-なまえ
since-2000/00/00
designed by
hkgaigai
動く素材をわざと見切らせ、さらに拡大させて設置。
CSS。貼るだけ。
<link href='http://fonts.googleapis.com/css?family=Quantico' rel='stylesheet' type='text/css'><style type="text/css">.up{color:#666666;border:1px solid #666666;background-color:#ffffff;font-size:10pt;overflow:auto;max-width:240px;height:40px;margin:5px;padding:2px;text-align:left;box-sizing:border-box;}.deco{font-family:'Quantico', sans-serif;}.deco a{text-decoration:none;}.deco a:link{color:#c0c0c0;}.deco a:visited{color:#d3d3d3;}.deco a:hover{color:#666666;position:relative;top:1px;left:1px;}.deco a:active{color:#d3d3d3;}</style>
タグ。
<div class="deco" style="background:black url(動くハート素材URL) no-repeat 50% -50px;background-size:50%;margin:0 auto;width:90%;max-width:300px;padding:3px;box-sizing:border-box;line-height:1.3;color:#ffffff;text-align:left;font-size:16px;"><br><br><div style="font-size:x-large;text-align:center;">SITE TITLE</div><div style="font-size:small;text-align:center;">12345</div><br><br><br>◆contents<br><a href="URL">info</a> <a href="URL">novel</a> <a href="URL">album</a><br><a href="URL">clap</a> <a href="URL">res</a> <a href="URL">bkm</a><br><br><br><br>◆last update<div class="up">履歴→<a href="URL">log</a><br>2015/1/3 長文更新<br>2015/1/2 短文更新<br>2015/1/1 拍手更新<br></div><br><br><br>◆ranking<br><a href="URL">rank1</a> <a href="URL">rank2</a> <a href="URL">rank3</a><br><br><br><div style="text-align:right;">master-なまえ<br>since-2000/00/00</div><br><br><div style="text-align:center;font-size:small;">designed by <a href="http://id35.fm-p.jp/291/western442/">hkgaigai</a></div></div>
動くハート素材(背景透過)
[
TOPへ
]
[
ｶｽﾀﾏｲｽﾞ
]
©フォレストページ
