スキップしてメイン コンテンツに移動

Bloggerの画像なしの投稿のスニペットに専用のサムネイル画像を表示する方法

Bloggerの公式テーマのテンプレートで記事の抜粋のスニペットがインデックスページやサイドバーに置かれる場合に画像なしの投稿については文章だけしか載らない。専用のサムネイル画像を予め用意しておいて画像ありの投稿と変わらずに表示するようにスニペットのデザインを変えるカスタマイズの方法を考えてみたい。

新テーマのContempoとSohoとEmporioは注目とブログと人気の投稿の三つのウィジェット、Notableは注目かブログと人気の投稿の二つのウィジェットのスニペットでサムネイル画像が別々の仕方で表示される。そしてテーマ毎にデザインも違うので、それぞれにカスタマイズためのソースコードを取り上げる。

旧テーマのシンプルと動的ビューと画像ウィンドウとAwesome Inc.とウォーターマークとエスィリアルと旅行は注目とブログの投稿と人気の投稿の三つのウィジェットのスニペットでサムネイル画像が別々の仕方で表示される。しかしテーマ毎にデザインは同じなので、全てに通用するカスタマイズのためのソースコードを取り上げる。

どちらの公式テーマの場合もBloggerのウェブのテーマのhtml編集かバックアップ/復元からテンプレートのソースコードのxmlファイルを書き換える。

画像なしの投稿のスニペットのサムネイルに使用する専用の画像はブログ内(記事/追加ページ、画像ウィジェットなど)か画像URLが取得できるImgurなどのWebサービスに予めアップロードして用意しおいて当該のスニペットのカスタマイズのソースコードに画像URLを記載して表示する。

画像サイズはBloggerで自動的にリサイズされるようになっているからスニペットのサムネイルだけれども最初から小さく加工せずに大きな画像を使用して大丈夫だ。

ミニチュア風に撮影されたポーランドのブィドコシュチュの穏やかに明るい街並みのサムネイル

Contempoテーマのスニペットのカスタマイズ

注目とブログと人気の投稿の三つのウィジェットで画像を表示するソースコードは異なっているから専用のサムネイル画像を追加するカスタマイズは個別に行う。

注目の投稿ウィジェットのソースコード

widgetタグのFeaturedPostのtypeのソースコードを編集する。

ソースコード①条件適合用

snippetedPostThumbnailのnameのincludeタグを書き換える。

<b:include cond='data:this.postDisplay.showFeaturedImage' data='post' name='snippetedPostThumbnail'/>

デフォルトから「and data:post.featuredImage」を削除する。

注目の投稿ウィジェットに画像を持つ記事でなくても画像を表示できる条件に変更するためだ。

ソースコード②画像追加用

snippetedPostThumbnailのidのincludable内を書き換える。

<b:includable id='snippetedPostThumbnail'>
  <div class='snippet-thumbnail'>
    <b:if cond='data:post.featuredImage'>
    <b:with value='data:post.featuredImage.isYoutube ? resizeImage(data:post.featuredImage.youtubeMaxResDefaultUrl, 945, "945:600") : ""' var='highRes'>
      <b:include data='{image: data:post.featuredImage, imageSizes: [256, 512, 945, 1684], imageRatio: "945:600", sourceSizes: "(min-width: 954px) 842px, (min-width: 801px) calc(100vw - 112px), calc(100vw - 64px)", enhancedSourceset: data:highRes}' name='responsiveImage'/>
    </b:with>
    <b:else/>
      <img src='画像URL' expr:srcset='sourceset("画像URL", [256, 512, 945, 1684], "945:600")' expr:alt='data:messages.image' sizes='(min-width: 954px) 842px, (min-width: 801px) calc(100vw - 112px), calc(100vw - 64px)'/>
    </b:if>
  </div>
</b:includable>

デフォルトのhighResのvarのwithタグを<b:if cond='data:post.featuredImage'></b:if>で囲って後半を<b:else/>で区切りながら画像なしの投稿のための専用のサムネイル画像のimgタグを追加する。

注目の投稿ウィジェットに画像なしの投稿の場合でも所定の画像URLを使って画像ありの投稿と同様のデザインで専用のサムネイル画像を表示できる。

ブログの投稿ウィジェットのソースコード

widgetタグのBlogのtypeのソースコードを編集する。

ソースコード:画像追加用

postBodySnippetのidのincludable内を書き換える。

