« 「ブロガーに50の質問」に答えてみた
<その2>
| トップページ | ルイス・パーデュー/ダ・ヴィンチ・レガシー »

2005/03/20

新デザイン(グリーン)の変更ポイント

今回のデザインで使った(変更した)主なCSSタグを覚え書きも兼ねてアップしておく。

■背景
「NOION」さんで頂いた画像 (1024px×400px)を「画面下中央に固定」で設定。

body {
background-color: #ffffff;
background-image: url(画像のアドレス);
background-position: center bottom;
background-repeat: no-repeat;
background-attachment: fixed;
}

■タイトルバナー
背景画像に使った画像から815px×150pxの大きさを切り抜いて別名で保存。(PhotoShopLE使用)
そこにタイトル文字とサブタイトルを載せて上書き。(HPビルダー付属ウエブアートデザイナー使用)
これをココログ管理画面の「デザイン」→「スタイル」→「タイトルバナー」のオプション設定でアップロード。
「タイトルバナーに画像を使用する」にチェックを入れておく。
このままだと画像の上下と左に余白が出来てしまうため、CSSファイルを変更してその部分を削除。
(この余白の意味は何?)
a#banner-img部分を抜き出して、変更用のCSSファイルにコピー&ペーストした後

a#banner-img {
display: block;
background: #FFFFFF url(タイトルバナーのアドレス) no-repeat 0px 0px;
padding: 15px;
height: 150px;
 }


変更前は赤字の部分が15px15pxになっているのでこの数値を「0」に変更して保存。

※自ブログのCSSファイルの取り出しは「るるが株式会社」 さんのこの記事を参考にさせて頂きました。
  普通に「ソース」を表示して出てくるのとは違うファイルなのね^^;
  この中から該当箇所を見つけるのがまた大変…。
 

■サイドバーのタイトル画像
画像をアップロードして、.sideber h2の部分に反映させる。

.sidebar h2 {background-image: url(画像のアドレス);
background-repeat: no-repeat;height: 28px;padding-left: 23px;}

赤字の部分は実際の画像の大きさに合わせて。
今回のピンは実際には28px×20pxだったが、20pxだと文字との間隔がキツキツになってしまったので23pxに設定。

■カレンダーのタイトル画像
前回サイドバーのタイトルに画像を入れた時、カレンダーだけは反映されないので「む~(T"T)」と思っていたのを今回は何とか対応。
CSSファイルの#calendar captionに対応しているらしいのでこの部分を抜き出して、

#calendar caption {
 color: #336600;
 font-family: 'Trebuchet MS', Verdana, sans-serif;
 font-size: medium;
 border-bottom: 1px solid #849284;
 text-align: left;
 padding: 3px;
 letter-spacing: .3em;
 background-image: url(画像のアドレス);
background-repeat: no-repeat;
height: 28px;padding-left:23px
}

と、サイドバーのタイトル画像の設定と同じ一文を追加したら無事成功。

■引用部分

blockquote {
background-color:#ffffff;
border:1px solid #5a755a;
padding: 5px; }

赤字の部分を変更すると好きなように引用符を設定できる。

■記事タイトルの背景
画像を使ったり、グラデーションにしてみたりといろいろ試してみたけど、結局付箋紙風味のボーダーに落ち着いた。

.content h3{padding: 5px;
background-color: #ffffff;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-left: 15px solid #adb27b;
width: 300px;position: relative;left: -20px;}

右と下にグレーの細い直線、左に濃い色の太い直線を持ってくることで付箋紙を貼ってあるみたいに見せちゃうところが面白い。
更に、positionをマイナスにすることで記事本文よりもちょっと手前から表示されているのがポイント。

以上が、今回手を加えた部分。
もし使える部分がありましたら、ご自由にどうぞ。
但し、私は自力でCSSを記述することは全く出来ないので、 上記の変更部分は全てどこかよそのブログ様やカスタマイズ用書籍からの頂き物です。
かつ、自分で勝手に改変しているので、正式な記述として正しいかどうかも不明…^^;
自分で使った分には思った通りに表示されているようなので大きなミスはないと思いますが、 ご自分のブログへの適用については自己責任でお願いいたします。


最後にいつもお世話になっているブログ、本のご紹介。

ブログについてはあまりにも色んなところを回ってちょこちょこ使わせて頂いているので、全てを覚えているわけではないので (申し訳ありません(汗))記憶やブックマークにある分のみで。

「詞織」さん
「埼玉住人」 さん
「ケセラセラ」 さん
「KOROPPYの本棚」 さん
「るるが株式会社」 さん

などなど。
いつもありがとうございます。

