新生エオルゼア アワワ日記

おもに新生FF14を盛っていく日記

スポンサーサイト

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

別ウィンドウを開かず画像を拡大する方法 FC2ブログ

ブロともの皆さんで気が付いた人もいるかもしれませんが、

ブログの写真拡大表示できるようにしました しかも・・・

別ウィンドウを開かずに画像を拡大します。

サンプル画像サンプル画像サンプル画像 サンプル画像





え?FF14に関係ない?
うん!そうだよ^-^


でも~~~

でも~~~


そんなの関係ねぇーーーーー!!!


・・・わかった。
しょうがねぇから読んでやるよって方は続きを~
読んでくれて有難う御座います~


ぶっちゃけ苦労しました・w・
いろんなサイトをウロウロキョロキョロしながら2時間かけてようやく\・д・;
なんにも観ないでもう一回やれって言われたら・・・・ムリだ。


じぶんのメモ用として残しておこうかと思います。
チャレンジされる方は、どうぞ^-^



最初に必要な物がいくつかあります。(お金かからないよ
 1:画像を拡大するツール
 2:テキストエディタ
 3:投げ出さない心


拡大ツールに関しては、Lightbox Plus(ライトボックス プラス)というのがベター?ベスト?なようです。

こちらに張っておきます。サイトの下にある灰色のDLボタンをポチっとしてください。 → 「Light box


テキストエディタは、すでにあるようでしたらそれを使ってください。
自分は、持っていませんでしたので、フリーの物(tera pad)をDLしました。→「Tera Pad



では、ここから手順の説明~


ダウンロードした「Lightbox Plus」は圧縮されてますので展開します。

すると・・


lightbox_sampleフォルダの中の sampleの中に4つのフォルダがあります。


この4つのフォルダの中で、実際に自分のブログで画像拡大表示するのに必要なのは、「resource」フォルダ1つだけです。(残りの3つのフォルダはいらないので削除しちゃってください)



次にresourceフォルダを開きます。
resourceフォルダの中に13個のファイルがあります。


上記画像では10個しかファイルはありません。13個のファイルのうち3つがさらに不要ですので「削除」します。
具体的には、
jojo.css
sample.css
lightbox_plus_min.js が不要なので削除。

そうすると上記画像のような形になります。(13個のままでも問題はありません)


次に、

resourceフォルダ内のファイルをFC2ブログの管理画面>ファイルアップロードでアップロードします。
(ブログに写真を掲載する要領と同じです)

全てのresourceフォルダ内のファイルをアップロードが完了したら、URLを控えておきます。
(メモ帳にコピー&ペーストでおk)



どんどんいきますよ。次に、

テキストエディターを起動して、「lightbox_plus.js」を開きます。
(この時、ファイルの種類はすべてのファイル、もしくはJvaScriptにしないと出てこないですよ)

開くとこんなカンジのが出てきます。


これの一番下へスクロールしていく

この画像で言うと

1023行目のloadingimg:'resourece/loading.gif',
1024行目のexpandimg:'resource/expand.gif',
1025行目のshrinkimg:'resource/shrink.gif',
1026行目のblankimg:'resource/blank.gif',
1027行目のprevimg:'resource/prev.gif',
1028行目のnextimg:'resource/next.gif',
1029行目のcloseimg:'resource/close.gif',
1030行目のeffectimg:'resource/zzoop.gif', 


のテキストの青文字で書かれている部分を先程アップロードして控えてもらったURLに書き換えます。

例えば、、、

アップロードした「loading.gif」ファイルのURLが
「http://blog-imgs-50.fc2.com/f/f/1/ff14spa/loading.gif」だった場合は

【変更前】
loadingimg:'resourece/loading.gif',
 ↓
【変更後】
loadingimg:'http://blog-imgs-50.fc2.com/f/f/1/ff14spa/loading.gif',

・・・・となります。

これを1023行目から1030行目(上記画像の場合)までをそれぞれに書き換えてください。


そうするとこんなカンジなるはずなのでこれを上書き保存します(下記画像は参考画像です)


保存が終わったら、たった今書き換えが終わった「lightbox_plus.js」ファイルを
サイト(FC2ブログ>管理画面>ファイルアップロード)にアップロードします。

アップロード終了後、「lightbox_plus.js」ファイルのURLを控えときます。


もうちょいでおわります。がんばろ~


次に、
管理画面からテンプレートの設定で、HTML編集の<head>から</head>の間に以下のテキストを入れてください。

<link rel="stylesheet" type="text/css" href="【始めの方にアップロードした「lightbox.css」ファイルのURLをここへ入れる】" media="screen,tv">
<script type="text/javascript" src="【さきほどアップロードした「lightbox_plus.js」ファイルのURLをここへ入れる】"></script>


例えば・・・

アップロードした「lightbox_plus.js」ファイルのURLが
『 http://blog-imgs-50.fc2.com/f/f/1/ff14spa/lightbox_plus_201307071555550.js 』だった場合は

<script type="text/javascript" src="http://blog-imgs-50.fc2.com/f/f/1/ff14spa/lightbox_plus_201307071555550.js"></script>


・・・・となります。(上のコードは<>が全角になっています。コピペ後、半角に直してください)

これで下準備は終わりになります。お疲れ様でした~



ここからは画像の貼り付け作業になります。(サムネイル作成ってかんじ?)
(下記HTMLは< >を全角表示してます。実際は半角にしてください)

<a href="拡大したい画像URL" rel="lightbox">
<img src="小画像として表示したい画像URL" width="120" height="96" alt="画像タイトル"></a>


この rel="ligtbox" が重要です。忘れないようにしてください。


さらに・・・
拡大表示したい画像が5枚あるとして、拡大表示させた画像の横に矢印ボタンで順番に拡大画像を観ていくことも可能です。

それには・・・・
上記HTMLの rel="lightbox[1]"と入れると[1]と数字を入れた画像がスライドショーのようなカンジでみれます。
カギカッコの中は数字でなくても[ff14おふざけSS]などの名称でも構いません。
これを使うことで画像のグループ分けを行うことが可能です。


さらに・・・
rel="lightbox" を画像を張る度に入れるのはメンドイ、昔からUpしてきた画像がたくさんで、1個ずつ入れるのはムリじゃー!って人は、、

1)lightbox_plus.jsをテキストエディタで開く。

2)301行目、もしくはCtrl+Fで検索

3)if (!anchor.getAttribute("href") || !rel.match('lightbox')) continue;
   ↓のように書き換えましょう
4)if (!anchor.getAttribute("href")) continue; if (!anchor.getAttribute("href").match(/.+(jpg|gif|png)$/i)) continue;

これでいちいち書き込まなくても良いはずです。(タブンネ

以上で終わりになります。
長々とお付き合い有難う御座いました。
本当にいろいろなサイトを参考にさせて頂きました。有難うございました。


なお、主な参考サイトは後日リンクさせて頂こうかと思います。
スポンサーサイト
  1. 2013/07/09(火) 00:06:15|
  2. FF14
  3. | トラックバック:0
  4. | コメント:1
<<次回でフェーズ3&クローズドβテスト終了 | ホーム | 今日の1枚- - 2枚追加 - ->>

コメント

こんにちは。
詳しい説明を
ありがとうございます。
今、挑戦中です~。
  1. 2013/12/20(金) 13:14:22 |
  2. URL |
  3. kikilala #4f8DQDfI
  4. [ 編集 ]

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://ff14sparx.blog.fc2.com/tb.php/40-e86709a8
この記事にトラックバックする(FC2ブログユーザー)
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。