SeesaaブログCSSテンプレ「vivid90」

※2006.08.06 Seesaaの仕様変更によるCSS追加修正バージョンアップ。

昨夜あんなこと書いたから呪われたかも、というくらいファイルマネージャがうまく開かなくて、仕方ないからなかったことにしようかと思った、わけではないんですが、ただでさえ放り出していたNewテンプレのUpが更に遅れてしまいました。結局久しぶりにIE使いましたが。確認の為に開いていたんで丁度良かったっていう話もないではないです。

ちょっとはっちゃけた色合いにしようかと思ったのと、いつもべったり系が好きで何かとバックカラー指定で色を塗りたくってしまうので(そういうのが好きなんですが)なるべく今回はそのタイプではなくて、気持ちとしては「面ではなく線」のデザインをしてみようかと思って作ったのがコレです。
もう一つ忘れていました。border top＆bottomも最大限使わないように自分で縛りをつけて作成しました。サイドのborderより明らかに手軽に使いやすいし見やすくなるからいつも使ってしまうのよ。

とはいえ、ポイントの色合いこそはっちゃけていますが、基本がSimpleなので思ったより使いやすいかと。ベースが白だっていうのもあるかと思います。

しかし線ばかり意識して作ったので(これでも。)流用の効かないタイプになってしまいました。どうやっても、左サイドバー用と両サイドバー用が作れない。ごめんなさい。

ついでに、なんかSimpleなせいで縮小サンプル画像がキタナイっていうか分かりにくいっていうか。お願いだからクリックしてしてHTMLサンプル見て下さいね、と申し上げておきます。

●vivid90