<b:includable id='postBodySnippet' var='post'>
  中略
    <b:if cond='data:post.featuredImage'>
      <div class='snippet-thumbnail'>
        中略
      </div>
    <b:else/>
      <div class='snippet-thumbnail'>
        <img src='画像URL' expr:srcset='sourceSet("画像URL", [32, 64, 128, 256], "1:1")' expr:alt='data:messages.image' sizes='(max-width: 800px) 20vw, 128px'/>
      </div>
    </b:if>
    中略
</b:includable>

デフォルトに<b:else/>中略(画像URLを含む)</div>の部分を追加した。

インデックスページのスニペットに画像なしの投稿の場合でも所定の画像URLを使って画像ありの投稿と同様のデザインで専用のサムネイル画像を表示できる。

人気の投稿ウィジェットのソースコード

widgetタグのPopularPostsのtypeのソースコードを編集する。

ソースコード①条件適合用

snippetedPostThumbnailのnameのincludeタグを書き換える。

<b:include cond='data:this.postDisplay.showFeaturedImage' data='post' name='snippetedPostThumbnail'/>

デフォルトから「and data:post.featuredImage」を削除する。

人気の投稿ウィジェットに画像を持つ記事でなくても画像を表示できる条件に変更するためだ。

ソースコード②画像追加用

snippetedPostThumbnailのidのincludableタグを挿入する。

<b:includable id='snippetedPostThumbnail'>
  <div class='item-thumbnail'>
    <a expr:href='data:post.url'>
    <b:if cond='data:post.featuredImage'>
      <b:include data='{image: data:post.featuredImage, imageSizes: [72,144], imageRatio: "1:1", sourceSizes: "72px"}' name='responsiveImage'/>
    <b:else/>
      <img src='画像URL' expr:srcset='sourceset("画像URL", [72,144], "1:1")' expr:alt='data:messages.image' sizes='72px'/>
    </b:if>
    </a>
  </div>
</b:includable>

デフォルトで記載されてないので、PopularPostsのwidget内のwidget-settingsタグと他のincludableタグに入らない場所に新しく記載すると同名のnameのincludeタグに読み込まれて動作する。

人気の投稿ウィジェットに画像なしの投稿の場合でも所定の画像URLを使って画像ありの投稿と同様のデザインで専用のサムネイル画像を表示できる。

Sohoテーマのスニペットのカスタマイズ

注目とブログと人気の投稿の三つのウィジェットで画像を表示するソースコードは異なっているから専用のサムネイル画像を追加するカスタマイズは個別に行う。

注目の投稿ウィジェットのソースコード

widgetタグのFeaturedPostのtypeのソースコードを編集する。

ソースコード①クラスと条件適合用

snippetedPostContentのidのincludable内を書き換える。

<b:includable id='snippetedPostContent'>
  <b:with value='data:postDisplay.showFeaturedImage' var='hasImage'>
    <div class='post-content has-featured-image'>
    <!-- Change the order and add a snippet container -->
    <b:include cond='data:hasImage' data='post' name='snippetedPostThumbnail'/>
    <div class='post-text-container'>
      中略
    </div>
    </div>
  </switch>
</b:includable>

デフォルトからhasImageのvarのswitchタグの「and data:post.featuredImage」を削除してpost-contentのclassのdivに「has-featured-image」を追加して直後の二行の<b:class cond='data:hasImage' name='has-featured-image'/><b:class cond='not data:hasImage' name='no-featured-image'/>を削除する。

投稿に画像がない場合でも画像がある場合と同様にデザインが付いて崩れないようにクラスを指定しながら表示できる条件に変更するためだ。

ソースコード②画像追加と調節用

snippetedPostThumbnailのidのincludable内を書き換えてresponsiveImageStyleのidのincludableタグを挿入する。

<b:includable id='snippetedPostThumbnail'>
  <b:include data='{image: (data:featuredImage ?: "画像URL"), maxSize: 954, selector: ".hero-thumb"}' name='responsiveImageStyle'/>
  <a class='thumb-link' expr:href='data:post.url'><div class='thumb hero-thumb'/></a>
