コピペするだけ！本格CSSが作れちゃいます ver2

今日:15 hit、昨日:2 hit、合計:4,640 hit

この作品はテンプレートです。
この作品をベースに新しく作品が作れます
(作成はこちら)
尚、この作品で遊ぶ事は可能ですが、
内容が未完成の場合があります。
この作品から派生した作品リストはこちら

CSS ・

コピペしてカラーコードや画像URLを入れるだけで
簡単に本格CSSが作れちゃいます！！

1年〜1年半前に作ったコピペするだけ!本格CSSがつくれちゃいますの改正バージョンとなっております。
前回の時にはなかったものも入れているので、よければお使いください！！
(ちなみに作った自分も未だにこれ使ってます笑)

✧ 普段の配布先
Snazzy CSS ♔ Simple
✧ 参考
占ツクCSS辞典
CSSメモ

♔ - 利用規約

✧ 必須事項 ✧
・こちらへの使用報告
・こちらのリンクを貼る

✧ 厳禁事項 ✧
・自作発言
・改変なしの二次配布

ㅤㅤㅤㅤㅤ

/*作品タイトルの文字色です*/
h1.utitle a{color:文字色のカラーコード !important;}

/*作品タイトルの影です*/
h1.utitle a{text-shadow: 0 0.4em 0.8em カラーコード;}

/*全体の文字色です*/
body{color:カラーコード;}

/*作品説明文の文字色です*/
div#desc{color:カラーコード;}

/*小説本文の文字色です*/
#u_result{color:カラーコード;}

/*通常の状態のリンクの文字色です*/
a:link{color:カラーコード;}

/*行ったことのあるリンクの文字色です*/
a:visited{color:カラーコード;}

/*マウスがリンクの上に来た時の文字色です*/
a:hover{color:カラーコード;}

/*リンクの上に来た時に出る下線を消します
必要でない場合は消していただいても構いません*/
a:hover,a:active{text-decoration:none;}

/*リンクの文字が動きます
必要でない場合は消していただいても構いません*/
a:hover,a:active{position:relative;bottom:-1px;right:-1px;}

/*ページ全体の背景色です
画像にする場合はこちらを消して下を使用してください*/
body{background:カラーコード;}

/*ページ全体の背景画像です
background-repeat:no-repeat;は画像を繰り返しません
background-size:cover;は画像の大きさを画面に合わせます(そのままの場合は削除してください
backround-position:画像の位置は
画像の左上を角にぴったり合わせる場合はtop left
右上に合わせる場合はtop right
左下に合わせる場合はbottom left
右下に合わせる場合はbottom right
画像の中央が表紙の中央になるようにするにはcenter center
を使用します。
色のみにしたい場合はこちらを消して上を使用してください*/
body{background-color:背景色のカラーコード;background-image:url(画像URL);
background-repeat:no-repeat;
background-position:top left;
}

/*作品説明欄の背景色です
画像にする場合はこちらを消して下を使用してください*/
div#desc{background-color:カラーコード;}

/*作品説明欄の背景画像です
色のみにする場合はこちらを消して上を使用してください*/
div#desc{background-image:url(画像URL);}

/*小説本文の背景色です
画像にする場合はこちらを消して下を使用してください*/
#u_result{background-color:カラーコード;}

/*小説本文の背景画像です
色のみにする場合はこちらを消して上を使用してください*/
#u_result{background-image:url(画像URL);}

/*文字間隔を広くします
数字を変えて使用することも可能ですが必要でない場合は消していただいて構いません*/
div#desc,#u_result{letter-spacing:1px;}

/*入力欄の背景色、文字色です
画像にする場合はこちらを消して下を使用してください*/
input[type=text]{background-color:背景色のカラーコード;color:文字色のカラーコード;}

/*入力欄の背景画像、文字色です
色のみにする場合はこちらを消して上を使用してください*/
input[type=text]{background-image:url(画像URL);color:文字色のカラーコード;}

/*丸いボタンの背景色、文字色です
四角いボタンや画像にする場合はこちらを消して下を使用してください*/
input[type=submit]{background-color:背景色のカラーコード;color:文字色のカラーコード;border:0;}

/*四角いボタンの背景色、文字色です
丸いボタンや画像にする場合はこちらを消して上か下を使用してください*/
input[type=submit]{-webkit-appearance:none;
appearance:none;background-color:背景色のカラーコード;color:文字色のカラーコード;border:0;}

/*ボタンの背景画像、文字色です
色のみにする場合にはこちらを消して上を使用してください*/
input[type=submit]{background-image:url(画像URL);background-size:cover;background-position:center center;color:文字色のカラーコード;}

/*入力欄の囲み線です
3px→数字を変えると線の太さが変わります
solid→実線　double→二重線　dotted→短めの点線　dashed→長めの点線
から線の種類を選んでください*/
input[type=text]{border:3px 線の種類線の色のカラーコード;}

/*「最初から読む」「選択した内容を見る」「投稿」などのボタンの囲み線です
上と同じように入力してください*/
input[type=submit]{border:3px 線の種類線の色のカラーコード;}

/*お話選択部分の背景色です
画像にする場合はこちらを消して下を使用してください*/
form#dr{background-color:背景色のカラーコード !important;color:お話を選んでねの文字色のカラーコード;}

