読者です 読者をやめる 読者になる 読者になる

ZENO-TEAL

今日もドッタンバッタン大騒ぎ

記事に画像がない時に表示されるデフォルト画像を変更する方法

この記事もそうですが、「続きを読む」までの間に画像が1つもないとトップページではデフォルトの画像が表示されます。これもcssで設定しているので自分で好きな画像に変更することができます。

css

以下のコードをデザインcssに加えてください。

.page-index .entry-content{
background-image:url(画像URL);
}

画像URLの部分には、自分で設定したい画像のURLを入力してください。

画像を用意する

f:id:c-miya:20170503071519j:plain はてなフォトライフに画像をアップロードし、その写真のページの右上にある「リンク」をクリックするとURLが表示されます。

<a href="http://f.hatena.ne.jp/c-miya/20111114221829"><img src="http://img.f.hatena.ne.jp/images/fotolife/c/c-miya/20111114/20111114221829.jpg" alt="20111114221829"></a>

このimg src=“"の部分が画像URLになります。この画像も縦横比が16:9のほうがいいと思います、

デフォルト画像

ちなみに、デフォルトで表示される画像URLはこのURLになっています。
http://cdn-ak.f.st-hatena.com/images/fotolife/c/c-miya/20170207/20170207100452.png

透明にしたい時は

あまりないとは思いますが、まったくの透明にしたい時は透明の画像を指定すればいいでしょう。一応作っておいたので使いたければどうぞ。

.page-index .entry-content{
background-image:url(http://img.f.hatena.ne.jp/images/fotolife/c/c-miya/20170503/20170503072027.png);
}