Blogger Labo：「注目の投稿」をHTML/JavaScriptガジェットで自作する方法

Bloggerには「注目の投稿」というガジェットがあります。

当サイトのテンプレートでは このガジェットに一応CSSで設定を加えているのですが、デフォルトの設定ではサムネイルが記事下になっていたり、画像サイズが小さすぎるなどの仕様上の問題点が多数あります。ですので、使う人は少ないと思っていました。

ですが、意外と使われているようで、デフォルトの注目の投稿ガジェットの修正方法に関する質問をいくつか寄せられることがありました。個人的には「HTML/JavaScript」ガジェットで自作した方が良いと思うので、今回はその方法を紹介したいと思います。


作業工程


1．HTML/JavaScriptガジェットを用意する


まず、注目の投稿を置きたい場所に「HTML/JavaScriptガジェット」入れます。
このとき、タイトルを部分に入れた文字列がガジェットの見出しになります。

当記事ではサイドバーを想定していますが、メイン部分（記事の上下）に入れる場合は当サイトのテンプレートにはガジェットのCSS設定がありませんので「投稿部分にガジェットを追加した際の不具合について」を参考に設定を加える必要があります。

2．ガジェットに以下のコードをコピペする


<div class="pickup">
  <h4><a href="記事リンク">記事タイトル</a></h4>
  <a href="投稿リンク"><img src="投稿画像のURL"></a>
  <p>
    投稿の要約文
  </p>
</div>
<style>
  /* 記事タイトル */
  .pickup h4 a {
    display: block;
    font-size: 15px;
    text-align: center;
    color: #333;
    border-top: dashed 1px #333;
    border-bottom: dashed 1px #333;
    padding: 5px;
  }
  /* 記事サムネイル */
  .pickup img {
    display: block;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: solid 1px #ddd;
    object-fit: cover;
    margin: 10px auto;
  }
  /* 記事の紹介文 */
  .pickup p {
    font-size: 13px;
  }
</style>

上記のコードは、当サイトのテンプレートに設定した注目の投稿ガジェットのCSSをベースに構築したデザインとなります。

HTML部分は「記事タイトル（h4）」「サムネイル」が記事URLにリンクになっており、pタグ部分に好きな紹介文を挿入できるようになっています。

CSSについては、記事タイトルの上下に点線が付き、サムネイルを丸く切り抜いている設定になっています。この辺は一つの例で設定しているものなので、ご自身の好きなようにカスタマイズしてみてください。

設定例


Smartの紹介記事を注目の投稿にした場合のコード


<div class="pickup">
  <h4><a href="https://blogger-learning-rab.blogspot.com/2020/09/smart.html">Bloggerの日本語テンプレート「Smart」が完成しました！</a></h4>
  <a href="https://blogger-learning-rab.blogspot.com/2020/09/smart.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix83XkmbmOvhVJOuRrgfPWFQo0yhXBQGh9_Eqnl7adqNs_pb82a6NQCh3gTAmcSWIFEcBY6qJ20QV3jA0W2N_UGgfKZo-2RF3pCMWjEJr27FwYIxmfPMK3nNewmBcjyO-ZbCUckqIPmUgq/s640/smart.png"></a>
  <p>
    当サイトオリジナルのBloggerテンプレートの第2弾になる「Smart（スマート）」が完成しました！このテンプレートは、カスタマイズを前提にした日本語対応の国産テンプレートです。
  </p>
</div>
<style>
  .pickup h4 a {
    display: block;
    font-size: 15px;
    text-align: center;
    color: #333;
    border-top: dashed 1px #333;
    border-bottom: dashed 1px #333;
    padding: 5px;
  }
  .pickup img {
    display: block;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: solid 1px #ddd;
    object-fit: cover;
    margin: 10px auto;
  }
  .pickup p {
    font-size: 13px;
  }
</style>

自作した注目の投稿ガジェットの見た目


上記のようにすると、以下の画像のような見た目になります。

サイドバーの場合

Blogger Labo：「注目の投稿」をHTML/JavaScriptガジェットで自作する方法

メインの場合

Blogger Labo：「注目の投稿」をHTML/JavaScriptガジェットで自作する方法