So-net無料ブログ作成
ブログトップ ブログ全体 ヘッダー サイドバー 記事本文 フッター リファレンス Gazon Weblog

ソネブロの構造解析(その1) [番外編]

ソネブロの構造解析について

スキンを編集するにあたり、まず最初の壁は「どこをどういじっていいかわからない!」だと思います。実際、私もスキン編集の際は「ここかな?」と手探り状態です。

そこで、編集したい箇所を素早く見つけるお手伝いを。
すべてではないですが、タグとページ上の場所を結びつけてみました。ご活用ください。

尚、本記事はSo-net Blogの使い方:CSSセレクタ(タグ)一覧に記載されているタグの順番に対応しています。また、ソネブロのページに記載されていないタグで、編集しても特に変化のなかったものに関しては未調査としています。ご了承ください。

また、本記事で使用したスキンは「白」です。スキンによっては見え方や設定方法が異なる場合がありますのでご了承ください。

sk1.jpg


構造解析

ページ全体

【 body 】
ページ全体のベースとなる部分。初期値。これ以降何も設定しなければ、[body]に設定された値が有効となります。

例:[body]の背景に赤色を設定
body {
background:#FF0000;
}



【 a 】【 a:link 】【 a:visited 】【 a:active 】【 a:hover 】
ページ全体のリンク。初期値。これ以降何も設定しなければ、[a][a:link][a:visited][a:active][a:hover]に設定された値が有効となります。
尚、リンクとはマウスでクリックしたときに別の場所(URL)に飛べる文字列(あるいは画像)のことで、それぞれ、次のような意味があります。
           
linkリンク先へ未訪問のリンク
visitedリンク先へ訪問済みのリンク
activeリンク文字をマウスカーソルでクリックしたとき
hoverリンク文字にマウスカーソルを重ねたとき

例:[a]の背景に赤色を設定
a {
background:#FF0000;
}

<ページ上部>

<ページ下部>


【 #container 】
ページ全体の主になる部分。ヘッダー(ページ上部)、タイトルバナー、サイドバー、本文、すべてを管理しています。

例:[#container]の背景に赤色を設定
#container {
background:#FF0000;
}

<ページ上部>

<ページ下部>


【 blockquote 】
未調査。編集しても特に変化はないようです。


ヘッダー

【 #header 】【 #header p 】【 #memberMenu 】【 #globalMenu 】【 .menuDecoration 】
ヘッダーリンク部分とありますが、編集しても特に変化はないようです。
恐らく、現在のヘッダーデザインになる以前のヘッダー用タグではないかと思われます。


ブログタイトルバナー

【 #banner 】
タイトルバナー全体。

例:[#banner]の背景に赤色を設定
#banner {
background:#FF0000;
}



【 #banner h1 】【 #banner h1 a 】
タイトルバナーのブログタイトル名。
ブログタイトル名がリンクになっているため、[#banner h1 a]のタグが存在します。
     
#banner h1位置やフォントに関する設定。
#banner h1 aリンク色。文字の色や装飾に関する設定。

例:[#banner]の背景に赤色、[#banner h1]の背景に黄色、[#banner h1 a]の背景に青色を設定
#banner {
background:#FF0000;
}

#banner h1 {
background:#FFFF00;
}

#banner h1 a {
background:#0000FF;
}



【 #lead 】
タイトルバナーのブログ説明文。

例:[#banner]の背景に赤色、[#lead]の背景に緑色を設定
#banner {
background:#FF0000;
}

#lead {
background:#00FF00;
}




コンテンツ

【 #content 】
ブログの内容に関する主となる部分。サイドバーと本文記事部周辺全体。

例:[#content]の背景に赤色を設定
#content {
background:#FF0000;
}



【 #main 】
本文記事部とその周辺。

例:[#content]の背景に赤色、[#main]の背景に黄色を設定
#content {
background:#FF0000;
}

#main {
background:#FFFF00;
}



【 .archive-title 】【 .archive-bottom 】
[#main]の上下にあるリンク部全体。

例:[.archive-title]の背景に赤色を設定
.archive-title {
background:#FF0000;
}


例:[.archive-bottom]の背景にマゼンタ色を設定
.archive-bottom {
background:#FF00FF;
}



【 .archive-name 】
ページングリンクとありますが、編集しても特に変化はないようです。

【 .previousLink 】【 .nextLink 】【 .archive-links 】
[archive-title]および[archive-bottom]に記される以下のリンクです。
        
.previousLink「前へ」のリンク
.nextLink「次へ」のリンク
.archive-links「ブログトップへ」のリンク

例:[.archive-title]の背景に赤色、[.previousLink]の背景に黄色を設定
.archive-title {
background:#FF0000;
}

.previousLink {
background:#FFFF00;
}




ソネブロの構造解析(その2)に続きます。


nice!(8)  コメント(6) 
共通テーマ:ペット

nice! 8

コメント 6

miacat

ソネブロがリニューアルしてから、なんだかスキンいじるのが億劫になりました。サイドバーだって、なんか呪文の言葉で書けっていうし・・・
いろいろ教えてくださいね。
上にあるタブでリンクって今すごく気になってるの。
難しいのかな・・・
過去記事何度も読んで見ます。
ちょっと??だけど(笑)
by miacat (2008-07-23 18:01) 

かほりん

* miacatさん *

思えばmiacatさんとの出会いもカスタムスキンが最初でしたよね!
そうそう。なんだかリニューアル後からちょっとね〜。
でもサイドバーの呪文の言葉ってなんだろう?(笑)

あぁ、タイトルバナーの下にあるリンク?
あれはHTML編集の方をいじってます。
HTMLがわかれば簡単なのだけど、知らないと難しいかな〜?
HTMLの方は今のところ載せるつもりがないので、もし興味があれば、個人的にメッセージくださいな。(^^)

ちょっと今停滞してるけど、もう少ししたらメインブログの方が「現在」に追いつくので、こちらの更新はお待ちくださ〜い!
by かほりん (2008-07-24 14:28) 

GOMIMA

ご報告・・・
未だ!な~んもできてません(T_T)

by GOMIMA (2008-07-25 17:01) 

かほりん

* GOMIMAさん *

涼しくなってからにしましょう♪(笑)
by かほりん (2008-07-25 23:04) 

もばいぬさん

かほりんさん、、、お助けカード使って良い???
タイトル部分と背景のイラストを変えたいだけなのに、、、
やり方を読んでいるだけで、くらくらする、、、笑
夏ばて??
熱中症???
来週お盆休みまるまるお休みで、その時にしようかと思っていたのですが・・・目をやすめてあげないといけないし、、、
お助けカード使って良い???
by もばいぬさん (2008-08-06 15:31) 

かほりん

* もばいぬさん *

キャハハ!お助けカードを使うタイミングはもばいぬさんのお好きなときでどうぞ♪
但し、私も来週夏休みに入ってしまうので、すぐには出来ないかも?!
お待ちいただくことになるかもしれないけど、それでも良ければいつでも〜♪(^^)b
by かほりん (2008-08-06 22:09) 

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。