Style book

2005-05-28

ナビゲーションバー公開

Navigation　Maker

このブログの上についているような、ドロップダウン式のナビゲーションバーが簡単に作成できるツールを作ってみました。
カテゴリや新着記事・過去ログなども表示でき、サイドバーのメニューと同じシステムで管理できるので、特に何もしなくても勝手に更新してくれます。
色や表示数なども細かく設定でき、サンプルのメニューを表示してその場で動作確認ができます。
良かったら試してみてください。

http://temp-css.seesaa.net/image/m_index.htm

posted by ８ at 00:36 | Comment(22) | TrackBack(11) | ブログ用ツール

ナビゲーションバーをつける

Navigation　Maker
このブログの上についているような、ドロップダウン式のナビゲーションバーが簡単に作成できるツールを作ってみました。
カテゴリや新着記事・過去ログなども表示でき、サイドバーのメニューと同じシステムで管理できるので、特に何もしなくても勝手に更新してくれます。
色や表示数なども細かく設定でき、サンプルのメニューを表示してその場で動作確認ができます。
良かったら試してみてください。

http://temp-css.seesaa.net/image/m_index.htm

posted by ８ at 00:36 | Comment(12) | TrackBack(4) | Seesaaブログ改造

2005-05-26

ナビゲーションバーテスト中

カテゴリや新着記事がそのまま反映される、ドロップダウン式のナビゲーションバーを作ってみました。
お気に入りリンクなど、サイドバーメニューなら大概そのまま取り込めるので、htmlからいじらなくても簡単に更新できます。
タイトルの下あたりにあるのがそれです。

posted by ８ at 03:43 | Comment(0) | TrackBack(0) | 更新履歴

2005-05-24

カレンダーを上部に表示

カレンダーを上部にぶっとばして一列表示にしてみました。
やりかた自体は簡単なんですが、なんか問題がおきそうな気もするのでしばらく様子見。
前月とかに飛べる"<<"ナビゲーションも付けたかったのですが、位置的に許可されていないみたいで弾かれてしまいます。
うぬう…。

posted by ８ at 02:17 | Comment(4) | TrackBack(0) | 更新履歴

続CSS Generatorβ

　CSS Generatorβ　を少しいじり直しました。
新しいcssテンプレートも「rect」と「mini」の2つを追加しました。
良かったら試してみてください。

posted by ８ at 01:27 | Comment(0) | TrackBack(0) | 更新履歴

2005-05-23

CSS Generatorβ

テンプレートのデザインや色の組み合わせを自由に選んで、スタイルシート(css)を出力するジェネレータを作ってみました。
下のリンクから行けますので、一番下のメニューからいろいろ押してみたり、パレットを適当にいじって遊んでみてください。
ヘルプは？マークで出ます。
気に入った組み合わせができたら、ぜひブログなどでご活用ください。
出力されたソースは、転載・転用・改造など自己責任でご自由にどうぞ。

http://temp-css.seesaa.net/image/index.htm

posted by ８ at 02:35 | Comment(2) | TrackBack(0) | ブログ用ツール

テンプレート(css)出力ツール

CSS Generatorβ

テンプレートのデザインや色の組み合わせを自由に選んで、スタイルシート(css)を出力するジェネレータを作ってみました。
下のリンクから行けますので、一番下のメニューからいろいろ押してみたり、パレットを適当にいじって遊んでみてください。
ヘルプは？マークで出ます。
気に入った組み合わせができたら、ぜひブログなどでご活用ください。
出力されたソースは、転載・転用・改造など自己責任でご自由にどうぞ。

http://temp-css.seesaa.net/image/index.htm

posted by ８ at 02:35 | Comment(5) | TrackBack(2) | Seesaaブログ改造

2005-05-22

トラックバックをクリックでコピー

記事の下に付くトラックバックURLをリンクにし、クリックするとURLをクリップボードにコピーする小技。
ただし、Ver.4.0以上のIEでのみ使えるらしいです。
サンプルは、このブログのトラックバックURL欄を見てみてください。

