上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 可変式テンプレート、「スタンダード・3ヴァリアブル[standard_3variable]」のカスタマイズの手引きです。
 構造を変えるカスタマイズは、上級者向けになります。




ヘッダーカスタマイズ



standard_3variable・ヘッダーの構造

 まずは、ヘッダーをカスタマイズする注意点です。

バックグランド画像を設定する

 「IDヘッダーブロック(#header)」は、ブラウザサイズに合わせて伸縮する可変ブロックです。ここに「バックグランド画像」を設定するには、横幅が非常に大きな画像を用意する必要があります。大きなモニターであれば、横幅が「1600px」を超えるものも出始めていますので、それ以上の大きな画像を用意しないと、見切れてしまいます。
 背景に画像を設定するなら、「シームレスパターン」がお勧めかも知れませんが、端が切れるのは避けられないので、難しいかも知れません。


ロゴを設定する

 背景に比べて、格段にデザインしやすいと思います。
 タイトルのリンクをデザインしたかっこいいロゴ画像に変えれば、ブログの見栄えも変わると思います。
「.title」内にある「H2ブロック」を「padding(横)」でタイトル位置をサイドバーのラインとあわせています。このパディングを調節すれば、タイトルの横位置を変えられます。
「.title」のブロックで、「position:absolute; bottom:0; left:0;」というポジショニングをしています。
 縦位置はこちらで合わせられます。

 この方法以外でタイトルロゴをレイアウトすると、ブラウザ幅を狭めたとき、妙な形で崩れる可能性があるので注意して下さい。

 ちなみに、ヘッダーのデフォルトの縦サイズは「100px」にしてあります。




サイドカラムカスタマイズ



 サイドバーサイズは、従来のテンプレートと比べて、結構簡単にカスタマイズできます。試してみて下さい。

standard_3variable・メインブロックの構造

 構造は、「#main」の中で、「#side1」「#side2」をポジショニングしています。
 サイドバーの横サイズを固定220pxにして、「#main」内、左右にポジション。
 そのままだと、「#main」内のアイテムが、サイドバーの下に隠れてしまうので、左右「padding」を230px空けています。

 もし、右カラムを変えるなら、「#side2」の横幅「width」と、「#main」の右空白「padding-right」を連動して調節します。
 左カラムなら、「#side1」と「#main……padding-left」の値を連動させます。
 それでだけでカスタマイズは完了です。

 難があるとすれば、ヘッダー内の「#header h2」の「padding」も合わせて調節しないと、若干微妙な感じになる可能性があります。



 初心者の方には少々難しく感じられると思います。スタイルシートの基本事項などに関する質問にはこちらでは受けかねます。上級者向けテンプレートと言うことでご了承下さい。


■テンプレート詳細ページに戻る
スタンダード・3ヴァリアブル
このエントリーをはてなブックマークに追加
Wed.06.29.2011
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。