seesaa(さくら)ブログのカスタマイズをする際、全体の構造を把握しておくと良いので、ここにメモ。
▽「CSS」
「CSS」データには、それぞれ
「body{ }」
「#container{ }」
「#banner{ }」
「#links-left{ }」
「#content{ }」
「#links{ }」
「#footer{ }」
のように記載されていて｛ ｝の中に、それぞれのスタイルを書き込むようになっています。
解りにくい場合は各要素の中に「border:1px solid red;」などを、記述してからブログを表示すると構造が良く解ります。
例えば
#container{
padding:10px;
color:#000;
border:1px solid red;
}
と記載することで「container」が赤枠で表示されるようになります。「CSS」のプレビューで確認してみてください。場所が解ったらシートの記述を元に戻しておきましょう。
この方法で、構造が更に詳しく解るようになりますので、ぜひ試してみてください。
▽「html」
次に「HTML」シートを見ると外側から
＜body＞＜/body＞、
＜div id="container"＞、
＜div id="banner"＞、
＜div id="links-left"＞、
＜div id="content"＞、
＜div id="links"＞、
＜div id="footer"＞
と記述されています。
「id」で表される「id属性」は、「class属性」と似ていますが、「class属性」が何度でも使えるのに対して、「id属性」は、一つのページについて1か所しか使えないところが異なります。
Seesaaブログの大まかな構造は、こんな感じになっています。これが解るとかなりカスタマイズがしやすくなりますね...
と、ここまでは、『Seesaaブログの基本構造を知っていればカスタマイズが簡単に....』から転載させていただきました。
さらに・・・
#container（全体）
┣ #banner（ヘッダー部分）
┃ ┣ h1（ブログタイトル）
┃ ┗ .description（ブログ説明）
┣ #content（メイン部分）
┃ ┣ .navi（カテゴリ別、過去ログ、記事のナビゲーターリンク）
┃ ┣ .blog（記事全体）
┃ ┃ ┣ .date（記事の日付）
┃ ┃ ┗ .blogbody（記事）
┃ ┃ ┣ .title（記事のタイトル）
┃ ┃ ┣ .text（本文) ※１
┃ ┃ ┗ .posted（投稿者名・時間・コメント数・トラバ数・カテゴリ）
┃ ┣ #comments（コメント全体）
┃ ┃ ┗ #comments form（コメント用フォーム）
┃ ┃ ┣ .comments-head（コメント用メニュー）
┃ ┃ ┣ .comments-body（登録コメント表示）
┃ ┃ ┃ ┣ .text（コメント本文） ※１
┃ ┃ ┃ ┗ .comments-post（コメント投稿者名・日時）
┃ ┃ ┣ input（入力フィールド） ※２
┃ ┃ ┣ textarea（コメント入力用フィールド）
┃ ┃ ┗ .input-submit（SUBMITボタン） ※３
┃ ┗ #trackback（トラックバック表示）
┣ #links（右メニュー部分）or #links-left（左メニュー部分） ※４
┃ ┣ .sidetitle（各コンテンツタイトル）
┃ ┣ .side（各コンテンツ内容）
┃ ┃ ┣ input（入力フィールド） ※１
┃ ┃ ┗ .input-submit（SUBMITボタン） ※３
┃ ┣ #calendar（カレンダー全体）
┃ ┃ ┗ #calendar table（カレンダー用表組み）
┃ ┃ ┣ .calendarhead（カレンダーの年月表示部分）
┃ ┃ ┣ #calendar th（カレンダーの曜日ヘッダー）
┃ ┃ ┗ .calendarday（カレンダーの日付部分）
┃ ┗ .syndicate（RSS表示）
┗ #footer（フッター部分）
┗ .powered（powered by表示） ※５
※１～３は共通部品。
※４は右メニューバーの場合と左メニューバーの場合でIDが異なる。
※５はコンテンツの並びにより、#links内の場合もあり。
こちはら、『Seesaa BLOGの基本構造』から転載させていただきました。
これらを頭に入れておくと、カスタマイズがやり易いと思いますよ。
起業・開業を応援する鯖江の税理士法人川中経営
税理士・ＩＴコーディネータ 川中重司
