« 基本3:記事欄への画像の挿入 | トップページ | 第27回:個々の記事(エントリー)表示欄に背景画像を設定してみよう »

2006/04/17

カスタマイズ・サンプル<No.1:sugar cube>

新企画です(笑)
デザインを変更したら、その内容と素材の入手元をザックリと説明しておくことにしました。
但し、デザインの変更自体が不定期ですから、あまり更新頻度は高くないと思いますので念のため。

まずNo.1は先日変更した現在のデザイン。
自分で付けた名前は「sugar cube」です。
(そのまんま、何のひねりもない名前ですね^^;スミマセン)

私はいつもデザインを変えるとき、メインになるものを一つ決めてそこから色や素材を決定していきます。
今回はリンク文字に「ちょっとダークな感じの赤」と「青みがかったグレー」を使いたいというのがまず最初にあったので (こういうパターンは珍しい)、それに合わせて背景画像や細かい部分の色を決めていきました。
↓クリックで拡大

suger


背景

背景に置いたチェックの画像は「web*citron」さんからお借りしました。
表示用のCSSは 「第6回:背景に画像を表示してみよう」で確認して下さい。

container部分の画像

container部分には「A.SLASH」さんでお借りした「Afternoon Tea」の角砂糖(シュガーキューブ)の写真を使いました。
全体的な色遣いはこの写真の包み紙のグリーンを基調にしています。
表示用のCSSは 「第21回:本文やサイドバーの下に背景が透けるようにしてみよう〈1〉」で確認して下さい。

マイリストとカレンダーのタイトル装飾

タイトルの前だけに太い枠線を付けてみました。
表示用のCSSは 「第10回:サイドバーのタイトルにワンポイント画像を付けてみよう」の応用で画像の代わりに枠線を使い、

.sidebar h2,#calendar caption
{padding: 5px;
border-left: 10px solid #96ada9;
width: 140px;position: relative;
}

としています。
実はこれだと、マイリストとカレンダーの行頭が何故か微妙にずれるため間に折り畳めない項目(「マイニフティで読む」「RSSの表示」)をわざと挟んで目立たないようにしています(笑)
どこか調整すれば同じ位置に出来ると思うのですが、ちょっとやってみても上手く行かなかったので「面倒だからいいやっ!」とそのままにしてしまいました^^;
これを試そうと思ったかたはその辺りご自分で調整お願いします。
(出来たら教えてください(笑))

記事タイトルの装飾

サイドバーの装飾と同じようにしました。
表示用のCSSは

.content h3{
padding: 5px;
border-left: 10px solid #96ada9;}

としています。

「バックナンバー」「最近のエントリー」「カテゴリー」のリストマーク

この3つの項目のみリストの行頭に画像のリストマークを付けました。
画像は「IMAGE」 さんからお借りしました。
表示用のCSSは

/*「最近のエントリー」「バックナンバー」欄のリストマーク*/
.module-archives .module-list-item {
  margin-left: 5px;
  padding-left: 15px;
  background-image: url(画像のurl) ;
  background-repeat: no-repeat;
}

/*「カテゴリー」欄のリストマーク*/
.module-categories .module-list-item {
  margin-left: 5px;
  padding-left: 15px;
  background-image: url(画像のurl) ;
  background-repeat: no-repeat;
}

となります。

引用の装飾

引用部分は細い実線で囲んで右下に背景画像 (container部分に入れたもののミニサイズ)を表示しました。
画像は色を若干飛ばしてあります。

blockquote
{
border:1px solid #73928c;
margin:10px 15px;
padding: 10px;
background-image:url(画像のurl);
background-repeat:no-repeat;
background-position:bottom right;
}

リンクの装飾

リンクは色を指定したあとにリンク自体の装飾は外して、代わりに文字の下側の罫線(border-bottom)だけを点線で指定しています。
こんな感じですね。

a:link {
color:#990000;
text-decoration:none;
border-bottom:1px #cc6600 dotted;
}

※この他にも「既訪問」や「接続中」「オンマウス」の場合など、それぞれ別の設定になってます。
※リンクの装飾については下記の記事を参照してみて下さい。
「第28回:リンクの装飾を設定してみよう」

他にもあちこち色を付けたり画像を置いたりしていますが、大体こんな感じです。
もし使える部分がありましたらご自由に使ってください。
カラーコードや線の太さ、種類、余白の数値などの変更はご自分で調整してくださいね。

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


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


|

« 基本3:記事欄への画像の挿入 | トップページ | 第27回:個々の記事(エントリー)表示欄に背景画像を設定してみよう »

カスタマイズ」カテゴリの記事

デザイン・サンプル」カテゴリの記事

ウェブログ・ココログ関連」カテゴリの記事

コメント

新企画、バンザーイ!(笑)
“説明のまま、ポンポンでポン!”で完成できる仕組みは、
案外多くのユーザが求めていることかもしれませんね。
ココログのリッチテンプレートみたいなものですよね。

そのデザインをしばらく継続するのもグー!
そう、キャプチャで残しておけば良いですからね。
サイドバーに「このデザインのやり方」というリンクを設けて、
解説記事へ導くのも一つの手かも(メンテは大変かな?)。
とにかく、新企画も頑張ってくださいね。楽しみにしています!

投稿: ads(あず) | 2006/04/18 00:23

■あずさん
こんにちは。コメントありがとうございます。

>サイドバーに「このデザインのやり方」というリンクを設けて、解説記事へ導く

このあずさんの提案を読んで「マイピクチャーを使ってみたら?」と思ってちょっとやってみたのですが、今ひとつ思ったようにならなかったので保留中です。
またいい方法があったら工夫してみますね。

でも、結局自分で考えたデザインって似た感じになってしまうので(しかもココログはHTMLの編集出来ないし)、あまりいろんなパターンは提供できないかも…です^^;

投稿: tako→あずさん | 2006/04/19 21:28

takoさん、こんにちは!!
こちらの記事の「マイリスト・・」の技、頂きました(^0^ゞ
これだと色や太さを変えたりといろいろ出来そうです(o^-')b
ありがとうございました。

*second message*
デザイン変えられたんですね*^^*(こっちにコメントしちゃってすみません^^;)
いつも楽しみに見ています(^-^)ゝ
またこちらでも紹介されるとのことで、それも楽しみです。。
それでは また・・( ̄▽ ̄)/

投稿: sacchi | 2006/05/10 14:47

■sacchiさん
こんにちは。いつもコメントありがとうございます。

タイトルの装飾、早速取り入れて下さってありがとうございます(^^)
ただborderを設定するだけでも随分雰囲気が変わりますよね。
なかなか気に入った画像が見つからないけど、何もないのは寂しいし…というときにでも使って下さい。

メインブログの感想もありがとうございました。
こちらのブログは説明文中心なので文章が読みやすいデザインを一番に考えてしまうのですが、あちらは雑文ばかりなので(読みやすさを考えつつも)季節感を出したりとか「自分がやりたいように」デザインしたいな、と思ってます。
また、その中から新しいヒントが生まれることもありますしね。
今回のデザインでもあちこち触っているうちに「あ、ここをこうするとこうなるのか!」と発見した部分もいくつかありますので、忘れないうちにこちらでご紹介したいと思っています。

また遊びに来て下さいね(^^)

投稿: tako→sacchiさん | 2006/05/11 20:38

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/2654/1442055

この記事へのトラックバック一覧です: カスタマイズ・サンプル<No.1:sugar cube>:

« 基本3:記事欄への画像の挿入 | トップページ | 第27回:個々の記事(エントリー)表示欄に背景画像を設定してみよう »