前回の修正でほぼ完成していますが
少しだけ修正して完成とします。
センターブロックと左右ブロックの高さを揃えます。
左ブロックは検索ブロックが一番上に来てるのでそれを修正します。
/* 検索ブロック */
div#leftblocks div#block-left-search {
clear:both;
margin: 5px 5px 5px 5px;
padding: 0 0 10px 0;
background: #e7e7e7;
border: 1px solid #cccccc;
}/* 右ブロック */
div#rightblocks div.block-right {
clear:both;
margin: 5px 5px 10px 5px;
padding: 0;
background: #e7e7e7;
border: 1px solid #cccccc;
color: #000000;
}
この部分の margin を修正します。
同時に右ブロックのブロック間も揃えましょう。
margin: 0px 5px 5px 5px;
すると以下の画像のようになります。
これは好みの問題になりますがウエルカムメッセージをTcookingと同じようにするのであれば
該当部分を以下のように修正します。
/*--------------------------- div#centerblocks -----*/
/* ウェルカムメッセージ */
div#centerblocks p.welcome_msg {
margin: 0 0 1em 0;
padding: 1em 0 1em 10px;
background: #000000 url(images/custom/bh2l.png) repeat top left;
border: 1px solid #999999;
color:#000000;
}/* ウェルカムメッセージのリンク */
div#centerblocks p.welcome_msg a,
div#centerblocks p.welcome_msg a:link,
div#centerblocks p.welcome_msg a:visited {
color:#ffffff;
}div#centerblocks p.welcome_msg a:hover,
div#centerblocks p.welcome_msg a:focus,
div#centerblocks p.welcome_msg a:active {
color: #ffffff;
}
これは「pに指定したwelcome_msgクラスに背景色を黒色にして bh2l.png を
左上から繰り返して表示し文字色を黒色にする。
さらにリンク文字を白色にする。」です。
すると以下の画像のようになりTcookingの完成です。
あとがきm(_ _)m
つたない説明でしたが今回でテーマクッキング第一部は終了です。
今回は「センターブロックの修正」と「レイアウトを決める方法」の解説はしてませんが
画像の差し替えで豊富なバリエーションのデザインが出来るので色々試してください。
これがまず第一歩です、今回のテーマクッキングでデザイン(見た目)を変更する時に
見るべきProfessionalCSSのCSSファイルとcustom.cssに書き込む部分をつかんでください。
はじめから欲を出してやろうとして諦めるより、少しずつでも形を作っていけば楽しめます。
質問はお気軽に掲示板などでお問い合わせください、けっしてあきらめないでくださいね。
第二部の予告・・・仮題名は「使えるものは便利に使おう」です。
第二部はProfessionalCSSをベースに解説していきます、
開始予定は2008年1月末頃を予定しております。
最後になりましたがGeeklog開発管理者の方々をはじめ
各SNSで励ましてくださった方々、叱咤激励のメールをくださった方々
皆様のおかげをもちまして第一部完成させることが出来ました。
心よりの感謝と御礼申し上げます。
GLTMatrix 管理人Auge Bangrossa
[tag:テーマクッキング]
この記事にはトラックバック・コメントがありません。
サイト管理者はコメントに関する責任を負いません。
kobabです。
私でもTcookingライクなサイトが作れました。感激!ありがとうございまっす!!
上手く伝わっているか心配してたのですが
コメントをいただき一息つけました。
しかしこれがスタートです!
画像を変更したりCSSを書き換えてもっと素敵なデザインの
Geeklogサイトを構築してください。
完成したら教えてくださいね。
---
たかが0.1%されど0.1%
SNSでお世話になってます穂高@です。
第一部、勉強させていただきました。
元々CSSが判ってないので、丁寧な解説、助かりました!
ありがとうございましたm(_ _)m
とりあえずこちらが課題提出サイト。
やっつけでほとんどそのまんまです``r(^^;)ポリポリ
で、実は私、本番ではCLR(センターブロックが右)をやりたいのです。
CLRのページが何故少ないのか、何か理由があるような気もするのですが・・・よく判ってなくて。
個人的に、左メニューが好きじゃないんです。
マウスが遠いとか(爆)
次は「PtextbookCLR」について、教えていただけるとありがたいです。
>で、実は私、本番ではCLR(センターブロックが右)をやりたいのです。
センターブロックが左、の間違いでした。(;^_^A アセアセ
穂高@さん
お役に立ててうれしく思います(^^
サイトを拝見しました。
画像差し替えとCSSの書き換えだけでここまでできる
いい例になると思います。
現在記事のタイトルの文字数が増えると枠外に出てしまう
状態なので文字数を少なくするか小さくしたほうが
いいと思います、この部分は次のバージョンで修正します。
Ptextbookのレイアウト違いバージョンは近日中に
リリースしますのでもう少し待っててください。
書き換えはテーマクッキングと同じなのですぐにできると思います。
GeeklogJapaneseにもサイト紹介とリンクの申請をしたほうが
いいと思います。
---
たかが0.1%されど0.1%