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

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



サイドバーの「最近の記事」に関しては、以前の記事＜■【Seesaaブログ新デザインシステム】サイドバー「最近の記事」（2）タイトルと記事冒頭部分の文字数を変更する＞で編集済みです。
サムネイル画像のサイズに対して記事タイトルと記事冒頭部分がはみ出てしまう現象を解消するために、記事冒頭部分の文字数を変更しました。



これはこれでうまく行っていたんですが、前々回の記事＜■サイドバーのコンテンツを線で囲む（過去ログ、最近の記事、カレンダー、カテゴリ、自由形式、タグクラウド、人気記事）＞でサイドバーの各コンテンツを線で囲んだことにより、再び、サムネイル画像に対して記事タイトルと記事冒頭部分がはみ出るようになってしまったのです。
（「はみ出る」というのは、サムネイル画像の高さと同じ高さで文字が収まっていない、という意味です）


現時点のテンプレート



このおかしな表示をどうにかしようと考えている時に、ふと「記事冒頭部分を表示する必要はないのではないか」と思ってしまったので、「最近の記事」にはサムネイル画像と記事タイトルだけを表示させるようにしてスッキリさせたいと思います。



ちなみにこの記事は、「サイドバーのコンテンツ部分を線で囲む」というカスタマイズをした後に、改めて「最近の記事」部分を調整する記事です。
とはいえ、コンテンツ部分を線で囲んでいない場合でも、同じ作業内容で「サムネイル画像と記事タイトルだけを表示させる」ことができます。
編集する箇所は共通ですので、枠線があるかないかは気にせずに編集してください。
（枠線に関する記述部分は何も触らないので大丈夫だと思います）

「最近の記事」にサムネイル画像と記事タイトルだけを表示する

コンテンツHTMLを編集します。
管理画面の「コンテンツHTML編集」画面を開き、「module module--recent-entry」を探します。
カスタマイズ後は16行目あたりにあります。
この一連のコードの下（27行目あたり）に、以下のコードがあると思います。





上段が「記事タイトル部分」で、下段が「記事冒頭部分」です。
今回は「記事冒頭部分」は不必要になるのでコメントアウトで非表示にします。そして、「記事タイトル」の文字数と行間を調整することで、サイドバーの「最近の記事」にはサムネイル画像とタイトルだけを表示させたいと思います。

記事冒頭部分（記事内容）を非表示にする

まずは、記事冒頭部分（記事内容部分）を非表示にします。
削除してしまってもかまいませんが、いつか記事冒頭部分を表示させたいと思うことがあるかもしれませんので、ここでは削除ではなく非表示にしておきます。





この画像の色を付けている部分を全部、非表示にします。
非表示にするためには「コメントアウト」します。
（コメントアウトの意味は、記事＜【Seesaaブログ新デザインシステム】言葉の説明＞でご確認ください）



画像の色が付いている部分を、下の画像のように「<!--」と「-->」で挟んでコメントアウトして、「保存」します。
うまくコメントアウトできると、Seesaaブログの管理画面では該当部分のコードが茶色に変わります。

記事タイトルの文字数（バイト）を変更する

記事冒頭部分を非表示に設定したので、現時点の「最近の記事」にはサムネイル画像と記事タイトルしか表示されません。
記事冒頭部分のスペースが空いたわけですから、記事タイトルの文字数を変更して、今よりも多くの文字数を表示できるようにします。


現時点では、記事タイトルの文字数は、サムネイル画像がある場合は「22バイト」、画像がなくて文字だけを表示する場合は「32バイト」です。
この数値を好きなように変更します。






私はどちらも「70バイト」に変更しました。

記事タイトルの行間を設定する

コンテンツHTML編集画面で、「最近の記事」にはサムネイル画像と記事タイトルだけを表示するように編集しました。
記事タイトルの文字数を「70バイト」に設定したので、現時点では実際のページはこのように表示されます。


現時点のテンプレート



やはり記事タイトルがサムネイル画像からはみ出てしまっています。
記事タイトルが改行された時の、行間が広すぎるからです。
（文字数を「70バイト」に設定したので、改行するようになっています）
行間を調整します。



CSS（スタイルシート）を編集します。
管理画面の「スタイルシート編集」画面で「.module--recent-entry .recent-entry__item a」というclassを探します。
CSSの該当部分に下記「編集後」のコードをコピペするか直接記述し、変更内容を「保存」します。


＜元コード＞


＜編集後＞


●「line-height:1.5em;」を追加して、行間を「1.5em」に設定しました。

コード編集後のCSS（スタイルシート）と「最近の記事」

次の記事の紹介

次の記事では、サイドバー「過去ログ」「カテゴリ」のリストの先頭に「●」を付ける方法を説明します。