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

サイドバーの「カレンダー」の横幅ですが、デフォルトのテンプレートではCSSで「260px」に固定されています。
ブラウザを100％の横幅で表示させてブログを閲覧した時には何の問題もありませんが、ブラウザの幅をどんどん狭くして表示すると、左側に寄ったような状態で表示されてしまいます。



「何が問題なの？」と思われるかもしれませんが、Seesaaブログの「新デザインシステム」はレスポンシブ対応のテンプレートです。
今、レスポンシブ対応のテンプレートをSeesaaが出してきたということは、将来的にはスマホ用のテンプレートをなくしてしまう可能性があります。


レスポンシブ対応というのは、ブラウザの横幅を狭くすると、ある一定の幅になったらサイドバーがメインコンテンツの下に回り込むようになって表示される、というものです。
その時にカレンダーだけが左側に寄った状態で表示されるのは、ハッキリ言っておかしいです。



そもそも横幅を指定するためには、「○○px」のように横幅を固定してしまう方法と、「○○％」のように「親要素の横幅に対して○％分の横幅」と設定する方法の2つがあります。
デフォルトのテンプレートでは260pxで固定されているカレンダーですが、これを「％表示」に変更すると、ブラウザの横幅をどれだけ狭くしてもブラウザの幅に対して指定した％の幅で表示されるので、将来もしもスマホ用のテンプレートがなくなってしまった時でも問題なく表示できます。
簡単に変更できるので、やっておいて損はないと思います。



ついでに、「カレンダー」の表示をもう少し見やすい感じに編集したいと思います。
記事をアップしている日の日付部分にはリンクが設定されていますが、このままだとあまり目立ちません。なので、どの日に記事を書いたのかをわかりやすくするために、日にちのリンクに背景色を付けます。

サイドバー「カレンダー」の横幅を％表示に変更する

とりあえず、横幅を「％表示」に変更するとどのようになるのか、画像を掲載しておきます。
ブラウザの横幅をわざと狭くして表示させた時の「カレンダー」部分の画像です。
左側の画像が横幅固定の時（260px）の表示で、右側の画像が横幅を％で表示させた時（98%）です。
違いがハッキリわかると思います。






では、「カレンダー」の横幅を「％表示」に変更します。
CSS（スタイルシート）を編集します。
管理画面の「スタイルシート編集」画面で「module--calendar」というclassを探します。
テンプレートがデフォルトのままだと661行目に、カスタマイズ後の場合は716行目あたりにあります。
この記述より下にカレンダーの設定が色々と書いてありますが、今回編集するのは「module--calendar table」だけです。



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


＜元コード＞



＜編集後＞


●コメントアウトで見出し「/****** サイドバー（カレンダー） ******/」を付けました。
●「width: 260px;」を「width: 98%;」に変更しました。
●上に掲載した画像のように、ブラウザの幅を小さくした時に差が出ます。

コード編集後のCSS（カレンダー）

サイドバー「カレンダー」の日付に背景色を付ける

次に、「カレンダー」の日付部分のリンク設定を変更したいと思います。
まずは日付部分の枠内に背景色を付けるつもりですから、余白を入れてあげないと、連続して記事を書いた日には背景色が全部くっついてしまいます。「padding」を使って余白を確保します。
そして、記事が存在する日（リンク設定されている日）には背景色が付くようにし、その日付にマウスを乗せた時に背景色が変わるように設定します。

背景色を付けるために余白を作る（「module--calendar th」を編集）

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



下記のように「padding: 2px;」をコードの下に追加します。（「2px」に限定する必要はありませんので、プレビューで確認しながら数値を決定してください）


＜元コード＞


＜追加した後のコード＞

リンク設定されている日付部分に背景色を付ける

記事が存在する日（リンク設定されている日）は、その日付部分全部に背景色を付けて表示することにします。そして、マウスを日付部分に乗せた時に、背景色を変えます。


この処理は、コードを書き換えるのではなくて追加することになりますので、下記のコードの下に丸ごと追加してください。
テンプレートがデフォルトのままだと683行目ぐらいにあります。
カスタマイズ後の場合は741行目あたりです。


＜コードを追加する場所＞



このコードの下に追加します。（741行目のこのコードはそのまま残しておきます）
CSSの該当部分にコピペ（コピーして貼り付け）して、「保存」します。


＜追加するコード＞


●リンク設定されている場合（つまり、記事をアップした日）は、灰色の背景色が付きます。マウスを乗せると濃い灰色に背景色が変化します。
●日付の背景色でリンクであることをわかりやすく表示していますので、日付そのもの（数字）にはリンクであることを示す下線は必要ありません。「text-decoration: none;」で削除しています。
（私はリンク設定をした時に、リンクであることを示すために下線を付けるように設定していましたのでこの処理が必要ですが、最初からリンクに下線を付けないようにしている場合は「text-decoration: none;」を記述する必要はありません）

コード編集後のCSS（スタイルシート）

次の記事の紹介

次の記事では、Seesaaブログのサイドバー「ブログ内検索」の色を変更する方法を説明します。