人気ブログランキングへ FC2 Blog Ranking ブログ王ランキングに参加中!JRANK人気ブログランキング 大学生ブログ選手権 にほんブログ村 アフィリエイト
せどりとアフィリエイトを実践し実際に稼いでいき、発展していく過程を描いていくいそけんの日記です。あなたにも富と幸せを・・・
いそけんのオススメ情報♪
無料レポートをダウンロードする前にこちらを見てフリーメールアドレスをGET!
(↓詳細はこちら↓)
無料レポート用のフリーメールアドレスを効果的に取得する方法

アクセスアップに悩んでいる方へ…これがあれば百人力です!!
(↓詳細はこちら↓)
アクセスアップに悩んでいるあなたへ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
[ --/--/-- --:-- ] スポンサー広告 | TB(-) | CM(-)

FC2ブログで同じ窓で画像を大きく出す方法

みなさん、こんにちは!いそけんです。
今回の記事は、私の備忘録と情報共有を
兼ねて、

『FC2ブログで同じ窓(ウィンドウやタブ)で画像を大きく出す方法』

ということで書いて行きたいと思います。

尚、FC2ブログとは書きましたが、ブログのHTMLを少し変えるという作業になりますので、他のブログでも恐らく応用は可能と思われます。

※但し、私は確認したことが無いので、あなた自身でそれはお確かめ下さい。

では、かなり長い作業となりますので、そのつもりで着いて来てください。

(私は3時間掛かりました・・・_| ̄|〇)

まずは実践するとどうなるかとお見せすると、
48koutei01_l.jpg
こちらは別窓で出てきたと思われます。


48koutei01_l.jpg
こちらは同じ窓で出てきたと思われます。

更に、画像のHTMLの設定を少し変えると、画像をクリック後、その左右にマウスを持っていくと、『<』や『>』とスライドショーのように画像を連続させて出すことが出来ます。

雲と青空新緑11スペイン 壮大な大地と太陽

では、前置きはここらへんにして、始めたいと思います。

【手順0】ブログのテンプレートのHTMLをまずメモ帳等にバックアップしておきます。

コピペして保存してください。

環境設定 ⇒ テンプレートの設定 ⇒HTML編集


にて、HTMLの項目を全てコピペします。

【手順1】Lightbox2を下記サイトからダウンロードします。

(↓クリック)
・Lightbox2のサイト
http://lokeshdhakar.com/projects/lightbox2/

今回のバージョンはLightbox2.6です。

保存場所はとりあえず、デスクトップでよいでしょう。

【手順2】ダウンロードした後、ファイルの選別を行います。

Lightboxの画像


ダウンロード後、この様に、5つのファイル、フォルダがダウンロードされます。

使うファイル
 cssフォルダ内
 ・lightbox.css
 ・screen.css 
計2点

 imagesフォルダ内
 ・close.png
 ・loading.gif
 ・next.png
 ・prev.png 
計4点

 jsフォルダ内
 ・jquery-1.10.2.min.js
 ・lightbox-2.6.min.js
 ・modernizr.custom.js
 計3点

ということで、上記以外のファイルは不要ですので、削除して構いません。

【手順3】imagesフォルダ内のgifデータを、ブログにアップロードします。

Lightboxの画像(imgフォルダ内)


画面は縮小版で表示させています。

・close.png
・loading.gif
・next.png
・prev.png

はブログのパーツになります。

アップロード後、上記のパーツのURLをメモ帳等にコピペして
下さい。
ブログアップロードファイル(URL確認用)

すると、こういうURLになっているはずです。
(例)
http://blog-imgs-59.fc2.com/i/s/o/isokennoaffiliate/close.png

例としてclose.pngのURL確認方法を出しましたが、
他のloading.gif、next.png、prev.pngにもURLをメモ帳等に
コピペして下さい。

【手順4】cssフォルダ内、lightbox.cssのデータを一部編集します。

メモ帳で行ってもいいのですが、大変なことになります・・・
Lightboxのファイルをメモ帳に・・・

