アクアラングウエスタンver.9.2

日記ならぬ月記あるいは年記さもなくば…

THE UNLIMITED 兵部京介 壁紙

大病を患い半年以上も更新を滞らせてしまった…
夕飯のお供に先日ようやく見終えた
THE UNLIMITED 兵部京介 がとても面白かったので
久しぶりに壁紙を作ってみた

1136×640


1392×744


1440×1280


実は 絶対可憐チルドレン を知らずに
スピンオフである当作品を見てしまったが
充分に面白くて見応えのある作品だった
しかしこれだけよく作りこまれた話にも係わらず
12話で終わらせてしまったのは実に惜しい
是非2期目をやってほしい大作だと思った
スポンサーサイト




  1. 2013/09/21(土)|
  2. 壁紙

Lightbox2 (v2.51) 設置方法

久しぶりに Lightbox を見たら
versionが随分と変わっていたので
改めて設置手順をのせたいと思う。

先ず Lightbox2のサイト からファイルをダウンロード。

現在は Lightbox v2.51 だ。

【1】
lightbox2.51.zip を解凍してファイルを選別。

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

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

 jsフォルダ内
 ・jquery-1.7.2.min.js
 ・jquery.smooth-scroll.min.js
 ・jquery-ui-1.8.18.custom.min.js
 ・lightbox.js 計4点

上記以外のファイルは使わないので捨ててOK。


【2】
gifデータのアップロード。

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

以上4点をアップロードしてパスをメモしておく。

(パスの例)
http://blog–imgs–69.fc2.com/a/b/c/crabcancan/next.png
(だいたい青字箇所をコピペすることが多い。)


【3】
データの書き換え。

cssフォルダ内
・lightbox.css

上記の lightbox.css をテキスト等で開き
赤字箇所を青字箇所の例のように
【2】でメモしたパスに書き換える。

(目安 line 81) 114行目 background: url(../images/prev.png) left 48% no-repeat;

(目安 line 85) 119行目 background: url(../images/next.png) right 48% no-repeat;

                      ↓