posted by ８ at 01:08 | Comment(3) | TrackBack(5) | Seesaaブログ改造

2005-05-21

日付の表示を変更してみる

Seesaaブログでは記事やコメント、サイドバーの日付が「○年○月」と漢字表示で固定されています。
それはそれで分かりやすくていいんですが、「Mon 14/Mar/2005」とか、いろいろ変えて表示できたら、もう少し格好いいんじゃないかとも思えます。

posted by ８ at 04:36 | Comment(4) | TrackBack(4) | Seesaaブログ改造

新テンプレート「ChinaColors」

下の記事で書いたcssテンプレートをなんとか整理整頓したので、公開します。
チャイナカラーっぽいシンプルなデザインです。
右・左サイドバータイプに対応しています。

posted by ８ at 02:33 | Comment(21) | TrackBack(2) | テンプレート

2005-05-18

新テンプレート

漢？テンプレートを少しいじって、新テンプレートを作ってみました。
フリー素材で飾り付けしたらチャイナっぽいような気がしたので、チャイナブルーと命名しました。
日付表示の部分は、今は画像を入れてありますが、画像を使わずにスタイルシートのみ書き換えでも同じような感じになります。

posted by ８ at 03:16 | Comment(0) | TrackBack(0) | 更新履歴

2005-05-16

漢？テンプレート

小ネタで全サイドバータイプ対応のテンプレート作ってみました。
全てのメニューが一直線に並び、日付やタイトルもごつっとした印象の、なんとなく漢を感じさせるデザインです。
カレンダーなど邪道！と言わんばかりに取っ払って、ズドンと記事のみにしても粋かもしれません。
これもcss書き換えのみでいけます。

posted by ８ at 04:07 | Comment(0) | TrackBack(0) | テンプレート

テンプレートの設定方法など

各テンプレートのブログにも記載してあるのですが、全体的な設定方法や諸注意です。

posted by ８ at 03:40 | Comment(12) | TrackBack(0) | 利用方法など

2005-05-14

新テンプレート追加

というわけで追加しました。

Style book　- clove -

両サイドバータイプのみです。Tシャツみたいなデザインです。
今のここのトップのように、ヘッダだけ画像を背景に入れても楽しめるかもしれません。

posted by ８ at 02:08 | Comment(0) | TrackBack(0) | 更新履歴

2005-05-13

DAKARA?

某飲料のような色のコンパクトなテンプレート。

posted by ８ at 01:50 | Comment(0) | TrackBack(0) | テンプレート

2005-05-12

全体的に修正しました

動作確認のために、初期設定のままcssだけ差し替えてダウンロードページを作っていたのですが、ブログ側の設定でキーワードマッチ型のアフィリエイトが有効になっており、そのタグがcss内にそのままくっついてしまっていました。
たった今気づいてびっくりし、あわてて修正しました。
タグがくっついているのは「h1」という記述部分です。
もし現在ご利用くださっている方は、お手数ですが差し替えをお願いします。

posted by ８ at 02:32 | Comment(0) | TrackBack(1) | 更新履歴

小ネタテンプレート

ユーザーの環境によって色が変わるテンプレート。
ウィンドウやデスクトップ背景色をそのまま反映します。

色とフォントだけなので、ウィンドウスタイルなどまでは反映されません。
Mac全く未確認。Windowsでしか使えないかもしれません。
小ネタなのであんまり動作確認してません。
設定方法は
http://temp-css.seesaa.net/article/3663981.html
をご覧ください。

■右サイドバー専用

