アメブロスキンをカスタマイズ！ＣＳＳ編集 -11ページ目

ブログ画像一覧を見る

このブログをフォローする

<< 前のページへ最新 | 9 | 10 | 11 | 12 | 13 | 最初次のページへ >>

画面全体　body#mainIndex　frame　subFrame

2005年11月28日現在、当ブログは

このようになっています。

ＣＳＳを指定せずに、ＨＴＭＬのみだと

このように表示されます。

タグを並べた順番に表示され、文字のみの表示です。（ＨＴＭＬタグ参照）

では、順番にＣＳＳを指定してゆき、ＣＳＳ編集画面がどのようになっているのかみてみます。

全てのスキンに指定されているall_skinの説明は→（こちら）

ＨＴＭＬをみると（少々省略してます）

<html>

<div id="subFrame">ブログの中身</div>

</div>

</body>

ブログのヘッダやサイドバーや記事などは「subFrame」内に入っている事が解かります。

では、まず「body」「mainIndex」「frame」「subFrame」の指定を行います。

ＣＳＳ編集画面で　Ctrlキーを押しながらＦキーを押し、出てきた画面に「mainIndex」と書き込み、検索し何処にあるかを探し出してみてください。

ついで「body」も検索してください。

いくつもある場合がありますし、必ずしも当ブログと同じとは限りません。

探し出したＣＳＳは以下の通りです。

/*
-----------------------------------------------------
ameblo CSS Skin Settings
FileName: common.css
Version: 2005.08.08
Skin for: pink_circle
-----------------------------------------------------
*/

/* ----------------------- common ----------------------- */
body#mainIndex {
margin : 0 ;　　/*外側の余白なし（参照）*/
padding : 0 ;　　/*内側の余白なし（参照）*/
text-align : center ;　　/*センタリング（参照）*/
}

/* ----------------------- font-information ----------------------- */
body {
color : #666666 ;　　/*文字の色グレー（参照）*/
font-size : 11px ;　　/*文字サイズ11px（参照）*/
}

/* ----------------------- background-color-control ----------------------- */
body {
background-color : #FFFFFF ;　　/*背景色白（参照）*/
}

適応させてみると

このようになります。

body#mainIndex　のボックスは

赤枠部分にあたります。

CSSによって、何処が変わったのか解かるでしょうか？

では、続いて「frame」を検索（Ctrl + F）してみます。

/* ----------------------- common ----------------------- */

#frame {
width : 800px ;　　/*幅800pxのボックス（参照）*/
margin-left : auto ;　　/*左の外側の余白自動設定（参照）*/
margin-right : auto ;　　/*右の外側の余白自動設定（参照）*/
text-align : left;　　/*テキスト左寄席（参照）*/
}