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

Bloggerの公式テーマのテンプレートで記事の抜粋のスニペットがインデックスページやサイドバーに置かれる場合に画像なしの投稿については文章だけしか載らない。専用のサムネイル画像を予め用意しておいて画像ありの投稿と変わらずに表示するようにスニペットのデザインを変えるカスタマイズの方法を考えてみたい。新テーマのContempoとSohoとEmporioは注目とブログと人気の投稿の三つのウィジェット、Notableは注目かブログと人気の投稿の二つのウィジェットのスニペットでサムネイル画像が別々の仕方で表示される。そしてテーマ毎にデザインも違うので、それぞれにカスタマイズためのソースコードを取り上げる。旧テーマのシンプルと動的ビューと画像ウィンドウとAwesome Inc.とウォーターマークとエスィリアルと旅行は注目とブログの投稿と人気の投稿の三つのウィジェットのスニペットでサムネイル画像が別々の仕方で表示される。しかしテーマ毎にデザインは同じなので、全てに通用するカスタマイズのためのソースコードを取り上げる。どちらの公式テーマの場合もBloggerのウェブのテーマのHTML編集かバックアップ／復元からテンプレートのソースコードのXMLファイルを書き換える。画像なしの投稿のスニペットのサムネイルに使用する専用の画像はブログ内（記事／追加ページ、画像ウィジェットなど）か画像URLが取得できるImgurなどのWebサービスに予めアップロードして用意しおいて当該のスニペットのカスタマイズのソースコードに画像URLを記載して表示する。画像サイズはBloggerで自動的にリサイズされるようになっているからスニペットのサムネイルだけれども最初から小さく加工せずに大きな画像を使用して大丈夫だ。ミニチュア風に撮影されたポーランドのブィドコシュチュの穏やかに明るい街並みのサムネイル

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

Bydgoszcz Tilt Shift a Thumbnail by shotput / Pixabay

Contempoテーマのスニペットのカスタマイズ
注目の投稿ウィジェットのソースコード
ブログの投稿ウィジェットのソースコード
人気の投稿ウィジェットのソースコード
Sohoテーマのスニペットのカスタマイズ
注目の投稿ウィジェットのソースコード
ブログの投稿ウィジェットのソースコード
人気の投稿ウィジェットのソースコード
Emporioテーマのスニペットのカスタマイズ
注目の投稿ウィジェットのソースコード
ブログの投稿ウィジェットのソースコード
人気の投稿ウィジェットのソースコード
Notableテーマのスニペットのカスタマイズ
注目の投稿ウィジェットのソースコード
ブログと人気の投稿ウィジェットのソースコード
旧テーマのスニペットの共通のカスタマイズ
注目の投稿ウィジェットのソースコード
ブログの投稿ウィジェットのソースコード
人気の投稿ウィジェットのソースコード

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'>  <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'> 中略  <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を使って画像ありの投稿と同様のデザインで専用のサムネイル画像を表示できる。

参考サイト

ふじやん2020年9月9日 0:03
旧テーマのスニペットのカスタマイズ、人気の投稿ウィジェットのソースコードの
<b:else/> が <b/else> になっていますよ。
返信削除
返信

コメントを追加