【MarsEdit】画像をLightBox風にポップアップさせるShadowboxJSを使うための方法

MarsEditを使い始めて4か月…その間いろいろな方のMarsEditの使い方の記事を読み、真似をしてカスタマイズし大分快適に使いやすくなってきました。
MarsEdit – the blog editor for WordPress, Tumblr, Blogger and more.
カテゴリ: ソーシャルネットワーキング
価格: ¥4,000
前回は、SEOプラグイン、AllinSEOPackのキーワードなどの設定をMarsEditからできるところまでできました
- 【MarsEdit】WordPressの投稿がラクになる!MacのブログエディタMarsEditを導入してみた
- 【MarsEdit】導入2日目!ブロガー御用達のMacアプリ「MarsEdit」でWordPressの投稿をしてみた
- 【MarsEdit】WordPressのAll inSEO PackをMarsEditで使うための設定&wpXサーバーのFTP接続先を変更しました!
本日のメニュー
MarsEditでも、LightBox風に画像をポップアップさせたい!!
もう一つMarsEditでやってみたかったことがあるんです。
それは、私が使っているWordPressのプラグイン「ShadowboxJS」をMarsEditからの投稿で適用すること…
ShadowboxJSとは??
ShadowboxJSはLightBox風に画像をポップアップしてくれるプラグインです。↓こんなイメージです。クリックすると画像が大きく飛び出るやつ…
せっかくプラグインではできるこの機能が、MarsEditで普通に画像を挿入してブログに送ると、画像がポップアップしてくれないんです!
写真好きな私としては、これはとても残念なこと…きれいに撮れた写真、せっかくだから大きくしてみたいんです!他にも、スクリーンショットに文字を入れて加工した時、ポップアップで大きくした方が、説明の文字が見やすいというメリットもあります。
ですから、LightBox風のポップアップ機能はどうしてもやりたかったのです…
ShadowboxJSのインストールと設定
参考にさせて頂いた記事
ShadowboxJSはWordPressのプラグインの新規追加でプラグイン名で検索し、インストール、有効化します。
設定はダッシュボードの「設定」→「ShadowboxJS」からできます。
設定画面です。英語表記ですが、有効化すればほぼデフォルトで使うことができます。難しい設定はありません。
ShadowboxJSの日本語化にもチャレンジ!
このままでも十分使うことはできますが、日本語化して下さっている方がいらっしゃいましたので日本語化しました。
こちらのサイトから、日本語化ファイルとダウンロードします。
ダウンロードしたファイルを解凍します。
その中の、ShadowboxーJS-ja-moというファイルをFTPソフトを使ってアップロードします。
私はFileZillaを使いました。
場所はplugins/shadowbox-js/localization/です。
アップロードできました。
これで設定画面をもう一度見てみましょう。
無事日本語化できました!なんか日本語だと何かと安心ですね(笑)
MarsEditでShadowboxJSを使うための設定
参考にさせて頂いた記事
MediaMarkUpTemplatesの追加〜アップロードする画像のStyleをカスタマイズして追加する
メディアマネージャーを立ち上げて、どれでもいいので画像を選択します。
選択した状態で右下の「Style」をクリック。
するとStyleのデフォルトで入っている設定がロールダウンして現れます。一番下の「Customize」をクリック。
さらに「+」ボタンでStyleを追加します。
このような画面が出てきます。
- Name→ShadowboxJS(自分がわかる名前をつける)
- Opening Mark Up→コマンドを入力(Width[hoge]やheightはクリックして大きくなる前の数値だそうです。自分のブログの記事横幅に合わせて(Chrome拡張機能のpagerulerなどのツールで測ることができます)設定しましょう。ちなみにDigipressのテーマでは、横幅のサイズ(width)は620〜630位です。高さはautoにしておきました。
<a title="#alttext#" href="#fileurl#"> <img title="#displayname#" alt="#alttext#" src="#fileurl#" width="hoge" height="auto" border="0" /> </a>
これで準備完了です!!
このように追加されました!
あとは画像を挿入するときに、先程Mediaを選択した右下の所にある、StyleからShadowboxJSを選んで画像を挿入すればOK!!
まとめ〜画像をポップアップで拡大することで見やすさUP!
画像をクリックしたときに大きくできると、特にスクリーンショットにSkitchなどで説明の文字を入れたとき、見やすくなって便利です。
ピント合ってるかなあ?とかよく撮れたなあ…とか、もう少しこうやって撮ればよかったなあなど、写真撮影後の考察もできます。
一つ一つ自分が使いやすい環境が整ってきてとても嬉しいですね。ブログを書く作業がとても楽しくなりました!!
MarsEdit – the blog editor for WordPress, Tumblr, Blogger and more.
カテゴリ: ソーシャルネットワーキング
価格: ¥4,000
最新情報をお届けします
Twitter でEDiT NEW LiFE.をフォローしよう!
Follow @EDiTNEWLiFE1
LEAVE A REPLY