« 基本4:自分のブログのCSSファイルを確認する | トップページ | 第29回:半透明フィルター(CSS)を使わずに、画像を半透明っぽくみせてみよう »

2006/05/14

カスタマイズ・サンプル<No.2:Fly Away…>

2回目は、こちらではなくメインブログ(「*second message*」)のデザインです。

このデザインのポイントは何といっても背景に使った大きな写真素材。
これをどう生かすかを考えてデザインしてみました。
こうした大きな素材を全面に使う場合は、その他の素材はあまり併用しないほうがスッキリとまとまる気がします。

↓クリックで拡大

Fly_away_1


■背景

背景に使った草原と空を撮した大きな写真素材は「NOION」さんからお借りしました。
(現在は配布されていません)
表示用のCSSは
「第22回:本文やサイドバーの下に背景画像が透けるように表示してみよう〈2〉」
で確認して下さい。

■entry(記事)部分の処理

背景全体に色の付いた画像を置いたので、記事部分を読みやすくするために半透明に透けたように見える背景画像を作って設定してみました。
半透明画像の作り方は、
「第29回:半透明フィルター(CSS)を使わずに、画像を半透明っぽくみせてみよう」
entry部分への適用は、
「第27回:個々の記事(エントリー)表示欄に背景画像を設定してみよう」
で確認して下さい。

■リンクの装飾

リンク文字の下に下線が出るように設定しています。
設定方法は
「第28回:リンクの装飾を設定してみよう」
(『3.リンクの下に点線を引く』)
で確認して下さい。

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

この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;
}

となります。

■引用の装飾

シンプルに細い実線で囲むだけにしました。
CSSについては
「第19回:引用部分の装飾を設定してみよう」
で確認して下さい。

■サイドバータイトルの装飾

タイトルの前にワンポイント画像を設置し、同時にタイトルの下に罫線(細い点線) が入るように設定してあります。
CSSは以下のようになっています。

.sidebar h2
{
margin-left: 5px;
margin-top:5px;
  padding-left: 15px;
  background-image: url(http://~) ;
  background-repeat: no-repeat;
border-bottom:1px dashed #96ada9;
width: 140px;position: relative;
}

関連記事:第10回: サイドバーのタイトルにワンポイント画像を付けてみよう

主な設定部分は以上です。

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

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


<過去の「カスタマイズ・サンプル」は下記でご確認下さい>
カスタマイズ・ サンプル タイトル一覧


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


|

« 基本4:自分のブログのCSSファイルを確認する | トップページ | 第29回:半透明フィルター(CSS)を使わずに、画像を半透明っぽくみせてみよう »

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

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

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

コメント

本文中に下線を入れるにはどうしたらいいですか?
記事作成の時は下線が引けてるのに、ブログを表示すると、下線が引けてないのです。

投稿: ant | 2006/05/20 15:33

記述する前にHTMLに編集をクリックしてから記載すると下線が引けました。このやり方でいいんでしょうか?

投稿: ant | 2006/05/20 15:40

■antさん
こんにちは。

>このやり方でいいんでしょうか?

どの部分を仰っているのかよく判らないのですが、ご自分が考えた通りの結果が表示されているのであれば問題ないのではないかと思います。

投稿: tako→antさん | 2006/05/20 15:45

コメントを書く



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


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



トラックバック

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

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

« 基本4:自分のブログのCSSファイルを確認する | トップページ | 第29回:半透明フィルター(CSS)を使わずに、画像を半透明っぽくみせてみよう »