Base自分用のナレッジベース。Server、オープンソース系のシステムやフリーソフトに関する情報、iPhone、Androidスマホ便利情報など役立つ情報などを覚書しておくためのブログ。FC2ブログカスタマイズ投稿日:2015-03-05カテゴリ:ブログカスタマイズレスポンシブ対応しつつ、ダブルタップで全画面表示、左右のスワイプで画像スライドなどタッチ操作が可能でYoutubeなどの動画も扱えるフリーコンテンツスライダー「Galleria」をFC2ブログに導入する方法について覚書。複数の画像を表示する記事などを書くことが多い方には画像の見せ方をクールにできるし、何よりレスポンシブ対応、タッチ操作対応という点でオススメです。コンテンツスライダー「Galleria」をFC2ブログに導入する方法と「Galleria」を使用した記事の記述サンプルについての覚書。スポンサードリンクこの記事を読む前に無料版のFC2でも使えると思って色々やってみましたが、どうもうまく動いてくれませんでした。「Galleria」に使われているファイルのファイル名が"."(ピリオド)を含むため、そのままだとファイルのアップロードができません。本来であれば"."を別の文字列、例えば"-"とかに変えてアップロードすることで使えるのですが、「Galleria」はファイル名を変えるとうまく動作しませんでした。この記事に記載する手順はFC2のPro版(有料版)のみに対応した手順です。FC2Proは、無料版のアップロード先以外にFTPで接続して別の場所にファイルをアップロードできるため、"."を含むファイルであっても問題なくアップロードできます。FC2Proであれば簡単に設置できます。コンテンツスライダー「Galleria」の概要コンテンツスライダー「Galleria」は、以下の特徴を持つフリーのコンテンツスライダーです。「Galleria」公式webサイト公式サイトURLhttp://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ブログにFTPでアップロードするコンテンツスライダー「Galleria」を構成するファイルをFC2ブログにFTPでアップロードします。自分が使用しているFC2ブログのテンプレートに「Galleria」の構成ファイルの読み込み指定を追記します。以上がコンテンツスライダー「Galleria」の導入に必要な作業概要です。コンテンツスライダー「Galleria」を使用した記事を各際のサンプルを最後に記載しますので、後は自分のブログでちゃんと動作する確認しましょう。コンテンツスライダー「Galleria」の導入に必要なファイルの入手手順コンテンツスライダー「Galleria」を導入するために必要なファイルの入手手順は以下のとおりです。Galleriaの公式webサイトにアクセスする。Download]をクリックする。galleria-1.4.2.zipがダウンロードされるので、任意のフォルダに解凍する。解凍すると[galleria]フォルダが作成されます。以上でコンテンツスライダー「Galleria」の導入に必要なファイルの入手は完了です。以下にコンテンツスライダー「Galleria」の設置手順を記載します。「Gelleria」を構成するファイルのアップロード「Gelleria」を構成する以下の5つのファイルをFTPでアップロードします。ダウンロードした解凍したフォルダ"galleria"の直下に保存されています。ダウンロードした解凍したフォルダ"galleria"の"themes\classic"に保存されています。ダウンロードした解凍したフォルダ"galleria"の"themes\classic"に保存されています。ダウンロードした解凍したフォルダ"galleria"の"themes\classic"に保存されています。ダウンロードした解凍したフォルダ"galleria"の"themes\classic"に保存されています。FC2ブログで使用しているテンプレートの修正コンテンツスライダー「Galleria」を動作させるためには、今自分が使用しているFC2のテンプレートの修正(追記)を行う必要があります。以下にテンプレートの修正手順を記載します。※万が一の場合に使用しているテンプレートの複製を作成し、修正前にバックアップを取っておくことをおすすめします。FC2ブログの管理画面の左サイドバーの[設定]メニューの[テンプレートの設定]をクリックします。間の任意の場所に以下のHTML文を追記します。#galleria{height:320px}&lt;/style&gt;※2行名の"jquery.js"の記載がすでに~に記載されている場合、新たに追記する必要はありません。上記のテンプレート修正が終了したら[更新]ボタンをクリックしてテンプレートの修正を適用します。以上でテンプレートの修正は終了です。コンテンツスライダー「Galleria」を使う場合のHTML「Galleria」を使用する際の、HTMLの書き方を以下に記載します。divタグに"galleria"をID指定します。後は画像のリンクを記載していきます。4つの画像を使った場合は以下のように記載します。data-description="画像の説明文"/&gt;&lt;/a&gt;&lt;/div&gt;そして記事中の最後に「Galleria」を実行するためのスクリプトを記載します。Galleria.run('#galleria');}&lt;/script&gt;コンテンツスライダー「Galleria」のデモ実際にコンテンツスライダー「Galleria」を使用したデモのURLをいかに記載しますのでクリックしてください。※私のデモ用のFC2ブログサイトです。コンテンツスライダー「Galleria」を使用した画像表示についてFC2無料版での使用はうまく行かなかったため、FC2Pro向けの手順となっています。記事の最後に記載するスクリプトは、ブログテンプレートのの手前に記載しておけばいちいち記事の本文にスクリプトを追記する必要はなくなります。この記事であえて記事本文にスクリプトを記載するようにしているのは、手前に記載した場合別のスクリプトがあるとどっちか、もしくは両方のスクリプトがきちんと動作しなかったことがあるためです。苦労して動くようにしたので記事にしてみました。日数SQL*Plus無料WebサービスIIS全角カタカナ確認レコードFFFTPcsvアプリ動作しないフォント端末にAPNが正しく設定されていません。(11/05)プロフィールこのブログの中の人:billyboyこのブログを見に来てくれてありがとうございます。このブログの中の人はExcel、AccessのVBAに関するカスタマーサポート、技術ドキュメントのの作成業務を経験後、開発系SEを経て現在は金融系企業のシステム運用/保守SEとして働いています。当初自分が困ったときに解決した方法や社内/外からの技術的な問い合わせに回答した時に作ったプログラムなどを自分用の備忘録としてこのブログを開設しました。たくさんの方に見に来ていただけてることに気づいてからはなるべく誰が見てもわかるような記事内容にすることを意識して書いています。