SITE TITLE
12345hit
●●●
1st
new
txt
bbs
clap
re
●●●
rank
rank
rank
●●●
design
はくがいがい
------キリトリ------
角丸応用その２。CSS不使用。
タイトルは一行に収まるものにしてください。改行してしまうと下部に飛び出ます。(円の中心に文字列を固定するため行間(line-height)を240pxに指定しているからです)
ガラケー等のCSS3非対応ブラウザではこの円は正方形に見えます。
と、いろいろ書きましたが一個前のテンプレ28「circle」よりは簡単です。
タグ。background-image:url(敷き詰め素材URL)の部分、カッコ→url()は消しちゃだめですよ。
<div style="text-align:center;"><div style="border:3px solid #808000;background-image:url(敷き詰め素材URL);background-repeat:repeat;color:#f0e68c;width:240px;height:240px;margin:0 auto;padding:0;-moz-border-radius:120px;-webkit-border-radius:120px;border-radius:120px;line-height:240px;"><span style="font-size:30px;">SITE TITLE</span></div></div><br><div style="text-align:center;line-height:1.3;font-size:16px;" align="center">12345hit<br><br><font color="#808000">●●●</font><br><br><a href="URL">1st</a> <a href="URL">new</a> <a href="URL">txt</a><br><a href="URL">bbs</a> <a href="URL">clap</a> <a href="URL">re</a><br><br><font color="#808000">●●●</font><br><br><a href="URL">rank</a> <a href="URL">rank</a> <a href="URL">rank</a><br><br><font color="#808000">●●●</font><br><br><div style="text-align:center;font-size:small;" align="center">design <a href="http://id35.fm-p.jp/291/western442/">はくがいがい</a></div></div>
------キリトリ------
SITE TITLE
12345hit
info
main
bbs
bkm
clap
→
re:
since 2000/00/00
master ○○○
design
はくがいがい
------キリトリ------
もういっちょ。円内メニュー内包バージョン。CSS、素材ともに使ってません。
タグ。
<div style="text-align:center;"><div style="border:2px solid #808000;width:300px;height:300px;margin:0 auto;padding:0;-moz-border-radius:150px;-webkit-border-radius:150px;border-radius:150px;line-height:1.3;font-size:16px;"><br><br><br><span style="font-size:30px;color:#808000;">SITE TITLE</span><br>12345hit<br><br><a href="URL">info</a> <a href="URL">main</a> <a href="URL">bbs</a> <a href="URL">bkm</a><br><a href="URL">clap</a>→<a href="URL">re:</a><br><br>since 2000/00/00<br>master ○○○<br></div></div><br><div style="text-align:center;font-size:small;" align="center">design <a href="http://id35.fm-p.jp/291/western442/">はくがいがい</a></div>
下は固定したボックス高から文章をはみ出させてみるために、わざと長々と詳細な説明をしています。管理人のIE11から見るとこの後はみ出た文字が下のレイアウトに重なっていきます。このことから長い文章を入れたい場合は円の外に書くことをお勧めします。
ご覧の通り、円内の文章は角を取る前のボックス(正方形)に沿って改行していきます。円に沿わせたい場合は自力の改行で調節を。ただしガラケー等のCSS3非対応ブラウザではこの円は正方形に見えますので留意してください。円の中は背景色、文字色とも指定をしてありませんので全体の背景色を変えると円の中の色も一緒に変わります。
文字色
■
ブラック(#000000)
リンクの色
■
#808000
クリック済みリンクの色
■
#808000
クリック中リンクの色
■
#808080
背景色
■
#f4f8f1
敷き詰め素材
[
TOPへ
]
[
ｶｽﾀﾏｲｽﾞ
]
©フォレストページ
