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

CMS

先日、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>タグで括って記述してください!

まとめ

デフォルトでは選択した1つの記事しかトップページに表示できないので、お知らせ機能のようにトップページに記事一覧を配置させたい方は参考にしてみてください^^


当ブログは、BASEのカスタマイズ方法を紹介していますが、直接のご依頼も受け付けています♪

こういうデザインにしたい!

試してみたけどできなかった・・

などの簡単な修正でしたらワンコインから受け付けていますので、TwitterDMお問い合わせフォームよりお気軽にご連絡ください^^

ちょっと難しそうやけど、コピペで実装できちゃうのでやってみてね!

最後まで読んでいただきありがとうございました!

タイトルとURLをコピーしました