ライブドアブログ デザインの自作・カスタマイズ

『ライブドアブログ』のデザインを自作・カスタマイズする方法。

記事の見出し画像を表示

記事の見出し画像を出力するにはブログ変数の<IfArticleFirstImage>を使う。

この変数は次の優先順(上から優先)に基づいて画像を出力してくれる。

  • 設定した記事の見出し画像。
  • 記事内に使っている最初の画像。

この条件に合わない場合は何も出力しない。

この変数を使って記事の見出し画像を表示するコードは次のようになる。

<IfArticleFirstImage><img src="<$ArticleFirstImage$>" alt=""></IfArticleFirstImage>

記事の見出し画像がない場合に対応

見出し画像がない記事がある場合、レイアウトが崩れる等の恐れがある。

これに対処するため、見出し画像がない場合の処理を作る。

ライブドアブログでは記事の見出し画像の有無を判定するブログ変数が用意されているので、それを用いる。

コードは次の通り。

<IfArticleFirstImage>
<img src="<$ArticleFirstImage$>" alt="">
</IfArticleFirstImage>
<UnlessArticleFirstImage>
<!-- ここに記事の見出し画像がない時の処理を書く -->
</UnlessArticleFirstImage>

これを踏まえ、記事の見出し画像がない時の処理について、例えば記事の見出し画像がない時に代わりの画像を表示するコードは次のようになる。

<img src="<IfArticleFirstImage><$ArticleFirstImage$></IfArticleFirstImage><UnlessArticleFirstImage>(代わりの画像のURL)</UnlessArticleFirstImage>" alt="">

構造化データに対応

構造化データに対応させるを参照。