レスポンシブ対応しつつ、ダブルタップで全画面表示、左右のスワイプで画像スライドなどタッチ操作が可能でYoutubeなどの動画も扱えるフリーコンテンツスライダー「Galleria」をFC2ブログに導入する方法について覚書。
複数の画像を表示する記事などを書くことが多い方には画像の見せ方をクールにできるし、何よりレスポンシブ対応、タッチ操作対応という点でオススメです。
コンテンツスライダー「Galleria」をFC2ブログに導入する方法と「Galleria」を使用した記事の記述サンプルについての覚書。
この記事を読む前に
無料版のFC2でも使えると思って色々やってみましたが、どうもうまく動いてくれませんでした。
「Galleria」に使われているファイルのファイル名が"."(ピリオド)を含むため、そのままだとファイルのアップロードができません。
本来であれば"."を別の文字列、例えば"-"とかに変えてアップロードすることで使えるのですが、「Galleria」はファイル名を変えるとうまく動作しませんでした。
この記事に記載する手順はFC2のPro版(有料版)のみに対応した手順です。
FC2Proは、無料版のアップロード先以外にFTPで接続して別の場所にファイルをアップロードできるため、"."を含むファイルであっても問題なくアップロードできます。
なので、FC2Proであれば簡単に設置できます。
コンテンツスライダー「Galleria」の概要
コンテンツスライダー「Galleria」は、以下の特徴を持つフリーのコンテンツスライダーです。
「Galleria」の特徴
- レスポンシブ対応 PC、スマホ、タブレットそれぞれの画面サイズに最適した状態で表示されるレスポンシブ対応
- ダブルタップやスワイプなどタッチ操作対応
- 画像だけでなくYoutubeなどの動画にも対応
- フリー
「Galleria」公式webサイト
公式サイトURL
「Galleria」公式webサイトでのデモ
以下の「Galleria」公式webサイトのでも画面で実際のコンテンツスライダーの動作が確認できます。
「Galleria」のライセンスについて
基本フリーですが、使用者各自でライセンス内容をよく確認した上で自己責任で使用してください。
FC2ブログにコンテンツスライダー「Galleria」を導入する手順概要
ちょっとややこしいですが、ゆっくり落ち着いて手順通りに行えばブログ初心者やプログラミングがわからない、JavaScriptなんて知らないという人でも十分導入できます。
正直私も「Galleria」の公式webサイトのマニュアルに従って作業しただけでJavaScript等については詳しくありません。
導入方法に必要な作業の概要は以下のとおりです。
コンテンツスライダー「Galleria」の導入に必要なファイルの入手
コンテンツスライダー「Galleria」の導入に必要なファイルを「Galleria」の公式webサイトからダウンロードします。
構成ファイルは、JavaScript(.js)ファイル、スタイルシート(.css)ファイル、画像ロード時にロード中を示す画像ファイルなどです。
コンテンツスライダー「Galleria」を構成するファイルFC2ブログにFTPでアップロードする
コンテンツスライダー「Galleria」を構成するファイルをFC2ブログにFTPでアップロードします。
FC2ブログのテンプレートの編集
自分が使用しているFC2ブログのテンプレートに「Galleria」の構成ファイルの読み込み指定を追記します。
以上がコンテンツスライダー「Galleria」の導入に必要な作業概要です。
コンテンツスライダー「Galleria」を使用した記事を各際のサンプルを最後に記載しますので、後は自分のブログでちゃんと動作する確認しましょう。
コンテンツスライダー「Galleria」の導入に必要なファイルの入手手順
コンテンツスライダー「Galleria」を導入するために必要なファイルの入手手順は以下のとおりです。
Galleriaの公式webサイトにアクセスする。
webサイトの右下にある[Free Download]をクリックする。
galleria-1.4.2.zipがダウンロードされるので、任意のフォルダに解凍する。
解凍すると[galleria]フォルダが作成されます。
以上でコンテンツスライダー「Galleria」の導入に必要なファイルの入手は完了です。
コンテンツスライダー「Galleria」の設置手順
以下にコンテンツスライダー「Galleria」の設置手順を記載します。
「Gelleria」を構成するファイルのアップロード
「Gelleria」を構成する以下の5つのファイルをFTPでアップロードします。
- galleria-1.4.2.js ダウンロードした解凍したフォルダ"galleria"の直下に保存されています。
- galleria.classic.js ダウンロードした解凍したフォルダ"galleria"の"themes\classic"に保存されています。
- galleria.classic.css ダウンロードした解凍したフォルダ"galleria"の"themes\classic"に保存されています。
- classic-map.png ダウンロードした解凍したフォルダ"galleria"の"themes\classic"に保存されています。
- classic-loader.gi ダウンロードした解凍したフォルダ"galleria"の"themes\classic"に保存されています。
FC2ブログで使用しているテンプレートの修正
コンテンツスライダー「Galleria」を動作させるためには、今自分が使用しているFC2のテンプレートの修正(追記)を行う必要があります。
以下にテンプレートの修正手順を記載します。
※万が一の場合に使用しているテンプレートの複製を作成し、修正前にバックアップを取っておくことをおすすめします。
FC2ブログの管理画面の左サイドバーの[設定]メニューの[テンプレートの設定]をクリックします。
画面上段の「XXXXXのHTML編集」に記載されいてるHTMLの<head> ～ </head>の間の任意の場所に以下のHTML文を追記します。
<script src="http://file.blog.fc2.com/FTP接続時のユーザー名/galleria-1.4.2.js"</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"</script>
<style>
#galleria{height:320px}
</style>
※2行名の"jquery.js"の記載がすでに<head>～</head>に記載されている場合、新たに追記する必要はありません。
上記のテンプレート修正が終了したら[更新]ボタンをクリックしてテンプレートの修正を適用します。
以上でテンプレートの修正は終了です。
コンテンツスライダー「Galleria」を使う場合のHTML
「Galleria」を使用する際の、HTMLの書き方を以下に記載します。
まずdivタグに"galleria"をID指定します。
htmlで書くと、<div id="galleria"> です。
<div id="galleria">
<a href="http://画像のURL" target="_blank">
<img src="http:/画像のサムネイルのURL"
data-title="画像のタイトル"
data-description="画像の説明文"/>
</a>
<a href="http://画像のURL" target="_blank">
<img src="http:/画像のサムネイルのURL"
data-title="画像のタイトル"
data-description="画像の説明文"/>
</a>
<a href="http://画像のURL" target="_blank">
<img src="http:/画像のサムネイルのURL"
data-title="画像のタイトル"
data-description="画像の説明文"/>
</a>
<a href="http://画像のURL" target="_blank">
<img src="http:/画像のサムネイルのURL"
data-title="画像のタイトル"
data-description="画像の説明文"/>
</a>
</div>
<!-- 記事の最後に以下のHTML(JavaScript)を記載 --->
<!-- load Galleria -->
<script>
// Load the classic theme
// Initialize Galleria
if($("#galleria")[0]) {
Galleria.loadTheme('http://file.blog.fc2.com/FTP接続時のユーザー名/galleria.classic.js');
Galleria.run('#galleria');}
</script>
コンテンツスライダー「Galleria」のデモ
実際にコンテンツスライダー「Galleria」を使用したデモのURLを以下に記載しますのでクリックしてください。
※私のデモ用のFC2ブログサイトです。
コンテンツスライダー「Galleria」を使用した画像表示について
FC2無料版での使用はうまく行かなかったため、FC2Pro向けの手順となっています。
また記事の最後に記載するスクリプトは、ブログテンプレートのの手前に記載しておけばいちいち記事の本文にスクリプトを追記する必要はなくなります。
この記事であえて記事本文にスクリプトを記載するようにしているのは、手前に記載した場合別のスクリプトがあるとどっちか、もしくは両方のスクリプトがきちんと動作しなかったことがあるためです。
「Galleria」の設置方法について書いてみましたが、結局なんかイマイチなので使ってないです...
でもせっかく苦労して動くようにしたので記事にしてみました。
コメント