body {
font-family:messagebox;
padding:0px;
text-align:center;
background:Background;
color:WindowText;
}
#container{
text-align:center;
margin: 0px auto 0px auto;
padding:0px;
width:762px;
background:Window;
border:ButtonHighlight 4px ridge;
}
a{
text-decoration:none;
color:Highlight;
}
a:hover{
background:Highlight;
color:WindowText;
}
#banner{
font-family:caption;
height:24px;
margin:0px;
padding:0px 0px 0px 20px;
text-align:left;vertical-align:middle;
background:ActiveCaption;
border-bottom:ButtonHighlight 4px inset;
}
h1 {
float:left;
margin:0px;
padding:2px;
font-size:100%;
font-weight:bolder;
color:CaptionText;
padding:0px 10px;
}
h1 a{
color:CaptionText;
text-decoration: none;
}
h2 {
font-family:caption;
font-weight:bold;
margin:0px;
background:ActiveCaption;
text-align:left;
font-size:100%;
font-weight:bolder;
color:CaptionText;
padding:2px 10px;
border-bottom:ButtonHighlight 4px inset;
}
h3 {
font-size:85%;
font-weight:bolder;
margin:10px 10px 10px 0px;
}
h3 a{
}
.description {
font:bold 80%;
color:CaptionText;
}
.navi {
font-size:85%;
text-align:center;
padding:0px 0px 5px 0px;
}
#content {
float:left;
width:500px;
text-align:center;
margin-top:10px;
}
.blog {
margin:0px;
margin-left:10px;
margin-bottom:10px;
text-align:left;
border:ButtonHighlight 4px ridge;
}
.blogbody {
padding:0px 15px 0px 15px;
margin-bottom:10px;
line-height:120%;
}
.date{
font-size:85%; 
}
.title{
font-weight:bolder;
text-align:left;
}
.title a{
}
.text{
font-size:85%;
margin-top:0px;
padding:0px 10px 0px 10px;
}
.posted{ 
font-size: 65%;
text-align:right;
margin:5px -15px 5px -15px;
padding:5px;
}
#links-left {
}
#links {
font-weight:normal;
width:220px;
float:left;
margin-top:10px;
margin-left:18px;
}
#calendar {
margin:0px;
font-weight:normal;
text-align:center;
}
#calendar table {
margin:0px;padding:0px;
width:220px;height:160px;
text-align:center;
border-left:ButtonHighlight 4px ridge;
border-right:ButtonHighlight 4px ridge;
border-bottom:ButtonHighlight 4px ridge;
margin-bottom:10px;
}
#calendar th{
font-size:70%;
font-weight:bold;
background-color:InactiveCaption;
color:InactiveCaptionText;
}
#calendar td{
text-align:center;
font-size:70%;
border-right:InactiveCaption 1px solid;
border-bottom:InactiveCaption 1px solid;
}
.calendarday a{
text-decoration:underline;
}
.calendarhead , .sidetitle {
background:InactiveCaption;
font-size:75%;
font-weight:bold;
padding:9px 0px 8px 10px;
margin:0px;
text-align:left;
font-family:caption;
color:InactiveCaptionText;
padding:2 10px;
border:ButtonHighlight 4px ridge;
}
.side {
font-size:75%;
font-weight:normal;
line-height:1.5em;
margin-bottom:10px;
padding:10px 15px 10px 15px;
text-align:left;
border-left:ButtonHighlight 4px ridge;
border-right:ButtonHighlight 4px ridge;
border-bottom:ButtonHighlight 4px ridge;
}
.input-submit, .side input, input{
background:Window;
color:WindowText;
border:1px solid ActiveCaption;
}
.powered {
padding:0px;
text-align:center;
}
.syndicate {
font-size:70%;
padding:5px 30px 0px 0px;
padding-bottom:10px;
}
#comments {
margin-top:25px;
margin-left:15px;
text-align:left;
}
#comments form{
padding-left:10px;
margin-top:5px;
}
#comments input{
max-width:250px;
border:1px solid ActiveCaption;
}
#comments textarea{
max-width:400px;
border:1px solid ActiveCaption;
}
.comments-head{ 
margin:0px;
padding:0px 0px 10px 12px;
font-size:85%;
font-weight:bold;
}
.comments-body {
padding:5px 5px 0px 0px;
font-size:85%;
}
.comments-post{ 
font-size: 70%; 
padding:10px 10px 5px 0px;
text-align:right;
}
#trackback {
font-size:85%;
padding:10px 10px 10px 10px;
margin-bottom:10px;
margin-left:15px;
text-align:left;
border:1px dotted ActiveCaption;
}
#footer{
clear:left;
padding:20px 0px 5px 0px
text-align:center;
}
.copyright{
font-size:80%;
width:100%;
text-align:center;
}
#diet-container{
    padding:5px;
}
.diet-title{
    padding:2px 10px 2px 5px;
    font-size:85%;
    color:#D77D62;
    width:90px;
    margin-top:5px;
}
.diet-content{
    padding-left:10px;font-size:85%;
}
#diet-foods{
    padding-left:10px;
    font-size:85%;
}
.food-title{
    width:20%;
    clear:left;
    float:left;
}
.food-content{
    width:75%;
    padding-top:10px;
}

