どうも。
いや〜暑い。今日は今年初めて蝉の声が聴こえてきたし、夏本番の陽気ですね。
毎年季節が前倒しされ、7月が1番暑くなってる気がします。
こちらはBloggerのレイアウトから簡単に設定・配置する事が可能で、表示方法も4種類から選択出来ます。
その表示方法でサムネイルとタイトルを表示させていますが、トップページの記事一覧と同様に投稿記事に画像が無い場合は空白化してタイトルが左に詰まります。
やはり画像有りの記事と混在すると表示された時に統一感が失われてしまいます。…たぶん。
前回の変更で、画像の無い投稿記事がトップページ記事一覧に表示された時にデフォルトの画像「no image」を表示させましたが、同じ様に対応してみたいと思います。
まず、表示させる画像を用意します。
Bloggerの場合はGoogle フォトに保存されている画像となります。
今回はトップページの対応時と同じ画像を表示させますので、Google フォトURLは同じ物を使用します。URLをコピーして、メモ帳等に貼り付けて置きましょう。
「 記事タイトルとサムネイル画像 」を検索し以下の</b:if>の直前に青文字部分を追加。
”画像のURL”には先ほどメモ帳に貼り付けたURLを記述（コピペ）します。
src属性に直接画像URLを指定しているので、expr:による展開は必要ありません。
追加した青文字の内容は、</else>以降でclass='Item-thumbnail'に対してサムネイルが無い時の処理となります。
先のｂ:if cond='data:post.thumbnail'の負の処理になり、その時はimage srcに'画像のURL'で指定している画像を適用させています。
余談ですが、
表示されるサムネイルのサイズについて。
たぶん、'data:thumbnailSize'に画像のサイズ情報が収められており、widthとheight属性に値として展開している為、URLを指定した画像でもサムネイル画像と同サイズで表示されている。…と思います。
なので、ここを固定値または、CSSでサイズ指定する事でサムネイルのサイズを変更出来るのではないかと思っていますが、今回はやりません。
以上です。
今回も些細な変更ですが、結構満足していますよ。
いや〜暑い。今日は今年初めて蝉の声が聴こえてきたし、夏本番の陽気ですね。
毎年季節が前倒しされ、7月が1番暑くなってる気がします。
ウィジェット「人気記事」の変更
さて、当ブログですが、サイドバーにウィジェット「人気記事」を掲載しています。こちらはBloggerのレイアウトから簡単に設定・配置する事が可能で、表示方法も4種類から選択出来ます。
その表示方法でサムネイルとタイトルを表示させていますが、トップページの記事一覧と同様に投稿記事に画像が無い場合は空白化してタイトルが左に詰まります。
やはり画像有りの記事と混在すると表示された時に統一感が失われてしまいます。…たぶん。
前回の変更で、画像の無い投稿記事がトップページ記事一覧に表示された時にデフォルトの画像「no image」を表示させましたが、同じ様に対応してみたいと思います。
HTML変更前に準備する事
実施する前にバックアップを取っておきましょう。まず、表示させる画像を用意します。
Bloggerの場合はGoogle フォトに保存されている画像となります。
今回はトップページの対応時と同じ画像を表示させますので、Google フォトURLは同じ物を使用します。URLをコピーして、メモ帳等に貼り付けて置きましょう。
HTMLの変更
当ブログではサイドバーに記事タイトルとサムネイル画像の組み合わせを選択しているので、その箇所の変更のみとなります。「 記事タイトルとサムネイル画像 」を検索し以下の</b:if>の直前に青文字部分を追加。
”画像のURL”には先ほどメモ帳に貼り付けたURLを記述（コピペ）します。
src属性に直接画像URLを指定しているので、expr:による展開は必要ありません。
<!-- (3) 記事タイトルとサムネイル画像 -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
<!-- サムネイル画像が無い場合 -->
<b:else/>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize'
src='画像のURL'/>
</a>
</div>
</b:if>
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
<!-- サムネイル画像が無い場合 -->
<b:else/>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize'
src='画像のURL'/>
</a>
</div>
</b:if>
追加した青文字の内容は、</else>以降でclass='Item-thumbnail'に対してサムネイルが無い時の処理となります。
先のｂ:if cond='data:post.thumbnail'の負の処理になり、その時はimage srcに'画像のURL'で指定している画像を適用させています。
余談ですが、
表示されるサムネイルのサイズについて。
たぶん、'data:thumbnailSize'に画像のサイズ情報が収められており、widthとheight属性に値として展開している為、URLを指定した画像でもサムネイル画像と同サイズで表示されている。…と思います。
なので、ここを固定値または、CSSでサイズ指定する事でサムネイルのサイズを変更出来るのではないかと思っていますが、今回はやりません。
以上です。
今回も些細な変更ですが、結構満足していますよ。
0 件のコメント:
コメントを投稿