LightBoxっていうのは画像をクリックしたときに ちょっとオシャレに拡大表示してくれるスクリプト。 例えばこんなの



クリックするとうにょーんって出てくるやつは LightBoxっていうスクリプトのおかげなんだよねー。 これを導入するには、まずWordPressの方にプラグインとしてインストールすることから始まる。

Lightboxの導入

・Wordpressののダッシュボードからプラグインを選択
・新規追加から「Lightbox」を検索する
・とりあえず「Lightbox Plus」をインストール
・有効化する




とりあえずこれで導入完了。
もちろん細かな設定はあるけど、今はしなくても大丈夫かな。

MardEditでLightboxの設定

・Window→Media Manager（⌘＋2）
・適当に画像を選んでStyleからCustomizeを選択





・＋ボタンを押しMacro Nameを入力。分かりやすくLightboxでいいかな。
・Opening Markupに以下のコマンドを入力

<a rel="lightbox" href="#fileurl#" title="#alttext#"><img src="#fileurl#" alt="#alttext#" title="#displayname#" border="0" width="550" height="auto" /></a>



これで準備OK。
ちなみにwidthやheightの数値はクリックして大きくなる前の画像。つまりサムネイルの大きさ。
ここは自分のブログのサイズに合わせて調節しておくといいでしょう。


あとは画像を添付するとき、Styleで「Lightbox」を選べば、Lightboxが適応されます。


ちなみに画像はドラッグ＆ドロップで任意の場所に貼り付けることができるんだけど、
これも自動でリサイズされてしまいます。
せっかくLightboxが使えるようになったのにアップロードする際に小さくリサイズされてしまっては意味がないので、この辺も設定で直しておくといいでしょう。

添付画像のサイズ設定

・メニューのBlog→Edit Settings…もしくは追加したブログ名をダブルクリック



・EditingタブのMedia DefaultsにあるImage SizeをDefaults To Full Sizeに設定。






これでドラッグ＆ドロップしたとき、フルサイズでアップロードするようになります。
元画像が大きすぎる場合だけ調整すればいいので手間が省けますね。


ということで無事にLightboxも導入できましたー。



MarsEdit

カテゴリ: ソーシャルネットワーキング

価格: ￥4,000

ツイート