【Card】BootstrapのCardでピックアップ記事を複数表示しよう！(JetTheme)

Bloogerのデフォルトの「Featured Post」のウィジェットでは、1つの記事しか固定表示できなくて不便だと思ったことありませんか？

この記事では、JetThemeに組み込まれているBootstrapを使って、見せたい記事やジャンルを複数表示する方法を解説します。

Bootstrapが必要になるのでまだJetThemeを導入していない方は、まずはこちらの記事を読んで、JetThemeの初期設定を行いましょう。

【初期設定編】JetThemeでスマホでも見やすいブログを作ろう！初心者向け完全ガイド

なぜBootstrapを使うの？

Bootstrapが提供するコンポーネントの一つにCardというものがあり、記事や商品などをカード形式で表示することができます。視覚的に美しく、かつ情報を整理して表示できるので、読者の目を引くことができます。私は以下のようにアイコンを設定していますが、画像も張ることができ見た目が気に入りました。

例

HTML/JavaScriptのウィジェットを作成する

1. Bloggerの管理画面へ: Bloggerの管理画面にアクセスし、あなたのブログを選択します。
   https://www.blogger.com/?hl=ja&tab=jj
2. HTML/JavaScriptガジェットを追加: 「レイアウト」から「HTML/JavaScriptガジェット」を追加します。私はページの上部に表示させたかったので「Bofore Blog」に追加しました。
   
   
   
   
3. タイトルとコンテンツ: ガジェットのタイトルを「Pick Up」など、分かりやすい名前に変更します。コンテンツ部分に、コードを貼り付けます。

枠の設定

HTML

<div class="container-fluid px-3" style="width: 100%;">
  <div class="row row-cols-2 row-cols-md-4 no-gutters">
    <div class="col-sm m-0 p-0">
    ★表示するCard★
　　</div>
    <div class="col-sm m-0 p-0">
    ★表示するCard★
　　</div>
    <div class="col-sm m-0 p-0">
    ★表示するCard★
　　</div>
    <div class="col-sm m-0 p-0">
    ★表示するCard★
　　</div>
  </div>
</div> 

コード解説

• container-fluid: 全幅に広がるコンテナを作成します。
• row: カードを横並びに配置するための行を作成します。
• col-sm, col-md: それぞれの画面サイズでのカラム数を設定します。

Cardの設定

★表示するCard★の中に以下のコードを入れます。見出しが表示される文字列です

HTML

      <div class="card jt-bg-light text-center h-100 m-0 p-0">
        <a href="★クリック後に見せたい記事へのURL★">
　　　　　　★アイコンや画像★
            <h5 class="card-title text-secondary">見出し</h5>
        </a>
      </div>

コード解説

• card: Bootstrapのカードコンポーネントです。
• jt-bg-light: JetThemeのスタイルシートで定義された背景色です。ダークモードで色が変わります。
• text-center: テキストを中央揃えにします。
• h-100: カードの高さを親要素と同じにします。
• m-0 p-0: マージンとパディングを0に設定します。これがないとCardの間に隙間でできたので入れました。
• a href: クリックされたときに見せたい記事へのURLやラベルの検索画面のURLを入れます。

アイコン設定

★アイコンや画像★の中に、私は以下のページからBootstrapで使えるアイコン一覧があったので利用しました。

https://icons.getbootstrap.jp/

使いたいアイコンをクリックすると以下のようなページで「HTMLをコピー」からデータを自分のコードに貼り付けます。以下のコードを入れます。見出しが表示される文字列です。

ホーム画面のみ表示

このままだとホーム画面以外に検索画面でも出てくるのでテーマ＞HTMLの編集から対象ウィジェットにcondを追加します。condというのが表示条件のようですが、「Featured Post」のウィジェットにあったcondをそのまま使っているのでもしかしたら間違っているかもしれません。

HTML

<b:widget cond='data:view.isHomepage or data:view.url.canonical == data:blog.canonicalHomepageUrl path &quot;/search?max-results=10&quot   
;' id='HTML3' locked='false' title='Pick Up' type='HTML' visible='true'>

まとめ

今回は、JetThemeでBootstrapのCardを使って、複数の記事をピックアップする方法を紹介しました。