FC2ブログの記事一覧ページにサムネイル画像を簡単につける方法!

当ブログは時々、ブログカスタマイズのコツを自らのメモ書きを兼ねて投稿しています。やはりWordPressが中心なのですが、今日はFC2ブログについて書きます。

無料ブログサービスの中でも自由度が高いのがFC2ブログです。アメーバブログやライブドアブログでは、HTMLソースを自由にいじることができません。

自由度が高いからこそ、いろんなカスタマイズもできるということで、今回は非常に便利な「記事一覧ページでサムネイル表示をつける」やり方をまとめます。

これをつけるだけで記事ページへのアクセスを促すこともでき、大変便利ですのでやってみて下さい。

記事中の1つ目の画像を取得しサムネイル表示させる

FC2ブログでは、画像をアップロードした時点で2種類のサイズでサムネイルが生成されています。

ですので、それをブログ上に表示をする変数を紹介。HTMLソースの任意の場所に貼り付けるだけです。

サムネイル小
 <%topentry_image_72> 

サムネイル大
 <%topentry_image_w300>

記事タイトルの「横」にサムネイルが表示されるようにする

上記のコードを貼り付けるのは、だいたいタイトルの直前です。しかし貼り付けるだけだとタイトルの「上部」にサムネイルが表示されてしまいます。

それを、タイトルの「横」にくるようにするやり方。スタイルシートに下記を記載しましょう。

サムネイル小の場合

div.entry_image {
width: 72px;
float: left;
margin: 5px 10px 0 0;
}

サムネイル大の場合

div.entry_image {
width: 300px;
float: left;
margin: 5px 10px 0 0;
}

以上!
簡単でしょ?
あとは各自いろいろ工夫してみて下さい。これだけでもブログの見映えがかなり違います。

ちなみに。。。サムネイル小はスマホテンプレート、サムネイル大はPCテンプレートに最適です。

今後も、WordPressだけじゃなくFC2ブログのカスタマイズについても特集していきます!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

post date*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)