PSO2魔法戦士研究レポート。と、テキトーな日記。

魔法戦士が行く!

【覚書】fc2ブログでライトボックスを使う。

書き残しておかないと、やり方を絶対忘れると思ったので。

※魔法戦士どころかPSO2さえ関係のない記事です








ライトボックス(lightbox)っていうのは、こんなん。
画像、クリックしてみ?

見てるだけ。

ちなみに、普通に貼るとこうなる。

見てるだけ。

最近、このブログの画像もこれにしたんだよね。
自分がどうやってこれをやったか、時間が経てば絶対に忘れると思う。
なので、書き残しておきます。



んじゃ、早速始めます。
できるだけ、初心者でもわかるように心がけます。

あ、そうだ。
仕様によってはできないブログもあります。
予め、ご了承ください。





1 準備


1-1 拡張子を表示する


まず、PCの設定を拡張子を表示できる設定にします。
絶対に必要かって言うとそうでもないけど、拡張子を表示したからってそんなに困ることもないと思う。
強いて言うなら、何も知らずにファイル名の変更して、間違って拡張子をいじっちゃってファイルが開けなくなるとか、それくらい。

あっさりと怖いことを言った気がするけど、名前の変更の時には拡張子に触らないようにすればいいだけだから。

拡張子の表示については……まあ、適当に検索してください。
一応、検索しておいた。

拡張子 表示


1-2 ライトボックスを入手する


これも、「ライトボックス」で検索すればいくらでも出てきますが、一応。

Lightbox 2

Downloadってわかりやすく書いてあるんで、そこから落とします。
zipでのダウンロードなので、解凍のために別途ソフトを導入する必要はないと思います。

尚、「ライトボックス」で検索すると、使い方や設置のしかたを解説するサイトもザクザク出てきます。
そちらを見ることにしてウチのブログは見ない、とかでも可。
私の方がわかりやすく解説できる! などという自信は微塵もありません。


1-3 アップロード先のURLを確認する


後でライトボックスの各種ファイルをサーバにアップロードすることになりますが、それに先駆けてURLを確認する必要があります。
ご利用中のブログで、今までに画像なりを既にアップしている場合は、その画像のURLを確認しておきます。



以下、fc2ブログの場合。
管理画面にログインして、ファイルのアップロードをクリック。

ライトボックス導入準備。アップ先URL確認その1


アップされているファイルの一覧が表示されるので、以下の部分をチェック。

ライトボックス導入準備。アップ先URL確認その2

多分、

http://blog-imgs-xx.fc2.com/xxx/ファイル名.jpg

みたいな感じになってると思います。
このURLから、「/ファイル名.拡張子」以外をコピーしてどっかに貼っておいてください
上記の例で言えば、

http://blog-imgs-xx.fc2.com/xxx

の部分をコピーしておきます。
後で使うんで、テキストファイルでもブラウザの検索窓でもいいんで、貼っておきます。

fc2以外のブログでも同様です。
アップされたファイルのURLの内、ファイル名とその直前のスラッシュ以外をコピーしておいてください。


ライトボックス導入準備は、以上です。



2 ライトボックスをブログ用にいじる


2-1 まずは、zipの解凍


ダウンロードしたライトボックスのzipを、解凍してください。
今時のパソコンなら、普通にダブルクリックするだけで勝手に解凍(展開)してくれると思います。

んで、lightboxという名前のフォルダを開きましょう。
尚、実際のフォルダ名にはヴァージョンを表す数字が入ってます。
lightbox2.05とか、そんな感じ。
今のヴァージョンは2.6なのかな。

フォルダを開くと、中はこんな感じになってるはず。

lightboxの中身。

必要なのは、
  • css
  • images
  • js
です。
他のは使いません。


2-2 cssファイルをいじる


まず、cssファイルからいじります。
cssが気になる人は、スタイルシートないしはcssで検索してみましょう。
でも、ただライトボックスを使うだけなら、急いで勉強する必要もないでしょう。

cssフォルダを開いてください。

cssフォルダの中身。

ファイルが一つだけ入ってます。
わざわざスクリーンショット用意する必要があったのかと反省したくなるほどシンプルな画像です。

このファイルを、開きます。
普通にダブルクリックすれば、メモ帳で勝手に開くと思います。

cssファイルの中身。

上記画像は、メモ帳で開いた画面ではないです。
が、わかりやすく色分けしてある以外は、メモ帳と大差ないと思います。

画像にも書きましたが、この部分を書き換えます。
ここで、事前に準備しておいたアップロード先のURLを使います。

../images/prevlabel.gif
   ↓ ↓ ↓

http://blog-imgs-xx.fc2.com/xxx/prevlabel.gif

もう一個の方も書き換えます。

../images/nextlabel.gif
   ↓ ↓ ↓

http://blog-imgs-xx.fc2.com/xxx/nextlabel.gif


もちろん、閉じる前に保存をしてください。
上書き保存でいいです。
もしやり直したい時は、zipのダウンロードからやり直せばOK。

これで、cssファイルの書き換えは完了。
でも、くれぐれも該当箇所以外をいじらないでください。
一文字違っただけで、正しく機能しなくなる恐れがあります。


