galleria_logo.jpg

レスポンシブ対応しつつ、ダブルタップで全画面表示、左右のスワイプで画像スライドなどタッチ操作が可能でYoutubeなどの動画も扱えるフリーコンテンツスライダー「Galleria」をFC2ブログに導入する方法について覚書。

複数の画像を表示する記事などを書くことが多い方には画像の見せ方をクールにできるし、何よりレスポンシブ対応、タッチ操作対応という点でオススメです。

コンテンツスライダー「Galleria」をFC2ブログに導入する方法と「Galleria」を使用した記事の記述サンプルについての覚書。
スポンサードリンク

コンテンツスライダー「Galleria」の概要

コンテンツスライダー「Galleria」は、以下の特徴を持つフリーのコンテンツスライダーです。

「Galleria」の特徴

  • レスポンシブ対応
    PC、スマホ、タブレットそれぞれの画面サイズに最適した状態で表示されるレスポンシブ対応

  • ダブルタップやスワイプなどタッチ操作対応

  • 画像だけでなくYoutubeなどの動画にも対応

  • フリー

「Galleria」公式webサイト

公式サイトURL
http://galleria.io/

「Galleria」公式webサイトでのデモ

以下の「Galleria」公式webサイトのでも画面で実際のコンテンツスライダーの動作が確認できます。
http://galleria.io/themes/classic/

「Galleria」のライセンスについて

基本フリーですが、使用者各自でライセンス内容をよく確認した上で自己責任で使用してください。

FC2ブログにコンテンツスライダー「Galleria」を導入する手順概要

ちょっとややこしいですが、ゆっくり落ち着いて手順通りに行えばブログ初心者やプログラミングがわからない、JavaScriptなんて知らないという人でも十分導入できます。

正直私も「Galleria」の公式webサイトのマニュアルに従って作業しただけでJavaScript等については詳しくありません。

導入方法に必要な作業の概要は以下のとおりです。

コンテンツスライダー「Galleria」の導入に必要なファイルの入手

コンテンツスライダー「Galleria」の導入に必要なファイルを「Galleria」の公式webサイトからダウンロードします。

構成ファイルは、JavaScript(.js)ファイル、スタイルシート(.css)ファイル、画像ロード時にロード中を示す画像ファイルなどです。

コンテンツスライダー「Galleria」を構成するファイルのファイル名の変更

FC2ブログの仕様と関係しますが、FC2ブログではアップロードするファイル名に"."を使用できません。
コンテンツスライダー「Galleria」を構成するファイルのファイル名には"."が含まれているので、ファイル名を変更する必要があります。

コンテンツスライダー「Galleria」を構成するファイルを自分のFC2ブログにアップロードとアップロードしたファイルのリンクURLの確認

コンテンツスライダー「Galleria」を構成するファイルの一部を先に自分のFC2ブログにアップロードします。

アップロード後に各ファイルのリンクURL(FC2の自分のブログからアップロードしたファイルにアクセスする際のURL)を確認します。

確認したリンクURLは「Galleria」を構成するファイルの修正時に使用します。

コンテンツスライダー「Galleria」を構成するファイルの修正

コンテンツスライダー「Galleria」を構成するファイルには一部修正が必要です。

スタイルシート(.cssファイル)や画像の指定部分を自分のFC2ブログにアップロードした際のリンクURLに書き換える修正が必要です。

自分のFC2ブログのテンプレートの編集

自分が使用しているFC2ブログのテンプレートに「Galleria」の構成ファイルの読み込み指定やスタイルシートの指定、「Galleria」を動作させるために必要なスクリプトの追記を行います。

以上がコンテンツスライダー「Galleria」の導入に必要な作業概要です。 コンテンツスライダー「Galleria」を使用した記事を各際のサンプルを最後に記載しますので、後は自分のブログでちゃんと動作する確認しましょう。

コンテンツスライダー「Galleria」の導入に必要なファイルの入手手順

