リスト型(タイムライン型)トップページでデフォルトの画像を表示するカスタマイズ方法

アメブロの新タイプの「リスト型(タイムライン型)CSS編集用デザイン」のトップページには、各記事のサムネイル画像が表示されるようになっています。

しかし、画像のない記事には全く何も表示されず、画像のある記事とレイアウトが違って見えるため、混在すると何となく雑然とした印象を受けてしまいます。

そこで、当記事では、「リスト型(タイムライン型)CSS編集用デザイン」のトップページで、画像のない記事にもデフォルトの画像(NoImage画像)を表示するカスタマイズ方法をご紹介します。

リスト型(タイムライン型)トップページでデフォルトの画像を表示する

カスタマイズは、ブログデザインCSSの編集で行いますので、もし、まだこのやり方がわからない場合は先にマスターしておいて下さい。

リスト型(タイムライン型)トップページで、画像のない記事にもデフォルトの画像(NoImage画像)を表示するには、ブログデザインCSSに以下のようなコードを追加してください。

【NoImage画像のURL】の箇所は、デフォルトの画像として表示したい画像のURLに置き換えてください。

画像は、一般的には画像フォルダにアップロードしたものを使用しますが、このあたりについてわからない場合は、「アメブロカスタマイズで使う画像のアップロード方法と画像URLの取得方法」を参考にしてください。

なお、画像のサイズは100ピクセル角の正方形がピッタリ納まりますが、拡大縮小されたり、長方形の場合に正方形に切り取られることを気にしないのであれば、どんなサイズの画像を設定しても正方形のサムネイルとして表示されるようになっています。

記事一覧ページなども同様にしたい場合

余談ですが、もしも、リスト型(タイムライン型)トップページと同時に記事一覧等も(もしくは標準型やタイル型のトップページの時に記事一覧等だけに)、デフォルト画像を設定したい場合は、以下のような上記コードよりも以下のコードを利用したほうが簡単です。

また、(そんなことがあるかどうかはわかりませんが)リスト型(タイムライン型)トップページとは別の画像を、記事一覧のデフォルト画像にしたい場合は、最初にご紹介したコードと、下記コードを併用すると実現可能です。

まとめ

以上、「リスト型(タイムライン型)CSS編集用デザイン」のトップページで(ついでに記事一覧画面も)、画像がない記事にもデフォルトの画像(NoImage画像)を表示するカスタマイズ方法をご紹介しました。

レイアウトがきれいに揃って、見た目が向上すると思いますので、よかったら参考になさって下さい。

よろしければフォローお願いします

コメントを残す

メールアドレスが公開されることはありません。

ご覧いただきありがとうございます。どうぞお気軽にコメント下さい。ただし、コメントでのご質問の方は、記事内容に関することだけに限定させていただきます。ご了承下さい。