</b:includable>
<b:includable id='responsiveImageStyle'>
  <b:with value='data:imageSizes ?: [200,400,800,1200,1600]' var='imageSizes'>
  <b:with value='data:maxSize ? data:imageSizes where (i => i lte data:maxSize) : data:imageSizes' var='maxSizes'>
    <style>
      <data:selector/> {background-image:url(<data:image.cssEscaped/>);}
        <b:loop index='i' values='data:imageSizes' var='maxWidth'>
          <b:with value='data:i - 1' var='minWidth'>
            <b:if cond='data:imageSizes.last != data:maxWidth'> @media (max-width: <data:maxWidth/>px) <b:if cond='data:imageSizes.first != data:maxWidth'>and (min-width: <b:eval expr='data:imageSizes[minWidth] + 1'/>px) </b:if>{ <data:selector/> {background-image:url(<b:eval expr='(resizeImage(data:image,data:maxWidth)).cssEscaped'/>);}}
            <b:else/> /* Last tag covers anything over one higher than the previous max-size cap. */ @media (min-width: <b:eval expr='data:imageSizes[minWidth] + 1'/>px) { <data:selector/> {background-image:url(<b:eval expr='(resizeImage(data:image,data:maxWidth)).cssEscaped'/>);}}
            </b:if>
          </b:with>
        </b:loop>
    </style>
  </b:with>
  </b:with>
</b:includable>

一つ目のソースコードで画像なしの投稿の専用のサムネイル画像を追加して二つ目のソースコードでレスポンシブに対応した/デバイスの画面幅に応じた画像サイズの振り分けの調節を行っている。

前者のincludable内はresponsiveImageStyleのnameのincludeタグを新たに載せ直すけど、しかし後者のincludableタグはそれ自体が予め記載されてない。FeaturedPostのwidget内のwidget-settingsタグと他のincludableタグに入らない場所に新しく記載すると同名のnameのincludeタグに読み込まれて動作する。

注目の投稿ウィジェットに画像なしの投稿の場合でも所定の画像URLを使って画像ありの投稿と同様のデザインで専用のサムネイル画像を表示できる。

ブログの投稿ウィジェットのソースコード

widgetタグのBlogのtypeのソースコードを編集する。

ソースコード①条件適合用

postのclassのdiv内を書き換える。

<div class='post'>
  <b:class cond='data:view.isMultipleItems' name='has-featured-image'/>
  <b:include data='post' name='postMeta'/>
  中略
</div>

デフォルトのhas-featured-imageのnameのincludeタグから「and data:post.featuredImage」と直後の<b:class cond='data:view.isMultipleItems and not data:post.featuredImage' name='no-featured-image'/>を削除する。

インデックスページのスニペットに画像なしの投稿でも画像ありの投稿と同様に専用のサムネイル画像を表示できる条件に変更するためだ。

ソースコード②画像追加用

postのclassのdiv内を書き換える。

<div class='post'>
  中略
  <b:if cond='data:post.featuredImage'>
    中略
  <b:else/>
    <div class='snippet-thumbnail'>
      <a expr:href='data:post.url'>
        <b:comment>Max width is 576, so max size @ 2x is 1152.</b:comment>
        <img src='画像URL' expr:srcset='sourceSet("画像URL", [320,490,576,1152])' expr:alt='data:messages.image' sizes='(max-width: 576px) 100vw, (max-width: 1024px) 576px, 490px'/>
       </a>
       <b:include name='headerByline'/>
    </div>
  </b:if>
  中略
</div>

デフォルトの<b:else/>の後に既存の<b:include name='headerByline'/>と置き換えながら画像なしの投稿の専用のサムネイル画像のための<div class='snippet-thumbnail'>中略(画像URLを含む)</div>のソースコードを追加している。

インデックスページのスニペットに画像なしの投稿の場合でも所定の画像URLを使って画像ありの投稿と同様のデザインで専用のサムネイル画像を表示できる。

人気の投稿ウィジェットのソースコード

widgetタグのPopularPostsのtypeのソースコードを編集する。

ソースコード①条件適合用

postのclassのdivタグと内容を書き換える。

<div class='post has-featured-image'>
  <b:if cond='data:post.featuredImage'>
    中略
  </b:if>
    中略
</div>

デフォルトのpostのclassのdivに「has-featured-image」のclassを追加して直後の二行の<b:class cond='data:post.featuredImage' name='has-featured-image'/><b:class cond='not data:post.featuredImage' name='no-featured-image'/>を削除する。

人気の投稿ウィジェットに画像なしの投稿でも画像ありの投稿と同様に専用のサムネイル画像を表示できる条件に変更するためだ。

ソースコード②画像追加用

postのclassのdiv内を書き換える。

