EDIT

【F-light】2つ目の人気の投稿ガジェットも同じデザインにする方法

｜2023/09/06
アイキャッチ

人気の投稿ガジェットが2つ

今日たまたまとある F-light ユーザーのブログを見かけたのですが、そのブログでは「人気の投稿」ガジェットが2つありました。F-light はデフォルトで「全期間」に設定されたガジェットが一つ付いていますが、そのブログでは短期間(週間か月間か年間)の集計のものが追加でもう一つ設置されていたということです。

実はそういう運用方法を想定していなかったため、F-light ではちょっとした問題(と言う程の事でもないのですが)が起こってしまいます。

F-light の人気の投稿ガジェットは CSS だけでなく HTML のデフォルトのコードもかなり弄っているため、レイアウト画面でガジェットを追加しただけでは2つ目には F-light オリジナルのデザインが反映されないのです。従ってそのとあるブログの2つ目の人気の投稿ガジェットもサムネとタイトルだけの素の状態になっていました。

まあ機能的には別に問題なくて、(スニペットだけOFFにしておけば)そこまで見栄えが悪いわけでもないし、そのブログ主さんも気にしていないのかもしれませんが…一応需要があるかもしれないので、デザインを再現させる手順を記しておこうと思います。尚、需要が多ければテンプレートのアップデートでの対応も検討します。

注意事項

HTMLを編集しますので必ず予めバックアップを取ってから行って下さい。

今回説明するのはガジェットを2つ設置する為の方法です。3つ目のガジェットを設置するとサムネ画像の処理がバグって表示がおかしくなってしまいますので2つ以上は置かないでください。

2022/11/18 現在、最新の F-light は v1.27 です。古いバージョンをお使いの方は最新バージョンにアップデートしておくことをおすすめします。

カスタマイズ手順

手順① ガジェットを追加

まずレイアウト画面で2つ目の人気の投稿ガジェットを追加します。設置場所はどこでも構いません。ガジェットのタイトルも空白のままで構いません。

手順② ウィジェットコードの追加

テーマの HTML 編集にて id='PopularPosts2'というコードを検索で探し、そのコードを含むタグの左の▼をクリックして折りたたみ、丸ごと以下のコードと入れ替えます。

人気の投稿ガジェットコード
  <b:widget id='PopularPosts2' locked='false' title='人気の投稿2' type='PopularPosts' version='2' 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'>false</b:widget-setting>
      <b:widget-setting name='timeRange'>LAST_YEAR</b:widget-setting>
    </b:widget-settings>
<b:includable id='main' var='this'>
      <b:if cond='data:title != &quot;&quot;'>
        <div class='title'><data:title/></div>
      </b:if>
    <b:include name='snippetedPosts'/>
</b:includable>
    <b:includable id='blogThisShare'/>
    <b:includable id='bylineByName'/>
    <b:includable id='bylineRegion'/>
    <b:includable id='commentsLink'/>
    <b:includable id='commentsLinkIframe'/>
    <b:includable id='emailPostIcon'/>
    <b:includable id='facebookShare'/>
    <b:includable id='footerBylines'/>
    <b:includable id='googlePlusShare'/>
    <b:includable id='headerByline'/>
    <b:includable id='linkShare'/>
    <b:includable id='otherSharingButton'/>
    <b:includable id='platformShare'/>
    <b:includable id='postAuthor'/>
    <b:includable id='postCommentsLink'>
      <b:if cond='data:post.numberOfComments gt 0'>
        <span class='article-header-comments'><svg aria-label='コメント' class='svg svg-comment-dots' style='margin-right:3px'><use href='#svg-comment-dots'/></svg><data:post.numberOfComments/> &#65372;</span>
      </b:if>
    </b:includable>
    <b:includable id='postJumpLink'/>
    <b:includable id='postLabels'/>
    <b:includable id='postLocation'/>
    <b:includable id='postReactions'/>
    <b:includable id='postShareButtons'/>
    <b:includable id='postSnippet'/>
    <b:includable id='postTimestamp'>
    <time class='article-header-date' expr:datetime='data:post.date.iso8601'><svg aria-label='投稿日' class='svg svg-clock' style='vertical-align:-10%;margin-right:3px'><use href='#svg-clock'/></svg><data:post.date.year/>/<b:eval expr='data:post.date.month lt 10 ? &quot;0&quot; + data:post.date.month : data:post.date.month'/>/<b:eval expr='data:post.date.day lt 10 ? &quot;0&quot; + data:post.date.day : data:post.date.day'/></time>
    </b:includable>
    <b:includable id='sharingButton'/>
    <b:includable id='sharingButtonContent'/>
    <b:includable id='sharingButtons'/>
    <b:includable id='sharingButtonsMenu'/>
    <b:includable id='sharingPlatformIcon'/>
    <b:includable id='snippetedPostByline'/>
    <b:includable id='snippetedPostContent'>
  <div class='post-content'>
          <b:include name='snippetedPostThumbnail'/>
    <b:include cond='data:this.postDisplay.showTitle' name='snippetedPostTitle'/>
    <b:include cond='data:this.postDisplay.showSnippet' data='post' name='postSnippet'/>
    <p class='article-header'>
        <b:include data='post' name='postCommentsLink'/>
    <b:include data='post' name='postTimestamp'/>
    </p>
    <p class='article-category'>
        <b:include data='post' name='postLabels'/>
    </p>
  </div>
