GLTMatrix

前回の修正でほぼ完成していますが
少しだけ修正して完成とします。

センターブロックと左右ブロックの高さを揃えます。
左ブロックは検索ブロックが一番上に来てるのでそれを修正します。

/* 検索ブロック */
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をベースに解説していきます、
開始予定は２００８年１月末頃を予定しております。

最後になりましたがGeeklog開発管理者の方々をはじめ
各SNSで励ましてくださった方々、叱咤激励のメールをくださった方々
皆様のおかげをもちまして第一部完成させることが出来ました。
心よりの感謝と御礼申し上げます。

GLTMatrix　管理人Auge Bangrossa

タグ：テーマクッキング