お小遣い稼ぎNo.1!!
| 宇宙最強お小遣いサイト「げん玉」 | |||
 |
 |
 |
 |
| お小遣い稼ぎはやっぱりげん玉→【詳細】 | |||
LightboxでFC2ブログをカッコよく！
今日はお小遣い稼ぎとはまったく関係ない記事で。
まぁなんというか紹介するサイトがなくなったので(笑
画像ファイルをカッコよく表示するLightbox
「Lightbox」って皆さん知ってますか？
↓クリックしてみて
ということで今日はこれをFC2ブログで使おうというテーマで行きましょう。
やってみたいという人は続きをどうぞ(^-^)
え？興味がない？めんどくさい??
ランキングにでも行けばいいだろ｡･ﾟ･(*ﾉД`*)･ﾟ･。
ということで、「Lightbox」を導入してみましょう。
まずはLightboxのファイルをダウンロード
ココに行って必要なファイルをダウンロードします。
中央あたりの「DOWNLOAD Lightbox v2.03.3」をクリックして圧縮ファイルをDL→解凍します。
中身は
・index.html
(サンプルと使用方法が英語で書いてあります)
・jsフォルダ
(javascriptのファイルが4つ入っています。)
・cssフォルダ
(スタイルシートのファイルです。)
・imagesフォルダ
(Lightboxで使う画像ファイルが入っています。)
Lightboxで使う画像をアップロード
まずは「imagesフォルダ」にある画像をFC2ブログのメニュー「ツール」→「ファイルのアップロード」でアップロードします。
image-1.jpgとthumb-1.jpgは、サンプルで使ってるファイルなのでアップする必要はありません。
画像のパス(URL)を変更
ブログでは、先にダウンロードしたjavascriptファイルとcssファイルで使用している画像ファイルの位置関係が変わってしまうので、それを直さないといけません。
まずはjsフォルダ内、lightbox.jsをメモ帳などで開きます。
・65行目
"images/loading.gif"を
"（ブログアドレス）file/loading.gif"に変更。
例：http://blog-imgs-24.fc2.com/e/v/e/everymoney/loading.gif
・66行目
"images/closelabel.gif"を
"（ブログアドレス）file/closelabel.gif"に変更。
例：http://blog-imgs-24.fc2.com/e/v/e/everymoney/closelabel.gif
次に、cssフォルダ内、lightbox.cssをメモ帳などで開きます。
・47行目
url(../images/blank.gif)を
url(（ブログアドレス）file/blank.gif)に変更。
例：http://blog-imgs-24.fc2.com/e/v/e/everymoney/blank.gif
・52行目
url(../images/prevlabel.gif)を
url(（ブログアドレス）file/prevlabel.gif)に変更。
例：http://blog-imgs-24.fc2.com/e/v/e/everymoney/prevlabel.gif
・53行目
url(../images/nextlabel.gif)を
url(（ブログアドレス）file/nextlabel.gif)に変更。
例：http://blog-imgs-24.fc2.com/e/v/e/everymoney/nextlabel.gif
以上でパス(URL)の変更は終わりです。
jsファイルとcssファイルをアップロード
では先ほどパスを変更したjsファイルとcssファイルを「ツール」→「ファイルのアップロード」でアップします。
アップするファイルは
・effects.js
・lightbox.js
・prototype.js
・scriptaculous.js
・lightbox.css
の5ファイル。
次に「環境設定」→「テンプレートの設定」からhtmlの編集を選びます。
<head>〜</head>内に以下をそのまんまコピペ
<link rel="stylesheet" href="<%url>file/lightbox.css" type="text/css" media="screen" />
<script src="<%url>file/prototype.js" type="text/javascript"></script>
<script src="<%url>file/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="<%url>file/lightbox.js" type="text/javascript"></script>
以上でLightboxを使う準備は完了です。
Lightboxを使ってみよう
画像リンクのaタグに「rel="lightbox"」と書くだけです。
ちなみに「target="〜"」は書かないでください。
「title="〜"」で、左下に文章がかけます。
サンプル↓
サンプルのソースはこちら↓
<a href="http://blog-imgs-11.fc2.com/e/v/e/everymoney/gendamabonus.gif" title="Lightboxサンプル" rel="lightbox"><img src="http://blog-imgs-11.fc2.com/e/v/e/everymoney/gendamabonus_s.gif" alt="げん玉でお小遣い稼ぎ" width="150" height="174" /></a>
説明へたくそでスイマセン(^-^;
人気ブログを要チェック↓
仕事や株取引を効率的にするブラウザ「Lunascape」
の初期費用半額！