</b:includable>
    <b:includable id='snippetedPostThumbnail'>
  <b:if cond='data:post.featuredImage'>
    <div class='pop-img2'/>
<script>
(function(){const idx=<data:i/>;let img=&quot;<b:eval expr='resizeImage(data:post.featuredImage,320,&quot;16:9&quot;)'/>&quot;;let webp;if(img.match(/-k-no-nu/)){webp=img.replace(&#39;-k-no-nu&#39;,&#39;-rw-e365&#39;);}if(img.match(/lh3-testonly/)){webp=img.replace(&#39;lh3-testonly&#39;,&#39;lh3&#39;);}let ec=document.getElementsByClassName(&#39;pop-img2&#39;)[idx];let html=&#39;&#39;;html+=&#39;&lt;img alt=&quot;<data:post.title.escaped/>&quot; height=&quot;180&quot; data-src=&quot;&#39;+webp+&#39;&quot; width=&quot;320&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZJl0lD6fAzWtKis0dtNx5u2dCpGeRe-geIuBXUsdSZOUlrcdjPt0rlzM3ZD7oW-oeMeY8REjMGUpu__hAQV3cEgIIN9Ng0AhyKrrRxtIKWZKdDw0gaRMH_Ue31u25pV-HkiGLoR6lQ3DH/w320-c-h180-rw/blank.png&quot;/&gt;&#39;;ec.innerHTML=html;}());
</script>
      <b:else/>
      <div class='pop-img2'>
        <img data-src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgXR9QkxRwLIjXhLiYOj5aFHAUWAePYHRWxVpYYF27vmzrN6ysSdQP58uT9BRnGIb_Y3z9J_xKYcwvK0sEshtehjx0TE6Wo3Wt0LhxTfunT6rZVjYOzNRLMAULlcDTLQjzOpiXgvUEQog/s320-e365-rw/noimage.png' expr:alt='data:post.title.escaped' height='180' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZJl0lD6fAzWtKis0dtNx5u2dCpGeRe-geIuBXUsdSZOUlrcdjPt0rlzM3ZD7oW-oeMeY8REjMGUpu__hAQV3cEgIIN9Ng0AhyKrrRxtIKWZKdDw0gaRMH_Ue31u25pV-HkiGLoR6lQ3DH/w320-c-h180-rw/blank.png' width='320'/>
      </div>
</b:if>
</b:includable>
    <b:includable id='snippetedPostTitle'>
  <b:if cond='data:post.title != &quot;&quot;'>
    <h2 class='pop-title'><data:post.title/></h2>
  </b:if>
</b:includable>
    <b:includable id='snippetedPosts'>
    <ul>
    <b:loop index='i' values='data:posts' var='post'>
      <li class='ranked-li'>
      <article class='article'>
        <a expr:href='data:post.url'><span class='post-rank'><b:eval expr='data:i + 1'/></span></a>
        <b:include name='snippetedPostContent'/><a expr:aria-label='data:post.title' expr:href='data:post.url'/>
        </article>
      </li>
    </b:loop>
    </ul>
</b:includable>
  </b:widget>

手順③ CSS の変更

/*==== 人気の投稿 ====*/のところの以下の3箇所に赤文字のコードを追加します。

.pop-img img,.pop-img2 img {
  position: absolute;
  object-fit: cover;
  width: 40%;
  height: 100%;
  border-radius: 5px 0 0 5px;
}
@media (max-width: 1024px ) {
  #PopularPosts1 article,#PopularPosts2 article {
    height: 130px;
  }
  .pop-title {
    padding-top: .5em;
    left: 46%;
  }
  .pop-img img,.pop-img2 img {
    width: 45%;
  }
}

これで1つ目と同じデザインになっているはずです。

尚、2つ目はデフォルトでタイトルが「人気の投稿2」、期間が「過去1年間」、件数「5件」になっていますので、レイアウト画面の設定にてお好みで変更してください。

2つのガジェットを区別してみる

タイトルを変えてもデザインが全く同じだとイマイチな感じがして、ちょっとだけ変えてみたいなと思ったもんで、一例として順位番号の背景色だけ変える CSS を紹介しておきます。

/*==== 人気の投稿 ====*/ の直下に以下のコードを追加してください。色はお好みで。

#PopularPosts2 .post-rank {
  background: orange;/*お好みの色名やカラーコード*/
}
2つの人気の投稿ガジェット