ぱどタウンのお部屋をカスタマイズしよう

(注意)
当サイトは、ぱどタウンの公式サイトではありません。単なる、個人サイトです。
一応、タグが上手く表示されるか等の作動確認は、していますが、万が一トラブルが発生しても、管理人は、責任が持てませんので、自己責任でお使い下さい。また、タグが間違っている場合は、ごめんなさい。m(_ _)m
なお、ご使用は、自由ですので、使用の許可等は、一切不要、いりません。当サイトを、リンクしたい方は、ご自由にどうぞ。

このサイトが、2回目以上で、タグが良く理解できた方は、下の文字をクリックで、タグの説明(下の方)に、いっきに、移動できます。
タグの説明   上級者用   よくある質問

皆さんは、ぱどタウンのお部屋の自己紹介の部分以外に、「レインボーローラーの設定」と言う項目の下に、「スタイルシート」と言う項目がある事をご存知でしょうか?
実は、そこの部分に、スタイルシートのタグを書く事によって、お部屋やお部屋の伝言板をカスタマイズする事が出来ます。
このページでは、その部分に書くタグをご紹介したいと思います。

通常、スタイルシートは、次の様に書きます。

<style type="text/css">
<!--
スタイルシートのタグ
-->
</style>

しかし、ぱどでは、「<style>、</style>の部分は必要ありません」と書かれていますので、ここでは、スタイルシートのタグの部分のみで、紹介します。

スタイルシートのタグは、次の様に、構成されています。(タグは、全て半角で書きます。)

大まかなタグ{細かい設定をするタグ}

ここで、実は、細かい設定をするタグの部分は、複数の設定をしたい場合(例えば、[文字の大きさ]と[文字の書体]を変えたいなど)は、まとめる事が出来ます。


まとめ方は、次の様にまとめます。

大まかなタグ{細かい設定をするタグ;細かい設定をするタグ;細かい設定をするタグ}

では、実際に、詳しい例を出して、まとめ方を紹介します。
(例)「お部屋の掲示板をカスタマイズ」のタグの「文字の大きさ」と「文字の書体」をまとめて変える。

.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は、ポシェにアップロードされた、画像じゃないと、ぱどでは、表示できません。

色コード作成ツール

このページの一番上に戻る

タグ紹介の一番上に戻る

上級者用のタグ紹介へ移動



[良かったら、遊んでみてね♪]
恋愛人間模様CGIゲーム[PeoPle]


【PR】HPやブログを一工夫したいならHTMLタグへGO!