どうも。
Bloggerのガジェット”人気の投稿”についてです。
アクセスの多い記事を任意の数リストするガジェットですが、記事によって以下の通りバランスが悪く表示されてしまう場合があります。
バランス良く表示できるように変更したいと思います。
画像が無い記事の場合は、記事タイトルが左寄せになってしまいます。
これらをキレイに揃うように対処をしたいと思います。
使用しているテーマ（テンプレート）はQooQですが、他のテンプレートでも似たような変更になると思います。
テーマ（テンプレート）のバックアップを取り、HTMLを変更していきます。
Bloggerの管理画面より テーマ＞＞HTMLの編集と進みテンプレートのHTMLを変更します。尚、変更については自己責任でお願いします。
変更はcssのみになります。
ガジェットの設定でスニペットの表示は無しにしています。
サイドバーに表示すると情報量が多くなって逆に見にくいかと。
画像が無い記事の時に予め用意した画像をサムネイルとして表示させます。
画像のurlはBloggerなのでGoogleドライブ（アーカイブ？）で保存している画像に振られているurlとなります。
img alt=''としていますが、画像が表示されない時等向けに’no imge'等説明を記述しても良いと思います。
但し、cssは都度変更されない為、タイトルの表示制限は一度の変更でOk。
また、Bloggerの仕様変更でも影響される可能性があります。
以上
Bloggerのガジェット”人気の投稿”についてです。
アクセスの多い記事を任意の数リストするガジェットですが、記事によって以下の通りバランスが悪く表示されてしまう場合があります。
- タイトルが長い場合、複数行に折り返してしまう。
- 画像なしの記事だと画像が表示されず、タイトルが詰まってします。
バランス良く表示できるように変更したいと思います。
ガジェット"人気の投稿"のスタイルを変更
トップページの記事一覧同様、やはり長い記事タイトルとによっては複数行に表示されてしまい高さが変動します。画像が無い記事の場合は、記事タイトルが左寄せになってしまいます。
これらをキレイに揃うように対処をしたいと思います。
使用しているテーマ（テンプレート）はQooQですが、他のテンプレートでも似たような変更になると思います。
HTMLとcssの変更
ここからはHTMLとcssを変更します。テーマ（テンプレート）のバックアップを取り、HTMLを変更していきます。
Bloggerの管理画面より テーマ＞＞HTMLの編集と進みテンプレートのHTMLを変更します。尚、変更については自己責任でお願いします。
タイトル表示を４行固定
表示されているサムネイルの高さが72pxなので、この高さにタイトルを収めます。変更はcssのみになります。
ガジェットの設定でスニペットの表示は無しにしています。
サイドバーに表示すると情報量が多くなって逆に見にくいかと。
cssの追加
コード内の.popular-posts aを検索して、以下の青字を追加します。
.popular-posts a{
color: $(font.color) !important;
display: block;
line-height:18px;
height: 72px !important;
overflow: hidden !important;
}
要素をブロックにします。
fontの高さをline-height:18pxとして、blockの高さheight:72px内に4行表示させます。
72pxに入りきらないタイトルはoverflow: hiddenとして未表示にしています。
color: $(font.color) !important;
display: block;
line-height:18px;
height: 72px !important;
overflow: hidden !important;
}
fontの高さをline-height:18pxとして、blockの高さheight:72px内に4行表示させます。
72pxに入りきらないタイトルはoverflow: hiddenとして未表示にしています。
画像が無い記事の固定サムネイルの表示
記事一覧で行った変更の応用になります。画像が無い記事の時に予め用意した画像をサムネイルとして表示させます。
HTML
コード内の(3) Show only thumbnails or (4) Snippets and thumbnailsを検索して、以下の青字を追加。画像のurlはBloggerなのでGoogleドライブ（アーカイブ？）で保存している画像に振られているurlとなります。
<!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
<div expr:class='data:showSnippets ? "item-content" : "item-thumbnail-only"'>
<b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<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>
</a>
</div>
<!-- サムネイルが無い場合 -->
<b:else/>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' height='72' src='画像のurl' width='72'/>
</a>
</div>
</b:if>
<div expr:class='data:showSnippets ? "item-content" : "item-thumbnail-only"'>
<b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<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>
</a>
</div>
<!-- サムネイルが無い場合 -->
<b:else/>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' height='72' src='画像のurl' width='72'/>
</a>
</div>
</b:if>
img alt=''としていますが、画像が表示されない時等向けに’no imge'等説明を記述しても良いと思います。
css
上記HTMLのみで問題なく表示できると思ったのですが、画像ありの記事のサムネイルと微妙にサイズが合わない為、cssで対応しました。
cssの判りやすい箇所に以下を追加します。
cssの判りやすい箇所に以下を追加します。
先ほどの.popular-posts aの直下辺りがいいかも。
.PopularPosts img {
height:100%;
padding-right: unset;
}
height:100%;
padding-right: unset;
}
注意点があります。
記事ページの時だけ表示する場合、ガジェットを一旦削除して再登録したり、設置場所等を変更する度にHTMLが変更されてしまう為、都度今回の変更を適用する必要があります。但し、cssは都度変更されない為、タイトルの表示制限は一度の変更でOk。
また、Bloggerの仕様変更でも影響される可能性があります。
以上
コメント