字ばっか!!!( ̄□ ̄;


もう少しやりやすいと思われるものをご案内します。
下記をダウンロードしてください。

(↓クリック)
・TeraPad(フリーソフト)
http://www.forest.impress.co.jp/library/software/terapad/

これはメモ帳が進化したものです。

TeraPadをダウンロードしそれを開いた後、cssフォルダ内、lightbox.cssを
TeraPadにドラッグ&ドロップします。


すると、こういう風に変わるはずです。
LigtboxのファイルをTeraPadに・・・


メモ帳と違い、行数表示もあってすっきりしたと思います。そして、先ほどのTeraPad内にドラッグ&ドロップしたlightbox.cssの下記の箇所を、手順3でコピペしたURLに置き換えます。

TeraPadの検索を使うとやりやすいです。使い方はメモ帳とほとんど変わりありません。尚、行数を書いていますが、Lightboxのバージョンによって違ってくることが考えられますので、目安とお考え下さい。

※今回はLightbox2.6で実施しています。

・close.png
(置換前)
(3行目):content: url(../img/close.png)
(191行目):background: url(../img/close.png)

(置換後:私の例です)
(3行目):content: url(http://blog-imgs-59.fc2.com/i/s/o/isokennoaffiliate/close.png)
(191行目):background: url(http://blog-imgs-59.fc2.com/i/s/o/isokennoaffiliate/close.png)

・loading.gif
(置換前)
(3行目):url(../img/loading.gif)
(87行目):background: url(../img/loading.gif)

(置換後:私の例です)
(3行目):url(http://blog-imgs-59.fc2.com/i/s/o/isokennoaffiliate/loading.gif)
(87行目):background: url(http://blog-imgs-59.fc2.com/i/s/o/isokennoaffiliate/loading.gif)

・next.png
(置換前)
(3行目):url(../img/next.png)
(136行目):background: url(../img/next.png)

(置換後:私の例です)
(3行目):url(http://blog-imgs-59.fc2.com/i/s/o/isokennoaffiliate/next.png)
(136行目):background: url(http://blog-imgs-59.fc2.com/i/s/o/isokennoaffiliate/next.png)

・prev.png
(置換前)
(3行目):url(../img/prev.png)
(126行目):background: url(../img/prev.png)

(置換後:私の例です)
(3行目):url(http://blog-imgs-59.fc2.com/i/s/o/isokennoaffiliate/prev.png)
(126行目):background: url(http://blog-imgs-59.fc2.com/i/s/o/isokennoaffiliate/prev.png)

上記、書き換え終了後、TeraPadをそのまま上書き保存してください。保存が終わったら閉じましょう。

【手順5】jsフォルダ内のファイル名をFC2ブログ用に変更する

FC2ブログで『/(スラッシュ)』や『.(ピリオド)』を含めてアップロードは
出来ません。
しようとすると・・・

ファイルアップロード時のエラー


なんて拒否られてしまいます(笑)

そこで、
 ・jquery-1.10.2.min.js

 ・lightbox-2.6.min.js

 ・modernizr.custom.js
計3点のファイル名を上記のエラーが出てこないように変更します。
(下記は変更例です)

jquery-1.10.2.min.js ⇒ jquery-1-10-2-min.js

lightbox-2.6.min.js ⇒ lightbox-2-6-min.js

modernizr.custom.js ⇒ modernizr-custom.js

ここでは、『.(ピリオド)』を『-(ハイフン)』に変更しています。

【手順6】css、jsフォルダ内のファイルを全てアップロードします。


ここでも、アップロードをした後、そのURLをメモ帳等にコピペをしてください。

・cssフォルダ内(私の例です)
lightbox.css ⇒ http://blog-imgs-59.fc2.com/i/s/o/isokennoaffiliate/lightbox.css

screen.css ⇒ http://blog-imgs-59.fc2.com/i/s/o/isokennoaffiliate/screen.css

・jsフォルダ内(私の例です)
jquery-1-10-2-min.js ⇒ http://blog-imgs-59.fc2.com/i/s/o/isokennoaffiliate/jquery-1-10-2-min.js

lightbox-2-6-min.js ⇒ http://blog-imgs-59.fc2.com/i/s/o/isokennoaffiliate/lightbox-2-6-min.js

modernizr-custom.js ⇒ http://blog-imgs-59.fc2.com/i/s/o/isokennoaffiliate/modernizr-custom.js

【手順7】ブログのテンプレートのHTMLを編集します。

下記HTMLの赤字部分を【手順6】でメモしたURLに置き換えます。

※ブログへの表示の問題上、先頭の『<』、最後尾の『>』は全角に
なっていますのでご注意下さい。

(置換前)
<link href="css/lightbox.css" rel="stylesheet" />

<script src="js/jquery-1.10.2.min.js">

<script src="js/lightbox-2.6.min.js">


(置換後)
<link href="http://blog-imgs-59.fc2.com/i/s/o/isokennoaffiliate/lightbox.css" rel="stylesheet" />

<script src="http://blog-imgs-59.fc2.com/i/s/o/isokennoaffiliate/jquery-1-10-2-min.js">

<script src="http://blog-imgs-59.fc2.com/i/s/o/isokennoaffiliate/lightbox-2-6-min.js">

パスとファイル名を先ほどアップロードした風に編集します。これをブログのテンプレートのHTMLに追記します。

FC2ブログのテンプレートのHTMLは、
環境設定 ⇒ テンプレートの設定 ⇒HTML編集


で可能です。

テンプレート内の<head>~</head>の間に、置換後の
上記3行を追記
します。私は</head>のすぐ上に追記しました。

※ブログの表示の問題上、『<』、『>』は全角のものを使用しています

【手順8】画像をブログ記事に貼り付ける際、元画像にリンクする設定にしておく。

環境設定 ⇒ ブログの設定 ⇒ 投稿設定

にて、画像のリンクを『元画像にリンクさせて』に変更します。
FC2ブログ投稿設定


変更後、『更新』ボタンをを押すのを忘れずに。

【手順9】画像をブログ記事に貼り付ける際、タグを変更します。

例えば、下記の画像を上げる際、下記のタグを使用しています。
(別窓で開きます)
48koutei01_l.jpg

(タグ)
<a target="_blank" href="http://blog-imgs-59.fc2.com/i/s/o/isokennoaffiliate/48koutei01_l.jpg"><img width="372" height="360" border="0" alt="48koutei01_l.jpg" src="http://blog-imgs-<br /><br />59.fc2.com/i/s/o/isokennoaffiliate/48koutei01_l.jpg" /></a>

※ブログの表示の問題上、『<』、『>』は全角のものを使用しています。

このtarget="_blank"rel="lightbox"

に変更します。ちなみに『target="_blank"』は別窓を使って表示させる』という意味になります。別窓で開かれるのはこれが原因なんですね。

これを『rel="lightbox"』に(『lightboxに関連づける』という意味でしょうか)
変えると、lightboxを使って、同じ窓にて表示させることが出来ます。

更に、最初の方で上げていた、画像を連続させて表示させる方法ですが、これもタグの変更で可能です。
雲と青空新緑11スペイン 壮大な大地と太陽

(タグ)※ブログの表示の問題上、『<』、『>』は全角で記載しています
<a href="http://blog-imgs-59.fc2.com/i/s/o/isokennoaffiliate/201401221457138e5.jpg" rel="lightbox[photo]2"><img src="http://blog-imgs-59.fc2.com/i/s/o/isokennoaffiliate/201401221457138e5s.jpg" alt="雲と青空" border="0" width="50" height="33" /></a>

<a href="http://blog-imgs-59.fc2.com/i/s/o/isokennoaffiliate/2014012214571555d.jpg" rel="lightbox[photo]2"><img src="http://blog-imgs-59.fc2.com/i/s/o/isokennoaffiliate/2014012214571555ds.jpg" alt="新緑11" border="0" width="50" height="33" /></a>

<a href="http://blog-imgs-59.fc2.com/i/s/o/isokennoaffiliate/20140122145716459.jpg" rel="lightbox[photo]2"><img src="http://blog-imgs-59.fc2.com/i/s/o/isokennoaffiliate/20140122145716459s.jpg" alt="スペイン 壮大な大地と太陽" border="0" width="50" height="33" /></a>

上記はサムネイルにて表示させていますが、画像名は変えなくとも、『rel="lightbox[photo]2"』という風に、lightboxに関連づけて(『rel="lightbox』の部分)、『photo2』というグループにまとめる([photo]2の部分)というタグに変えることで可能です。

ちなみにこの『[photo]2』というグループ名は任意のものに変えることが可能です。

更に、この画像の下部にタイトルやコメントをつけることが可能です。
雲と青空新緑11スペイン 壮大な大地と太陽

(タグ)※ブログの表示の問題上、『<』、『>』は全角で表示しています。
<a href="http://blog-imgs-59.fc2.com/i/s/o/isokennoaffiliate/201401221457138e5.jpg" rel="lightbox[photo]" title="雲と青空きれいです"><img src="http://blog-imgs-59.fc2.com/i/s/o/isokennoaffiliate/201401221457138e5s.jpg" alt="雲と青空" border="0" width="50" height="33" /></a>

<a href="http://blog-imgs-59.fc2.com/i/s/o/isokennoaffiliate/2014012214571555d.jpg" rel="lightbox[photo]" title="新緑きれいですね"><img src="http://blog-imgs-59.fc2.com/i/s/o/isokennoaffiliate/2014012214571555ds.jpg" alt="新緑11" border="0" width="50" height="33" /></a>>

<a href="http://blog-imgs-59.fc2.com/i/s/o/isokennoaffiliate/20140122145716459.jpg" rel="lightbox[photo]" title="壮大なスペインの大地と太陽"><img src="http://blog-imgs-59.fc2.com/i/s/o/isokennoaffiliate/20140122145716459s.jpg" alt="スペイン 壮大な大地と太陽" border="0" width="50" height="33" /></a>

タイトルの付け方ですが、『(半角スペース)title="つけたいタイトルやコメント"』を追記することで可能です。


もし、上記を色々と試したが上手くいかないという場合ですが、タグのどこかが狂ってしまっていることが考えられます。

例:
コピペの間違い、コピペした部分が一部欠けている・・・など


もし挑戦される場合は、時間が掛かってもいいくらいの気持ちでじっくり行ってみることをオススメします。一つ一つを確認しながらこなしていくのが良いと思われます。

では、もし挑戦をされるのでしたら、あなたの成功を祈っています。

以上、本当に長くなりましたが、ご参考になれば幸いです。

【龍の絵以外の画像について】
(↓詳細はこちらへ)
・無料写真フリー素材「写真AC」

にてダウンロードした写真を利用しています。

【参考資料】
(↓詳細はこちらへ)
・FC2ブログで画像を拡大表示する
・Lightbox2 (v2.51) 設置方法



あなたにも富と幸せを・・・

↓もし、『読んでよかったぁ♪』と思われたら、こちらをクリックしてくださいませ
[ 2014/01/22 17:42 ] 作業記録 | TB(0) | CM(0)
コメントの投稿












管理者にだけ表示を許可する
トラックバック
この記事のトラックバックURL

Book Mark !
※IEでは動作確認済みです。 もし他のブラウザ(Firefox、Googlechrome等)をお使いであれば、『ctrl+D』 でもブックマーク可能です。 (Windowsマシンの場合)
プロフィール

いそけん

Author:いそけん
人生一旦どん底まで落ちて、迷い迷って、アフィリエイターとしての道にたどり着きました。アフィリエイターとして今後活躍し、社会に貢献できるようになるよう頑張って行きたいと思います。

いそけんにメールしたい方はこちらへ♪
お問い合せ
相互リンクOKです!
ソーシャルブックマーク
カレンダー
08 | 2017/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
最新トラックバック


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。