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

Seesaaブログに記事を書いた時に画像を挿入していた場合、トップページではその記事の最初の画像が表示されます。


「最初の画像（サムネイル画像）があまりに大きいから」という理由で、私は以前の記事＜■【Seesaaブログ新デザインシステム】サムネイル画像サイズの説明と変更＞でサムネイル画像のサイズを変更しました。
変更した画像サイズは「width: 300px;」「height: 200px;」です。（画像比率「3：2」です）


現時点のテンプレート



サムネイル画像の下に記事の文章が表示されているため、サムネイル画像の横が空いています。
この空間が非常にもったいないと思うわけです。
どうせなら、サムネイル画像の右横に文章を表示させることで、1つ1つの記事コンテンツの高さを小さくしたいですね。



ということで、「記事ページではないページ」のサムネイル画像の横に文章を置くように設定したいと思います。


「記事ページではないページ」というのは「記事ページ以外のページ」ということです。
つまり「トップページ」や「カテゴリページ」「過去ログ（アーカイブ）ページ」「タグ一覧ページ」「ブログ内検索結果ページ」のことです。
これらのページは、各記事が短文表示になっています。（「続きを読む」リンクがあり、文章の後半が省略されています）
短文表示ですが、サムネイル画像の下に文章を表示させてしまうと、その分だけ場所を取るわけですね。
サムネイル画像の横に文章を置けば、もっとスッキリした見た目になると思います。

記事ページではないページのサムネイルの横に文章を配置

「サムネイルの横に文章を配置」と言っていますが、HTMLを編集する必要はありません。
CSSの記述だけで、文章を横に置くように設定することができます。



CSS（スタイルシート）を編集します。
管理画面の「スタイルシート編集」画面で「entry__thumbnail」というclassを探します。
ここまでのカスタマイズ後の場合は490行目あたりです。






下記に「元コード」と「編集後」のコードを掲載しておきます。
CSSの該当部分に「編集後」のコードをコピペするか直接変更してから「保存」します。
説明するために文字色を変更している部分がありますが、気にせずにコピペしてください。


＜元コード＞


＜編集後＞


●「float: left;」で画像を左側に配置するように指定しています。
●画像を左側に配置すると、画像の右端からいきなり文章が始まってしまうので、少しだけ画像の右側に余白を入れています。（margin-right: 15px;）
●サムネイルサイズは「300px×200px」ですが、「300px」に縮小した時に高さが200pxも無い場合はサムネイル部分の上下に空間ができてしまいます。ちょっと見た目がおかしい気がしますので、「ここには300px×200pxの画像を入れるつもりだったのよ」と主張するために、枠線を付けました。（border: 1px solid #D3D3D3;）

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

次の記事の紹介

次の記事では、Seesaaブログのサイドバーのコンテンツを線で囲む方法を説明します。