CSSひな形

2023年12月2日土曜日
CSS配布 #テンプレート
色・画像・数値を変えるだけで本格的なCSSが作れるひな形を配布します。
利用規約

上の夢乃ふわりの名前は消さないでください。
作ったデザインは配布OKですが、
トップに必ずURLと夢乃ふわりの名前を載せてください。
　http://uranai.nosv.org/u.php/hp/css_tamplate/
これと同じようなひな形としての再配布はNGです。
配布しなければ、のURLと作者明記はなくても大丈夫です。
全部自力で作ったと誤解されるような自作発言はNGです。
画像の著作権や直リンクには気をつけてください。
使い方

色や画像を指定してお使いください。
不要な設定項目は消してください。
配布

下のボックス右上の「copy」ボタンで全コピーできます。
/*********************************************************
　　　　デザイン：(名前)
　　　　CSSひな形：夢乃ふわり

　※利用規約※
　1.上の夢乃ふわりの名前は消さないでください。
　2.作ったデザインは配布OKですが、
　　トップに★必ず★URLと夢乃ふわりの名前を載せてください。
　　　　http://uranai.nosv.org/u.php/hp/css_template/
　3.これと同じような★ひな形としての再配布はNG★です。
　4.配布しなければ、URLと作者明記はなくても大丈夫です。
　5.全部自力で作ったと誤解されるような★自作発言はNG★です。
　6.画像の著作権や直リンクには気をつけてください。

　※使い方※
　1.色や画像を指定してお使いください。
　2.不要な設定項目は消してください。
*********************************************************/

/*---------------------------------------------
　フォント設定
-----------------------------------------------*/
*{font-family: Meiryo, sans-serif !important;}
/* Webフォントを使う場合はここに */

/*---------------------------------------------
　共通設定
-----------------------------------------------*/
/* ■全体の文字色と背景 */
body{

/* 背景色 */
background-color: 色指定;

/* 背景画像 */
background-image: url(画像URL);

/* 文字色 */
color: 色指定;
}

/* ■ロゴの下の線 */
div#topcon_line{
border-bottom: 7px solid 色指定;
}

/* ■ロゴ部分 */
div#topcon{

/* 線の設定 */
border: 0;

/* ボックスの影 */
box-shadow: none; 
}

/* ■コンテンツ背景調整 */
div#wrapper, div#content{
background: transparent; /* 透明背景 */
border: 0; /* 線なし */
box-shadow: none; /* ボックスの影なし */
}

/* ■本体の背景 */
div#container{

/* 背景色 */
background-color: 色指定;

/* 背景画像 */
background-image: url(画像URL);

/* 線の設定 */
border: 0;

/* ボックスの影 */
box-shadow: none;
}

/* ■ナビメニュー */
div#navigation{
/* 透明背景 */
background: transparent;
}

/* ■ナビメニュー見出し */
div#navigation h2{
/* 線の設定 */
border-bottom: 1px solid 色指定;
}

/* ■ナビメニューランキング */
ol.navlist li{
/* 線の設定 */
border-bottom: 1px dashed 色指定;
}

/* ■リンク */
a:link{
/* リンクの色 */
color: 色指定;
}
a:visited{
/* 訪問済リンクの色 */
color: 色指定;
}
a:hover{
/* マウスオーバー時 */
color: 色指定;
text-decoration: none;
}

/* ■入力ボックス */
input[type=text]{

/* 背景色 */
background-color: 色指定;

/* 背景画像 */
background-image: url(画像URL);

/* 線の設定 */
border: 0;

/* 文字色 */
color: 色指定;

/* 角の丸み:数字を変える */
border-radius: 0px;
}
form.ipt fieldset input#nm{
/* 入力ボックスの中央揃え */
text-align: center; /* 不要なら削除 */
}

/* ■ボタン */
input[type=submit]{

/* 背景色 */
background-color: 色指定;

/* 背景画像 */
background-image: url(画像URL);

/* 線の設定 */
border: 0;

/* 文字色 */
color: 色指定 !important;

/* 角の丸み:数字を変える */
border-radius: 0px;
}
input[type=submit]:hover{
/* マウスオーバー時 */
opacity: 0.6; /* 半透明にする */
cursor: pointer; /* カーソルを指にする */
}
input#sbt{
/* 検索ボタン調整 */
border-radius: 0px;
}

/* ■文字サイズ大中小 */
span#resizer{

/* 背景色 */
background-color: 色指定;

/* 線の設定 */
border: 0;

/* 角の丸み:数字を変える */
border-radius: 0px;
}

/* ■評価ボックス */
div.ratingblock{

/* 背景色 */
background-color: 色指定;

/* 線の設定 */
border: 0;

/* 角の丸み:数字を変える */
border-radius: 0px;
}

/* ■評価の星 */
/* 評価前 */
.unit-rating{
background-image: url(画像URL);
background-position: left;
background-size: 30px;
}

/* 評価中 */
.unit-rating li a:hover {
background-image: url(画像URL);
background-position: left;
background-size: 30px;
}

/* 評価後 */
.unit-rating li.current-rating{
background-image: url(画像URL);
background-position: left;
background-size: 30px;
}

/* 星スマホ用調整 */
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2){
div#content div.ratingblock ul, .unit-rating, .unit-rating li a:hover, .unit-rating li.current-rating{
background-size: 25px;
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5){
div#content div.ratingblock ul, .unit-rating, .unit-rating li a:hover, .unit-rating li.current-rating{
background-size: 25px;
}
}
/* ここまで調整 */


