今度はガンダムCSSです。
使える色は白/青/赤/黄/黒。ビームライフルの藤色とか、ビームサーベルのピンクもOKかな、とは思ったものの、ガンダムのイメージの色ではないと思うので、使いませんでした。
この5色を適当に使うだけで、
ニュータイプになったような気がする僕は、きっとバカなんでしょう。
このCSSはサイドバーの文字の読みにくさから、あまり実用的とはいえませんね。原色の青と組み合わせて読みやすいフォント色って、殆ど無いような気がします。もっと紺色っぽい青にしようか悩んだのですが、紺だとガンダムMK2になってしまうので、その辺はヲタ根性が許しませんでした。（※）
あ、何のことかわからない人は、スルーして下さいね。
この配色は眩しすぎて目に良くないですね。「人に読まれるWEBサイト」作成術としては、良くない見本の筆頭に挙げられる典型的配色でしょう。
今回、カレンダーを消そうとして気が付いたのですが、カレンダー自体は「display: none;」の記述で消せるんですけど、「CALENDAR」の文字を消すことができない（サイドバー背景色と同一化することにより、見えなくすることはできますが、それをやると「RECENT COMMENT」なども見えなくなります）ので、CALENDARを非表示にすることで、マヌケなサイドバーになってしまいます。
このへん、スタイルの要素を増やすなどして必要ない要素を消せるといいなぁ・・・
RECENT TRACKBACKやRECENT COMMENTの表示数も、任意で設定できると非常にありがたいです。
個人的にCOMMENTの表示数は減らしても構わないけど、TRACKBACKの表示数を増やしたいのです。
（※）サイドバー他の青を「blue」から「#0000CD」へ変更してみました。
読みやすさの比較をするため、↓こんなの作りました。。
父さんにだって殴られたこと無いのにっ！
貴様だってニュータイプだろうに！
|
君は強い女の子じゃないかっ！
僕には帰れるところがあるんだ… |
濃い青の地のほうが読みやすいですよね。
当ブログ標準CSSはモノトーンのCSSです。
ある程度遊び終わったら元に戻しますが、ガンダムCSSシリーズ続けているために、モノトーンのやつがシン・マツナガCSSに思えてきて萎え萎えです。
以下、あんまり参考にならないCSS。
/* CA_CUSTOMのCSS */
/* ページ全体共通指定 */
/* ページ全体の背景と文字と余白 */
BODY {
background-image: url();
background-repeat: ;
background-position: ;
background-color: #ffffff;
}
/* 引用の設定 */
blockquote {
background-color: #ffffff;
font-size: 90%;
border: 2px blue dashed;
padding: 5px;
line-height: 140%;
}
q {
color: blue;
font-style: oblique;
}
/* 全体の文字 */
TD {
color: #000000;
font-size: 95%;
}
/* 全体のリンク飾り */
A {
text-decoration: underline;
}
/* リンク（まだ見ていない状態） */
A:link {
color: red;
}
/* リンク（マウスポインタを乗せた状態） */
A:hover {
color: yellow;
}
/* リンク（クリックされた状態） */
A:active {
color: red;
}
/* リンク（すでに見た状態） */
A:visited {
color: blue;
}
/* /ページ全体共通指定*/
/* ブログのタイトル部上 */
.headerLight {
background-image: url();
background-repeat: ;
background-position: ;
background-color: #0000CD;
}
/* ブログタイトル部等の区切り線 */
.rule {
background-color: yellow;
}
/* ブログのタイトル部下 */
.headerDark {
background-image: url();
background-repeat: ;
background-position: ;
background-color: #0D0D0D;
}
/* ブログのタイトル */
.bTitle {
color: yellow;
font-size: 28px;
font-weight: bold;
font-family: 'Century Gothic',VERDANA,ARIAL,SANS-SERIF,Helvetica,'MS P ゴシック',Osaka;
}
/* ブログタイトルのリンク（<a href="#" class="etTitleLink">で使用） */
.bTitleLink {
text-decoration: none;
}
/* ブログの概要 */
.bDesc {
color: #ffffff;
font-size: 12px;
}
/* カレンダー背景 */
.calendar {
background-image: url();
background-repeat: ;
background-position: ;
background-color: ;
}
/* カレンダー年月 */
.calMonth {
color: yellow;
font-weight: bold;
text-align: left;
}
/* カレンダー曜日 */
.calWeek {
color: yellow;
font-weight: bold;
}
/* カレンダー日付 */
.calDay {
color: yellow;
}
/* カレンダー日付のリンク */
.calDayLinked {
color: yellow;
text-decoration: underline;
}
/* カレンダー前月、翌月 */
.calLink {
color: yellow;
font-size: 80%;
font-weight: bold;
text-decoration: underline;
}
/* カレンダー内の区切り */
.calRule {
background-color: #8B3A3A;
}
/* 左メニュー背景 */
#menu {
background-image: url();
background-repeat: ;
background-position: ;
background-color: #0000CD;
padding: 8px;
}
/* 左メニュー文字（各見出し含む） */
#menu TD {
color: yellow;
}
/* 左メニューのリンク（まだ見ていない状態） */
#menu A {
color: yellow;
}
/* 左メニューの各見出し */
.menuBar {
background-color: #0000CD;
color: yellow;
font-style: oblique;
font-size: 18px;
font-weight: bolder;
padding: 2px;
width: 280px;
text-align: left;
}
/* 左メニューのリスト背景 */
.menuBg {
padding: 2px;
width: 280px;
text-align: left;
}
/* 過去の投稿（ENTRY ARCHIVE）のリスト */
.arcLink {
color: #ffffff;
font-size: 90%;
text-decoration: ;
line-height: 120%;
}
/* 最新の投稿（RECENT ENTRY）のリスト */
.entLink {
color: #ffffff;
font-size: 90%;
text-decoration: none;
line-height: 120%;
}
/* 最新のコメント（RECENT COMMENT）のリスト */
.comLink {
color: #ffffff;
font-size: 90%;
text-decoration: none;
}
/* 最新のコメント（RECENT COMMENT）のリスト：投稿者名 */
.comText {
color: yellow;
font-size: 85%;
}
/* 最新のトラックバック（RECENT TRACKBACK）のリスト */
.traLink {
color: #ffffff;
font-size: 80%;
text-decoration: none;
}
/* 最新のトラックバック（RECENT TRACKBACK）リスト：ブログ名 */
.traText {
color: yellow;
font-size: 85%;
text-decoration: ;
}
/* カテゴリー（cotegory）のリスト */
.catLink {
color: #ffffff;
font-size: 90%;
text-decoration: ;
}
/* ブックマーク（book mark）のリンク：サイト名 */
.bmLink {
color: #ffffff;
font-size: 100%;
text-decoration: ;
line-height: 120%;
}
/* ブックマーク（book mark）リスト：説明 */
.bmText {
color: yellow;
font-size: 80%;
}
/* プロフィールの見出し */
.pfTitle {
color: yellow;
font-size: 80%;
font-weight: bold;
}
/* プロフィールの内容 */
.pfText {
color: #ffffff;
font-size: 80%;
}
/* 「URLを送信する」 */
.miscLink {
color: #ffffff;
font-size: 80%;
text-decoration: underline;
}
/* 「（for PC & MOBILE）」 */
.miscText {
color: #ffffff;
font-size: 70%;
}
/* 右メニュー */
#menu2 {
display: none;
background-color: #8B3A3A;
}
/* エントリーの背景 */
.entry {
background-image: url();
background-repeat: ;
background-position: ;
background-color: ;
}
/* エントリータイトル */
.etTitle {
color: blue;
font-size: 140%;
font-weight: bold;
}
/* エントリータイトルの飾り（<a href="#" class="etTitleLink">で使用） */
.etTitleLink {
text-decoration: none;
}
/* エントリー本文 */
.etBody {
background-image: url();
background-repeat: ;
background-position: ;
color: #000000;
font-size: 95%;
line-height: 180%;
text-align: left;
}
/* エントリーに表示されているカテゴリ */
.etCategory {
font-size: 70%;
text-decoration: underline;
}
/* エントリーに表示されている日時 */
.etTime {
font-size: 70%;
text-decoration: underline;
}
/* エントリーに表示されている「コメント（）」 */
.etCommentLink {
font-size: 90%;
color: ;
}
/* エントリーに表示されているコメントの数字 */
.etCommentLink A {
font-size: 90%;
color: ;
}
/* エントリーに表示されているトラックバックの数字 */
.etTBLink {
font-size: 90%;
color: ;
}
/* エントリーに表示されているトラックバックの数字 */
.etTBLink A {
font-size: 90%;
color: ;
}
/* エントリーに表示されているカテゴリー、時間などの「/」や「｜」 */
.etText {
font-size: 70%;
color: ;
}
/* 各エントリー、コメント、トラックバックの区切り線 */
.etRule {
background-color: red;
}
/* 前のページ、次のページ */
.etNextPrev {
font-size: 90%;
color: ;
}
/* エントリー内の画像位置 */
.thumbnail {
float: right;
}
/* --エントリー枠固定用（変更不可）-- */
.Posi{
text-align: left;
width: 100%;
}
/* コメントの背景（別ウィンドウ、エントリー下ともに） */
.comment {
background-color: #ffffff;
background-image: url();
background-repeat: ;
background-position: ;
}
/* エントリー下の「コメント」 */
.cmHeadText {
color: ;
font-size: 70%;
font-weight: bold;
}
/* エントリー下の「コメント」の囲み */
.cmHeadFrame {
background-color: ;
}
/* エントリー下「コメントを投稿する」、別ウィンドウ「コメント」「コメントを投稿する」 */
.cmText {
color: ;
font-size: 80%;
}
/* コメントタイトル（エントリー下、別ウィンドウともに） */
.cmTitle {
color: ;
font-size: 80%;
font-weight: bold;
}
/* コメント投稿者名（エントリー下、別ウィンドウともに） */
.cmName {
color: #363636;
font-size: 80%;
}
/* コメント投稿日時（エントリー下、別ウィンドウともに） */
.cmDate {
color: #363636;
font-size: 75%;
}
/* コメント見出しの各タイトル（エントリー下、別ウィンドウともに）と規約導入の文字 */
.cmForm {
color: ;
font-size: 80%;
}
/* コメント本文（エントリー下、別ウィンドウともに） */
.cmBody {
color: ;
font-size: 75%;
line-height: 140%;
}
/* トラックバックの背景（エントリー下、別ウィンドウともに） */
.trackback {
background-color: ;
background-image: url();
background-repeat: ;
background-position: ;
}
/* エントリー下の「この記事のTrackback Ping-URL」 */
.tbHeadText {
color: ;
font-size: 80%;
font-weight: bold;
}
/* エントリー下の「この記事のTrackback Ping-URL」の囲み */
.tbHeadFrame {
background-color: ;
}
/* 別ウィンドウの「この記事のTrackback Ping-URL」 */
.tbtrackback {
color: ;
font-size: 70%;
}
/* トラックバックURL（エントリー下、別ウィンドウともに） */
.tbUrl {
color: ;
font-size: 70%;
white-space: nowrap;
}
/* トラックバックされた方のサイト名（エントリー下、別ウィンドウともに） */
.tbBTitle {
color: ;
font-size: 85%;
}
/* トラックバックされた記事名（エントリー下、別ウィンドウともに） */
.tbETitle {
color: ;
font-size: 85%;
font-weight: bold;
}
/* トラックバック本文（エントリー下、別ウィンドウともに） */
.tbDesc {
color: ;
font-size: 80%;
line-height: 150%;
}
|
……つー記事を書いたのですが、すぐにガンダムCSSは飽きました。
そんなわけで、リックドムCSSです。
擬似IEのプレビュー画面を見ながら、背景色・本文フォント色・リンクフォント色（下線、上線、背景色、カーソル変化効果含む）、それにスクロールバーの色を、設定するCSSが簡単に作成できます。画像は「ランバ・ラルCSS」を作成中のもの。
擬似IEのプレビュー画面を見ながら、背景色・本文フォント色・リンクフォント色（下線、上線、背景色、カーソル変化効果含む）、それにスクロールバーの色を、設定するCSSが簡単に作成できます。画像は「ランバ・ラルCSS」を作成中のもの。