そうそう。
私もメモ帳で開いてみたんだけど、なぜか改行が壊滅してた
もしメモ帳で開いて改行が壊滅していたら……頑張って探してね?



ちょっと、中級者向けの話をします。
初心者の方は、読み飛ばしてしまって構いません。

もちろん、アップロード先の階層構造が把握できれば、相対パスでもいいと思います。
且つ、ファイルではなくフォルダごとアップロードできるブログならば、書き換え自体がいらなくなるでしょう。
まあ、そういうブログがあるのかどうかは知りませんけど。
と言うか、そこまでできるブログなら、通常のホームページに設置する方法でOKなわけで。



2-3 jsファイルをいじる


次は、jsファイルです。
jsっていうのはjavascriptのことなんだけど……興味があったら調べてみてください。

では、jsフォルダを開きましょう。
cssと違って、たくさんファイルが並んでます。

jsフォルダの中身。

書き換えが必要なのは、上記二つのファイル。
やることは、cssと同じです。


まずは、lightbox.jsから。

jsファイルの中身その1

記述が非常に多くて縦に長いですが、該当箇所は最初の方にあります。
ウィンドウのスクロールバーからもわかりますが、一番上です。

やることはcssと同じなので、端折ります。
保存は忘れないように。


次は、lightbox-web.js。

jsファイルの中身その2

ここも、lightbox.js同様に、該当箇所は上の方です。
すぐに見つかるでしょう。


書き換えて保存したら、次に行きます。



3 ライトボックスをアップロードする


必要なものだけをアップロードします。
通常のHPで使うやり方ではフォルダごとアップしてしまいますが、私の知る限り、フォルダをアップできるブログサービスはありません。
できるとして、zipくらいかな。

なので、フォルダから出してファイルを個別にアップします。

cssフォルダとjsフォルダからそれぞれ
  • lightbox.css
  • builder.js
  • effects.js
  • lightbox.js
  • lightbox-web.js
  • prototype.js
  • scriptculous.js
をアップロード。

あとは、画像。

imagesフォルダの中身。

最低限必要と思われるのは、赤い部分。
面倒なら、全部アップしてしまってもいいです。



4 HTMLをいじる


ブログのHTMLをいじって、ライトボックスを使えるようにします。

fc2を例にします。

テンプレートの編集を選択。

それにつけても、アヒルが気になる。

テンプレの編集画面を呼び出す。


はい。
編集画面です。

いじる場所はこの辺。


何を書き込むかと言うと、これ。



「コピーしておいたURL」の部分を、cssファイルやjsファイルの書き換えで使ったURLで置き換えてください。
尚、上記テキストは、このブログの仕様上、改行がされていません。
URLを置き換えて貼るだけでもソースコード的には問題ないけど、見た目が汚くわかりにくくなります。
三つある</script>の後に改行を入れるとキレイになります。

そうすると、こうなる。

これでOK。



……今気付いたけど。
なんで</script>なんだ?
いや、これでも問題ないけどさ。
普通は空要素用の閉じ方をするよな……。
スタイルシートの読み込みはそうなってるし。

まあ、いいか。



5 ソースコードの書き方


では、実際にライトボックスを画像に適用しましょう。

まず、HTMLタグを編集できる状態でブログを書いてください

ライトボックスを使うには、画像のHTMLタグをいじる必要があります。
そもそもHTMLを使えないブログ(ヤ○ーとか)や、HTMLタグをいじれない編集モードではライトボックスを使うことができません。

と言っても、そんなに難しいことはしないけど。

画像のタグっていうのは、

<img src="画像のURL" alt="画像の説明文" />

大体こんな感じ。
ライトボックスを使うには、ここにいくつか書き足してやる。
まず、画像を貼るだけでなく、画像へのリンクも必要になります。
リンクに使用するタグは、<a>ですね。
更に、href属性を使ってURLを指定します。

<a href="http://***">りんくだよー</a>

リンクを張る場合のタグは、こんな感じになります。
文字列「りんくだよー」を<a>と</a>で括ることで、「りんくだよー」の部分がリンクとして機能するようになります。
これを画像に対して行います。
且つ、a要素の中にライトボックスを使うための記述を書き足してやればOK。
こんな感じになります。

<a href="画像のURL" rel="lightbox" title="画像下部に表示されるテキスト"><img src="画像のURL" alt="画像の説明文" /></a>

以上。


上手くいかない時は、
  • 記号が全て半角になっているかどうか
  • 属性(altとかrelとか)が半角スペースで仕切られてるかどうか
  • 必要な記号が抜けてないか
などをチェックしてみてください。





つーわけで、終わり。
質問は、コメントでどうぞ。

……読んでいる人が、いればの話だがな!


関連記事
スポンサーサイト

2014-03-07 : ホームページ・ブログ制作 : コンピュータ : 未分類 : コメント : 0 :
Pagetop
コメントの投稿
非公開コメント
 ※非公開コメントは受け付けておりません


 ※投稿されたコメントは、管理人の承認後に表示されます
 ※スパム、または誹謗中傷やその他不適切な内容を含むと管理人が判断したコメントは、承認せず削除することがあります

 ※現在、試験的に承認制を解除しているので、コメントは投稿後すぐに表示されます
 ※FC2ブログの仕様により、想定外の文言が禁止ワードに引っかかって投稿できない時があります

