カスタマイズ・サンプル<No.6:手帳>
デザインを変更しました。
と言っても、新作ではなく去年の春に別ブログで使ったデザインの使い回しなのですが… ^^;
実は、別のデザインを考えて素材の調整などをしていたのですが、プレビューなどしているうちになんとなくこのブログとは雰囲気が合わないような気がしてきてしまったので、去年使って気に入っていたこちらのデザインに差し替えました。
元々作っていたものも出来が悪いというわけではないので、もう少し調整したあとに別ブログの方で使おうと思っています。
ということで、以下今回のデザインのポイントです。
■背景
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)












最近のコメント