2017-07-04

画像無し記事のトップページ表示 Blogger·Vaster2 カスタマイズ#8

どうも。
NIKEがAmazonで販売提携すると言うニュース。
スニーカー等の販売チャネルを小売店による販売を減らして、直接Amazonで販売する事により利益を上げたい様です。
日本ではatmosやmita…etcのスニーカー販売店のどこまで影響があるか判りませんが。
まぁ買う側としては買いやすければどうでも良いですが…。

トップページで画像無し記事の空白回避

さて、ブログを投稿していると自身で撮影した写真やイメージ画像を貼り付けている記事はかなり有ると思います。
しかし、内容によっては画像が無い記事を投稿する事もあります。

私のお気に入りテンプレート「Vaster2」のトップページでは、画像無しの記事を投稿した場合は何も表示しない（空白）状態となり、
画像がある記事とサムネイル画像の有無でトップページの統一感が失われてしまいます。

そこで画像が無い記事が投稿されても、トップページ上画像が無い事を示すサムネイル画像（no imageなど）が表示されるように変更したいと思います。

「Vaster2」ではトップページで記事内の画像を取得するHTMLがあります。
その箇所に画像が無かった時の処理を記述します。

<b:if cond=> ~ <b:else/>

過去の記事で、404エラーが発生した時に使用した分岐条件のタグ<b:if cond>は、条件が真の時のみ結果を返していました。

今回は<b:else/>を追加して条件が負の場合の処理をさせます。

つまり、記事内に画像があれば最初の画像をサムネイルとし（真の処理）、無ければ用意された画像をサムネイルとする（負の処理）ように処理をさせます。

では、変更前にテンプレートのバックアップを取りましょう。

画像を用意

HTMLを変更する前に表示される画像を用意します。

使用する画像は一般的な"no image"など、シンプルで記事に画像が無い事を閲覧者に対して明示出来る画像が良いと思います。

自身で作成しても良いですが、フリー素材として提供頂けるサイトもありますので、そちらを流用しても良いと思います。

*フリー素材の利用にあたっては所有者の利用規約に従って下さいませ。

HTMLの変更します。

今回はHTMLの変更のみとなります。
HTMLの編集画面で、「TOP カテゴリ アーカイブの時」を検索します。
この箇所で記事の画像を取得し、トップページにサムネイルとして表示しています。

以下の<b:/else>以降に赤文字を追加します。

<!--TOP カテゴリ アーカイブの時-->
 <b:if cond='data:blog.pageType in {&quot;index&quot;, &quot;archive&quot;}'>
    <a class='article-list-link' expr:href='data:post.url'>
       <div class='article-list'>
          <b:if cond='data:post.firstImageUrl'>
            <div class='article-thumbnail'>
             <img expr:src='data:post.firstImageUrl'/>
            </div>
              <b:else/>
               <div class='article-thumbnail'>
                  <img src='画像のURL'/>
                </div>
          </b:if>

<b:/else>以降に記述する内容が、記事に画像が無かった時の処理となります。
class='article-thumbnail'に対して'画像のURL'で指定する画像が適用されます。

'画像のURL'の部分には保存されている画像のURLを記述しますが、Bloggerではサーバー上に画像を保存する事は出来ません。
一旦GoogleフォトにアップロードしてからURLを確認して、'画像のURL'の部分に記述する事になります。

今回の投稿自体に画像は無いので、トップページで確認すると、指定した画像が表示されている事が確認出来ました。

以上、些細な変更でした。

Bloggerテンプレートカスタマイズ