/* ■お気に入り登録 */
div#content .oblock{
/* 線の設定 */
border: 0;

/* 角の丸み:数字を変える */
border-radius: 0px;
}

/* ■下のボックス */
div#content .block{
/* 線の設定 */
border: 0;

/* 背景色 */
background-color: 色指定;
}

/* ■関連作品の見出し */
div#content h3.block_head{{
/* 線の設定 */
border: 0;

/* 背景色 */
background-color: 色指定;

/* 角の丸み:数字を変える */
border-radius: 0px;

/* 文字色 */
color: 色指定;
}

/* ■関連作品のボックス */
div#content div#relitems .block{
/* 線の設定 */
border: 0;

/* 背景色 */
background-color: 色指定;

/* 角の丸み:数字を変える */
border-radius: 0px;
}


/* ■コメント欄 */
form.commentform{
/* 背景色 */
background-color: 色指定 !important;

/* 線の設定 */
border:0 !important;
}

/* ■コメント本文 */
span.listitem_noimg{/* 奇数コメント */
/* 背景色 */
background-color: 色指定;

/* 角の丸み:数字を変える */
border-radius: 15px;

/* 意味が解る人のみ調整 */
padding: 10px;
margin: 10px 5px;
box-sizing: border-box;
}
span.listitem_noimg:nth-child(2n){/* 偶数コメント */
/* 背景色 */
background-color: 色指定;
}

/* ■コメント欄の境界線 */
p#comments span:last-child{
/* 線の設定 */
border-top: 線の太さ 線の種類 線の色 !important;
}

/* ■フッターの境界 */
div#footer{
background-image: url(画像URL);
}

/*---------------------------------------------
　トップページ設定
-----------------------------------------------*/
/* ■作品タイトル */
div#header{
/* 線の設定 */
border: 0;
}
div#header a{
/* 文字色 */
color: 色指定;

/* 影装飾 */
text-shadow: 0px 0px 2px 色指定, 0px 0px 5px 色指定;
margin-left: 3px;
font-weight: bold;
}

/* ■説明欄 */
div#desc{
/* 背景色 */
background-color: 色指定;

/* 背景画像 */
background-image: url(画像URL);

/* 文字色 */
color: 色指定;

/* 線の設定 */
border: 0;

/* 角の丸み:数字を変える */
border-radius: 0px;
/* 丸くしない場合は0に */
padding: 1em;

/* 行間 */
line-height: 1.8;

/* 文字間隔 */
letter-spacing: 0px;

/* ここは変えない */
box-sizing: border-box;
}

/* ■エピソード選択欄 */
div#content form#dr{
/* 背景色 */
background-color: 色指定;

/* 背景画像 */
background-image: url(画像URL);

/* 文字色 */
color: 色指定;

/* 線の設定 */
border: 0;

/* 角の丸み:数字を変える */
border-radius: 0px;

/* 行間 */
line-height: 1.6;

/* ここは変えない */
box-sizing: border-box;
}

/* ■エピソード文字色 */
form#dr fieldset a{
/* 文字色 */
color: 色指定;
}

/* ■選択ボタン */
input[type=radio]{
visibility: hidden;
}
input[type=radio] + label {
/* 未選択ボタン画像 */
background-image: url(画像URL);

/* ここは変えない */
background-repeat: no-repeat;
background-position: left center;
background-size:1.2em 1.2em;
padding-left:1.5em;
background: none;
display: inline !important;
}
input[type=radio]:checked + label{
/* 選択済ボタン画像 */
background-image: url(画像URL);

/* ここは変えない */
background-repeat: no-repeat;
background-position: left center;
background-size:1.2em 1.2em;
}

/*---------------------------------------------
　内容ページ設定
-----------------------------------------------*/
/* ページ名 */
div#content div.result h3{
/* 背景色 */
background-color: 色指定;

/* 文字色 */
color: 色指定;

/* 線の設定 */
border: 0;

/* 角の丸み:数字を変える */
border-radius: 0px;

/* ここは変えない */
box-sizing: border-box;
}

/* ■本文 */
p#u_result{
/* 背景色 */
background-color: 色指定;

/* 背景画像 */
background-image: url(画像URL);

/* 文字色 */
color: 色指定;

/* 線の設定 */
border: 0;

/* 角の丸み:数字を変える */
border-radius: 0px;
/* 丸くしない場合は0に */
padding: 1em;

/* ここは変えない */
box-sizing: border-box;
}
div#content p.result{
/* 行間 */
line-height: 1.8;

/* 文字間隔 */
letter-spacing: 0px;
}

/* ■本文の境界線 */
p#u_pager, div#content p.result_btm{
/* 線の設定 */
border-top: 線の太さ 線の種類 線の色 !important;
}

/* ■次のページ */
#u_pager .p_next span{
/* 背景色 */
background-color: 色指定;

/* 線の設定 */
border: 0;

/* 角の丸み:数字を変える */
border-radius: 5px;
}

/* ■ハートの色調 */
div.heart{
/* 数字を変えて色味が変わる */
filter: brightness(100%) hue-rotate(0deg) saturate(100%);
/* 
意味が解る人のみ調整
・brightness→明るさ
・hue-rotate→色相
・saturate→彩度
*/
}
戻る