MarsEditでLightBoxを導入

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

Silver Devil

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

Lightboxの導入

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


0005

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

MardEditでLightboxの設定

・Window→Media Manager(⌘+2)
・適当に画像を選んでStyleからCustomizeを選択


0006


・+ボタンを押し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>

0007

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


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


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


添付画像のサイズ設定

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

0008

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


0009



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


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



MarsEdit App

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

価格: ¥4,000


Related Posts Plugin for WordPress, Blogger...
投稿日: 作成者: カテゴリー: Mac

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です