閉じる

posted by ８ at 02:03 | Comment(2) | TrackBack(0) | テンプレート

新テンプレート再

Firefoxでも動作確認できたので、トップを新テンプレートにしてみました。
このテンプレートも、しばらくしたら公開します。
これは3カラム(両サイドバータイプ)のみ。

posted by ８ at 01:53 | Comment(0) | TrackBack(0) | 更新履歴

2005-05-11

このブログについて

このブログでは、Seesaaブログで利用できるオリジナルのスタイルシート(css)テンプレートを配布しています。
各テンプレートの一覧・設置方法は、トップの一覧か右の「テンプレート一覧」メニューからどうぞ。
ご利用の際には、必ず各テンプレートの説明にある注意書きををお読みください。

リンクやトラックバックはご自由にどうぞ。
記事内容に全く関連性のないコメントスパム・トラックバックスパムは断りなく削除する場合があります。
相互リンクはお受けしておりません。

このブログの上部についているような、ドロップダウン式のナビゲーションバーを付けてみたい方は、こちらの「Navigation Maker」をどうぞ。
■Navigation Maker
http://temp-css.seesaa.net/image/m_index.htm

また、以下のカテゴリで単発テンプレートや小技なども公開しています。

■単発テンプレート
http://temp-css.seesaa.net/category/440477.html

■ブログ用ツール
http://temp-css.seesaa.net/category/413214.html

■Seesaaブログで使える小技
http://temp-css.seesaa.net/category/363643.html

管理人：８８８

posted by ８ at 04:04 | Comment(9) | TrackBack(1) | 利用方法など

新テンプレート

cssテンプレートの一覧を折りたたみ表示にしてみました。
3カラムの新テンプレートにしたら縦に長すぎた。
このテンプレートも、そのうち追加する予定です。
一番上にも、各テンプレートのページに飛べるリンクをつけてみました。

posted by ８ at 02:37 | Comment(1) | TrackBack(0) | 更新履歴

書式	内容	例
%Y/%m/%d	年/月/日　になる	2005/03/14
%x	月/日/年(下2桁)　になる	03/14/05
%a Y/%m/%d	曜日(省略名)　年/月/日　になる	Mon 2005/03/14
%A Y/%m/%d	曜日(省略なし)　年/月/日　になる	Monday 2005/03/14
%Y/%b/%d	年/月(英語・省略名)/日　になる	2005/Mar/14
%Y/%B/%d	年/月(英語・省略なし)/日　になる	2005/March/14
%F	年-月-日　になる	2005-03-14
%y/%m/%d	年(下2桁)/月/日　になる	05/03/14

書式	内容	例
%H:%M	時(24時間表示):分　になる	13:50
%X または %T	時:分:秒　になる	13:50:25
%p%I:%M	(AM・PM表示)時(12時間表示):分　になる	PM01:50
%P%I:%M	(AM・PM表示・小文字)時(12時間表示):分　になる	pm01:50
%k:%M	時(24時間表示・1文字目の0はスペースに変換される):分　になる	3:50:25
%l:%M	時(12時間表示・1文字目の0はスペースに変換される):分　になる	1:50:25

書式	内容	例
%c	曜日(省略名) 月(英語・省略名) 日時:分:秒年　になる	Mon Mar 14 09:25:25 2005

広告