まじめにブログの小技を考える

 ここのブログ、ロリポップが用意した既製のデザインに少し手を加え、他にもあれこれといじくってますが、ちょっといじくり過ぎかな・・・。表示が遅いとか、無いですか? 色々と手は加えてはいますが、
今回は、このブログで使ってる便利なフリーソフトをいくつかご紹介します。基本的には過去にも書いた事があるものを紹介しますが、もう少し詳しく書きましょう。ちょっとだけ加工するだけで見た目も全然違ったりしますから、スキルを高めたいという方は、トライしてみてはどうでしょうか。今回は、「Lightbox」です。
 HPやブログに画像を掲載する際の気の利いた方法には、「大・小」の2種類の画像を用意し、記事中に小さい画像を載せ、その画像をクリックすることで大きいほうの画像へ直接リンクさせ拡大するという方法が最も多く用いられています。また、その際は、「target」で新しいウィンドーで開かせるか、そのままのページで開かせるか、javascriptなどを使ってツールバーを全て取り除いた新規のページで開かせるか、幾通りかの方法がありますが、それをカッコよく表示させるのに有効なのが「Lightbox」です。
 設置は非常に簡単。基本的には、htmlで多少お話ができる程度の知識があれば、誰でも設置可能です(※ただし、スクリプトをアップできるサーバー環境が必要です)。Lightboxがどういうものかは、画像をクリックして下さい。

※現在はVer.2がリリースされており、ここでは、Ver.2を使用しています。解説はVer.1です。設定方法は基本的に同じですが、Ver.2は多少複雑です。

設置方法

ダウンロード
Lightboxのウェブサイトに入り、ページの中ほどにある「DOWNLOAD」のコーナーから、それぞれのファイルをローカルに保存します。
保存の際は、「lightbox」というディレクトリーを作り、その中に各ファイルを保存するといいでしょう。
基本ステップは2つのみです。


各ファイルの説明

・ lightbox.js
・ lightbox.css
・ overlay.png
・ loading.gif
・ close.gif

ライトボックス本体
表示に関するcssファイル
黒バックを作る画像ファイル
イメージを読み込む際に表示させるgif動画
×印

アップロード
FTPでサーバーに入り、任意の場所にディレクトリーごとアップロードします。パーミッションは全て「644」


ステップ 屮好リプトの貼り付け」

<head>〜</head>

の間に

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

サイトから見た、「lightbox.js」までのパスを指定しますが、相対パスが解らない場合はフルパスで書いて差し支えありません。

(このサイトでの例)

<script type="text/javascript" src="http://kiyochan.com/lightbox/lightbox.js"></script>

ステップ◆屮織阿悗離宗璽皇媛叩

<a href="拡大画像までのパス" rel="lightbox"><img src="小さい画像へのパス" border="0" height="100" width="100" alt="">

(このサイトでの例) 

<a href="http://kiyochan.com/jpg/katsu_sand.jpg"rel="lightbox">

基本的には、<a>タグに、rel="lightbox"と書き足すだけで設置完了です。


コメント
おおっ 新しく こんなコーナーもできてんね。

表示が遅いとか そんなんは ないなりよん。

でも このページ(http://blog.kiyochan.com/?eid=452345)のせいか 月別で見たら レイアウトがくずれてしもてて いっしゅん あれ? ってなるけど・・・。

これって こっち側の問題??(だとしたら ごめん)
確認してんけど、大丈夫やねん。
書いてあるソースは、タグを全角に直してるからソースにはなってないとは思うんやけど・・・、
なんでやろ。
ノートでも確認してみるわ。
ありがと。ねえさん。
  • kiyo
  • 2007/01/14 11:32 AM
なおってる・・。
あれれ??
スクロールにしたからかなぁ〜?

それとも 私の目の錯覚やったんかな (-。-) ボソッ
ありがと、姉さん。
あれからノートで確認したら、やっぱりおかしかってん。
理由は、表の幅足らず。スタイルシートが邪魔して小文字にでけんから、しゃあないんでインラインフレームで埋め込んだよ。
メールしようと思う前に、爆睡してもた(笑)
  • kiyo
  • 2007/01/15 8:30 AM
そやったんかいな。
ほんだら かめへんねん。
ちょこっとでも お役にたてて よかったわ♪
さすがは、ねえさんや。
月ごとで見るなんて、したことないもん。
これからも、頼んまっせ!
  • kiyo
  • 2007/01/16 10:08 PM
コメントする








   

移転しています

こちらのブログは、以下の場所に移転しています。
キムチ美人本舗 店長ブログ

calendar

S M T W T F S
     12
3456789
10111213141516
17181920212223
24252627282930
<< September 2017 >>

selected entries

categories

archives

recent comment

  • JAF(日本自動車連盟)交通安全委員会
    kiyo (07/08)
  • JAF(日本自動車連盟)交通安全委員会
    kiyo (07/08)
  • JAF(日本自動車連盟)交通安全委員会
    匿名希望 (07/07)
  • iTunes Music Store「iMix」」って何だ!?
    tomomi (03/20)
  • iTunes Music Store「iMix」」って何だ!?
    kiyo (03/18)
  • iTunes Music Store「iMix」」って何だ!?
    tomomi (03/18)
  • iTunes Music Store「iMix」」って何だ!?
    kiyo (03/17)
  • iTunes Music Store「iMix」」って何だ!?
    tomomi (03/17)
  • Nolans 「I'm In The Mood For Dancing」ノーランズ ダンシング・シスター
    てりー (12/21)
  • ジョリーパスタ→ジョリーピアット
    kiyo (08/13)

recent trackback

links

profile

search this site.

others