ブログパーツ

趣味の工房

ブログの画像表示をスタイリッシュに♪【Light Box】

みなさん、こんばんは


ちょくちょくお世話になっている、techPowerUP!さんでも使用されているんですが、記事中のサムネイル画像をクリックすると、そのウィンドウ内で「にゅいーん」と拡大表示されます。

これ、カッコイイ!!

と思ってたんですが、通常、FC2ブログでは、サムネイルをクリックすると、その画像へのリンクしてページが切り替わるか、新しいウィンドウ(またはタブ)で表示されてしまいます。

以前、コチラの記事にて、サムネイル画像をクリックするとその画像ではなく別のURL(本家サイト)などにリンクできるワザをご紹介しましたが、全部が全部他のサイトへのリンクというわけでもありません。(多いのは確かですが)
画像へのリンクはこれでスタイリッシュに魅せることにしましょう(笑)



まぁ説明はさておき、実際どうなるかというと。
今までの画像リンクの場合(画像をクリックしてください)
2011y04m10d_094125171.jpg

適用後(画像をクリックしてください)
2011y04m10d_094125171.jpg
※注)現在は【Colorbox】を導入しているため、【Colorbox】での表示になっています。
   【Colorbox】の導入方法は→コチラ

いいじゃないの♪w


これを導入するには、【Light Box】というツールを使用しますが、これを導入するに関しては、そのツールの一部と、FC2ブログのテンプレートを少々いじる必要があります。
導入には手間がかかりますが、一度設定してしまえば、後は画像を挿入した後にすこし修正をするだけで簡単に行うことが出来ます。

すでに「Light Box FC2」などで検索すれば山のようにHITしますが、一応UPしておきます。
少しアレンジをすれば、他のブログでも可能かと思われますので、気になった方はチャレンジを。

ただし上記したようにテンプレートもいじることになるので(追記をするだけですが)、念のためテンプレートのバックアップをとっておいた上でやられたほうがいいと思います。

※当記事を参考にしたことにより発生したいかなる不具合においても当方では
 責任を負いかねますのでご了承ください。



長くなりますので、続きは以下から...
「続きを読む」


【追記】
第2弾として【Colorbox】の記事をUPしました。
記事はコチラ
コチラは動作も軽く、カスタマイズも多様なのでオススメです。



ランキングに参加しております。クリックにご協力を♪
にほんブログ村 PC家電ブログ 自作PCへ
にほんブログ村





FC2ブログにLight Boxを導入する


※以下の点について、ご了承願います。
 OSがWindowsである前提で書かせていただきます。
 自分はスクリプトやHTML記述に対してほとんど素人同然です。
 突っ込んだ質問等にはお答えできません(苦笑)
 あくまで、「こうやったらとりあえず動いた」程度のものですので、参考にされる際は
 慎重におこなってください。(爆)
 参考にされたことによる不具合等については一切責任は持てません。

○【Lightbox v2.05】のダウンロード
まずは、コチラのサイトから【Lightbox v2.05】をダウンロードします。
2011y04m11d_174950790.jpg
①のダウンロードをクリックし、②のタイトルクリックでダウンロード。
※画像クリックでダウンロードのページへ。


ダウンロードしたファイルは「.zip」の圧縮ファイルになっていますので、すべて展開すると、中身にはこんなものが入っています。


2011y04m11d_180533826.jpg