/*お話選択部分の背景画像です
色のみにする場合はこちらを消して上を使用してください*/
form#dr{background-image:url(画像URL);}

/*お話選択の選択肢の通常時の文字色です*/
form#dr a:link,form#dr a:visited{color:カラーコード !important;}

/*お話選択の選択肢のマウスが上に来た時の文字色です*/
form#dr a:hover{color:カラーコード !important;}

/*ページタイトルの色です
線の太さなども決められますが必要でない場合は消して下を使用してください*/
.result h3{color:文字色のカラーコード !important;background-color:背景色のカラーコード !important;border:3px 線の種類線の色 !important;}

/*ページタイトルの色です
線の太さなどの種類はないです
使わない場合は消してください*/
.result h3{color:文字色のカラーコード !important;background-color:背景色のカラーコード !important;border:0 !important;}

/*メニュータイトル(PCでの横の部分)の色です
画像を使用する場合や線のみにする場合は下を使用してください
その際、このコード以外の使用するコード以外の3つは削除してください*/
#navigation h2{background-color:メニュータイトルの背景色もカラーコード;color:メニュータイトルの文字色のカラーコード;}

/*メニュータイトル(PCでの横の部分)の画像を敷き詰めるタイプのものです
色のみにするなら上、横長の画像を横幅ぴったりに合わせるなら下を使用してください
その際、このコード以外の使用するコード以外の3つは削除してください*/
#navigation h2{background-image:url(画像URL) !important;color:メニュータイトルの文字色のカラーコードです;}

/*メニュータイトル(PCでの横の部分)の横長の画像を横幅ぴったりにするタイプのものです
色のみなら2個上、敷き詰めるタイプのものなら1個上を使用してください
その際、このコード以外の使用するコード以外の3つは削除してください*/
#navigation h2{background-image:url(画像URL) !important;background-size:100% auto;background-position:center center !important;color:メニュータイトルの文字色;}

/*メニュータイトルの下線の色です
画像を使用する場合や色全体をのせる場合は上を使用してください
その際、このコード以外の使用するコード以外の3つは削除してください
3px の部分を変えると太さが変わります*/
#navigation h2 {border-bottom: 線の種類 3px 線の色 !important;}

/*メニュータイトルのリンク色です*/
#navigation h2 a:link,#navigation h2 a:visited{color:メニュータイトルのリンク色のカラーコードです;}

/*メニュータイトルのマウスが上にある時のリンク色です*/
#navigation h2 a:hover{color:メニュータイトルのリンク色のカラーコード;}

/*コメント欄の上の部分の色です
画像にする場合は下を使用してください*/
.commentform{background-color:カラーコード !important;}

/*コメント欄の上の部分の色です
色のみにする場合は上を使用してください*/
.commentform{background-image:url(画像URL);}

/*関連作品の部分の色です
画像にする場合は下を使用してください*/
.block_head{background-color:#カラーコード !important;}

/*関連作品の部分の色です
色のみにする場合は上を使用してください*/
.block_head{background-image:url(画像URL);}

/*説明文をスクロールします
画像の位置は
画像左上を角にぴったり合わせる場合には　top left
右上に合わせる場合には　top right
左下に合わせる場合には bottom left
右下に合わせる場合には　bottom right
画像の中央を表紙の中心にするには　center center
とします
text-shadowは文字が見にくくならないようにする影です
現在は#FFFFFF(白)なので薄い文字の場合は濃い色にしたほうが良いです
色を変える時は全て変えてください
こちらを使用する場合、下の二つは消去してください*/

div#desc{background-image:url(画像URL);background-repeat:no-repeat;background-size:cover;background-position:画像の位置;
text-shadow:1px 1px 2px #FFFFFF,-1px -1px 2px#FFFFFF,-1px 1px 2px #FFFFFF,1px -1px 2px #FFFFFF;
height:500px;overflow:auto;}@media screen and (max-width:600px){div#desc{height:345px;}}

/*小さく画像を置きます
スクロールありです、画像の位置は上を参照してください
こちらを使用する場合、他の二つは消去してください*/
div#desc{text-shadow:1px 1px 1px #fff,-1px -1px 1px #fff,-1px 1px 1px #fff,-1px -1px 1px #fff,1px 1px 2px #fff,-1px -1px 2px #fff,-1px 1px 2px #fff,-1px -1px 2px #fff,1px 1px 3px #fff,-1px -1px 3px #fff,-1px 1px 3px #fff,-1px -1px 3px #fff,1px 1px 2px #fff,-1px -1px 2px #fff,-1px 1px 2px #fff,-1px -1px 2px #fff;background:url(画像URL) no-repeat 画像の位置/300px;height:500px;overflow:auto;}

/*小さく画像を置きます
スクロールはありません
こちらを使用する場合、上の二つは消去してください*/
div#desc{
background:url(画像URL) no-repeat bottom right/300px;
}

/*選択肢のボタンを変更します*/
input[type=radio]{visibility:hidden;}
input[type=radio] + label{
padding-left:1.5em;
background:url(通常の画像URL１) no-repeat left center;
background-size:1em 1em;
display:inline !important; line-height: 150%;
}
input[type=radio]:checked + label{
background:url(選択時の画像URL２) no-repeat left center;
background-size:1em 1em;
}

ホムペを作る｜感想を書く
 他の作品を探す

おもしろ度を投票
( ← 頑張って！｜面白い！→ )