Blogger 人気の投稿ガジェットをカスタマイズ

このブログはGoogleのブログサービスであるBloggerで書いています。 ブログサービスとしてはWordpressが定番でBloggerはマイナーな存在ですが、 無料で広告出ず、容量も制限無いところが気に入っています。 反面、カスタマイズ等に関する情報が少ないので今回「人気の投稿ガジェット」 の見た目をカスタマイズした際に調べた知識をまとめてみます。

人気の投稿ガジェットとは

Bloggerでいうガジェット(Gadget)は、記事の内容、サイドバー、アーカイブなど ページ内の機能、内容の部分的なかたまりでそれぞれ表示/非表示、ページ内での レイアウト、ガジェットの設定をカスタマイズできます。

ちなみにページレイアウトの編集画面ではガジェット(Gadget)と名付けられていますが、 HTMLではウィジェット(widget)と記載されているのでガジェットとウィジェットは Bloggerでは同じ意味です。

人気の投稿ガジェットは、その名の通り指定した期間のPV数が多い記事を順番に リンクとして並べるものです。下の編集画面で期間、サムネイル画像表示、 記事を何件表示するかを選べます。

人気の投稿ガジェットの表示

Contempo Lightのテーマで人気の投稿を表示すると、PCでは下の画像のようになります。

モバイルではこんな感じです。

変更したいのは2点、

  1. 縦方向にもう少しコンパクトにまとめたい。投稿日はいらない。
  2. 画像を正方形ではなく、16:9の横長にしたい

どちらもガジェットの編集画面ではいじることできなさそうです。

テンプレートのHTMLを調べてみた

Contempo Lightテーマの「HTMLを編集」でソースコードを表示すると、3830行目あたりにb:widget ... id='PopularPosts1' とあるのが人気の投稿ガジェットの中身です。

<b:widget cond='data:view.isSingleItem and data:posts any (p =&gt; p.id != data:view.postId)' id='PopularPosts1' locked='true' title='' type='PopularPosts' visible='true'>
  <b:widget-settings>
    <b:widget-setting name='numItemsToShow'>5</b:widget-setting>
    <b:widget-setting name='showThumbnails'>true</b:widget-setting>
    <b:widget-setting name='showSnippets'>true</b:widget-setting>
    <b:widget-setting name='timeRange'>LAST_MONTH</b:widget-setting>
  </b:widget-settings>
  <b:includable id='main' var='this'>
    <b:comment>Default the title to &#39;Popular posts from this blog&#39;.</b:comment>
    <b:with value='data:messages.popularPostsFromThisBlog' var='defaultTitle'>
      <b:include name='super.main' />
    </b:with>
  </b:includable>
  ...
</b:widget>

b:widget-settingsタグに囲まれた部分がレイアウトの編集から設定できる項目です。 次に、b:includable id='main'のタグがあり、ここがHTMLを生成するメインの部分です。

しかし、この中身は、super.mainと上位クラスのメソッドを呼び出しているだけで、superに相当する 部分はこのテンプレート中に無いため変更することはでません。

<b:include name='super.main'/>

せめて記事や画像データが変数としてアクセスできればsuper.mainを呼ぶのをやめて自分で記述することも できそうですが、人気の投稿ガジェットに関してはユーザーに公開されている変数も無いのでお手上げです。

CSSでレイアウトをカスタマイズ

CSSは280行目あたりから記載されています。投稿日を消してマージン、幅等を調整して下記編集、追加しました。

.PopularPosts .item-content{
color:$(popularposts.text.color);
clear:both;
}
.PopularPosts h3.post-title{
margin-bottom:0;
max-width: 100%;
}
.PopularPosts .post-header {
display: none;
}

jQueryでサムネイルをカスタマイズ

ブログ記事を表示させてソースを見ると、人気の投稿のサムネイル画像は下記のように展開されています。