この中の「__MACOSX」というフォルダと、「index」というファイルは使いませんので先に削除しちゃいましょう。紛らわしいので(; ̄ー ̄A
※「index」ファイルはお使いのブラウザによってアイコン画像が違うかもしれません。



○スクリプトファイルの修正
次に、「css」フォルダ内の「lightbox」ファイルを開きます。1つしかないので間違うことはないでしょう。
右クリック→「プログラムから開く」→ワードパッド
で開くことが出来ます。
011y04m11d_181450714.jpg

ちなみにダブルクリックや右クリックから「メモ帳」でも開けますが…
こんなん出てきます Σ( ̄Д ̄lll)なんじゃこりゃ…
2011y04m11d_182237845.jpg
とても見づらいので、ワードパットのほうがオススメです。

ワードパットで開くと…
2011y04m11d_183424441.jpg
見やすいですね~☆.。.:*(嬉´Д`嬉).。.:*☆
…実はボクはメモ帳でやった後に気づきました(爆)


ワードパットで開いたら、ここの一部を書き換えます。
書き換えるのは以下の2箇所。
011y04m11d_184058206.jpg

真ん中くらいにある

#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }


の赤い箇所、「../images」を、ブログのイメージファイルへのURLに書き換えます。
※ブログのURLではないので注意です。


ブログのイメージファイルへのURLを調べるには…
2011y04m11d_191343410.jpg

ご自身のブログ上の画像を右クリック→「画像だけを表示」を選択します。


画像が表示されたら、上のアドレスバー(URLが表示されるところ)に注目。
2011y04m11d_191400999.jpg

この場合は、

http://blog-imgs-34.fc2.com/r/i/k/rikuntyudady/2011y04m10d_094125171s.jpg

の黄色の部分がブログのイメージファイルのURLになります。
(最後の「2011y04m10d_094125171s.jpg」はファイル名)
他の画像でも確認してもらうとわかりますが、(FC2ブログの場合)この部分は共通になっています。

実際に書き換えると…こんな感じです。
2011y04m11d_194838094.jpg
※書き換えた最後の部分に「/」が重ならないように(//とかになっていないか)
 注意しましょう。

書き換えたら上書き保存をして閉じます。(左上のフロッピーマーク)



次に、今度は「js」フォルダ内の「lightbox」ファイルを開きます。
2011y04m11d_195513736.jpg

これを開く場合、右クリックしても「メモ帳」も「ワードパット」も出てきてくれません
ので、メモ帳を開いておいて、そこにドラッグ&ドロップをします。


フォルダ内(というかどこでもいいんですが)で
右クリック→「新規作成」→「テキストドキュメント」を選択。
2011y04m11d_200101172.jpg
※テキストドキュメントはいわゆるメモ帳。リッチテキストドキュメントはワードパット
 なんですが、今回はワードパットでは都合が悪いので注意。


作成できたら、「新しいテキストドキュメント」を開き、その中にドラッグ&ドロップします。
2011y04m11d_200129443.jpg


開きました。Σ( ̄Д ̄lll)うげ。
011y04m11d_200932601.jpg

超わかりづらいですが…上から数行目の
/// Configurationl //(目印)の後にある

LightboxOptions = Object.extend({ fileLoadingImage: 'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif',




という文字列を探し、赤色部分「images」を先ほどと同じようにブログのイメージファイルへのURLに書き換えます。
書き換え後はこんな感じ。
2011y04m11d_202931009.jpg
※表示では変なところで改行されているように見えますが、コピー&ペーストしたので
 間違いありません。

コチラも書き換えたら同じく上書き保存して閉じます。



○必要なファイルや画像のアップロード
さて、以上の書き換えが終わったら、ダウンロードした「lightbox2.05」フォルダ内の「css」「images」「js」フォルダ内のすべてをアップロードします。
(※ただし「images」フォルダ内の「image-1」「thumb-1」はサンプルなのでいらない)


アップはブログの管理画面からツールのアップロードで行います。
2011y04m11d_203844893.jpg

アップロード画面はいつもブログで画像をアップしているのと同じですので、わかると思います。




○テンプレートの複製と修正
さて、あと一息です。
ファイルのアップロードが完了したら、次はテンプレートに少し追加の記述を入れます。
最初にお話したように、念のため、現在使用しているテンプレートの複製を作ってから、そちらをいじるようにします。

2011y04m11d_204436028.jpg

ブログ管理画面の「環境設定」→テンプレートの設定を選ぶと、右側にテンプレートの一覧が出ます。
1つしか使っていない方は当然1つしかないと思います。
テンプレート名の横に旗が立っているのが、現在適用されているテンプレになりますので、その横の「複製」をクリックします。
すると、「○○(現在のテンプレート名)_1」というテンプレート名のものが作成されます。
※画像はすでに複製したものが適用されている状態です。

複製が出来たら、現在適用されているテンプレート名の横にある「編集」をクリックします。
(後から適用すれば別に複製したほうでも構いません)


2011y04m11d_204512740.jpg

上の画像にあるように、「(テンプレート名)のHTML編集」欄から</body>という表示を探します。
下のほうにあります。

その</body>のすぐ上に、以下の記述をコピペしてください。
※ただし赤文字は自分のイメージURLに変更してください。
 「/」がかぶらないように注意。

<link rel="stylesheet" href="http://blog-imgs-34.fc2.com/r/i/k/rikuntyudady/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://blog-imgs-34.fc2.com/r/i/k/rikuntyudady/prototype.js"></script>
<script type="text/javascript" src="http://blog-imgs-34.fc2.com/r/i/k/rikuntyudady/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="http://blog-imgs-34.fc2.com/r/i/k/rikuntyudady/lightbox.js"></script>





修正が終わったら、下の「更新」をクリックし、(適用されてないほうを修正した方は修正がすんだテンプレを適用して)終わりです。



Lightboxを使ってみる




では、実際に記事で使ってみましょう。
使い方はいつもどおりまず画像を挿入します。すると、本文の編集画面には例えば


<a href="http://blog-imgs-34.fc2.com/r/i/k/rikuntyudady/2011y04m11d_204512740.jpg" target="_blank"><img src="http://blog-imgs-34.fc2.com/r/i/k/rikuntyudady/2011y04m11d_204512740s.jpg" alt="2011y04m11d_204512740.jpg" border="0" width="564" height="599" /></a>



と表示されます。この赤文字の「target="_blank"」を削除し、変わりに

rel="lightbox"

と追加します。
さらにその後にtitle="任意のタイトル"を追加すると、ポップアップで表示された画像の左下にタイトルを追加できます。



つまり上の例であればこんな感じ。

<a href="http://blog-imgs-34.fc2.com/r/i/k/rikuntyudady/2011y04m11d_204512740.jpg" rel="lightbox" title="任意のタイトル"><img src="http://blog-imgs-34.fc2.com/r/i/k/rikuntyudady/2011y04m11d_204512740s.jpg" alt="2011y04m11d_204512740.jpg" border="0" width="564" height="599" /></a>





変更したら、プレビュー画面で確かめて見ましょう。ゎーィ♪ヽ(*´∀`)ノ


ちなみにボクは以前記事にした辞書登録を使って、「らいと」で「rel="lightbox" title="No Title"」に変換するようにしています。
2011y04m11d_221445902.jpg

「target="_blank"」をドラッグで反転させておいて、「らいと」で書き換えられるので楽チンです♪



手間はかかりますが、見栄えはよくなります。
気になった方はチャレンジしてみてください。

それでは。
ヽ(* ̄∀ ̄)**SeeYou**



【追記】
第2弾として【Colorbox】の記事をUPしました。
記事はコチラ
コチラは動作も軽く、カスタマイズも多様なのでオススメです。


ランキングに参加しております。クリックにご協力を♪
にほんブログ村 PC家電ブログ 自作PCへ
にほんブログ村








関連記事


    23:00 | Trackback : 0 | Comment : 12 | Top
Comment
2011.04.11 Mon 23:13  |  kkr #-
Light Boxかっこいいですよね!
僕も以前使ってました^w^v
でもやっぱり描画が微妙におそいかなーって感じて今はphotonoteっていうスクリプト使ってます@w@;
それにしてもパパさんのブログはお洒落だなぁ~
自分のブログみて寂しさを感じますw
  [URL] [Edit]
2011.04.12 Tue 00:54  |  STUDIO JC #-
高級感もありますね(*^_^*)
 
戻るボタンや、閉じなくてもいいので
見てる方も見やすいですね♪
 
導入が大変そうです(p_-)
  [URL] [Edit]
2011.04.12 Tue 20:30  |  kaku #-
こんばんは!

・・・むううう( ̄◇ ̄;)
かっこいいですね!
さすがFC2と言えます><b
  [URL] [Edit]
2011.04.12 Tue 20:48  |  と~やん。 #-
いいですね~♪ボクも似た感じのTIPS適用させてます(´▽`)

こういう効果ってブログが一気にバージョンアップしてく感じで好きです☆
あとは背景の繰り返し模様とか凝りだしたら止まりませんw
  [URL] [Edit]
2011.04.12 Tue 22:46  |  kaiten-sushi #VwhHdBBk
こんばんはです~

[Light Box ]って、こうやっていたのですね。
勉強になりました。
小生のブログでも使えたら使わせていただきます^^
「ほわっ」と出てきてクールです♪
  [URL] [Edit]
2011.04.12 Tue 23:08  |  りくんちゅ。パパ #-
>kkrさん

kkrさんも使われてましたか~。
確かに、少し重いですね( ̄∇ ̄;)
・・・ということで早速【Colorbox】に変えちゃいました(苦笑)


>それにしてもパパさんのブログはお洒落だなぁ~

ありがとうございます☆.。.:*(嬉´Д`嬉).。.:*☆
ちょっとずつテンプレもいじっているので、そういってもらえると嬉しいです♪



>STUDIO JCさん

導入は確かにめんどくさいです(; ̄ー ̄A
が、効果は(というか自己満足度)は高いですよ(笑)



>kakuさん

自分はFC2ブログしか知らないのですが、自由度は高いですね。
勉強しないと自由度の高さも生かせませんがw



>と~やん。さん

確かに面白いですよね~。
背景を「カーボン調」にしてみたんですが…イメージと違ったので直しました。
しばらく凝りそうですw


>kaiten-sushiさん

こんばんはー☆
導入はめんどくさいですが、効果はアリです。
kkrさんのとこにも書いたんですが、【Colorbox】のほうが少し楽チンで、カスタマイズも出来ます。
近日中にUPします。

  [URL] [Edit]
2011.04.13 Wed 04:21  |  Hide-Rocket #-
こんちはー☆

ワタシもちょっと前にlightboxではないですがポップアップ表示を導入しようとこころみました。。

ただkkrさんも仰っているように、少し重いのと・・
今自分のBlogはヘッダをランダム表示にさせているのですが

知識不足で共存出来なくって・・採用やめちゃいましたね~
でも非常に勉強になりました♪

【続きはコチラ】の使い方も非常に勉強になったので
またネタ仕入れられたらよろしくお願いします♪
  [URL] [Edit]
2011.04.13 Wed 19:01  |  りくんちゅ。パパ #-
>Hide-Rocketさん

こんばんはー☆
自分もほとんど知識がないので、導入までには何度も失敗しました。
(; ̄ー ̄A

もう1度1からやろうとしてもまた同じくらい時間がかかりそうな気も・・・
仕組みを理解しているわけではないので。( ̄∇ ̄;)
  [URL] [Edit]
2011.04.21 Thu 22:20  |  トマト #tbP3RbY6
あっちこっちページを参考にしては挫折し
あれだけ解説ページがあってもわからない!とイラっとしていたら・・・
すごいです。ここのページほどわかりやすく
しかも見やすいページありませんでした。

本当にありがとうございました。
あまりにうれしかったので一言お礼を・・・m--m
ありがとうございました。  [URL] [Edit]
>トマト さん

わざわざお礼をありがとうございます☆.。.:*(嬉´Д`嬉).。.:*☆
ボクもあっちこっちを参考にしたんですが、どうも途中が端折られていたりしていたので、一連でUPしました♪
実は3日くらいかけて書いた記事なので、お役に立てたのならとても嬉しいです♪

しかし…まことに恐縮ですが、今ボクは「Lightbox」ではなく「Colorbox」というスクリプトを使ってます。
どちらかというと、コチラのほうがオススメです(汗)

導入方法はほとんど同じですし、今まで「Lightbox」用に記述した記事の画像も同じように動作させられますので、機会があったら試してみてください♪

記事はコチラ。
http://rikuntyudady.blog101.fc2.com/blog-entry-445.html
  [URL] [Edit]
2012.03.07 Wed 22:13  |  akachan #.rEgMis2
色々なサイトをめぐりましたが、こちらが一番わかりやすかったです。
ようやく解決できました。
ありがとうございました!
参考になりました  [URL] [Edit]
akachan さん
お役にたてて何よりです♪
マニアックなブログですが、たまーに皆さんのお役にたてる(結果的に)記事が交じっているようです(爆)

わざわざお礼のコメント、ありがとうございました☆人´∀`).☆.。.:*

  [URL] [Edit]









(編集・削除用)


管理者にだけ表示を許可
Trackback
http://rikuntyudady.blog101.fc2.com/tb.php/444-e17fd0de
プロフィール

りくんちゅ。パパ

Author:りくんちゅ。パパ
初歩的な話からオーバークロックまで、PCに関することやその他趣味に関することを思い付きで書いています。
コメントはお気軽にどぞ。

「rikuntyudady」の名前で出没することもあります(笑)

rikuntyudady01.jpg

このサイトはFirefox,Google Chrome用に最適化されています。
IEでは一部表示が正しく行われない場合があります。
ご了承ください。


アクセスカウンター
signbot_20101017072856.gif
現在の閲覧者数:

galleryロゴ02
cmcrogo2.png
RikuntyudadyのCM690をUP!!
☆ただ今34台展示中☆



みんなのPC♪ギャラリーはコチラ。

Page 1 Page 2


Categories...

クリックで全て開閉↓

openclose


○自作をしてみたい方へ
○オーバークロックについて

「+」はフォルダクリックでOPEN

全ての記事を表示する


見つからない場合はコチラ
(記事内検索)

最新記事
最新コメント
☆MY GEAR☆
カスタマイズ工程はコチラ
画像
画像
画像
画像
画像
画像
画像
ATCS840
COSMOS II
CORE1500
MasterCase5Mod

<製作依頼PC>
画像
Overclock.net work log
MNPCTECH"Case Mod Blog"
画像
画像
【CORSAIR Vengeance® C70】
HAF X MOD

<コラボ企画> 画像
SNIPER
☆おもな活動サイト☆

Cooler Master Forum
CoolerMaster

techPoweUp! Case Mod Gallary-
techPowerUp!

Overclock.net
   -Case Mod Work Logs-
Overclock.net

Case Modding Forum
Case Modding Forum

こだわりの持ち物を登録しよう♪
2010y05m05d_221238218.jpg

Web page translation
THIS IS MY GEAR
2016y03m23d_233159886.png 2016y03m23d_233204419.png
感染者増殖中...
りくんちゅ。パパにメールする







本文:

☆掲示板☆

趣味の工房 ~みんなの休憩室♪~
お気に入りブログ♪
カメラ熱上昇中♪
【Canon】EOS 70D 70D.png ○レンズ
【Canon】
EF-S18-135mm F3.5-5.6 IS STM
EF-S55-250mm F4-5.6 IS STM 【SIGMA】
18-35mm F1.8 DC HSM|Art
APO 50-150mm F2.8 EX DC OS HSM


【Canon】G7 X canon_g7x_20150528010550367.png
☆広告☆
ブロとも申請フォーム
QRコード
QRコード
RSSリンクの表示