(目安 line 81) 114行目 background: url(http://blog–imgs–69.fc2.com/a/b/c/crabcancan/prev.png) left 48% no-repeat;

(目安 line 85) 119行目 background: url(http://blog–imgs–69.fc2.com/a/b/c/crabcancan/next.png) right 48% no-repeat;


続いて

jsフォルダ内
・lightbox.js

上記の lightbox.js をテキスト等で開き
赤字箇所を青字箇所の例のように
【2】でメモしたパスに書き換える。

51行目 this.fileLoadingImage = 'images/loading.gif';

52行目 this.fileCloseImage = 'images/close.png';

                      ↓

51行目 this.fileLoadingImage = 'http://blog–imgs–69.fc2.com/a/b/c/crabcancan/loading.gif';

52行目 this.fileCloseImage = 'http://blog–imgs–69.fc2.com/a/b/c/crabcancan/close.png';


【4】
ファイル名の書き換え。

FC2ブログはスラッシュ(/)やピリオド(.)が
付いたファイル名はアップロード出来ない為
以下3点のファイル名だけ
赤字箇所を青字箇所の例のように
ハイフン(-)に書き換える。
(ピリオド付きのファイル名のアップロードが可能な
他サイトの利用者は【5】へ進む。)

jsフォルダ内の計3点

・jquery-1.7.2.min.js → jquery-1-7-2-min.js

・jquery.smooth-scroll.min.js → jquery-smooth-scroll-min.js

・jquery-ui-1.8.18.custom.min.js → jquery-ui-1-8-18-custom-min.js


【5】
cssファイルとjsファイルをアップロード。

cssフォルダ内
・lightbox.css
・screen.css

jsフォルダ内
・jquery-1-7-2-min.js
・jquery-smooth-scroll-min.js
・jquery-ui-1-8-18-custom-min.js
・lightbox.js

以上6点のファイルをアップロードしてパスをメモしておく。
(今回は変更したファイル名もある為【6】での書き換え時は要留意。)


【6】
テンプレートのHTMLを書き換える。

先ず 下記の命令文の
赤字箇所を青字箇所の例のように
【5】でメモしたパスに書き換える。

<link href="css/lightbox.css" rel="stylesheet" />

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

<script src="js/lightbox.js"></script>

                      ↓

<link href="http://blog–imgs–69.fc2.com/a/b/c/crabcancan/lightbox.css" rel="stylesheet" />

<script src="http://blog–imgs–69.fc2.com/a/b/c/crabcancan/jquery-1-7-2-min.js"></script>

<script src="http://blog–imgs–69.fc2.com/a/b/c/crabcancan/lightbox.js"></script>

以上3文の書き換えが済んだら
テンプレートのHTMLを開き
(FC2ブログは 環境設定 → テンプレートの設定 → HTML編集)
<head> ~ </head> 内の
任意の行へ挿入し書き換える。


【7】
画像のリンク先の確認。

FC2ブログは記事に挿入する画像のリンク先が選べるが
アルバムページにリンクさせるとLightboxが利かないので
リンク先の設定を確認する。
(リンクが元画像に標準設定されている
他サイトの利用者は【8】へ進む。)

環境設定 → 環境設定の変更 → ブログの設定 → 投稿設定 → 画像のリンク

画像を記事に挿入する際に 元画像にリンクさせて 挿入 を選択。


【8】
記事のタグを書き換える。

記事に載せた画像をLightboxで表示させるように
赤字箇所を青字箇所の例のように
rel="lightbox" に書き換える。

<a href="http://blog–imgs–69.fc2.com/crabcancan/photo.jpg" target="_blank">photo</a>

                      ↓

<a href="http://blog–imgs–69.fc2.com/crabcancan/photo.jpg" rel="lightbox">photo</a>


画像を連続して表示させたい場合は
データ名を統一させてグループ化(統一させたデータ名を [ ] でくくる)させる。
画像を表示させる順番は データ名の末尾の番号 の順番に則る。
(下記の例の場合 photo1 でいうと photo統一させたデータ名1末尾の番号 になり
photo1 → photo2 → photo3 の順番に表示される。)

<a href="http://blog–imgs–69.fc2.com/crabcancan/photo1.jpg" rel="lightbox[photo]">photo1</a>

<a href="http://blog–imgs–69.fc2.com/crabcancan/photo2.jpg" rel="lightbox[photo]">photo2</a>

<a href="http://blog–imgs–69.fc2.com/crabcancan/photo3.jpg" rel="lightbox[photo]">photo3</a>


表示させた画像にタイトルやコメントも載せたい場合は
青字箇所の例のように
title="載せたいタイトルやコメント" を挿入し書き換える。

<a href="http://blog–imgs–69.fc2.com/crabcancan/photo1.jpg" rel="lightbox" title="載せたいタイトルやコメント">photo1</a>


これでLightboxが稼動すると思う。 → Lightbox適用ブログ参照ページ


稀にLightboxを設置しても起動しなかったり
巧く表示されない時もあると思うが
エラーの原因として一番多いのは
書き換えの間違いだったりする。

パスの書き換えでパスをペーストする際に
誤って本文のアポストロフィ(')やピリオド(.)等まで
上書きして無くしてしまうと
それだけで巧く稼動しなくなる。

稼動しない時は書き換えたタグを再確認して直せば
だいたい解決すると思う。
(FC2ブログはアップロードしたファイルの
上書き及び削除が反映されるまで
しばらく時間がかかることもあるので要留意。)


以上がLightboxの設置手順だ。
参考になれば幸いだ。
  1. 2012/05/01(火)|
  2. PC・WEB関連

Lightbox2 設置方法

当ブログにLightboxを導入すべく
設置手順をのせてみた。

先ず Lightbox2のサイト からファイルをダウンロード。

現在は Lightbox v2.05 だ。


【1】
lightbox2.05.zip を解凍しファイルを選別。

使うファイル
 cssフォルダ内
 ・lightbox.css 1点

 imagesフォルダ内
 ・closelabel.gif
 ・loading.gif
 ・nextlabel.gif
 ・prevlabel.gif 計4点

 jsフォルダ内
 ・builder.js
 ・effects.js
 ・lightbox.js
 ・prototype.js
 ・scriptaculous.js 計5点

上記以外のファイルは使わないので捨ててOK。


【2】
gifデータのアップロード。

imagesフォルダ内
・closelabel.gif
・loading.gif
・nextlabel.gif
・prevlabel.gif

以上4点をアップロードしパスをメモる。

(パスの例)
http://blog–imgs–69.fc2.com/a/b/c/crabcancan/nextlabel.gif
(だいたい青字箇所をコピペすることが多い。)


【3】
データの書き換え。

cssフォルダ内
・lightbox.css

上記の lightbox.css をテキストで開き
赤字箇所を青字箇所の例のように
【2】でメモったパスに書き換える。

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

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

                      ↓

16行目 #prevLink:hover, #prevLink:visited:hover { background: url(http://blog–imgs–69.fc2.com/a/b/c/crabcancan/prevlabel.gif) left 15% no-repeat; }

17行目 #nextLink:hover, #nextLink:visited:hover { background: url(http://blog–imgs–69.fc2.com/a/b/c/crabcancan/nextlabel.gif) right 15% no-repeat; }


続いて

jsフォルダ内
・lightbox.js

上記の lightbox.js をテキストで開き
赤字箇所を青字箇所の例のように
【2】でメモったパスに書き換える。

49行目 fileLoadingImage: 'images/loading.gif',

50行目 fileBottomNavCloseImage: 'images/closelabel.gif',

                      ↓

49行目 fileLoadingImage: 'http://blog–imgs–69.fc2.com/a/b/c/crabcancan/loading.gif',

50行目 fileBottomNavCloseImage: 'http://blog–imgs–69.fc2.com/a/b/c/crabcancan/closelabel.gif',


【4】
cssファイルとjsファイルをアップロード。

cssフォルダ内
・lightbox.css

jsフォルダ内
・builder.js
・effects.js
・lightbox.js
・prototype.js
・scriptaculous.js

以上6点のファイルをアップロードしパスをメモる。

(パスの例)
http://blog–imgs–69.fc2.com/a/b/c/crabcancan/lightbox.js
(だいたい青字箇所をコピペすることが多い。)


【5】
テンプレートのHTMLを書き換える。

先ず 下記の命令文の
赤字箇所を青字箇所の例のように
【4】でメモったパスに書き換える。

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<script type="text/javascript" src="js/prototype.js"></script>

<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>

<script type="text/javascript" src="js/lightbox.js"></script>

                      ↓

<link rel="stylesheet" href="http://blog–imgs–69.fc2.com/a/b/c/crabcancan/lightbox.css" type="text/css" media="screen" />

<script type="text/javascript" src="http://blog–imgs-–69.fc2.com/a/b/c/crabcancan/prototype.js"></script>

<script type="text/javascript" src="http://blog–imgs–69.fc2.com/a/b/c/crabcancan/scriptaculous.js?load=effects,builder"></script>

<script type="text/javascript" src="http://blog–imgs–69.fc2.com/a/b/c/crabcancan/lightbox.js"></script>

以上4文の書き換えが済んだら
テンプレートのHTML編集で
<head> ~ </head> 内の
任意の行へ挿入し書き換える。


【6】
記事のタグを書き換える。

記事に載せた画像をLightboxで表示させるよう
赤字箇所を青字箇所の例のように
rel="lightbox" に書き換える。

<a href="http://blog–imgs.fc2.com/crabcancan/photo1.jpg" target="_blank>photo1</a>

                      ↓

<a href="http://blog–imgs.fc2.com/crabcancan/photo1.jpg" rel="lightbox">photo1</a>


画像を連続して表示させたい場合は
データ名を統一グループ化させる。

<a href="http://blog–imgs.fc2.com/crabcancan/photo1.jpg" rel="lightbox[photo]">photo1</a>

<a href="http://blog–imgs.fc2.com/crabcancan/photo2.jpg" rel="lightbox[photo]">photo2</a>

<a href="http://blog–imgs.fc2.com/crabcancan/photo3.jpg" rel="lightbox[photo]">photo3</a>


表示させた画像にコメントも載せたい場合は
青字箇所の例のように
title="載せたいコメント" を挿入し書き換える。

<a href="http://blog–imgs.fc2.com/crabcancan/photo1.jpg" rel="lightbox" title="載せたいコメント">photo1</a>


これでLightboxが稼動すると思う。 → Lightbox適用ブログ参照ページ


今回はFC2ブログでLightbox2を導入してみたが
稀にLightboxが起動しなかったり
巧く表示されないことがある。

エラーの原因で多いのは
だいたいが 書き換えの間違い だが
これは再確認して直せばすぐ済むのでOK。

他のscriptとの衝突 の場合は
テンプレートのHTMLで
bodyタグを確認し
onload属性があった場合は
青字箇所の例のように
initLightbox() を挿入し書き換える。

<body onload="MM_preloadImages(‘/images/menu_on.gif’)…;">

                      ↓

<body onload="MM_preloadImages(‘/images/menu_on.gif’)…;initLightbox()">


以上がLightboxの設置手順だ。
参考になれば幸いだ。
  1. 2011/05/22(日)|
  2. PC・WEB関連

ヒトでないモノたち 2

ウサビッチ コレクションフィギュア③ の
スーパーキレネンコ で壁紙を作ったので
よかったらどうぞ

1024×768

1024_768


1280×1024

1280_1024


1920×1200 (1680×1050 と 1280×800 も同比)

1920_1200


1920×1080 (1366×768 も概ね同比

1920_1080
  1. 2011/04/15(金)|
  2. 壁紙

ヒトでないモノたち

夏目友人帳 のニャンコ先生の壁紙と
狂乱家族日記 の月香の壁紙を載せてみた

サイズは両方とも1280*1024だ

夏目友人帳 壁紙

狂乱家族日記 壁紙

載せてから気付いたが
なんとなくニャンコ先生が
月香を狙っているように見える
ニャンコ先生ならクラゲも喰いそうだよなぁ…

初めて作ったのであまり上手くはないが
よかったらどうぞ
  1. 2008/10/09(木)|
  2. 壁紙

カウンター

プロフィール

カニ缶船長

管理者:カニ缶船長
おそらく食玩やプライズ、フィギュア
等のホビー系の話題が多い私事の
閑話綴りになると思う。
気ままな更新のため気長によろしく。

検索フォーム

カテゴリー

HOBBY関連 (142)
EVANGELION (35)
MACROSS (11)
PC・WEB関連 (5)
壁紙 (3)
GAME関連 (1)
飲食 (21)
視聴 (18)
閑話 (12)

月別アーカイブ

リンク

RSSリンクの表示

カニチェック