お小遣い稼ぎNo.1!!

スポンサーサイト

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

人気ブログを要チェック↓
人気ブログランキング FC2 Blog Ranking
仕事や株取引を効率的にするブラウザ「Lunascape」

このエントリーをはてなブックマークに追加 Save This Page to del.icio.us このエントリーをlivedoorクリップに追加 このエントリーをニフティクリップに追加 このエントリーをBuzzurlに追加 このエントリーをBlogPeople Tagsに追加 このエントリーをBlogPeople Instant Bookmarkに追加 このエントリーをPingKingポッケに追加 このエントリーをFC2ブックマークへ追加 このエントリーをnewsing! このエントリーをYahoo!ブックマークに追加 このエントリーをイザ!ブックマーク
スポンサー広告 | トラックバック(-) | コメント(-) | [EDIT]

LightboxでFC2ブログをカッコよく!

2007.07.08(23:27)

今日はお小遣い稼ぎとはまったく関係ない記事で。
まぁなんというか紹介するサイトがなくなったので(笑

画像ファイルをカッコよく表示するLightbox

「Lightbox」って皆さん知ってますか?
↓クリックしてみて
げん玉でお小遣い稼ぎ

ということで今日はこれをFC2ブログで使おうというテーマで行きましょう。

やってみたいという人は続きをどうぞ(^-^)

え?興味がない?めんどくさい??
ランキングにでも行けばいいだろ。・゚・(*ノД`*)・゚・。

LightboxでFC2ブログをカッコよく!の続き

ということで、「Lightbox」を導入してみましょう。

まずはLightboxのファイルをダウンロード

ココに行って必要なファイルをダウンロードします。
中央あたりの「DOWNLOAD Lightbox v2.03.3」をクリックして圧縮ファイルをDL→解凍します。

中身は
・index.html
(サンプルと使用方法が英語で書いてあります)
・jsフォルダ
(javascriptのファイルが4つ入っています。)
・cssフォルダ
(スタイルシートのファイルです。)
・imagesフォルダ
(Lightboxで使う画像ファイルが入っています。)

Lightboxで使う画像をアップロード

まずは「imagesフォルダ」にある画像をFC2ブログのメニュー「ツール」→「ファイルのアップロード」でアップロードします。
image-1.jpgthumb-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>

説明へたくそでスイマセン(^-^;

スポンサーサイト

人気ブログを要チェック↓
人気ブログランキング FC2 Blog Ranking
仕事や株取引を効率的にするブラウザ「Lunascape」

このエントリーをはてなブックマークに追加 Save This Page to del.icio.us このエントリーをlivedoorクリップに追加 このエントリーをニフティクリップに追加 このエントリーをBuzzurlに追加 このエントリーをBlogPeople Tagsに追加 このエントリーをBlogPeople Instant Bookmarkに追加 このエントリーをPingKingポッケに追加 このエントリーをFC2ブックマークへ追加 このエントリーをnewsing! このエントリーをYahoo!ブックマークに追加 このエントリーをイザ!ブックマーク

<<ブログ的SEO対策その2 | ホームへ | モッピー(moppy)でお小遣い稼ぎ>>

コメント
(*゚ロ゚)(*゚ロ゚)(*゚ロ゚)ォォォオオ

感動っっ!!

って、すぐに目を通すには
まだまだ初心者なので…
じっくり、読ませてもらいますね♪
休日あたりに利用するかも(・v・*)ムフ♪

でも、難しそう(´∀`*)ウフフ

応援 (U σ´(Å)`)σ ワン

【2007/07/10 23:59】 | のむ #- | [edit]
こんにちは~!月収500万円女子大生のサトミンです☆毎
日楽しく拝見させてもらってます。

にしても、最近雨ばっかりでテンション下がりますね・・

もし、お暇でしたら私のブログにも是非遊びに来てくだいね☆★
http://ameblo.jp/otakujyosidaisei

応援ポチッ☆
【2007/07/12 18:28】 | 月収500万円女子大生サトミン #- | [edit]
Diechangさん♪
ごめんネ!ご無沙汰しちゃって・・・

こういうカッコいいのやりたい!
(ノω・、)ウゥ・・・
前のも理解してないのにぃ。。。
記号がいっぱい!!!

いろんなこと質問していい???

(σ ゚ー゚)σェィ~★
【2007/07/13 08:24】 | ERINママ #- | [edit]
ドォ━m(*>ω<*)m━モォ☆

やっと勉強しに、来ました♪
できるかどうかは…
今からのお楽しみです(´艸`)クスクス

今回は、かなり難しかった~
( ´ー`)フゥー...

応援 (U σ´(Å)`)σ ワン
【2007/07/15 19:16】 | のむ #- | [edit]
このコメントは管理人のみ閲覧できます
【2007/07/15 23:34】 | # | [edit]
(。・ω・)ノ゙ コンバンゎ♪

あれから、またチェックしたんですけど
うまくいくときと、いかない時が
あるんですよ(*´゚д゚)(゚д゚`*)ネー
2回目にクリックすると、うまく
いったりします(´・c_・` )ウーン・・
また、勉強しますね~

応援 (U σ´(Å)`)σ ワン

【2007/07/16 21:54】 | のむ #- | [edit]
参考にさせていただきました!
無事設置完了!
ありがとうございましたe-319
【2008/01/11 14:29】 | non #- | [edit]












管理者にだけ表示を許可する
トラックバック
トラックバックURL:
http://everymoney.blog95.fc2.com/tb.php/44-5d9215a1
| ホームへ |
ジャンル別お小遣い稼ぎサイトTOP5

ジャンル別お小遣い稼ぎサイトTOP5

お小遣いサイトで稼ぐ

ピックアップ

アフィリエイトで稼ぐ

【A8.net(エーハチネット)】

アフィリエイトといえばココ!
広告も豊富で単価も高い。
まずはA8.net(エーハチネットでお小遣い稼ぎ!
A8.net(エーハチネット)詳細

【トラフィックゲート(TG)】

報酬が高い!
紹介報酬も高い!!
初めてのASPにもオススメ!
トラフィックゲート(TG)詳細

【アクセストレード】

報酬受取1,000円から!
振り込み手数料無料!
初心者に優しいASPです。
アクセストレード詳細

【LinkShare(リンクシェア)】
アフィリエイトならリンクシェア
物販アフィリエイトならココ!
世界最古・最大級のASP!
報酬支払いはなんと1円から!
LinkShare(リンクシェア)詳細

【AFFILIATE MASHUP】
アフィリエイトするなら、アフィリエイトマッシュアップで
最低支払い金額300円!
広告毎の審査なし!
げん玉と同じ3ティア!
AFFILIATE MASHUP詳細

【バリューコマース】

日本初の老舗ASP!
広告数も最大級!
バリューコマース詳細

【JANet(ジャネット)】
アフィリエイト の ジャネット
アフィリエイト の ジャネット

お小遣いサイトを運営するなら絶対かかせないASP!
報酬単価も他よりちょっぴり高め!!
JANet(ジャネット)詳細

【アフィリエイト2.0】
ビッダーズ商品を掲載できる。
ビッダーズ商品以外にもポイントサイトや音楽ダウンロードなどの広告も多数。
アフィリエイト2.0詳細

【電脳卸】
商品無料仕入れ戦隊『電脳卸』
物販専門の大手ASP。
2ティア紹介制度や顧客獲得制度など稼げる要素がたっぷり!
電脳卸詳細

カテゴリー

最近の記事

最近のコメント

最近のトラックバック

アクセスカウンター

アクセスランキング

ブロとも申請フォーム

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