ブログカスタマイズの雑談BLOG

Seesaaブログのテンプレート「シンプルA. ホワイト 右カラム」は、デフォルトのままだとヘッダー部分の高さがありすぎる気がします。



下の図は、デフォルトのテンプレートでのヘッダー部分です。
赤い枠線で囲んでいる部分が「ヘッダー」の範囲になります。





「ヘッダー」はもう少し狭くても、つまりヘッダーの高さはもう少し小さくてもかまわないと思うので、この記事ではヘッダーの高さを調整し、ブログのタイトルも真ん中配置ではなく左に寄せて配置したいと思います。
その後、タイトル部分の文字色を変更します。
ついでにCSS（スタイルシート）のフッター部分に見出しを付けます。

ヘッダーの高さの変更、文字を左寄せに（「header」を編集）

CSS（スタイルシート）を編集します。
管理画面の「スタイルシート編集」画面で「header」というclassを探します。
テンプレートがデフォルトのままだと405行目ぐらいにあります。



CSSの該当部分に以下の「編集後」のコードをコピーして貼り付けてから「保存」します。
説明するために文字色を変更している部分がありますが、気にせずにコピペしてください。


＜元コード＞



＜編集後＞


●コメントアウトで見出し「/******* ヘッダー *******/」を付けました。
●ヘッダーの高さは、記述している文字（ブログタイトルとブログ紹介文）に対して余白がどれくらいかで調整します。
●この場合は、余白は上が30px、右は0、下が15px、左が20pxです。
●「text-align: left;」でタイトル文字を左側に寄せました。
●ヘッダーに掲載する文字の色を「color:#4E667D;」で青色に設定しました。（ただし、この時点ではリンク設定された文字の色はデフォルトの黒色ですので、ブログタイトルは黒色になっています）


●上余白について
「margin-top:30px;」を追加して、ヘッダー部分よりも上に30pxほどの余白を入れています。
この余白、意味がわからないかもしれませんので、画像を掲載しておきます。
何も編集していない、つまり「デフォルト」のテンプレートの場合と、「編集後」の場合です。


デフォルトの場合



編集後の場合



「margin-top:30px;」でヘッダー部分の上に余白を30px追加したので、その結果、ヘッダー部分の上に背景画像が入っています。
最初の状態（ヘッダーを編集する前の状態）では、ヘッダーの上部はブラウザの上部にくっついていたはずです。上記デフォルトの画像で確認してみてください。

コード編集後のCSS（header）

ブログタイトルの文字色を変更（「header h1」を編集）

続いて、ブログのタイトル部分の文字色を青色に変更します。
私はリンク設定されている文字はすべてこの青色で設定したいと思っているので、ブログタイトルも同じ青色にします。


CSS（スタイルシート）を編集します。
管理画面の「スタイルシート編集」画面で「header h1」というclassを探します。（上記で編集した「header」の下にあります）
テンプレートがデフォルトのままだと410行目ぐらいにあります。



CSS（スタイルシート）の「.header h1」「.header h1 a」を編集します。
CSSの該当部分に以下の「編集後」のコードをコピーして貼り付けてから「保存」します。
説明するために文字色を変更している部分がありますが、気にせずにコピペしてください。


＜元コード＞



＜編集後＞


●ブログタイトルのタグは「h1」です。なのでCSSのこの部分はヘッダーの中の「h1」という意味になります。
●「color:#4E667D;」を入れて、文字色を青色に変更しただけです。
●「.header h1 a」（リンク設定）もカラーコード（文字色）を青色に変更しました。

コード編集後のCSS（header h1）と実際のページ

コードの入れ替え後は、こんな感じになります。
ブログタイトルの文字色が青色に変わっています。

CSSのフッター部分にコメントアウトで見出しを付ける

上記でヘッダー部分を編集しましたが、「ヘッダー」があるということは「フッター」も存在します。
フッターは管理画面の「スタイルシート編集」画面で、テンプレートがデフォルトのままだと422行目ぐらいにあります。先ほど編集した「.header h1 a」のすぐ下に記述されています。



今回は、このフッター部分の記述を変更したりはしません。
わかりやすくするために、見出し「/******* フッター *******/」を付けるだけです。
見出しを付けなければいけないわけではなく、「私は付けたよ」という話です。
このブログは私のカスタマイズ備忘録ですから、私が好きなようにやります（笑）


＜編集後＞







次の記事の紹介

次の記事では、Seesaaブログのリンク設定を変更する方法を説明します。