<div class='post'>
  中略
  <b:if cond='data:post.featuredImage'>
    中略
  <b:else/>
    <div class='snippet-thumbnail'> 
      <a expr:href='data:post.url'>
        <img src='画像URL' expr:srcset='sourceSet("画像URL", [330,660,1320])' expr:alt='data:messages.image' sizes='(max-width: 660px) 100vw, 660px'/>
      </a>
      <b:include name='headerByline'/>
    </div>
  </b:if>
  中略
</div>

デフォルトに画像なしの投稿の専用のサムネイル画像のための<div class='snippet-thumbnail'>中略(画像URLを含む)</div>のソースコードを追加している。

人気の投稿ウィジェットに画像なしの投稿の場合でも所定の画像URLを使って画像ありの投稿と同様のデザインで専用のサムネイル画像を表示できる。

Emporioテーマのスニペットのカスタマイズ

注目とブログと人気の投稿の三つのウィジェットで画像を表示するソースコードは異なっているから専用のサムネイル画像を追加するカスタマイズは個別に行う。

注目の投稿ウィジェットのソースコード

widgetタグのFeaturedPostのtypeのソースコードを編集する。

ソースコード①条件適合用

postWrapperClassesのidのincludable内を書き換える。

<b:includable id='postWrapperClasses'>
  <b:class name='image'/>
  <b:class cond='data:post.labels and not data:post.labels.empty' name='has-labels'/>
</b:includable>

デフォルトのimageのnameのclassタグの「cond='data:post.featuredImage'」と直後の<b:class cond='not data:post.featuredImage' name='no-image'/>を削除する。

注目の投稿ウィジェットに画像なしの投稿でも画像ありの投稿と同様に専用のサムネイル画像を表示できる条件に変更するためだ。

ソースコード②画像追加用

snippetedPostContentのidのincludable内を書き換える。

<b:includable id='snippetedPostContent'>
  中略
  <b:if cond='data:post.featuredImage'>
    <style>
      中略
    </style>
  <b:else/>
    <style>
       @media (min-width: 746px) { .hero .<data:thumbClassName/> {background-image:url(<b:eval expr='resizeImage("画像URL", 800, "800:272").cssEscaped'/>);} }
       @media (min-width: 1545px) { .hero .<data:thumbClassName/> {background-image:url(<b:eval expr='resizeImage("画像URL", 1185, "1185:272").cssEscaped'/>);} }
       @media (max-width: 400px) { .hero .<data:thumbClassName/> {background-image:url(<b:eval expr='resizeImage("画像URL", 400, "1:1").cssEscaped'/>); } }
       @media (min-width: 401px) and (max-width: 745px) { .hero .<data:thumbClassName/> {background-image:url(<b:eval expr='resizeImage("画像URL", 745, "745:400").cssEscaped'/>); } }
    </style>
    中略
  </b:if>
  中略
</b:includable>

デフォルトの</style>の後に<b:else/>と画像なしの投稿の専用のサムネイル画像のための<style>中略(画像URLを含む)</style>のソースコードを追加している。

注目の投稿ウィジェットに画像なしの投稿の場合でも所定の画像URLを使って画像ありの投稿と同様のデザインで専用のサムネイル画像を表示できる。

ブログの投稿ウィジェットのソースコード

widgetタグのBlogのtypeとdefaultmarkupタグのCommonのtypeのソースコードとhtmlのbody内(widgetタグの外側)を編集する。

ソースコード①条件適合用

Blogのwidget内のstandardPostImageStyleのnameのincludeタグとpostWrapperClassesのidのincludable内を書き換える。

<b:include cond='data:view.isMultipleItems' name='standardPostImageStyle'/>
<b:includable id='postWrapperClasses'>
  <b:class name='image'/>
  <b:class cond='data:post.labels and not data:post.labels.empty' name='has-labels'/>
</b:includable>
一つ目はデフォルトの「data:post.featuredImage and」を削除して二つ目はimageのnameのclassタグの「cond='data:post.featuredImage'」と直後の<b:class cond='not data:post.featuredImage' name='no-image'/>を削除する。

インデックスページのスニペットに画像なしの投稿でも画像ありの投稿と同様に専用のサムネイル画像を表示できる条件に変更するためだ。

ソースコード②画像追加用

Commonのdefaultmarkup内のstandardPostImageStyleのidのincludable内を書き換える。

<b:defaultmarkup type='Common'>
  <b:includable id='standardPostImageStyle'>
    <b:with value='"post-thumb-" + data:post.id' var='thumbClassName'>
      <style>
        .<data:thumbClassName/> {background-image:url(<b:eval expr='resizeImage((data:post.featuredImage ?: "画像URL"), 385, "385:184").cssEscaped'/>);}
      </style>
    </b:with>
  </b:includable>
  中略
