【記事の2列表示編】JetThemeでスマホでも見やすいブログを作ろう！初心者向け完全ガイド

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

目指す構成

• Blogger「Emporio」：スマホでは1つの記事が大きすぎる 
• JetTheme修正後：スマホでも2列表示に見やすい 
  
  
  

スマホで2列表示に変更

スマホでブログを見るとき、記事が1つしか表示されず、少し寂しいと感じたことはありませんか？JetThemeでは、簡単な設定で、スマホでも複数の記事を並べて表示することができます。

手順

1. Bloggerのテーマ編集画面を開く: 左側のメニューから「テーマ」を選択し、編集ボタンをクリックします。

2. HTMLの編集: テーマのHTMLを編集します。少し難しいように感じるかもしれませんが、ご安心ください。”b:includable id='JetBlog'”というのがブログの表示部分です。その数行下にあるblog-contentを以下のように「ow-cols-2」を追加します。最後の数字が列数です。

   HTML

   <div class='row row-cols-sm-2' id='blog-content'>
   ↓
   <div class='row row-cols-2 row-cols-sm-2 id='blog-content'>

3. 保存: 変更内容を保存します。

これで、スマホで見ると、記事が2列で表示されるようになります。ただし、これでは縦長の記事になってしまいます。

スマホで見せたくない部分を隠そう

スマホの小さな画面では、全ての情報を表示する必要はありません。不要な情報を非表示にすることで、縦長の記事をすっきりとしたデザインにすることができます。

手順

1. HTMLの編集: 先ほどと同様に、テーマのHTMLを編集します。
2. 非表示にしたい部分を探す: 非表示にしたい部分（例えば、記事のラベルなど）のHTMLコードを探します。以下は私が非表示にした内容です。
1. ラベル
   <div class='item-tag mb-2 fw-light text-secondary text-nowrap overflow-hidden text-truncate'>
2. スニペット（記事本文の一部）
   <p class='item-snippet text-break mb-3'><b:eval expr='data:post.snippets.short snippet { links: false }'/></p>
3. メタデータ（投稿者名）
   <div class='item-meta text-secondary d-flex flex-wrap fw-light'>
3. クラスを追加: 見つけたら、その要素に「d-none d-sm-block」というクラスを追加します。このクラスは、Bootstrapのクラスで、スマホでは非表示、タブレット以上では表示するという設定になります。

<div class='item-tag mb-2 fw-light text-secondary text-nowrap overflow-hidden text-truncate'>
↓
<div class='item-tag mb-2 fw-light text-secondary text-nowrap overflow-hidden text-truncate d-none d-sm-block'>

.list-item-title {
  font-size: 0.8rem;
  @media (min-width: 576px) {
    font-size: 20px; /* PC・タブレット用のフォントサイズ */
  }
}

<b:tag class='item-title mb-3 list-item-title' expr:name='data:view.isHomepage ? &quot;h3&quot; : &quot;h2&quot;'>