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

Seesaaブログのテンプレート「シンプルA. ホワイト 右カラム」の、サイドバー「最近の記事」を見ると、文字に対するリンク設定がここだけ黒色で、画像よりも文字部分がはみ出ています。
それに、記事を選択しようと思ってリンク部分の上にマウスを置いてみても、何の変化もありません。
画像の上にマウスを置くと少しだけ色が変わりますが、文章の上にマウスを置いても色が変わらないので、これじゃあ変化がよくわからないです。


デフォルトの場合



リンク部分にはもう少しわかりやすいように変化を付けて、あとはサムネイル画像のサイズを少し小さくしようと思います。

「最近の記事」のリンク設定を変更する

CSS（スタイルシート）を編集します。
管理画面の「スタイルシート編集」画面で「module--recent-entry」というclassを探します。
検索するといくつかヒットしますが、最初にヒットした場所を編集します。
テンプレートがデフォルトのままだと603行目ぐらいにあります。


正確には「.module--recent-entry .recent-entry__item」というコードを編集しますので、検索してもわからない方はこの2つのclass「module--recent-entry」と「recent-entry__item」で検索してみてください。



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


＜元コード＞



＜編集後＞


●コメントアウトで見出し「/****** サイドバー（最近の記事） ******/」を付けました。
●記事と記事の間の線の色が薄かったので、「border-bottom」の色をわかりやすく青の点線にしました。
●リンク部分の文字色を青色に変更し、リンクに付いていた下線をやめました。（「a」に「text-decoration: none;」を追加しています）


●「.module--recent-entry .recent-entry__item a:hover」について
「.module--recent-entry .recent-entry__item a:hover」以下の記述は、今回新しく追加したコードです。「.module--recent-entry .recent-entry__item a」の下に追加すればいいと思います。
新しく「a:hover」を追加したのは、リンク部分にマウスを乗せた時にハッキリと色が変わるようにするためです。この記述により、ホバー時（マウスを乗せた時）に文字色がグレイに変化します。

コードを編集した後のCSSと実際のページ

マウスをリンク部分に乗せた時は、文字色がグレイになります。

サイドバー「最近の記事」の画像サイズを変更する

上記でリンク部分を設定しましたが、このままでは記事タイトル部分が中途半端に折り返されていて文字部分が画像よりも飛び出て見えます。


現時点のイメージ



こんな感じなので、サイドバー「最近の記事」の画像サイズを少し小さくして、記事タイトルを1行で表示できるようにしたいと思います。


編集後のイメージ




私はサムネイル画像のサイズを小さくしたいんですが、もちろん大きくすることもできます。
画像のサイズを変更せずに記事タイトルを1行に表示したい場合は、表示させる文字数を変更すればいいので、次の記事をお読みください。






あと、記事に白地が多い画像を挿入すると、「最新の記事」のサムネイル画像部分が真っ白（ほぼ白）になってしまうことに、この記事を書いた後に気付きました。
こういうのは、画像に枠線を付けることで対処したいと思います。

CSSで「recent-entry__thumbnail」を編集する

それでは、CSS（スタイルシート）を編集します。
管理画面の「スタイルシート編集」画面で「recent-entry__thumbnail」というclassを探します。
検索するといくつかヒットしますが、最初にヒットした場所を編集します。
テンプレートがデフォルトのままだと619行目ぐらいにあります。


正確には「.module--recent-entry .recent-entry__thumbnail」というコードを編集しますので、検索してもわからない方はこの2つのclassで検索してみてください。



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


＜元コード＞



＜編集後＞


●画像のサイズを70pxから60xにしました。
●画像の上に少し余白を入れることにしました。（margin-top:5px;）
●変更したのは画像のサイズと余白部分だけです。（他は元のコードのままです）
●逆に画像を大きく表示したい方は、画像サイズ「60px」の数値を変更してください。

コードを編集した後のCSSと実際のページ

このページの一番上に掲載している画像（元々の状態の画像）と比較してみてください。画像サイズを小さくしたことで、記事タイトル部分が折り返されることなく1行で表示されています。


とかまあ、ドヤ顔で言いたいんですけど、これがそうもいかないという（笑）
確かに画像を小さくしたことでタイトル表記が1行で収まっていますが、別に画像を小さくしただけで丸っとOKというものではありません。
画像を小さくしたのでその分の空間が出来たから、その空間分の文字が収まっているだけなんですよね。
確実にするためには、文字数を変更するべきだ、ってことです。
文字数の変更については、次の記事で説明します。




次の記事の紹介

次の記事では、サイドバー「最近の記事」の記事タイトルの文字数を変更する方法を説明します。