</defaultmarkup>

デフォルトのstyle内を画像ありの投稿のサムネイル画像の出力(data:post.featuredImage)と画像なしの投稿の専用のサムネイル画像の画像URLを両方とも含んだソースコードに置き換えて記載する。

インデックスページのスニペットに画像なしの投稿の場合でも所定の画像URLを使って画像ありの投稿と同様のデザインで専用のサムネイル画像を表示できる。

ソースコード③背景画像用

Emporioテーマは投稿画像が記事/追加ページで投稿タイトル周辺の背景のデザインにも影響する。画像なしの投稿のための画像も取り入れるには特定のカスタマイズが必要になる。

htmlのbody内(Blogのwidget外)のpage_bodyのclassのdiv内を書き換えてCommonのdefaultmarkup内にresponsiveImageStyleのidのincludableタグを挿入する。

<div class='page_body'>
  <b:class cond='data:hasVerticalAds' name='has-vertical-ads'/>
  <b:if cond='data:view.isSingleItem'>
    <b:include data='{image: (data:widgets.Blog.first.posts.first.featuredImage ?: "画像URL"), selector: ".bg-photo"}' name='responsiveImageStyle'/>
      <div class='bg-photo-container'>
        <div class='bg-photo'/>
      </div>
  </b:if>
  <div class='centered'>
    中略
</div>
<b:includable id='responsiveImageStyle'>
  <b:with value='data:imageSizes ?: [200,400,800,1200,1600]' var='imageSizes'>
  <b:with value='data:maxSize ? data:imageSizes where (i => i lte data:maxSize) : data:imageSizes' var='maxSizes'>
    <style>
      <data:selector/> {background-image:url(<data:image.cssEscaped/>);}
        <b:loop index='i' values='data:imageSizes' var='maxWidth'>
          <b:with value='data:i - 1' var='minWidth'>
            <b:if cond='data:imageSizes.last != data:maxWidth'> @media (max-width: <data:maxWidth/>px) <b:if cond='data:imageSizes.first != data:maxWidth'>and (min-width: <b:eval expr='data:imageSizes[minWidth] + 1'/>px) </b:if>{ <data:selector/> {background-image:url(<b:eval expr='(resizeImage(data:image,data:maxWidth)).cssEscaped'/>);}}
            <b:else/> /* Last tag covers anything over one higher than the previous max-size cap. */ @media (min-width: <b:eval expr='data:imageSizes[minWidth] + 1'/>px) { <data:selector/> {background-image:url(<b:eval expr='(resizeImage(data:image,data:maxWidth)).cssEscaped'/>);}}
            </b:if>
          </b:with>
        </b:loop>
    </style>
  </b:with>
  </b:with>
</b:includable>

一つ目のソースコードで画像なしの投稿の専用のサムネイル画像を追加して二つ目のソースコードでレスポンシブに対応した/デバイスの画面幅に応じた画像サイズの振り分けの調節を行っている。

前者のdiv内は<b:if cond='data:widgets.Blog.first.posts.first.featuredImage'>と</b:if>の一組を削除してresponsiveImageStyleのnameのincludeタグを新しく載せ直す。そして後者のincludableタグはそれ自体がどこにも記載されてない。扱う対象のresponsiveImageStyleのnameのincludeタグがテンプレートのソースコードのwidget外なので、動作させるにはdefaultmarkupタグの全てのwidgetタグに共用されるCommonのtypeに載せるしかない。

記事/追加ページに画像なしの投稿の場合でも所定の画像URLを使って画像ありの投稿と同様のデザインで背景画像を表示できる。

人気の投稿ウィジェットのソースコード

widgetタグのPopularPostsのtypeのソースコードを編集する。

ソースコード①条件適合用

snippetedPostThumbnailのnameのincludeタグを書き換える。

<b:include cond='data:postDisplay.showFeaturedImage' data='post' name='snippetedPostThumbnail'/>

デフォルトから「and data:post.featuredImage.isResizable」を削除する。

人気の投稿ウィジェットにリサイズ可能な画像を持つ記事でなくても画像を表示できる条件に変更するためだ。

ソースコード②画像追加用

snippetedPostThumbnailのidのincludable内を書き換える。

