Home
Menu
Side
Twitter
Top

【 QooQ カスタマイズ 】 bxSlider を使って関連記事をスライド表示させる

2021/06/25

Blog QooQ ブログカスタマイズ

Blogger のテンプレート QooQ の関連記事を、bxSlider を使ってスライド表示にするカスタマイズを紹介します。

応用次第で、カスタマイズの幅が広がること間違いなしです。

こんにちは、HARU( @HARU )です。

今回は bxSlider を使って、QooQ の関連記事をスライド表示するカスタマイズをしてみました!

久しぶりにガッツリカスタマイズなので楽しかったですが、HTML 初心者には少し難しい内容かもしれません。

注意

テンプレートの編集( ソースコード改変 )をするときは、必ずバックアップを取ってから編集しましょう。

不安な方は以下の記事を参考にしてください。

関連記事スライド表示イメージ

bxSlider を用いて関連記事をスライド表示させます。

スマホ表示でも、PC 画面表示でも、同じように表示させることができます。

QooQ関連記事スライド表示実装イメージ

関連記事デザインのカスタマイズ

本説明の環境は、関連記事のデザインをカスタマイズした状態です。

見た目を合わせたい方は、以下の CSS#mrp-content.mrp-post.mrp-post-img.mrp-post-titleの適用と、サムネイル画像の調整をしてください。

見た目を合わせない場合でも、#mrp-contentflexは廃止してください。


#mrp-content{
  /* display: flex; */ /* flex廃止 */
  /* flex-wrap: wrap; */ /* flex廃止 */
}
.mrp-post{
  position: relative;
  padding: .3em .2em;
  margin: .2em;
  border: solid 1px #c0c0c0;
  background: #ffffff;
  transition: all .2s ease 0s;
}
.mrp-post-img{
  display: block;
  width: 100%;
  height: 130px;
  object-fit: cover;
}
.mrp-post-title{
  padding: 1em .5em .3em;
  font-size: 1.6rem;
  font-weight: bold;
}

サムネイル画像の調整については、以下の記事を参考にしてください。

bxSlider 導入

bxSlider を導入していない方は、以下の記事を参考に導入してください。

導入自体は bxSlider 導入の STEP1 まで終わっていれば OK です。

HTML 編集

STEP1
  • 以下のコードを検索する。
<div id='mrp-content'/>
STEP2
  • 検索したコードを以下のように編集する。
<div id='mrp-content' class="mrp-slider"/>

Script 追記

以下の Script を</body>の直上に記述します。


<!-- bxSlider 関連記事 -->
<script>
//bxslider スライド数制御
$(function(){
  // bxSlider共通オプション
  var defaultOption = {
    minSlides: 1,
    maxSlides: 3,
    moveSlides: 1,
    slideWidth: 300,
    slideMargin: 10
  };

  // 定義
  var slider = $('.mrp-slider').bxSlider(defaultOption);

  if(slider.getSlideCount() &lt; 2) {// スライド要素1以下のとき
    defaultOption['infiniteLoop'] = false;
    defaultOption['controls'] = false;
    defaultOption['pager'] = false;
    defaultOption['touchEnabled'] = false; //スワイプ無効
  } else {// スライド要素2つ以上のとき
    defaultOption['useCSS'] = false;
  };

  // スライダーをリロード
  slider.reloadSlider();
});
</script>

実装確認

ここまでで以下のように、関連記事がスライド表示できることを確認してください。

あとは CSS や bxSlider オプションを変更することで、自分好みに調整することができます。

関連記事なし 関連記事2つ 関連記事3つ以上

QooQ関連記事スライド表示実装イメージ_関連記事なし

QooQ関連記事スライド表示実装イメージ_関連記事2

QooQ関連記事スライド表示実装イメージ_関連記事3以上

関連記事のリンクがクリックできない

bxSlider の導入でも説明した通り、デスクトップ版 GoogleChrome では、リンク機能がうまく動作しません。

このままでは関連記事のリンク移動ができません。

以前紹介した方法よりも、よいものが見つかったのでここで紹介します。

Script 追記

以下の Script を</body>の直上に記述します。


<!-- bxSlider リンク移動不具合対応 -->
<script>
$(document).on('mousedown','.bx-viewport a',function(){
  var $this = $(this),
    myHref = $this.attr('href'),
    myTarget = $this.attr('target');
      if(myTarget === '_blank'){
        window.open(myHref);
      }else{
        window.location.href = myHref;
      }
});
</script>

関連記事を2つ以上表示するとき、中央を軸に表示させる

関連記事が2つ以上ある場合、左側を軸に表示されます。

そのため画面サイズによっては、1つ目の関連記事が左に寄せられた状態になります。

QooQ関連記事スライド表示実装イメージ_左を軸に表示される

PC 画面だと気になりませんが、スマホ画面では気になります。

そこで中央を軸に、1つ目の関連記事が表示されるように調整します。

実装イメージ

実装中心を軸に1つ目の関連記事が表示されるようになります。

QooQ関連記事スライド表示実装イメージ_中心を軸に表示される

CSS 追記

以下の CSS を Blogger テンプレートの CSS 欄に記述します。


.mrp-slider {
  margin-left: 50%;
}
.mrp-slider div {
  margin-left: -150px; /* 300 / 2 */
  margin-right: 160px !important; /* 300 / 2 + 10 */
}

上記 CSS は関連記事のwidth: 300px;を想定してあります。

各環境に合わせて CSS の調整を行ってください。

Script 変更

中央表示させたことにより、関連記事が無いときに表示される文字がずれてしまいます。

中央表示させたときの文字ずれイメージ

そこで関連記事が無い場合、中央表示させないように Script に追記します。

ここでは.mrp-slidermargin-left: 0;にしています。

bxSlider 関連記事用の Script と全て入れ替えてください。


<!-- bxSlider 関連記事 中央表示用 -->
<script>
//bxslider スライド数制御
$(function(){
  // bxSlider共通オプション
  var defaultOption = {
    minSlides: 1,
    maxSlides: 3,
    moveSlides: 1,
    slideWidth: 300,
    slideMargin: 10
  };

  // 定義
  var slider = $('.mrp-slider').bxSlider(defaultOption);

  if(slider.getSlideCount() &lt; 2) {// スライド要素1以下のとき
    defaultOption['infiniteLoop'] = false;
    defaultOption['controls'] = false;
    defaultOption['pager'] = false;
    defaultOption['touchEnabled'] = false; //スワイプ無効
    $(function() { //中央表示解除
      $('.mrp-slider').css('margin-left', '0');
    });
  } else {// スライド要素2つ以上のとき
    defaultOption['useCSS'] = false;
  };

  // スライダーをリロード
  slider.reloadSlider();
});
</script>

QooQ