プレビューはここをクリック
実験的&私自身の勉強も含めて、3列スキンを続けて作っています。
このスキンは、フォトブログを運営している人で、スキンの余計な装飾は一切いらない...という人にいいかな。
黒背景の3列スキンで、記事部分には横幅700PXまでの画像が貼れるようにしてあるので、全体を見るためにはウィンドウをかなり横に広げる必要がでてきます。
参考までに、現在使用中のトップ画像のサイズは、1100PX x 280PXです。
3列スキンは、Animal Skinのデフォルトである左メニューとはちょっと違うのでご注意を。
まずは、3列のレイアウト-左右にメニューレイアウト選択からスタートです。
また、このスキンは画像サイズ横幅700PXまで貼れるようにしてあるので...
微調整が必要です。
とはいっても難しいものではありません。^^
この後は普通に↓をコピペしてください。
■「メイン」■ 枠の中をすべてコピーしてHTML編集の「メイン」部分に貼ってください。
■「本文」■ 枠の中をすべてコピーしてHTML編集の「本文」部分に貼ってください。
■メニュー■ (一応「メニュー」部分へのコードを貼っておきますが、ここはもともと書いてあるコードでOKです。つまりここは
右メニューも左メニューも無視しちゃってOK!)
■CSS編集■ 枠の中をすべてコピーして「CSS編集」部分に貼ってください。
3列スキンを使用する場合、左右のメニューに何を持ってくるかコントロールすることができます。
まずは、設定(Config)ページより、メニュー管理を選んでクリックします。
このような画面が見えます。
初期設定ですべて右欄にある各メニュー(「メモ帳」「以前の記事」など)を左に移したい場合は、
メニューの名前をクリックして赤い枠を出し、それを今度は「
上へ」をクリックし続けて右欄の一番上まで持っていきます。
右欄の一番上にきたメニューの名前をさらに「上へ」と送れば、そのメニューの名前は左に移動します。
左欄から右欄へ戻すときは、これを逆にすればOKというわけです。
こうして自分の好きなようにメニューを左右に振り分けることが可能なわけですが...
現在のロゴ画像と
カレンダーは、左側のトップがデフォルト位置のようです。
スキン編集初心者には分かりにくいと思うのでここでは詳しく説明しませんが、
現在のロゴ画像もカレンダー位置も、HTMLのメイン編集内で位置の変更は可能です。
Top▲ | by mari_ca
by animal_skin
| 2009-04-25 02:19
| 3列スキン