<img alt="イメージ" sizes="72px" src="https://1.bp.blogspot.com/-LiLHNyHH9rg/Xa23ohnzUnI/AAAAAAAA2XU/lSmUBjYycfQRYXI03fL-ZxYJw9LuLLcnwCLcBGAsYHQ/s320/17.jpg"
  srcset="https://1.bp.blogspot.com/-LiLHNyHH9rg/Xa23ohnzUnI/AAAAAAAA2XU/lSmUBjYycfQRYXI03fL-ZxYJw9LuLLcnwCLcBGAsYHQ/w72-h72-p-k-no-nu/17.jpg 72w, https://1.bp.blogspot.com/-LiLHNyHH9rg/Xa23ohnzUnI/AAAAAAAA2XU/lSmUBjYycfQRYXI03fL-ZxYJw9LuLLcnwCLcBGAsYHQ/w144-h144-p-k-no-nu/17.jpg 144w" />

PC、モバイルともサムネイルは160✕90pxで表示させたいですが、デフォルトで72pxになるため解像度が粗いです。

解像度は、srcset中の/w72-h72-p-k-no-nu/で、幅72px、高さ72pxで取得されます。 Bloggerでは、ここを変更することで任意のサイズで画像を取得できますが、先程テンプレートを調べた限りでは テンプレートで変更する手段はありません。

力技ですが、jQueryで/w72-h72-p-k-no-nu//s160/に置き換えることにしました。 s160は、元の画像縦横比で、短い方が160pxになります。sizes=72pxで160pxの画像になるのが少し 気持ち悪いですが、とりあえずこれでよしとします。144wの画像リンクも同様に書き換えておきます。

下記のコードを</body>の直前に加えます。

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script type='text/javascript'>
//<![CDATA[
jQuery(function($){
  $(".PopularPosts img").attr("sizes","144px");
  $(".PopularPosts img").attr("srcset",function(t,s){return s.replace("/w72-h72-p-k-no-nu/","/w160/")});
  $(".PopularPosts img").attr("srcset",function(t,s){return s.replace("/w144-h144-p-k-no-nu/","/w160/")});
});
//]]>
</script>

テンプレートのCSSも画像サイズを160✕90pxに変更します。 モバイル用の設定も別でありましたが同じでよいのでコメントアウトしています。

.PopularPosts .item-thumbnail img {
    height: 90px;
    padding: 0;
    width: 160px;
    object-fit: cover;
}
/*div.widget.PopularPosts div.item-thumbnail img{
height:20vw;
width:20vw;
max-height:88px;
max-width:88px
}*/

カスタマイズ後の「人気の投稿」

PCではこのように表示できました。CSSで背景色、文字色も少し変えました。

モバイルでも基本的に同じです。

画像の横幅が広くなり、投稿日を削除した分、縦のスペースが少し圧縮できてすっきりしました!

まとめ

Bloggerの「人気の記事」の見た目をカスタマイズすることができました!テンプレートで生成される HTMLを編集することはできませんでしたが、jQueryでサムネイル画像を変更し、CSSでスタイリング することである程度自由にカスタマイズすることができます。

関連記事

Bloggerに日本ブログ村のバナーを見映えよく貼る方法

このブログを始めたとき、少しでも多くの人に読んでもらえればと思い日本ブログ村(以下ブログ村)に登録しランキングに参加しました ...

Bloggerのナビゲーションバーでカテゴリ別に記事を整理

ナビゲーションバーとは、各カテゴリの情報へ素早くアクセスするためのリンクで、通常ブログタイトルの直下に設置されます ...

定型文入力支援ツール Lintalist でテキスト入力を楽々に

日頃PCで作業していると、自分の名前、メールアドレスなどよく使うテキストを繰り返し入力することがあります ...

コメント

このブログの人気の投稿

激安GPSサイコン XOSS G レビュー (1.取付編)

キッチン作業台DIY (4) ー 天板ステンレスシート貼り編

Cloudready で Linux アプリを使う

激安GPSサイコン XOSS G レビュー (3.試走編)