【BASE】トップぺージにブログの記事一覧を表示させる方法

先日、BASEでECサイトを開設する案件で、デザインのカスタマイズを担当しました。

ブログ記事一覧が備わっている既存のテーマもありますが、今回はショップのデザインデータからコーディングしたので「カスタムテーマ」を使いました。

そのときに、トップページのナビ下部にブログの記事一覧を新着順に表示させた方法を書いていこうと思います。

トップページに表示できる記事は1つだけ？

JavaScriptを使えば任意の数表示できるよ！

BASEのApps「Blog（無料）」を使うことで、簡単にショップ内にブログを作成することはできます。

しかしデフォルトの仕様では、このようにチェックを入れた記事のみしかトップページに表示することができません。

そこで今回は、トップページにブログの記事を任意の個数で新着順に並べて表示しました。

※BASEのApps「Blog（無料）」と「HTML編集（無料）」をインストールする必要があります！

完成形はこんな感じ⇩

DEMO

とりとん

早速コードを確認してみよう！

この記事の内容は・・

ブログの情報を取得
スタイルを整える
まとめ

ブログの情報を取得

まず、JavaScriptでBlogページのHTMLから必要な要素を取得していきます！

JavaScript

$(function(){//まず日付を取得
    $.ajax({
        url: 'https://【ShopのURL】/blog',//ShopのブログページURL
        cache: false,
        datatype: 'html',
        success: function(html) {
            var blog_date = $(html).find('.publish_date');
            $('#blog_date1').append(blog_date.eq(0));
            $('#blog_date2').append(blog_date.eq(1));

            $(function() {//日付の表示スタイルを指定
                var count = 10;
                $(blog_date).each(function() {
                    var thisText = $(this).text();
                    var textLength = thisText.length;
                    if (textLength > count) {
                         var showText = thisText.substring(0, count);
                         var insertText = showText += '';
                         insertText = insertText.replace('/','.');
                         insertText = insertText.replace('/','.');
                         $(this).html(insertText);
                    };
                });
            });
        }
    });
});

$(function(){//次にタイトルを取得
    $.ajax({
      url: 'https://【ShopのURL】/blog',    //ShopのブログページURL
      cache: false,
      datatype: 'html',
      success: function(html) {
          var blog_title = $(html).find('[itemprop="name"]');
          $('#blog_title1').append(blog_title.eq(0));
          $('#blog_title2').append(blog_title.eq(1));
        }
    });
});

【ShopのURL】・・ここにURLを置きます。

ちょっと長くなってしまいますが、レスポンシブの際にpxではなくwvで値を指定すると、どうしてもズレが生じるので、今回は日付とタイトルを別々に取得してみました。

日付は、デフォルトの状態だと時間まで取得されるので、10桁表示に。

さらに、《例》11/11⇒11.11　という表示に置換してみました。

こちらのページからJSファイルをアップロードして読み込むか、「HTML編集」を使って<body>内に<script>タグで括って記述してください！

スタイルを整える

JavaScriptで取得した内容を記述していきます！

以下のCSSで、DEMOのスタイルを作ることができますよ～

HTML

<section class="news">
    <h2>◇◆News◆◇</h2>
    <div id="blog_content">
        <ul class="news_list">
            <li class="news_list_item">
                <div id="blog_date1"></div>
                <div id="blog_title1"></div>
            </li>
            <li class="news_list_item">
                <div id="blog_date2"></div>
                <div id="blog_title2"></div>
            </li>
        </ul>
    </div>
    <div class="more"><a href="https://【ShopのURL】/blog">more..</a></div>
</section>

【ShopのURL】・・ここにURLを書きます。

CSS

.news h2{
    font-size: 24px;
    text-align: center;
}
  
#blog_content .news_list {
  width: fit-content;
  margin: 0 auto;
}

#blog_content .news_list_item {
  display: flex;
  border-bottom: dotted 5px gray;
}

#blog_content p {
  background-color: pink;
  border-radius: 10px;
  font-size: 20px;
  color: #fff;
  margin: 10px;
  padding: 5px 20px;
}

#blog_content p:nth-child(n+3) {
  display: none;
}

#blog_content h2 {
  font-size: 20px;
  padding: 17px 0 0;
}

#blog_content h2 a{
    color: #000;
    text-decoration: none;
}

#blog_content h2:nth-child(n+3) {
  display: none;
}

.news .more {
    font-size: 20px;
    text-align: center;
    padding-top: 10px;
}

.news .more a {
    color: gray;
    text-decoration: none;
}

Blogタイトルの文字数に合わせて、ドットの下線が横幅に合うようにしています。

今回は新着2件の記事一覧にして、3つ目以降はdisplay:noneで非表示にしているので、:nth-child(n+3)の値を変えると任意の記事数表示することができます！

こちらからCSSファイルをアップロードして読み込むか、<head>内に<style>タグで括って記述してください！