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

Seesaaブログのテンプレート「シンプルA. ホワイト 右カラム」の、サイドバーを設定します。



現時点でのブログはトップページの記事を点線で囲んでいますが、サイドバーは何もしていません。（トップページの記事を点線で囲む方法は＜■【Seesaaブログ新デザインシステム】トップページの記事を線で囲んで境目をわかりやすくする＞で説明しました）



トップページの記事を点線で囲むとメインコンテンツとサイドバーの境界がわかりやすくなるんですが、このままだとサイドバーの印象が薄いです。シンプルすぎます。


現時点のテンプレート




サイドバーのタイトルを強調するために、タイトル部分に背景色を付けて角丸にしたいと思います。編集後のイメージはこんな感じです。


編集後のイメージ

サイドバーのタイトルを強調する（「module」を編集）

サイドバーのタイトル部分を強調します。
背景色を付けて、タイトル文字を真ん中配置にします。
サイドバーに配置するコンテンツとコンテンツの間の余白も調整したいと思います。



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


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


＜元コード＞



＜編集後＞


●コメントアウトで見出し「/******* サイドバー *******/」を付けました。
●サイドバーのコンテンツとコンテンツの間を少し広くしました。「.module」の「margin-bottom: 60px;」です。
●サイドバーのタイトルをどのようにするのかは「.module__heading」で調整します。
私は、背景色は青色にして角丸にしました。元コードでは太字設定になっていたのを削除して、文字が真ん中配置（センター配置）されるようにしました。


●「.module__heading」について
「.module__heading」というclass名は、サイドバーだけでなく別の場所でも使用されています。記事ページの下に表示される「関連する記事」と「この記事へのコメント」のタイトル部分が、サイドバーのタイトルと同じ設定になります。
今後、この「module__heading」のスタイルを基準にしてタイトル表示をカスタマイズしていきますので、きちんと考えてスタイル内容（背景色や文字設定）を決めておいてください。

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

次の記事の紹介

次の記事では、Seesaaブログのサイドバー「最近の記事」を編集します。