右サイドバー用オンリー
@charset "shift_jis"; /*■tagebuch-zweit■http://tagebuch-zweit.seesaa.net ●vivid90(右サイドバータイプ)2006.08修正版 */ /*全体*/ body{ font-family: Arial, Helvetica, sans-serif; text-align: center; color:#333; margin:0px auto 0px auto; padding:0px; background-color:#fff; } /*全体のリンクカラー設定*/ a:link{color: #039; text-decoration: underline;} a:visited{color: #393; text-decoration: none;} a:active,a:hover{color: #900; text-decoration: underline;} /*全体(container)*/ #container{ margin: 0px auto; padding: 0px; text-align: center; width: 90%; border-left: 10px dotted #fc0; border-right: 10px dotted #fc0; } /*ブログのタイトル(トップ)部分全体*/ #banner{ color: #039; background-color: #fff; margin: 0px; padding: 10px 40px; text-align: center; } /*日記のタイトル(トップ)*/ h1 { margin: 0px; padding: 10px 0px; font-size: 180%; font-family: Times New Roman,Times,serif,"MS P明朝","MS 明朝","ヒラギノ明朝 Pro W6","平成明朝"; } /*ブログのタイトルリンクカラー指定*/ h1 a:link,h1 a:visited,h1 a:active,h1 a:hover{color: #900; text-decoration: none;} /*ブログの内容説明文*/ .description { font-size: 90%; color: #039; line-height: 150%; } /***************************/ /*記事毎のページのナビ部分*/ .navi{ color: #333; background-color: #fff; font-size: 90%; text-align: center; padding: 3px; } /*記事エントリ部分(全体)*/ #content{ color: #333; float: left; text-align: left; width: 65%; margin: 20px 5px; } /*日付部分*/ .date{ text-align: left; font-size: 80%; font-weight: normal; color: #800; padding: 5px 5px 5px 40px; } /*日付部分*/ h2 { margin: 0px; padding: 0px; } /*エントリタイトル*/ .title{ font-weight: bold; font-size: 95%; color: #007; padding: 5px; font-family: Times New Roman,Times,serif,"MS P明朝","MS 明朝","ヒラギノ明朝 Pro W6","平成明朝"; } /*エントリタイトル*/ h3{ margin: 0px; padding: 0px; border-left: 20px solid #007; } /*エントリタイトル部分のリンク設定*/ .title a:link,.title a:visited,.title a:active,.title a:hover{ color: #007; text-decoration: none; } /*テキスト設定*/ .text{ font-size: 90%; color: #333; padding: 7px; line-height: 170%; } /*引用部分の設定*/ blockquote{ color: #333; padding: 7px; border-left: 5px solid #900; background-color: #fc9; } q{ background-color: #fc9; } p{ padding-top: 1em; text-indent: 1em; } /*キーワードアフィリエイトのリンクカラー*/ a:link.affiliate-link,a:visited.affiliate-link,a:active.affiliate-link,a:hover.affiliate-link{ color: #333; text-decoration: underline;} /*画像部分の設定*/ #content img{ border: none; margin-right: 20px; margin-bottom: 5px; } /*名前・投稿日時等の部分*/ .posted{ font-size: 80%; color: #363; text-align: right; margin: 0px; padding: 3px 3px 3px 5px; } .posted a:link{color: #363; text-decoration: underline;} .posted a:visited{color: #363; text-decoration: none;} .posted a:active,.posted a:hover{color: #fc0; text-decoration: underline; } /*****************************/ /*コメント*/ #comments{ color: #555; background-color: #fff; margin: 25px 0px 30px 0px; } /*「コメントする」*/ .comments-head{ color: #700; font-weight: bold; font-size: 90%; margin: 0px; padding: 5px; font-family: Times New Roman,Times,serif; } /*コメント投稿者*/ .comments-post{ font-size: 80%; color: #007; text-align: right; padding: 3px 3px 3px 5px; } /*コメントのFoam部分*/ #comments form{ color: #363; font-size: 90%; padding: 3px 3px 5px 25px; } #comments input,#links input{ max-width: 250px; border: solid 1px #363; } #comments .input-submit,#links .input-submit{ color: #363; background-color: #fc0; border-style: solid 1px #363; } #comments textarea{ max-width: 400px; border: solid 1px #363; } /*トラックバック*/ #trackback{ color: #363; padding: 5px 15px; font-size: 80%; line-height: 140%; margin-top: 5px; border-left: 10px solid #363; background-color: #9c9; } #trackback a:link{color: #363; text-decoration: underline;} #trackback a:visited{color: #363; text-decoration: none;} #trackback a:active,#trackback a:hover{color: #fc0; text-decoration: underline; } /******************************/ /*サイドバー右*/ #links{ float: right; text-align: left; font-weight: normal; width: 25%; margin: 0px; padding-top: 10px; } /*サイドバーの見出し部分・カレンダー年月部分*/ .sidetitle,.calendarhead{ color: #700; font-size: 90%; text-align: left; font-weight: bold; margin: 0px; padding: 3px 5px 3px 3px; border-left: 10px solid #700; font-family: Times New Roman,Times,serif; } /*サイドバー(中身)*/ .side,.side-tag { color: #333; font-size: 80%; line-height: 1.5; font-weight: normal; margin: 3px 0px; padding: 10px; text-align: left; border-left: 3px dotted #007; } /******************************/ /*カレンダー*/ #calendar { font-size: 90%; text-align: left; font-weight: normal; color: #fff; margin: 0px; padding: 0px; } /*カレンダー(テーブルタグでの指定部分)*/ #calendar table { text-align: center; width: 98%; margin: 3px 0px; border: 1px dotted #fc0; } /*カレンダー曜日部分(テーブルタグでの指定部分)*/ #calendar th{ text-align: center; color: #007; } /*カレンダー日にちリンク部分(テーブルタグでの指定部分)*/ #calendar td a{ color: #fff; text-decoration: none; background-color: #363; display: block; border: 1px outset #363; } /*カレンダー日にち部分*/ .calendarday{ font-size: 80%; font-weight: normal; color: #393; padding: 1px; } /******************************/ /*rss設定*/ .syndicate{ font-size: 80%; margin: 10px; text-align: center; } /******************************/ /*フッター部分*/ #footer{ clear: both; color: #333; font-size: 90%; margin: 0px; padding: 10px 40px; text-align: center; } .copyright{ font-size: 80%; text-align: right; padding: 5px; } /*Seesaaバナー*/ .powered table { text-align: center; margin-left: auto; margin-right: auto; } /*タグクラウド用 ※記事用のノーマルタイプ以外は確認が出来ていませんので、ビデオ等でもお使 いの方は個々で確認・修正して下さい*/ /**記事内に表示される部分のタグクラウド用**/ .tag-word{ font-size: 80%; text-align: right; margin: 5px; } /**検索部分のタグクラウド用**/ .tag{ font-size: 90%; color: #444; padding: 7px; line-height: 1.8; position:relative; } #tag_cloud{ padding: 3px; position:relative; } .tag-title,.tag-photos-title,.tag-audios-title,.tag-videos-title{ font-size: 120%; font-weight: bold; color: #007; position:relative; } .tag-search{ font-size: 80%; text-align: right; position:relative; } .tag-search a:link{color: #555; text-decoration: underline;} .tag-search a:visited{color: #666; text-decoration: none;} .tag-search a:active,.tag-search a:hover{color: #000; text-decoration: none;} .tag-more{ font-size: 80%; margin-top: 7px; position:relative; } /***********************************/ .tag-photos{ float:left; margin:10px; position:relative; width:150px; height:200px; } .tag-audios{ margin:5px; position:relative; } .tag-videos{ float:left; margin:10px; position:relative; } .tag-navi{ clear:left; text-align:center; margin:10px 0px; position:relative; }

ちなみにこのデザイン、こんなかんじのタイトルロゴがとってもよく似合います。↓(クリックで拡大)

ダメじゃん。

更に珍しくこれIEの画像なんですが、こんなかんじで、ブラウザによってborderの解釈が違ったりするので色々に見えると思われます。どんなタイプでもそれはそれで面白いんじゃないかなと思ったのでそれを楽しんでくださいデザインです。いいかげんと言わないで。
ちなみに、このIEでは●ポチで妙にカワイイですが、mozillaだと■ドットです。他の何かではもう少し破線ぽくなっていました。どれもいけてると思いましたが。ダメですかね。