本は「ポータル、プロバイダ別 blogデザインカスタマイズ辞典」(毎日コミュニケーションズ)が大活躍中。
「ココログ」だけでなく、「Movavle Type」「はてな」「Livedoorブログ」「エキサイトブログ」「JUGEM」 「Doblog」「2ちゃんブログ」 の計8つのブログに対応してそれぞれの変更方法が書いてあるので1,000ページを超える電話帳のような厚さで値段も2,980円(税別)と安くはないけど、 やりたいことを探してそこをそのまま書き写すだけで反映されるので簡単!
「ウェブログ・デザイン」(エムディエヌコーポレーション刊。「ココログ」「Movavle Type」「Blogger」の3つに対応) がココログのプランの区別をきっちり守った「純正品」なのに対して、「ポータル、プロバイダ別~」は裏技満載の「海賊版」 (と言う言い方はあんまりか…^^;)と言う感じだけど、私のようなCSSの知識はないし「プロ」 プランじゃないけど自分のオリジナルなデザインにしたいなあと思っている人には最適かと。

ポータル、プロバイダ別
blogデザインカスタマイズ事典

外間 かおり

by G-Tools
ウェブログ・デザイン
こもり まさあき

by G-Tools

※「ポータル、プロバイダ別blogデザインカスタマイズ事典」の内容はこちらのページで確認出来ます。

|

« 「ブロガーに50の質問」に答えてみた
<その2>
| トップページ | ルイス・パーデュー/ダ・ヴィンチ・レガシー »

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

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

コメント

シックで落ち着く色合いで素敵ですね。
今までのピンク系も好きだったけれど、これも好き……takoさんと好みが似ているかも?
変更に使ったCCSタグをご紹介いただいたので、私もそのうちいじってみようかしら。
いろいろなことに積極的にチャレンジされていて、いつも刺激を受けています。

投稿: Tompei | 2005/03/20 13:04

こんにちは、参考にさせていただきます。
昨日、「ポータル、プロバイダ別blogデザインカスタマイズ事典」発注して、今日配送になったとメールが来ました。
 ぼくも頑張ろう。教えてくださいね。
くまさんでした。ではでは(^.^)/~~~

投稿: くまさん | 2005/03/20 13:30

■Tompeiさん
デザインの感想ありがとうございます♪

>変更に使ったCCSタグをご紹介いただいたので、私もそのうちいじってみようかしら。

判ってやっているのではないのではなはだ自信がないのですが^^;、私も色んなところで助けて頂いているので私の記事もどなたかの役に立てれば嬉しいと思って書いてみました。
ちょっとしたことでも自分の思い通りに変更できると嬉しいですよね。
もし使えそうなものがあったらどんどんお持ち帰り下さい。

投稿: tako | 2005/03/20 16:00

■くまさん

>昨日、「ポータル、プロバイダ別blogデザインカスタマイズ事典」発注して、今日配送になった

この本はなかなか使えますよ。
でも、その分始めると止まらなくなるので注意です^^;
ご質問も私で判ることならお答えしますので、お気軽にどうぞ。
(私が答えるより参考ブログをご紹介した方が間違いないかも…)

投稿: tako | 2005/03/20 16:07

takoさん、こんばんは∈^0^∋
今日はレイの本が届いてから、めちゃくちゃな一日で、変更更新の繰り返しで、疲れて、今のところマイナーバージョンアップです。
 内容が濃いからきりがなくて、今やめることにしました。
 お墓参りもサボってしまいました。
お師匠さん、わからないことありましたら、よろしくお願いします。
くまさんでした。ではでは(^.^)/~~~
追伸:でも、何でこんなに厚いの?!

投稿: くまさん | 2005/03/21 22:05

■くまさん
おっ、遂に始まりましたね。

>変更更新の繰り返しで

そうなんですよ。
載ってるの全部試してみたくなっちゃうんですよね~^^;危険です。
くれぐれも日常生活に支障が出ないようにして下さいね。

>でも、何でこんなに厚いの?!

私は池袋から手持ちで帰りました…。重かった…。
この手の本はやっぱりネットで買って届けて貰うのが正解ですね。

投稿: tako | 2005/03/21 23:10

コメントを書く



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




トラックバック

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

この記事へのトラックバック一覧です: 新デザイン(グリーン)の変更ポイント:

» ブログのデザインを弄るには [Linuxで行こう]
Blogデザインカスタマイズ辞典読んでいます。 ブログ勉強用に読み始めた本だっ... [続きを読む]

受信: 2005/06/07 02:45

« 「ブロガーに50の質問」に答えてみた
<その2>
| トップページ | ルイス・パーデュー/ダ・ヴィンチ・レガシー »