« 2006年12月 | トップページ | 2007年3月 »

2007年1月の2件の投稿

2007/01/28

カスタマイズ・サンプル<No.6:手帳>

デザインを変更しました。

カスタマイズ・サンプル<No6:手帳>

と言っても、新作ではなく去年の春に別ブログで使ったデザインの使い回しなのですが… ^^;
実は、別のデザインを考えて素材の調整などをしていたのですが、プレビューなどしているうちになんとなくこのブログとは雰囲気が合わないような気がしてきてしまったので、去年使って気に入っていたこちらのデザインに差し替えました。
元々作っていたものも出来が悪いというわけではないので、もう少し調整したあとに別ブログの方で使おうと思っています。

ということで、以下今回のデザインのポイントです。

■背景

body部分に「web*citron」さんの壁紙、 container部分に「ミントblue」 さんの写真を使わせて頂いています。
(バナー部分、記事欄、左右サイドバーは透明化しています)
CSSは下記の通り。

/*背景(チェック柄)*/
body
{
background-image:url(画像のurl);
}

/*背景(写真)*/
#container
{
background-image:url(画像のアドレス);
background-repeat:no-repeat;
background-position:top right;
}
/*バナー、記事欄、サイドバーの透明化*/
#banner,.content,#right,#left
{
background-color:transparent;
}

■サイドバーのリスト及び記事のタイトル

サイドバーのリストと記事のタイトル部分はボーダー(border)を使って付箋紙風に見せています。

/*サイドバータイトルの背景*/
.sidebar h2
{
{padding: 5px;
background-color: #ffffff;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-left: 15px solid #e7ccaf;
width: 140px;position: relative;
font-family: "MS UI Gothic",serif;}
}

/* 記事タイトルの背景 */
.content h3
{padding: 5px;
background-color: #ffffff;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-left: 15px solid #e7ccaf;
width: 350px;position: relative;
left: -20px;font-family: "MS UI Gothic",serif;}

■コメント欄 及び 引用部分

コメント欄と引用部分にはトップに置いたのと同じ画像のモノクロ版を背景にしてあります。

.comment-body
{
  background-image:url(画像のurl);
background-repeat:no-repeat;
background-position:top right;
border:#58393f 1px solid;
padding:5px;
  }

/*引用*/
blockquote
{
border:1px dashed #cc9966;
margin:10px 15px;
padding: 10px;
background-image:url(画像のurl);
background-repeat:no-repeat;
background-position:top right;  }

こんな感じかな。

もし使える部分がありましたらご自由に使ってください。
カラーコードや線の太さ、種類、余白の数値などの変更はご自分で調整してくださいね。

上記以外で「この部分はどうなってるの?」というご質問がありましたら、コメント欄にでも書き込んでください。

こちら(↓)に表示サンプル用ページを用意しました。
上記のキャプチャ画像では見えない部分も表示してあります。
サンプル:手帳


*この記事にコメントを書く*


| | コメント (13) | トラックバック (0)

2007/01/07

本年も宜しくお願いいたします。

皆様、明けましておめでとうございます。
旧年中は当ブログをご贔屓にしていただきありがとうございました。

なかなか更新も出来ない放置ブログになっていますが^^;、過去記事の手直しとご質問への対応は出来る範囲で頑張ります。
その中で少しずつでも新しい記事のヒントを探して記事を書き溜めて行ければ、と思っております。

今年も「初めてのココログ・カスタマイズ」を宜しくお願いいたします。

皆様のブログに明るい記事が多い1年でありますようお祈り申し上げます。

「初めてのココログ・カスタマイズ」管理人 tako拝

| | コメント (10) | トラックバック (0)

« 2006年12月 | トップページ | 2007年3月 »