Flat Leon Works

アプリやゲームを作ってます。

はてなブログ(無料版)でLightboxとbxSliderを利用する

はてなブログを使って運用している「うさプレイヤ公式サイト」にLightboxとbxSliderを導入してみたので、そのときのメモ。

補足

  • はてなブログとは別にファイルをアップロードする場所も必要になります私はGoogleドライブに置くようにしてます(2016/08/10 追記)Googleドライブのホスティング機能が終了するので、Github pagesに置くようにしました。
  • Javascript,CSS,jQueryの知識が全然無いので間違っている箇所があるかもしれません。
  • 画像にマウスオーバーすると画像が少し縮小する動きをしますが、このブログが利用しているデザインテーマによるものです。
  • このブログのデザインテーマの影響かbxSliderのボタンの表示が少し変になってますね…。うさプレイヤ公式サイトの方は問題無いのですが。

Lightboxとは

画像クリックによりページ切り替え無しで画像の拡大表示ができるようになるJavascript/CSSライブラリです。定番らしい。

公式サイト : Lightbox2

Lightboxサンプル

テーマ色サンプル

bxSliderとは

複数の画像をスクロールさせて表示できるようになるJavascript/CSSライブラリです。こういう表示方法は製品サイトのトップページでよく見かけますね。

公式サイト : jQuery Content Slider | Responsive jQuery Slider | bxSlider

bxSliderサンプル

Lightbox導入手順

※使用したバージョン v2.8.2

  • 1.公式サイトからダウンロードし解凍する
  • 2.必要なファイル( 「imagesフォルダ」「lightbox.css」「lightbox.min.js」 )をサーバーにアップロードする
  • 3.はてなブログの「設定 > 詳細設定 > headに要素を追加」の箇所に以下のコードを記述
<link rel="stylesheet" href="ファイルをアップロードした場所/lightbox.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  • 4.はてなブログの「デザイン > カスタマイズ > ヘッダ」の箇所の先頭に以下のコードを記述
    (※「設定 > 詳細設定 > headに要素を追加」に記述しても動作しなかったのでここで記述してます。)
<script src="ファイルをアップロードした場所/lightbox.min.js"></script>
  • 5.ブログ記事(Markdown)に表示したい画像を記述

aタグにdata-lightbox属性を与えることでLightboxによる表示になります。data-title属性でタイトルも付けられます。

<a data-lightbox="colors" data-title="テーマ色サンプル" href="Colors.png">
<img src="Colors.png" alt="テーマ色サンプル">
</a>

bxSlider導入手順

※使用したバージョン v4.1.2

  • 1.公式サイトからダウンロードし解凍する
  • 2.必要なファイル( 「imagesフォルダ」「jquery.bxslider.css」「jquery.bxslider.min.js」 )をサーバーにアップロードする
  • 3.はてなブログの「設定 > 詳細設定 > headに要素を追加」の箇所に以下のコードを記述

Lightboxも利用する場合は2行目の''は全く同じなので不要です。

<link rel="stylesheet" href="ファイルをアップロードした場所/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  • 4.はてなブログの「デザイン > カスタマイズ > ヘッダ」の箇所の先頭に以下のコードを記述

公式サイトのサンプルでは$(document).ready(function(){と記述されていますが、なぜかそれだと動作しませんでした。

<script src="ファイルをアップロードした場所/jquery.bxslider.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
  $('.bxslider').bxSlider({
     /*ここにお好みの設定を記述*/
      slideWidth: 320,
      slideMargin: 8,
  });
});
</script>
  • 5.ブログ記事(Markdown)に表示したい画像を記述

全体を<div class="bxslider">で囲い、個々の画像を<div>で囲います。

<div class="bxslider">
<div><img src="Screen_01_00_PlaybackList.png" title ="再生リスト画面"></div>
<div><img src="Screen_01_01_PlaybackList.png" title ="再生リスト画面(Artworkタブ)"></div>
</div>

このように個々の<div>の中のimgタグをdata-lightbox属性付きのaタグで囲えば、画像クリック時にLightboxで表示させることもできます。

<div class="bxslider">
<div><a data-lightbox="playbacklist" href="Screen_01_00_PlaybackList.png"><img src="Screen_01_00_PlaybackList.png" title ="再生リスト画面"></a></div>
<div><a data-lightbox="playbacklist" href="Screen_01_01_PlaybackList.png"><img src="Screen_01_01_PlaybackList.png" title ="再生リスト画面(Artworkタブ)"></a></div>
</div>