Pagetop
« next  ホーム  prev »

お知らせ & 独り言

貴方はもう、
独りなんかじゃない。
魔法戦士のたまり場
素敵な仲間が、
貴方を待っているよ。

学ラン、詰襟、ヒャッハー!


今のお気に入り。


せっかくのドゥドゥ弱体なので、ダガーとTマシ新調した上にスキル振り直してツインガンダガー完全リニューアルした。リミブレチェインから何をやるか考え中。暫定でシンフォ→ワルツ→ノクターン。どこまでチェインが乗ってるかはわからん。
尚、ダガーはサイカ・ヒョウリを使用。固有のメギバのおかげでガルミラなしでも空中回復できるぜヒャッハー!
あと、ツインガンダガーはやっぱりかっこよくて楽しいです。


どうもアイテムパックが窮屈だなと思って、ちょっと内訳を確認してみた。

武器:13
ユニット:3
リング:2
コス:38(パーツ含む)
武器迷彩:13
ギャザ消耗品:4
雑貨(ムーンその他):9
合計:82/150

所持品の半分以上がオシャレ用品(コス+迷彩)であると判明。最大値の150から比較しても、3分の1がオシャレ用品。だって、女の子だもんっ!(ぶりっ子訓練中)
地味に武器の多さも見逃せないが、これくらいはアークスの嗜みとしては普通だよね。


やっとBrのクラスキューブ終わったー! 次はBoだぜ。武器も新調したし、久しぶりだから少し楽しみなのです。


健康って大事だなって、ホント思う。身体壊したら何にもできないからね。この身体さえ回復してくれれば、ブログの再開だってできるのに。


引退宣言みたいな感じの記事書いてますが、ゲームは細々と続けてます。
しかし、ツイッター封印しただけでもブログ書きたい気分が急上昇するね。いや、元々やる気だけは充分あったのよ。ホント、時間と体力の問題だけ。


ドゥドゥが弱ってたから、新しいブーツとDB買って叩いた。
無心の型がウチの子のプレイスタイルにハマりすぎてて笑うしかない。
リンドクレイの第二潜在とかが無心になったら、ガチで悩むレベル。


リンクページに友の会メンバーnanabachさんのブログを追加しました。

現在、試験的にコメント承認制を解除しています。
ついでに、左側のプラグインエリアに「最新コメント」を追加しました。

リンクページ新設。
それに伴い、グローバルナビゲーションに「リンク」を追加。

サイトをちょっぴり改装。
こういうタイトル画像、やってみたかったんだよね。

「法撃付き武器一覧」
を更新しました。

「法撃付き武器一覧」
を更新しました。

「法撃付き武器一覧」
を更新しました。

「コメント」をクリックしてもコメント欄にジャンプしない不具合を修正。

重たい記事が下がったので、記事の表示件数を元に戻しました。

「法撃付き武器一覧」
を更新しました。

魔法戦士まとめ(EP2)
脱稿しました。
ページが妙に重いので、記事の表示件数を減らしました。

魔法戦士まとめ(EP2)
の執筆中です。

「法撃付き武器一覧」
を更新しました。

「法撃付き武器一覧」
を更新しました。

IEでレイアウトが大幅に崩れていた不具合を修正。
カテゴリリンク、メニューバーに
「魔法戦士と弟子S」を追加。

「魔法戦士と弟子S」第三回
の製作に入りました。
ということを、更新停滞の言い訳にしてみる。
まあ、誰も待ってないけど。

新コンテンツ
「魔法戦士と弟子S」
始めました。
会話文形式の日記になっています。

新しいコンテンツの準備中につき
更新が停滞しております。
ちなみに、予定している新コンテンツは 役に立つものではありません。

「おすすめ記事」
を設置してみたよ。
下↓にあります。

「法撃付き武器一覧」
を更新しました。

ちょっとずつ進めてちょっとずつ更新する予定だった
「ダルスソレイド強化計画」
が完了してしまったので更新。

「ダルスソレイド強化計画」
を、
進行状況に合わせて更新中。

PSO2小説
「モニカにお仕置き」
を掲載。
私の笑いのセンスは
少しズレている、ということを
久々に思い出した。

.
.

ゆっくりしていってね。

初めての方は、
このブログについて
からご覧ください。

このブログで使われているゲーム画像の著作権は、以下に帰属します。 (c)SEGA PANTSYSTAR ONLINE2
ブログパーツ
-法務省 ネットによる人権侵害に関する広告

プロフィール

刃渡まつり@PSO2

name : REIKA
class : 魔法戦士(Hu/Te)
ship : 6
team : 劇団ロンリースター
ブログ管理人 : 刃渡まつり

PSO2で魔法戦士やってます。

みんなの最新記事

法撃と双刃剣

    ドゥドゥモア6号店

      TeBrでぶらりPSO2