申請通りましたね、良かったー。
これ、ちょっと幅があるんで画面小さくして見たら全然分けわかんないテンプレですねι
ま、いっか。
そんな感じで白黒反転バージョンのCSSです。
差し色は変わりないのですごく簡単に変更できたので先に公開しますね。
背景差し替えだけで作れるバージョン、他にも作ろうかな。簡単だし。
でも背景変わるだけで雰囲気も変わりますよね?
そんな感じで追記からどうぞー☆
◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆
/*****全ブロックの共通設定*****/
/*HTML全体に関する設定*/
html{
scrollbar-arrow-color: #333;
scrollbar-base-color: #333;
scrollbar-face-color: #fff;
scrollbar-highlight-color: #fff;
scrollbar-3d-light-color: #333;
scrollbar-shadow-color: #333;
scrollbar-track-color: #fff;
scrollbar-darkshadow-color: #fff;
}
/*BODY全体に関する設定*/
body {
text-align:center;
font-size:12px;
margin:auto;
color:#fff;
padding: 0px;
font-family:"MS UI Gothic","Osaka","sans-serif";
background-image:url('http://blog.cnobi.jp/v1/blog/user/b95ef955d8ebb283417eed0e2abb5e02/1169857602');
background-position: center;
background-repeat: repeat-y;
}
.EntryTextBox img{
}
/*の全ての設定*/ td { text-align:center; font-size:12px; } /*table全ての設定*/ table{ border-collapse: collapse; } /*通常のリンクの設定*/ a:link { color:#fff; text-decoration:none; }
/*過去に見たことがあるページのリンクの設定*/ a:visited{ color:#fff; text-decoration:none; }
/*カーソルが合っている状態のリンクの設定*/ a:hover { color:#B22222; text-decoration:none; }
/*アクティブ状態のリンクの設定*/ a:active { color:#fff; text-decoration:line-through; }
.emoji { vertical-align:middle; } /*レイアウト全体の設定*/ #LayoutBlock { width:805px; text-align: center; margin:auto; padding:0px; text-align:center;
} /*テキスト左寄せ*/ .left { text-align:left; } /*テキスト中央寄せ*/ .center { text-align:center; } /*テキスト右寄せ*/ .right { text-align:right; } input,textarea{ border:solid 1px #ccc; background-color:#000; } /******トップブロック用デザイン******/ /*一番上のブロック(タイトルが書かれる場所)の設定*/ #TopBlock { width:100%; height:200px; text-align:left; margin: 0px; }
/*ページタイトル文字部分の設定*/ #TopTitle { padding: 100px 0px 0px 200px; font-size:18px; font-weight:bold; }
#TopTitle a:link { text-decoration:none; }
#TopTitle a:visited{ text-decoration:none; }
#TopTitle a:hover { color:#B22222; text-decoration:none; }
#TopTitle a:active { text-decoration:none; }
/*ページタイトルの下に来るブログの説明文書*/ #TopExplanation { padding: 10px 0px 0px 200px; color:#ccc; text-align: left; } /*コメント管理、編集等の部分*/ #AdminBlock{ text-align: right; padding: 5px; } #AdminBlock a:link { text-decoration:none; color:#ccc;} #AdminBlock a:visited{ text-decoration:none; color:#ccc;} #AdminBlock a:active { text-decoration:line-through; color:#B22222;} #AdminBlock a:hover { text-decoration:none; color:#B22222;}
/******フッターブロック用デザイン******/ /*一番下のブロック(著作権表示が書かれる場所)の設定*/ #FooterBlock { width : 100%; height:100px; clear:both; text-align: center; padding:10px 0px 0px 0px; }
/*フッター部分のリンク設定*/ #FooterBlock a:link { text-decoration:none;} #FooterBlock a:visited{ text-decoration:none;} #FooterBlock a:hover { text-decoration:underline;} #FooterBlock a:active { text-decoration:line-through;}
/******左メニューデザイン******/ #LeftBlock{ float: left; width: 190px; margin: 0px 0px; }
/******右メニューデザイン******/ #RightBlock{ float: right; width: 190px; margin: 0px px; }
/******プラグインブロック用デザイン******/ /*プラグイン表示箇所全体の設定*/ .Plugin { text-align: left; } .Plugin a:link { text-decoration:none; } .Plugin a:visited{ text-decoration:none; } .Plugin a:active { text-decoration:underline; } .Plugin a:hover { text-decoration:none; } /*プラグイン表示箇所の背景や余白設定*/ .PluginInner { margin: 0px 0px 20px 0px; padding: 0px; } /*プラグインのタイトル(名称)部分の設定*/ .PluginTitle { border-top:dotted 2px #ccc; border-bottom:dotted 2px #ccc; text-align: center; font-weight:bold; font-size:12x; padding:10px; margin:1px 0px 1px 0px; } /*プラグインの説明部分の設定*/ .PluginExplanation { padding: 15px; margin: 0px; } /*プラグインが表示される場所の設定*/ .pluginContents { padding: 10px; font-size:12px; text-align: center; }
.PluginFooter{ height:1px; }
/******各プラグイン共通項目用設定******/ /*各プラグイン処理内の基本デザイン*/ .plugin_data { text-align:left; padding:5px; font-size: 12px; } /*各プラグイン処理内基本デザインの下に記載する日付など*/ .plugin_data_date { text-align:right; font-size: 10px; }
/******記事ブロック用デザイン******/ /*記事繰り返し処理全ての部分の設定*/ #EntryBlock { width:405px; float: left; text-align: left; margin: 0px 5px; } /*記事表示部分の背景や余白等の設定*/ .EntryInner { padding: 10px; text-align: left; border:solid 0px #ccc; margin: 0px 0px 25px 0px; } /*各記事タイトル部分の設定*/ .EntryTitle { text-align: center; border-top: dashed 1px #ccc; border-bottom: dashed 1px #ccc; font-size:14px; color:#fff; font-weight:bold; padding:5px 10px 5px 10px; } /*各記事やコメント、トラックバックなどの総合のブロック部分*/ .EntryTextBox { margin:5px 0px; } /*記事本文が記載される部分*/ .EntryText { padding: 10px; padding-bottom:10px; line-height:140%; } /*引用部分*/ blockquote{ border:dashed 1px #999; color:#ccc; padding:10px; }
/*追記文書が記載される部分*/ .EntryPsText { padding: 10px; text-align: right; } /*記事へのリンク(コメントやトラックバック等)の背景*/ .EntryFooter { text-align:right; padding:5px; } /*記事の投稿者名が記載されている部分*/ .EntryUserName { }
/*記事を投稿した日が記載されている部分の背景*/ .EntryDate { text-align: right; padding:2px; } /*記事を投稿した日が記載されている部分*/ .EntryWriteDate { margin-left: 5px; } /*記事のカテゴリ名が記載されている部分*/ .EntryCategory { margin-left: 5px; } /*記事へのコメントリンクが記載されている部分*/ .EntryComment { margin-left: 5px; } /*記事へのトラックバックリンクが記載されている部分*/ .EntryTrackback { margin-left: 5px; } /*次の記事やHOMEへのリンクが表示される背景部分*/ .PageLinkBlock{ width:100%; text-align:center; padding:10px; }
/******各コメント表示部分の設定******/ /*コメント全体の設定*/ .CommentBlock{ padding:10px; } /*コメント全体のTOP部分*/ .Commenttop{ height:1px; }
/*コメント全体のフッター部分*/ .Commentbottom{ height:1px; } /*この記事にコメントする と書かれてる部分の設定*/ .CommentMenuTitle{ padding-left:30px; text-align: left; } /*コメントのタイトル、コメント、コメント情報の全ての背景部分*/ .CommentTextBox{ margin: 5px ; } /*コメント、レス分部の背景部分*/ .Commentbody{ border:solid 1px #ccc; margin:5px 0px;
} /*コメントのタイトル部分*/ .CommentTitle{ text-align: left; padding:2px 15px; margin:5px; border-bottom:dashed 1px #ccc; } .CommentTitleh{ text-align: left; padding-left:15px; margin:5px; } /*コメント部分*/ .CommentText{ padding: 10px 0px 10px 20px; }
/*投稿者や投稿時間などが表示されている部分*/ .CommentFooter{ text-align:right; padding: 5px; }
/*投稿者名の部分*/ .CommentUserName{ margin-left: 5px; font-weight:bold; } /*投稿者のホームページへのリンク部分*/ .CommentURL{ margin-left: 5px; } /*投稿された時間が記載されている部分*/ .CommentWriteDate{ margin-left: 5px; } /*コメント編集へのリンク部分*/ .CommentEdit{ margin-left: 5px; }
/*コメントを投稿するフォーム全体の設定*/ .CommentFormBlock{ margin-bottom:20px; } /*コメントフォーム用テーブル*/ .CommentFormTable{
} /*コメントフォームTHタグ設定*/ .CommentFormTh{ font-size:10px; font-weight:bold; padding:3px 5px; text-align:right; } /*コメントフォームTDタグ設定*/ .CommentFormTd{ padding-top:5px; text-align:left; } /*コメントフォーム送信ボタンのTDタグ設定*/ .CommentFormSubmit{ font-size:10px; color:#000; margin-left:5px; width:80px; height:18px; border:solid 1px #ccc; background-color:#000; } /*inputタグやtextareaの設定*/ .CommentForms{ border:solid 1px #ccc; background-color:#000; color:#ccc; font-size: 12px; }
/******トラックバック表示部分の設定*****/ /*トラックバック全体の設定*/ .TrackbackBlock{ padding:10px; margin: 20px 0px; } /*トラックバックメニューのタイトル部分*/ .TrackbackMenuTitle{ text-align: left; } /*トラックバックのタイトル、記事、リンク部分の総合設定*/ .TrackbackTextBox{ margin: 5px 0px; border:solid 1px #ccc; } /*トラックバックタイトルの部分*/ .TrackbackTitle{ text-align: left; color:#fff; font-weight:bold; border-bottom:solid 1px #ccc; padding-top:10; padding-right:10; padding-bottom:5; padding-left:10; } /*トラックバックの記事部分*/ .TrackbackText{ padding: 10px; line-height:140%; font-size:12px; } /*投稿されたブログ名やリンクなどを表示する部分の設定*/ .TrackbackFooter{ text-align:right; padding:5px; } /*トラックバック元のブログ名部分*/ .TrackbackUserName{ margin-left: 5px; } /*トラックバック元へのリンク部分*/ .TrackbackFromURL{ margin-left: 5px; } /*トラックバックされた日付部分*/ .TrackbackWriteDate{ margin-left: 5px; } /*この記事のトラックバック と書かれた部分の設定*/ .TrackbackURLTitle{ text-align: left; font-size: 12px; margin-left: 30px; } /*トラックバックする為のURLが記載されているフォーム部分の設定*/ .TrackbackURL{ }
/*カレンダー日付移動用テーブル(前月、次月へのリンクなど)*/ .CalendarMoveTable { padding:3px; width:170px; margin:auto; }
/*カレンダー日付移動用テーブル、 | タグ部分のデザイン*/
.CalendarMoveTr {
}
/*カレンダー日付移動用テーブル内、左側td部分のデザイン*/
.CalendarPrevTd {
}
/*カレンダー日付移動用テーブル内、中央td部分のデザイン*/
.CalendarNowTd {
}
/*カレンダー日付移動用テーブル内、右側td部分のデザイン*/
.CalendarNextTd {
}
/*カレンダー表示用テーブル*/
.CalendarTable {
width:170px;
padding:3px;
margin:auto;
}
/*-----------------------------------------------
カレンダーテーブル -> 曜日表示部分デザイン
-----------------------------------------------*/
/*曜日表示部分(
タグ部分)のデザイン*/
.CalendarWdayTr {
font-size: 12px;
}
/*曜日表示部分、日曜日のタグ部分デザイン*/ .CalendarWdaySun { color:f36; }
/*曜日表示部分、平日の | タグ部分デザイン*/ .CalendarWday { }
/*曜日表示部分、土曜日の | タグ部分デザイン*/ .CalendarWdaySat { color:39f; }
/*------------------------------------------------- カレンダーテーブル -> 日付表示部分デザイン -------------------------------------------------*/ /*日付表示部分( |
タグ部分)のデザイン*/
.CalendarTr {
}
/*日付表示部分、日曜日のタグ部分デザイン*/ .CalendarTdSun { color:f36; }
/*日付表示部分、土曜日の | タグ部分デザイン*/ .CalendarTdSat { color:39f; }
/*日付表示部分、平日曜日の | タグ部分デザイン*/ .CalendarTd { }
/*記事が存在する場所の設定*/ .CalendarTdLink { font-weight:bold; background-color:B22222; }
/*記事が存在する日付の文字色の設定*/ .CalendarTdLinkFont { color:fff; }
/****コメント -> 管理者返信部分デザイン****/
.CommentResBlock { padding:0px 0px 10px 30px; width:90%; margin: 0px ; } .CommentResBox { padding:20px; border:dashed 1px #ccc; } .CommentResTitle { font-size:12px; } .CommentResText { padding:10px 0px 0px 10px; } .CommentResheader { text-align:right; margin:5px 0px; }
.CommentResFooter { text-align:right; margin:5px 0; }
.CommentFormpass{ border:solid 1px #ccc; } .btn { border:solid 1px #ccc; background-color:#000; color:#fff; } .box{ border:solid 1px #ccc; background-color:#000; color:#fff; margin-bottom:10px; }PR
http://sparkinglove.blog.shinobi.jp/Entry/80/白黒反転バージョン。
|