スタイルシート変更 - 変更事例編2 (ブログページ全体)

まずは前回の補足として(後述と書いておいて書いていなかった・・・)、トップ部分のカスタマイズについてさらに触れる。前回触れなかった、ヘッダの画像以外の部分では 「ブログタイトルの表記位置」および「ヘッダ上下の余白」を調整できる:

• margin-top: 20px; → ページ上部の「みんカラ^βの文字からヘッダまでの距離(マージン)。
• margin-bottom: 0px; → ヘッダから「ブログ」「愛車紹介」等へのリンクまでのマージン
• padding: 15px; → ヘッダ用の枠からヘッダ内の文字(つまりブログタイトル)の距離

といった具合。距離の単位は、ピクセル(px)などで指定する。ちなみに、margin:20px;などとすると 上下左右すべてのマージンを一括指定可能。逆に、padding-topなどとすることで、上側のパディングのみ指定することもできる。 また、例えば以下の文を付加することで、ブログタイトルを様々に装飾可能である:

• text-align:center; → left、right、justifyも指定可能。centerとするとタイトルが中央寄せになる。
• letter-spacing: 20px; → ブログタイトルの文字間の間隔。

また、能書き編で触れたように「#Header a { ～ }」「#Header a:link」などの箇所で書体・文字色・文字スタイルを変更可能。

さらに前回説明の足りなかった箇所として、フッタ(ページ下部)の画像の挿入方法について触れておく。 ヘッダではbackground-imageを指定したが、フッタではbackgroundで指定する(その他の部分の書き方は同一)。

ここからが本題。ここまで紹介した箇所は、スタイルシートのごくごく一部。 というわけで今回は、ブログページの各部のクラス名称を紹介。 各部は主にDIVタグで区切られており、画像に示すようなクラス名が付けられている。スタイルシート編集画面で該当するクラスを探し、追記・削除・変更することで自在にページをカスタマイズできる。

ここでは一例として、タブ部分(「ブログ」「愛車紹介」「おすすめスポット」「ナンデス」の箇所)を取り上げる。 ここはちょっとやっかいな箇所。画像では「ブログ」を表示していて、「ブログ」のタブだけ違う色になっている(=アクティブになっている)。アクティブになっている箇所は、図にあるように.TabActiveおよびa.LinkTabActiveで変更可能であり、それ以外の箇所は.TabInActiveおよび.a.LinkTabInactiveで変更可能である。ベースのスタイルをブラックにした場合、スタイルシートの該当箇所は次のようになっている:
.TabActive
{
    background-color: #666666;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    border: #999999 0px solid;
}

a.LinkTabActive
{
    color: #FFFFFF;
    text-decoration: none;
    font-weight: bold;
}
a.LinkTabActive:link
{
    color: #FFFFFF;
    text-decoration: none;
    font-weight: bold;
}
a.LinkTabActive:visited
{
    color: #FFFFFF;
    text-decoration: none;
    font-weight: bold;
}
a.LinkTabActive:active
{
}
a.LinkTabActive:hover
{
    color: #FFFFFF;
    text-decoration: underline;
    font-weight: bold;
}
link、visited、active、hoverについては、能書き編で説明したとおり。試しに、.TabActiveを少々書き換えてみる(変更箇所は斜体で示してある):
.TabActive
{
    background-color: midnightblue;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    border: darkblue 3px solid;
}
.TabInactiveについてもborder:の箇所を同様に書き換えると、

タブ部分が変化した。このように、スタイルシートの編集したい箇所のクラス名に該当する部分を書き換えることで、任意箇所を様々にカスタマイズできる。ちなみにborderというのは外側の罫線で、darkblueは線の色、3pxは「線の太さを3ピクセルにする」、solidは線種(ほかにdotted、dashed、double、groove、ridge、inset、outsetを指定可能。お試しあれ)である。 なお色は、#RRGGBBという3原色指定ではなく、ここを参考に指定している。

ちなみに、編集したい箇所にどのクラス名が割り振られているかについては、Firefoxの「選択した部分のソースを表示」機能を使うとわかりやすい。