<b:includable id='snippetedPostThumbnail'>
  <div class='item-thumbnail'>
    <a expr:href='data:post.url'>
    <b:if cond='data:post.featuredImage'>
      <b:include data='{image: data:post.featuredImage, imageSizes: [280,560,840,1120,1400]}' name='responsiveImage'/>
    <b:else/>
      <img src='画像URL' expr:srcset='sourceset("画像URL", [280,560,840,1120,1400], "1:1")' expr:alt='data:messages.image'/>
    </b:if>
    </a>
  </div>
</b:includable>

デフォルトに投稿画像の有無の<b:if cond='data:post.featuredImage'></b:if>の条件分岐の独自タグを使って画像ありの投稿の画像の他にと画像なしの投稿の専用のサムネイル画像を追加している。

人気の投稿ウィジェットに画像なしの投稿の場合でも所定の画像URLを使って画像ありの投稿と同様のデザインで専用のサムネイル画像を表示できる。

Notableテーマのスニペットのカスタマイズ

注目かブログと人気の投稿のウィジェットで画像を表示するソースコードは異なっているから専用のサムネイル画像を追加するカスタマイズは二つで行う。

注目の投稿ウィジェットのソースコード

defaultmarkupタグのCommonのtypeのソースコードを編集する。

ソースコード①条件適合用

heroPostのidのincludable内を書き換える。

<b:includable id='heroPost'>
  <b:with expr:value='data:postDisplay.showFeaturedImage ?: true' var='hasImage'>
    <div class='heroPost'>
      中略
      <b:if cond='data:postDisplay.showFeaturedImage ?: true'>
      中略
      </b:if>
    </div>
  </b:with>
</includable>

デフォルトから二ヵ所の「and data:post.featuredImage」を削除してcond要素の不要な半角の括弧を外す(値が一つの式だけになるから区切らなくて構わない)。

注目の投稿ウィジェットに画像を持つ記事でなくても画像を表示できる条件に変更するためだ。

ソースコード②画像追加用

heroPostのidのincludable内を書き換えてresponsiveImageStyleのidのincludableタグを挿入する。

<b:includable id='heroPost'>
  中略
  <b:include cond='data:postDisplay.showFeaturedImage ?: true' data='{image: (data:post.featuredImage ?: "画像URL"), selector: ".big-post-image-top", imageSizes: [480, 640, 800, 1200], imageRatio: "3:2"}' name='responsiveImageStyle'/>
  中略
  <a class='big-post-image' expr:href='data:post.url' expr:style='(data:postDisplay.showFeaturedImage ?: true) ? ("background-image: url(\"" + resizeImage((data:post.featuredImage ?: "画像URL"), 612, "612:1000") + "\");"): ""'/>
  中略
</includable>
<b:includable id='responsiveImageStyle'>
  <b:with value='data:imageSizes ?: [200,400,800,1200,1600]' var='imageSizes'>
  <b:with value='data:maxSize ? data:imageSizes where (i => i lte data:maxSize) : data:imageSizes' var='maxSizes'>
    <style>
      <data:selector/> {background-image:url(<data:image.cssEscaped/>);}
        <b:loop index='i' values='data:imageSizes' var='maxWidth'>
          <b:with value='data:i - 1' var='minWidth'>
            <b:if cond='data:imageSizes.last != data:maxWidth'> @media (max-width: <data:maxWidth/>px) <b:if cond='data:imageSizes.first != data:maxWidth'>and (min-width: <b:eval expr='data:imageSizes[minWidth] + 1'/>px) </b:if>{ <data:selector/> {background-image:url(<b:eval expr='(resizeImage(data:image,data:maxWidth)).cssEscaped'/>);}}
            <b:else/> /* Last tag covers anything over one higher than the previous max-size cap. */ @media (min-width: <b:eval expr='data:imageSizes[minWidth] + 1'/>px) { <data:selector/> {background-image:url(<b:eval expr='(resizeImage(data:image,data:maxWidth)).cssEscaped'/>);}}
            </b:if>
          </b:with>
        </b:loop>
    </style>
  </b:with>
  </b:with>
</b:includable>

一つ目のソースコードで画像なしの投稿の専用のサムネイル画像を追加して二つ目のソースコードでレスポンシブに対応した/デバイスの画面幅に応じた画像サイズの振り分けの調節を行っている。