コンテンツスライダー「Galleria」を導入するために必要なファイルの入手手順は以下のとおりです。
  1. Galleriaの公式webサイトにアクセスする。
    http://galleria.io/
    コンテンツスライダー「Galleria」公式webサイト

  2. webサイトの右下にある[Free Download]をクリックする。
    コンテンツスライダー「Galleria」の導入に必要なファイルのダウンロード

  3. galleria-1.4.2.zipがダウンロードされるので、任意のフォルダに解凍する。
    ダウンロードされたgalleria-1.4.2.zipを解凍

    解凍すると[galleria]フォルダが作成されます。
    ダウンロードされたgalleria-1.4.2.zipの解凍後の中身

    4. 以上でコンテンツスライダー「Galleria」の導入に必要なファイルの入手は完了です。

    コンテンツスライダー「Galleria」を構成するファイルのファイル名の変更

    FC2ブログのファイルアップロードの仕様の関係上、ファイル名部分(拡張子は除く)に"."(ピリオド)を含むファイルをそのままアップロードすることができません。

    解凍したフォルダに保管されている以下のファイルをファイルをアップロードする前にファイル名部分のピリオドを"_"半角アンダースコアに変更します。

    ファイル保存パス ファイル名 変更後のファイル名
    galleria galleria-1.4.2.min.js galleria-1_4_2_min.js
    galleria\themes\classic galleria.classic.min.js galleria_classic_min.js
    galleria\themes\classic galleria.classic.css galleria_classic.css

    コンテンツスライダー「Galleria」を構成するファイルを自分のFC2ブログにアップロードとアップロードしたファイルのリンクURLの確認

    ファイルのアップロード

    以下の4ファイルをFC2ブログのファイルアップロード画面からアップロードします。
    アップロード方法の詳細については、「FC2ブログカスタマイズ:無料版のFC2ブログで画像ファイル以外のファイル(jsファイル等)をアップロードする方法」を参考にしてください。

    ファイル保存パス アップロードファイル
    galleria galleria-1_4_2_min.js
    galleria\themes\classic galleria_classic.css
    galleria\themes\classic classic-map.png
    galleria\themes\classic classic-loader.gif

    アップロードしたファイルのリンクURLの確認

    アップロードが完了したら、アップロードしたそれぞれのファイルのリンクURLをメモ帳などにコピーしておきます。

    アップロードしたファイルのリンクURLは、FC2ブログのファイルアップロード画面のアップロードしたファイルのリスト内のテキストボックスに記載されています。(以下の画面の赤四角部分)

    ちなみにこのブログでは、アップロードした上記3ファイルのリンクURLは以下のようになっています。
    ※リンクURLは、アップロードしたファイルをあなたのブログから参照する際に必要なURLパスです。

    ファイル リンクURL
    galleria-1_4_2_min.js http://blog-imgs-77.fc2.com/l/a/b/lab319/galleria-1_4_2_min.js
    galleria_classic.css http://blog-imgs-77.fc2.com/l/a/b/lab319/galleria_classic.css
    classic-map.png http://blog-imgs-77.fc2.com/l/a/b/lab319/classic-map.png
    classic-loader.gif http://blog-imgs-77.fc2.com/l/a/b/lab319/classic-loader.gif

    コンテンツスライダー「Galleria」を構成するファイルの修正とアップロード

    「Galleria」をFC2ブログで動作させるためには、"galleria_classic_min.js"ファイルを修正する必要があります。

    ファイルの修正が終了したらFC2ブログへアップロードします。

    以下に各ファイルの修正手順を記載します。

    "galleria_classic_min.js"ファイルの修正とアップロード

    1. ファイル名を変更した"galleria_classic_min.js"ファイルをテキストエディタで開くきます。
      ※文字コードUTF-8でファイルを開けるエディタ(サクラエディタなど)を使用したほうが良いです。

    2. 開いた"galleria_classic_min.js"ファイルの中に記載されている"galleria.classic.css"の部分を変更したファイル名"galleria_classic.css"に変更します。

      変更前

      ・・・省略・・・",author:"Galleria",css:"galleria.classic.css",・・・省略・・・

      変更後

      ・・・省略・・・",author:"Galleria",css:"galleria_classic.css",・・・省略・・・

    3. 変更が終了したら"galleria_classic_min.js"ファイルを上書き保存して閉じます。

    4. 変更した"galleria_classic_min.js"ファイルをFC2ブログのファイルアップロード画面からアップロードする。

    5. アップロードが完了したら、アップロードした"galleria_classic_min.js"ファイルのリンクURLをメモ帳などにコピーしておく。

      6. ちなみにこのブログでは、アップロードした"galleria_classic_min.js"ファイルのリンクURLは以下のようになっています。
      ファイル リンクURL
      galleria_classic_min.js http://blog-imgs-77.fc2.com/l/a/b/lab319/galleria_classic_min.js

    FC2ブログで使用しているテンプレートの修正

    コンテンツスライダー「Galleria」を動作させるためには、今自分が使用しているFC2のテンプレートの修正(追記)を行う必要があります。

    以下にテンプレートの修正手順を記載します。
    ※万が一の場合に使用しているテンプレートの複製を作成し、修正前にバックアップを取っておくことをおすすめします。

    1. FC2ブログの管理画面の左サイドバーの[設定]メニューの[テンプレートの設定]をクリックします。

    2. 画面上段の「XXXXXのHTML編集」に記載されいてるHTMLの</head>の前に以下のHTML文を追記します。
      ※"http://blog-imgs-77.fc2.com/l/a/b/lab319/galleria-1_4_2_min.js"は、自分のブログにアップロードしたgalleria-1_4_2_min.jsファイルのリンクURLに置き換えてください。

      以下は、</head>の直前に追記した場合の記述例です。 
      <!-- Galleriaコンテンツスライダー用 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="http://blog-imgs-75.fc2.com/b/i/l/billyboy/galleria-1-4-2-min.js"></script>  

