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

今日:1 hit、昨日:0 hit、合計:123 hit

CSS ・

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

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

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

♔ - 利用規約

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

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

ㅤㅤㅤㅤㅤ

/*作品タイトルの文字色です*/
h1.utitle a{color:brack !important;}
/*作品タイトルの影です*/
h1.utitle a{text-shadow: 0 0.4em 0.8em whitesmoke;}
/*全体の文字色です*/
body{color:brack;}
/*作品説明文の文字色です*/
div#desc{color:brack;}
/*小説本文の文字色です*/
#u_result{color:brack;}

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

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

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

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

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

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

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

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

/*入力欄の囲み線です
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での横の部分)の横長の画像を横幅ぴったりにするタイプのものです
色のみなら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;}

/*説明文をスクロールします
画像の位置は
画像左上を角にぴったり合わせる場合には　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;}

/*選択肢のボタンを変更します*/
input[type=radio]{visibility:hidden;}
input[type=radio] + label{
padding-left:1.5em;
background:url(https://1.bp.blogspot.com/-FtiNDntxM3M/Xbo6AbFhn2I/AAAAAAABVso/phJM1-YaQNUxdyDEVDrT7RhxDLborAh9gCNcBGAsYHQ/s1600/furit_mark05_lemon.png) no-repeat left center;
background-size:1em 1em;
display:inline !important; line-height: 150%;
}
input[type=radio]:checked + label{
background:url(https://1.bp.blogspot.com/-hEJU40_VV3k/Xbo5_rWePDI/AAAAAAABVsg/CuCkszkJJDoqdFbuKa6l_BuBiY3UWTw0wCNcBGAsYHQ/s1600/furit_mark03_pink_grapefruit.png) no-repeat left center;
background-size:1em 1em;
}

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

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