前者のresponsiveImageStyleのnameのincludeタグとbig-post-imageのclassのaタグはどちらも「and data:post.featuredImage」を削除してcond要素かstyle要素の不要な半角の括弧を外す(値が一つの式だけになるから区切らなくて構わない)と共に画像なしの投稿のための画像URLを記載している。後者のincludableタグはそれ自体がどこにも記載されてなくてCommonのdefaultmarkup内の他のincludableタグに入らない場所に新しく記載すると同名のnameのincludeタグに読み込まれて動作する。

注目の投稿ウィジェットに画像なしの投稿の場合でも所定の画像URLを使って画像ありの投稿と同様のデザインで専用のサムネイル画像を表示できる。

ブログと人気の投稿ウィジェットのソースコード

それぞれに画像なしの投稿の専用のサムネイル画像をスニペットに表示するカスタマイズの方法は共通していてdefaultmarkupタグのCommonのtypeのソースコードを編集する。

ソースコード①条件適合用

normalPostのidのincludable内を書き換える。

<b:if cond='data:widget.type != "PopularPosts" or data:this.postDisplay.showFeaturedImage'>
  中略
</b:if>

デフォルトから「data:post.featuredImage and」を削除してcond要素の不要な半角の括弧を外す(値が一つの式だけになるから区切らなくて構わない)。

ブログと人気の投稿ウィジェットに画像を持つ記事でなくても画像を表示できる条件に変更するためだ。

ソースコード②画像追加用

normalPostのidのincludable内を書き換える。

<b:includable id='normalPost'>
  中略
    <b:if cond='data:post.featuredImage.isResizable'>
      <span class='snippet-thumbnail-img' expr:id='"snippet_thumbnail_id_" + data:post.id'/>
      <style>
        @media (min-width: 1168px) {
          <b:eval expr='"#snippet_thumbnail_id_" + data:post.id'/> {
                        background-image: url(<b:eval expr='resizeImage((data:post.featuredImage ?: "画像URL"), 256, "1:1").cssEscaped'/>);
                      }
                    }
        @media (min-width: 969px) and (max-width: 1167px) {
                      <b:eval expr='"#snippet_thumbnail_id_" + data:post.id'/> {
                        background-image: url(<b:eval expr='resizeImage((data:post.featuredImage ?: "画像URL"), 1167, "3:2").cssEscaped'/>);
                      }
                    }
         @media (min-width: 601px) and (max-width: 968px) {
                      <b:eval expr='"#snippet_thumbnail_id_" + data:post.id'/> {
                        background-image: url(<b:eval expr='resizeImage((data:post.featuredImage ?: "画像URL"), 968, "3:2").cssEscaped'/>);
                      }
                    }
          @media (max-width: 600px) {
                      <b:eval expr='"#snippet_thumbnail_id_" + data:post.id'/> {
                        background-image: url(<b:eval expr='resizeImage((data:post.featuredImage ?: "画像URL"), 600, "3:2").cssEscaped'/>);
                      }
                    }
      </style>
    <b:else/>
      <img expr:src='(data:post.featuredImage ?: "画像URL")'/>
    </b:if>
  中略
</b:includable>

デフォルトの六ヵ所に画像ありの投稿で画像URLを出力する「data:post.featuredImage」と「?:」で振り分けて全体を一つの式として半角括弧で区切りながら画像なしの場合の画像URLを追加する。

ブログと人気の投稿ウィジェットに画像なしの投稿の場合でも所定の画像URLを使って画像ありの投稿と同様のデザインで専用のサムネイル画像を表示できる。

旧テーマのスニペットのカスタマイズ

注目とブログと人気の投稿の三つのウィジェットで画像を表示するソースコードは異なっているから専用のサムネイル画像を追加するカスタマイズは個別に行う。

注目の投稿ウィジェットのソースコード

widgetタグのFeaturedPostのtypeのソースコードを編集する。

ソースコード:画像追加用

contentのidのincludable内を書き換える。

<b:includable id='content'>
  中略
  <div class='post-summary'>
    <b:if cond='data:showPostTitle and data:postTitle != ""'>
      <h3><a expr:href='data:postUrl'><data:postTitle/></a></h3>
    </b:if>
    <b:if cond='data:showSnippet and data:postSummary != ""'>
      <p>
        <data:postSummary/>
      </p>
    </b:if>
  <b:if cond='data:showFirstImage'>
  <b:if cond='data:postFirstImage != ""'>
    <img class='image' expr:src='data:postFirstImage'/>
  <b:else>
    <img class='Image' src='画像URL'/>
  </b:if>
  </div>
  中略
</includable>

