Flex Slider をa-blog cmsのユニットグループで利用する




Flex Slider という jQuery を利用した画像スライダーを a-blog cms の本文部分であるユニット内で活用できるようにする事の提案を書いてみます。トップページに使うような事は皆さんされているんじゃないかと思います。その際には、バナーモジュール等を利用する事も多いんじゃないでしょうか。

実際には、もう少ししっかり実装したいところですが、そこの部分は本職にお任せする事にして、考え方としてお伝えしておきます。

実装方法


Flex Slider をダウンロードして blog テーマ内にセットアップする

ダウンロードして以下のようにファイルをセットアップします。a-blog cms は標準で jQuery は読み込まれていますので、用意する必要はありません。

  • /themes/blog/js/jquery.flexslider-min.js
  • /themes/blog/css/flexslider.css
  • /themes/blog/images/bg_direction_nav.png

index.html を編集する

上記をテンプレート側に記述します。

<link rel="stylesheet" href="/css/flexslider.css">
<script type="text/javascript" src="/js/jquery.flexslider-min.js"></script>
<script type="text/javascript">
  $(window).load(function() {
    $('.slides').flexslider({ selector: "div" });
  });
</script>

ここでポイントになるところとしては、オプションで selector を div にするってトコロです。通常は li がデフォルトになっていますが、a-blog cms の画像を囲んでいるのは div になっているので設定を変更しておきます。この部分をオプションで設定できるようになっている事が Flex Slider を採用した理由になります。

ユニットグループの設定を追加する

今回の大事な部分は a-blog cms のユニットグループという機能を利用し、通常の画像を表示する部分を div class="slides"で囲む事です。その設定を行います。


カスタマイズ管理 > コンフィグ > エントリー > 編集設定 > ユニットグループ に上記の画像のような設定画面があります。ココに slides というユニットグループを追加します。

実際に設定する


ユニットグループのところで選択するだけで複数の画像部分が1つになります。文章の前で1カラムを選択しておかないとテキスト部分も入ってしますので注意が必要です。

キチンと利用できるようにするには

<div class="flexslider">
  <ul class="slides">
    <li><img src="slide1.jpg" /></li>
    <li><img src="slide2.jpg" /></li>
    <li><img src="slide3.jpg" /></li>
  </ul>
</div>

と標準では設定するべきところを一番外の div class="flexslider" がありません。このために画像と一緒に表示される矢印のナビゲーションが出てきません。ここら辺をなんとかすると、より完成度の高い実装ができるようになるかと思います。

レスポンシブにも対応して画像の幅が変更になっても利用できるようになっていますので、便利でオススメです。


コメント

山本一道

山本 一道

有限会社アップルップル

名古屋のホームページ制作会社「有限会社アップルップル」の代表をしています。弊社で開発しているCMS「a-blog cms」や、名古屋の「WCAN」という名古屋のWeb制作者のためのセミナーの主催や、コワーキングスペース「ベースキャンプ名古屋」も始めました。

test

エントリーリスト

カテゴリーリスト

タグクラウド

  • ベースキャンプ名古屋に新しく27インチ 2560x1440 のディスプレイが追加されました。 でも、最大解像度で表示できるケーブルが入荷していないので 1920x1080 の表示になっています。

    kazumich

    Type: image / Filter: Normal / Link / Feb 18th, 2017

    Comments: 0 / Likes: 4

  • マカベン始まりました! #758markup

    kazumich

    Type: image / Filter: Normal / Link / Feb 18th, 2017

    Comments: 0 / Likes: 3

  • 今日のベースキャンプ名古屋では「YouTube勉強会」が開催されています。Super Chat というサービスが開始されたみたいです。

    kazumich

    Type: image / Filter: Normal / Link / Feb 11th, 2017

    Comments: 0 / Likes: 7

  • 席を確保しランチ!

    kazumich

    Type: image / Filter: Normal / Link / Feb 09th, 2017

    Comments: 0 / Likes: 8

  • 順調に進化している森田さんが JS の勉強会で jQuery のプラグインを作った事について発表している。

    kazumich

    Type: image / Filter: Normal / Link / Jan 21th, 2017

    Comments: 0 / Likes: 6

  • 今日はアップルップルの非公開な社内勉強会で「ブランディング勉強会」を、社外から先生(ワクグミ田川さん)を招いて全員で受講しています。

    kazumich

    Type: image / Filter: Gingham / Link / Jan 18th, 2017

    Comments: 0 / Likes: 9

  • 今日は千代さんと2017年版のサイトについて打ち合わせでした。 http://chiyo-katsumasa.com

    kazumich

    Type: image / Filter: Normal / Link / Jan 18th, 2017

    Comments: 0 / Likes: 5

  • 週に1回はココに。

    kazumich

    Type: image / Filter: Normal / Link / Jan 11th, 2017

    Comments: 0 / Likes: 12

  • 恒例の年末のイベントが終わって、1年が終わりです。皆、1年ありがとう!

    kazumich

    Type: image / Filter: Normal / Link / Dec 29th, 2016

    Comments: 0 / Likes: 12

  • 今年も忘年会終わった!

    kazumich

    Type: image / Filter: Normal / Link / Dec 29th, 2016

    Comments: 0 / Likes: 4

実践! コンテンツファーストのWebサイト運用  a-blog cmsではじめるCMSプロトタイピング

2016年6月30日に株式会社ボーンデジタル様より「実践! コンテンツファーストのWebサイト運用 a-blog cmsではじめるCMSプロトタイピング」が発売されました。