Base自分用のナレッジベース。Server、オープンソース系のシステムやフリーソフトに関する情報、iPhone、Androidスマホ便利情報など役立つ情報などを覚書しておくためのブログ。リニューアルされました。リダイレクトされます。2」は、ブログに張り付けた画像がクリックされると、クールなポップアップ画面で表示してくるJavascriptのライブラリを使用した特殊効果。ポップアップ表示するだけでなく、複数の画像をグループ化してポップアップしたままスライドショーのように表示することもできる。「LightBox2」を使用した特殊効果のデモを以下のブログに用意したので実際の動作を確認したい方は以下のブログを参照してください。以下FC2ブログに「Lightbox2」を導入する方法について記載します。以下にFC2ブログにLightBox2を設置するための手順を記載します。ブログのテンプレートを少し変更するので、手順を実施する前に複製を取ってバックアップをしておきましょう。以下のリンクをクリックして「Lightbox2」のサイトをブラウザで開きます。LightBox[DOWNLOAD]をクリックして「LightBox2」をダウンロードします。ダンロードしたファイルを解凍します。解凍したフォルダの以下のファイルのファイル名を変更します。変更前:lightbox2-master\dist\js\lightbox-plus-jquery.min.js変更後:lightbox2-master\dist\js\lightbox-plus-jquery-min.js※拡張子を除いたファイル名部分の"."(ピリオド)を"-"(ハイフン)に変更する"lightbox2-master\dist\images"フォルダの以下の4つのファイルをブログにアップロードし、アップロードした各ファイルのアップロード先URLをメモ帳などにコピーしておきます。close.pngloading.gifnext.pngprev.png"lightbox2-master\dist\css"フォルダの"lightbox.css"をテキストエディタで開きます。"lightbox.css"ファイル内に上記でアップロードした4つのファイル(close.png、loading.gif、next.png、prev.png)のURLを指定している行がありますのでそのURLをアップロード先URLに書き換えます。わかりづらいかもしれないので2つほど変更例をいかに記載しておきます。}URLの書き換えが終了したら上書き保存します。ファイル名を変更したファイル"lightbox-plus-jquery-min.js"とURLを書き換えた"lightbox.css"をブログにアップロードします。ファイルのアップロード方法の詳細については以下の記事を参考にしてください。上記でアップロードした2つのファイルのアップロード先URLをメモ帳などにコピーしておきます。ブログのテンプレート設定画面を開きます。ブログテンプレートの<head>~</head>の任意の行に以下のHTMLを追記します。href="http://XXXX/lightbox.css">※"href="に指定するURLは、メモ帳にコピーしておいた"lightbox.css"のURLを指定します。ブログテンプレートの</body>の手前に以下のHTMLを追記します。src="http://XXXX/lightbox-plus-jquery-min.js"></script>※"href="に指定するURLは、メモ帳にコピーしておいた"lightbox-plus-jquery-min.js"のURLを指定します。変更したテンプレートの内容を[更新]ボタンをクリックして保存します。これでブログへの「LightBox2」を設置する手順は終了です。実際にブログにアップした画像をLightBox2で表示するためには、<a>タグの中に「data-lightbox="任意の名前"」を指定します。「data-title="タイトル文字列"を一緒に指定すると任意の文字をポップアップした画面の左下に表示することができます。以下にLightBox2を使う際のHTML例を記載します。画像を1つだけ使った場合HTMLの例この例では、「data-lightbox=」に"demo-1"という名前を指定しています。data-title="タイトル文字列">...</a>複数の画像をスライドショーのように見せる場合HTMLの例この例では、4つの画像の「data-lightbox=」に"group-1"という同じ名前を指定してグルーピングしています。同じ名前が指定されている場合はスライドショーのように表示されます。data-title="画像4のタイトル文字列">...</a>LightBox2のオプションLightBox2には実行時に特殊効果のオプションを指定して実行することができます。オプションを指定した実行方法等の詳細については、公式サイトを参照してください。LightBox2のデモHTMLの記載方法と実際にLightBox2でどういうふうに表示されるかは以下のサイトにデモを用意してあるのでそちらを参照してください。(2)細かい説明を書いていただいて助かっています。一通りやってみたのですが、うまくlightboxが起動されません。アップロード先ですが、画像をブログに挿入すると「・・・fc2.com/〇/〇/〇・・・・/画像のファイル名」となっているのですが、テンプレートのhead内にペーストするのはhttp://~comまででしょうか?それともそのあとに続く/〇/〇・・・まででしょうか?あと新規でブログを書くたびにアップロード先は変わると思うのですが、テンプレートのhead内にはその度にアップロード先を追加で書き足していくのですか?素人レベルの質問ですみません。16:15大変分かりやすく簡単に導入することが出来ました。記事の中でこのページをリンクさせて頂きました。ありがとうございます。実行MATCH関数タイトルログインユーザーSimplicity2予期しないエラープライベートスペースWindowsサーバーDelete受信VBScriptユーザビリティ効率VB.NETレスポンシブERRSSフィードイベントログchromeSubmit休日タグクラウドウィンドウサイズリサイズ署名ファイルを開くダイアログボックスウェブマスターツール端末にAPNが正しく設定されていません。(11/25)プロフィールこのブログの中の人:billyboyこのブログを見に来てくれてありがとうございます。このブログの中の人はExcel、AccessのVBAに関するカスタマーサポート、技術ドキュメントのの作成業務を経験後、開発系SEを経て現在は金融系企業のシステム運用/保守SEとして働いています。当初自分が困ったときに解決した方法や社内/外からの技術的な問い合わせに回答した時に作ったプログラムなどを自分用の備忘録としてこのブログを開設しました。たくさんの方に見に来ていただけてることに気づいてからはなるべく誰が見てもわかるような記事内容にすることを意識して書いています。