デフォルトの「data:showFirstImage and data:postFirstImage != ""'」のcondのifタグを二つに分けてさらに投稿に一枚目の画像がない場合にも画像URLのソースコードを記載する。

注目の投稿ウィジェットに画像なしの投稿の場合でも所定の画像URLを使って画像ありの投稿と同様のデザインで専用のサムネイル画像を表示できる。

ブログの投稿ウィジェットのソースコード

旧テーマのインデックスページはデスクトップ/パソコン版では記事がそのまま、表示されて記事のスニペットにはならない。Bloggerのテーマから「モバイル」を使用するモバイル/スマホ版のみインデックスページにブログの投稿のスニペットが並ぶデザインに変わるので、画像なしの投稿の専用のサムネイル画像のカスタマイズの対象になる。

widgetタグのBlogのtypeのソースコードを編集する。

ソースコード:画像追加用

mobile-index-postのidのincludable内を書き換える。

<b:includable id='mobile-index-post' var='post'>
  中略
  <div class='mobile-index-contents'>
    <div class='mobile-index-thumbnail'>
      <div class='Image'>
      <b:if cond='data:post.thumbnailUrl'>
        <img expr:src='data:post.thumbnailUrl'/>
      <b:else/>
        <img expr:src='resizeImage("画像URL", 72, "1:1")'/>
      </b:if>
      </div>
    </div>
    <div class='post-body'>
      <b:if cond='data:post.snippet'><data:post.snippet/></b:if>
    </div>
  </div>
  中略
</div>

デフォルトのmobile-index-contentsのclassとpost-bodyのclassのdivのそれぞれの開始タグの間のソースコードを画像なしの投稿の専用のサムネイル画像に合わせて変更している。

画像ありの場合はBloggerの自動生成のサムネイル画像が使われて縦横72pxの正方形になるので、新しく追加する画像についてもBloggerのリサイズの独自タグのresizeImageによってリサイズが揃うようにしている。

モバイル/スマホ版にかぎってブログの投稿ウィジェットの画像なしの投稿の場合でも所定の画像URLを使って画像ありの投稿と同様のデザインで専用のサムネイル画像を表示できる。

人気の投稿ウィジェットのソースコード

widgetタグのPopularPostsのtypeのソースコードを編集する。

ソースコード:画像追加用

widget-contentとpopular-postsのidのincludable内を書き換える。

<div class='widget-content popular-posts'>
  中略
   <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
    <div expr:class='data:showSnippets ? "item-content" : "item-thumbnail-only"'>
      <div class='item-thumbnail'>
        <a expr:href='data:post.href' target='_blank'>
        <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
          <b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 72, "1:1"): data:post.thumbnail' var='image'>
            <img alt='' border='0' expr:src='data:image'/>
          </b:with>
        <b/else>
          <img alt='' border='0' expr:src='resizeImage("画像URL", 72, "1:1")'/>
        </b:if>
        </a>
      </div>
    <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
      中略
    </div>
  中略
</div>

デフォルトのdata:showSnippetsのclassとitem-titleのclassのdivのそれぞれの開始タグの間のソースコードを画像なしの投稿の専用のサムネイル画像に合わせて変更している。

画像ありの場合はBloggerのリサイズの独自タグのresizeImageか自動生成のサムネイル画像が使われて縦横72pxの正方形になるので、新しく追加する画像についてもBloggerのリサイズの独自タグのresizeImageによってリサイズが揃うようにしている。

人気の投稿ウィジェットの画像なしの投稿の場合でも所定の画像URLを使って画像ありの投稿と同様のデザインで専用のサムネイル画像を表示できる。

参考:Les opérateurs d'images [resizeImage/sourceSet] snippetedPostThumbnail [GV2] snippetedPostThumbnail [GV2 markup] responsiveImage [Common] standardPostImageStyle [GV2 Markup] responsiveImageStyle [Common] data:postDisplay.showFeaturedImage data:posts[i].featuredImage normalPost [GV2 Markup] data:posts[i].thumbnailUrl

コメント

些細な日常の人気の投稿

早川愛の高校野球の夏の甲子園の大会歌の栄冠は君に輝くの独唱のソプラノの美声

イメージ

PlayストアでAndroidアプリのダウンロードが非常に遅い場合の打開策

イメージ

スノーボードのジャンプ中のグラブには幾つもの種類がある

イメージ

陸上自衛隊の歌姫/鶫真衣のいのちの音は死の恐怖に打ち勝つ勇気そのものだ

イメージ