<style>
    #galleria{ width: 700px; height: 400px; background: #000 }
</style>

</head>
      ※"<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>"の記載がすでに<head>～</head>に記載されている場合、新たに追記する必要はありません。

    3. 次にテンプレートHTML内の</body>の前に以下のスクリプトを追記します。
      ※"http://blog-imgs-77.fc2.com/l/a/b/lab319/galleria_classic_min.js"は、自分のブログにアップロードしたgalleria_classic_min.jsファイルのリンクURLに置き換えてください。

      以下は、</body>の直前に追記した場合の記述例です。
         <!-- load Galleria -->
   <script>
       // Load the classic theme
       // Initialize Galleria
       if($("#galleria")[0]) {
         Galleria.loadTheme('http://blog-imgs-75-origin.fc2.com/b/i/l/billyboy/galleria-classic-min.js');
         Galleria.run('#galleria');}
   </script>

</body>

    4. 上記のテンプレート修正が終了したら[更新]ボタンをクリックしてテンプレートの修正を適用します。

    以上でテンプレートの修正は終了です。

    コンテンツスライダー「Galleria」のデモ

    実際にコンテンツスライダー「Galleria」を使用したデモです。

    「Galleria」デモコンテンツ

    以下にコンテンツスライダー「Galleria」のでもコンテンツを表示します。

    記事内のHTMLコード

    このデモコンテンツを表示するための記事内のHTMLコードを以下に記載します。
            <div id="galleria">
            <a href="http://blog-imgs-19.fc2.com/b/i/l/billyboy/sample1.jpg">
                <img 
                    src="http://blog-imgs-19.fc2.com/b/i/l/billyboy/sample1s.jpg",
                    data-big="http://blog-imgs-19.fc2.com/b/i/l/billyboy/sample1.jpg"
                    data-title="サンプル1"
                    data-description="サンプル1説明文"
                >
            </a>
            <a href="http://blog-imgs-19.fc2.com/b/i/l/billyboy/sample2.jpg">
                <img 
                    src="http://blog-imgs-19.fc2.com/b/i/l/billyboy/sample2s.jpg",
                    data-big="http://blog-imgs-19.fc2.com/b/i/l/billyboy/sample2.jpg"
                    data-title="サンプル2"
                    data-description="サンプル2説明文"
                >
            </a>
            <a href="http://blog-imgs-19.fc2.com/b/i/l/billyboy/sample3.jpg">
                <img 
                    src="http://blog-imgs-19.fc2.com/b/i/l/billyboy/sample3s.jpg",
                    data-big="http://blog-imgs-19.fc2.com/b/i/l/billyboy/sample3.jpg"
                    data-title="サンプル3"
                    data-description="サンプル3説明文"
                >
            </a>
            <a href="http://blog-imgs-19.fc2.com/b/i/l/billyboy/sample41.jpg">
                <img 
                    src="http://blog-imgs-19.fc2.com/b/i/l/billyboy/sample41s.jpg",
                    data-big="http://blog-imgs-19.fc2.com/b/i/l/billyboy/sample41.jpg"
                    data-title="サンプル4"
                    data-description="サンプル4説明文"
                >
            </a>
        </div>

    実際にコンテンツスライダー「Galleria」を使用して画像を表示する際の記述方法について

    実際に記事内でコンテンツスライダー「Galleria」を使用する際のHTMLの記述方法については、この記事自体がずいぶんと長くなってしまったので、別の記事でまとめたいと思います。

    また、上記の手順でもテーマがロードされずコンテンツが表示されない場合があるのでその対処方法など、追加情報も合わせてその記事で紹介したいと思います。

スポンサードリンク
  

 カテゴリ
ブログカスタマイズ
 タグ
FC2ブログカスタマイズ レスポンシブ コンテンツスライダー Galleria タッチ操作 画像 Youtube 動画 導入 JavaScript 
Genre:携帯電話・PHS  Thread:スマートフォン・アプリ