【Seesaaブログ新デザインシステム】ヘッダーの高さを変更して、ブログタイトルを左寄せにする|ブログカスタマイズの雑談BLOGスマートフォン専用ページを表示ブログカスタマイズの雑談BLOGブログのカスタマイズやパソコン・ネットに関する雑談をするブログです。右カラム」は、デフォルトのままだとヘッダー部分の高さがありすぎる気がします。下の図は、デフォルトのテンプレートでのヘッダー部分です。赤い枠線で囲んでいる部分が「ヘッダー」の範囲になります。「ヘッダー」はもう少し狭くても、つまりヘッダーの高さはもう少し小さくてもかまわないと思うので、この記事ではヘッダーの高さを調整し、ブログのタイトルも真ん中配置ではなく左に寄せて配置したいと思います。その後、タイトル部分の文字色を変更します。ついでにCSS(スタイルシート)のフッター部分に見出しを付けます。ヘッダーの高さの変更、文字を左寄せに(「header」を編集)CSS(スタイルシート)を編集します。管理画面の「スタイルシート編集」画面で「header」というclassを探します。テンプレートがデフォルトのままだと405行目ぐらいにあります。CSSの該当部分に以下の「編集後」のコードをコピーして貼り付けてから「保存」します。説明するために文字色を変更している部分がありますが、気にせずにコピペしてください。*******/」を付けました。●ヘッダーの高さは、記述している文字(ブログタイトルとブログ紹介文)に対して余白がどれくらいかで調整します。●この場合は、余白は上が30px、右は0、下が15px、左が20pxです。left;」でタイトル文字を左側に寄せました。●ヘッダーに掲載する文字の色を「color:#4E667D;」で青色に設定しました。(ただし、この時点ではリンク設定された文字の色はデフォルトの黒色ですので、ブログタイトルは黒色になっています)●上余白について「margin-top:30px;」を追加して、ヘッダー部分よりも上に30pxほどの余白を入れています。この余白、意味がわからないかもしれませんので、画像を掲載しておきます。何も編集していない、つまり「デフォルト」のテンプレートの場合と、「編集後」の場合です。「margin-top:30px;」でヘッダー部分の上に余白を30px追加したので、その結果、ヘッダー部分の上に背景画像が入っています。最初の状態(ヘッダーを編集する前の状態)では、ヘッダーの上部はブラウザの上部にくっついていたはずです。上記デフォルトの画像で確認してみてください。h1」を編集)続いて、ブログのタイトル部分の文字色を青色に変更します。私はリンク設定されている文字はすべてこの青色で設定したいと思っているので、ブログタイトルも同じ青色にします。CSS(スタイルシート)を編集します。h1」というclassを探します。(上記で編集した「header」の下にあります)テンプレートがデフォルトのままだと410行目ぐらいにあります。CSSの該当部分に以下の「編集後」のコードをコピーして貼り付けてから「保存」します。説明するために文字色を変更している部分がありますが、気にせずにコピペしてください。none;}●ブログタイトルのタグは「h1」です。CSSのこの部分はヘッダーの中の「h1」という意味になります。●「color:#4E667D;」を入れて、文字色を青色に変更しただけです。a」(リンク設定)もカラーコード(文字色)を青色に変更しました。h1)と実際のページコードの入れ替え後は、こんな感じになります。ブログタイトルの文字色が青色に変わっています。CSSのフッター部分にコメントアウトで見出しを付ける上記でヘッダー部分を編集しましたが、「ヘッダー」があるということは「フッター」も存在します。フッターは管理画面の「スタイルシート編集」画面で、テンプレートがデフォルトのままだと422行目ぐらいにあります。a」のすぐ下に記述されています。今回は、このフッター部分の記述を変更したりはしません。*******/」を付けるだけです。見出しを付けなければいけないわけではなく、「私は付けたよ」という話です。次の記事では、Seesaaブログのリンク設定を変更する方法を説明します。右カラム」は、デフォルトの場合(何も変更していな状態の場合)、リンクが付けられた文章は「水色」で表示されます。[必須入力]※画像の中の文字を半角で入力してください。