(注意)
当サイトは、ぱどタウンの公式サイトではありません。単なる、個人サイトです。
一応、タグが上手く表示されるか等の作動確認は、していますが、万が一トラブルが発生しても、管理人は、責任が持てませんので、自己責任でお使い下さい。また、タグが間違っている場合は、ごめんなさい。m(_ _)m
なお、ご使用は、自由ですので、使用の許可等は、一切不要、いりません。当サイトを、リンクしたい方は、ご自由にどうぞ。
皆さんは、ぱどタウンのお部屋の自己紹介の部分以外に、「レインボーローラーの設定」と言う項目の下に、「スタイルシート」と言う項目がある事をご存知でしょうか?
実は、そこの部分に、スタイルシートのタグを書く事によって、お部屋やお部屋の伝言板をカスタマイズする事が出来ます。
このページでは、その部分に書くタグをご紹介したいと思います。
スタイルシートのタグは、次の様に、構成されています。(タグは、全て半角で書きます。)
大まかなタグ{細かい設定をするタグ}
ここで、実は、細かい設定をするタグの部分は、複数の設定をしたい場合(例えば、[文字の大きさ]と[文字の書体]を変えたいなど)は、まとめる事が出来ます。
まとめ方は、次の様にまとめます。
大まかなタグ{細かい設定をするタグ;細かい設定をするタグ;細かい設定をするタグ}
では、実際に、詳しい例を出して、まとめ方を紹介します。
(例)「お部屋の掲示板をカスタマイズ」のタグの「文字の大きさ」と「文字の書体」をまとめて変える。
.bbs_mess_body{font-size:数字px;font-family:書体}
この様に、「{ }」で囲まれた部分タグを、半角の「;」を使って、いくつでも、まとめる事が出来ます。
下に紹介しているタグは、個別に(1個ずつ)紹介していますので、複数個所を変えたい場合には、タグをまとめて下さい。
最後に、自己紹介や、スタイルシートの部分には、文字数制限があるので、タグは、なるべく、いらない物は、省いて、まとめられる物は、まとめて、短くタグを書いた方が、より多くの文字を書く事が出来ます。
お部屋の掲示板をカスタマイズ | ||
---|---|---|
説明 | タグ | コピー |
文字の大きさを変える | .bbs_mess_body{font-size:数字px} | |
文字の書体を変える | .bbs_mess_body{font-family:書体} | |
文字の太さを変える | .bbs_mess_body{font-weight:太さ} | |
背景色を変える | .bbs_mess_body{background-color:#色コード} | |
文字の形状を変える | .bbs_mess_body{font-style:形状} | |
カーソルを変える | .bbs_mess_body{cursor:カーソル形状} | |
枠の形を変える | .bbs_mess_body{border-style:枠の形} | |
枠の色を変える | .bbs_mess_body{border-color:#色コード} | |
枠の太さを変える | .bbs_mess_body{border-width:数字px} | |
書き込みのコメントフォーム部分をカスタマイズ | ||
文字の大きさを変える | textarea{font-size:数字px} | |
文字の書体を変える | textarea{font-family:書体} | |
文字の太さを変える | textarea{font-weight:太さ} | |
背景色を変える | textarea{background-color:#色コード} | |
文字の形状を変える | textarea{font-style:形状} | |
カーソルを変える | textarea{cursor:カーソル形状} | |
枠の形を変える | textarea{border-style:枠の形} | |
枠の色を変える | textarea{border-color:#色コード} | |
枠の太さを変える | textarea{border-width:数字px} | |
文字入力時のモードを 自動で切り替える |
textarea{ime-mode:モードのタグ} | |
スクロールバーの色を 変える |
textarea{scrollbar-base-color:#色コード} | |
背景を画像にする | textarea{background-image:url(画像URL)} | |
書き込みボタンとニックネーム部分をカスタマイズ | ||
文字の大きさを変える | input{font-size:数字px} | |
文字の書体を変える | input{font-family:書体} | |
文字の太さを変える | input{font-weight:太さ} | |
背景色を変える | input{background-color:#色コード} | |
文字の形状を変える | input{font-style:形状} | |
カーソルを変える | input{cursor:カーソル形状} | |
枠の形を変える | input{border-style:枠の形} | |
枠の色を変える | input{border-color:#色コード} | |
枠の太さを変える | input{border-width:数字px} | |
文字入力時のモードを 自動で切り替える |
input{ime-mode:モードのタグ} | |
背景を画像にする | input{background-image:url(画像URL)} | |
お部屋のリンクの文字部分をカスタマイズ | ||
未リンクの文字のカスタマイズ | ||
文字色を変える | a:link{color:#色コード} | |
文字の大きさを変える | a:link{font-size:数字px} | |
文字の書体を変える | a:link{font-family:書体} | |
文字の太さを変える | a:link{font-weight:太さ} | |
背景色を変える | a:link{background-color:#色コード} | |
文字の形状を変える | a:link{font-style:形状} | |
文字に枠をつける | a:link{border-style:枠の形} | |
枠の色を変える | a:link{border-color:#色コード} | |
枠の太さを変える | a:link{border-width:数字px} | |
背景を画像にする | a:link{background-image:url(画像URL)} | |
リンク済みの文字のカスタマイズ | ||
文字色を変える | a:visited{color:#色コード} | |
文字の大きさを変える | a:visited{font-size:数字px} | |
文字の書体を変える | a:visited{font-family:書体} | |
文字の太さを変える | a:visited{font-weight:太さ} | |
背景色を変える | a:visited{background-color:#色コード} | |
文字の形状を変える | a:visited{font-style:形状} | |
文字に枠をつける | a:visited{border-style:枠の形} | |
枠の色を変える | a:visited{border-color:#色コード} | |
枠の太さを変える | a:visited{border-width:数字px} | |
背景を画像にする | a:visited{background-image:url(画像URL)} | |
マウスが重なった時のカスタマイズ | ||
文字色を変える | a:hover{color:#色コード} | |
文字の大きさを変える | a:hover{font-size:数字px} | |
文字の書体を変える | a:hover{font-family:書体} | |
文字の太さを変える | a:hover{font-weight:太さ} | |
背景色を変える | a:hover{background-color:#色コード} | |
文字の形状を変える | a:hover{font-style:形状} | |
文字に枠をつける | a:hover{border-style:枠の形} | |
枠の色を変える | a:hover{border-color:#色コード} | |
枠の太さを変える | a:hover{border-width:数字px} | |
カーソルを変える | a:hover{cursor:カーソル形状} | |
背景を画像にする | a:haver{background-image:url(画像URL)} | |
タグ紹介の一番上に戻る | ||
このページの一番上に戻る | ||
タグが良く解った人の為に、より使い易くする為に、タグをバラバラに してみました。 タグが良く解った人には、こっちの方が、便利かも。 細かい設定のタグの後ろには、 ; が付いていますので コピーでどんどん、付け加えられます。 | ||
上級者用 | ||
大まかな設定のタグ( { }付きです ) | ||
お部屋の掲示板を 変える |
.bbs_mess_body{} | |
お部屋の掲示板の書 き込み日時と名前の 部分のみ変える |
.bbs_mess_main{} | |
書き込みの部分の 周辺を変える |
div.rinnner{} | |
書き込みのコメント フォーム部分を変える |
textarea{} | |
書き込みボタンとニッ クネーム部分を変える |
input{} | |
未リンクの文字 を変える |
a:link{} | |
リンク済みの文字 を変える |
a:visited{} | |
マウスが重なった時の 文字を変える |
a:hover{} | |
細かい設定のタグ( { }に囲まれた部分に書くタグ ) | ||
文字の大きさを変える | font-size:数字px; | |
文字の書体を変える | font-family:書体; | |
文字の太さを変える | font-weight:太さ; | |
文字の色を変える | color:#色コード; | |
背景色を変える | background-color:#色コード; | |
文字の形状を変える | font-style:形状; | |
カーソルを変える | cursor:カーソル形状; | |
枠の形を変える (付ける) |
border-style:枠の形; | |
枠の色を変える | border-color:#色コード; | |
枠の太さを変える | border-width:数字px; | |
文字入力時のモードを 自動で切り替える |
ime-mode:モードのタグ; | |
スクロールバーの色 を変える |
scrollbar-base-color:#色コード; | |
スクロールバーの 矢印色を変える |
scrollbar-arrow-color:#色コード; | |
背景を画像にする | background-image:url(画像のURL); | |
背景の画像を上下 のみ繰り返す |
background-repeat:repeat-y; | |
背景の画像を左右 のみ繰り返す |
background-repeat:repeat-x; | |
背景の画像を1つ だけ表示する |
background-repeat:no-repeat; | |
背景の画像の表示 位置を左上にする |
background-position:0% 0%; | |
背景の画像の表示 位置を右上にする |
background-position:100% 0%; | |
背景の画像の表示 位置を左下にする |
background-position:0% 100%; | |
背景の画像の表示 位置を右下にする |
background-position:100% 100%; | |
背景の画像の表示 位置を真ん中にする |
background-position:50% 50%; | |
背景の画像の表示 位置を指定(応用編) |
background-position:数字% 数字%; | |
画像を固定する | background-attachment:fixed; | |
[書体のタグ]
Terminal Small Fonts Arial Unicode MS MS 明朝 MS UI Gothic HG丸ゴシックM-PRO HGゴシックM HGゴシックE HG創英角ポップ体 HG創英角ゴシックUB ふみゴシック HG行書体 HG祥南行書体 HG正楷書体 恋文ペン字 [カーソルの形状のタグ] 形状:タグ ■ :crosshair ■ :default ■ :pointer ■ :move ■ :text ■ :wait ■ :help ■ :n-resize ■ :s-resize ■ :w-resize ■ :e-resize ■ :ne-resize ■ :nw-resize ■ :se-resize ■ :sw-resize [文字の形状のタグ] 説明:タグ 通常:normal 斜体:italic [入力モードのタグ] 説明 :タグ 日本語:active 英語 :inactive [枠の形のタグ] 形状 :タグ 実線 :solid 二重線 :double 丸い点線 :dotted 四角い点線 :dashed 内沈み線 :inset 内浮き出し線:outset 山線 :ridge 谷線 :groove 色コード作成ツール 上級者用タグ紹介の一番上に戻る タグ紹介の一番上に戻る このページの一番上に戻る |
文字色、背景画像のタグは、「レインボーローラーの設定」の「文字の色」「背景画像URL」と言う項目で、タグを使わなくても変えられるので、省略します。
文字の大きさは、数字が大きくなるほど大きくなります。 文字の太さは、100 200 300 … 900 までの、100刻みでの指定です。 [書体のタグ] Terminal Small Fonts Arial Unicode MS MS 明朝 MS UI Gothic HG丸ゴシックM-PRO HGゴシックM HGゴシックE HG創英角ポップ体 HG創英角ゴシックUB ふみゴシック HG行書体 HG祥南行書体 HG正楷書体 恋文ペン字 [文字の形状のタグ] 説明:タグ 通常:normal 斜体:italic ■にカーソルを乗せて 形状を確認して下さい。 [カーソルの形状のタグ] 形状:タグ ■ :crosshair ■ :default ■ :pointer ■ :move ■ :text ■ :wait ■ :help ■ :n-resize ■ :s-resize ■ :w-resize ■ :e-resize ■ :ne-resize ■ :nw-resize ■ :se-resize ■ :sw-resize [枠の形のタグ] 形状 :タグ 実線 :solid 二重線 :double 丸い点線 :dotted 四角い点線 :dashed 内沈み線 :inset 内浮き出し線:outset 山線 :ridge 谷線 :groove [入力モードのタグ] 説明 :タグ 日本語:active 英語 :inactive 枠の太さは、数字が大きくなるほど、太くなります。 画像URLは、ポシェにアップロードされた、画像じゃないと、ぱどでは、表示できません。 色コード作成ツール このページの一番上に戻る タグ紹介の一番上に戻る 上級者用のタグ紹介へ移動 |