MarsEditで挿入した画像がRetinaに対応出来なくなったから直した。

20130423MarsEdit 001

ブログを書くのはMarsEditがメインです。オレっち(@yashiki55)です。

先日、MarsEditのアップデートが来てたので、ver3.5.8からver3.5.9へアップデートしたのですが、なんとこれまではサイズ指定で画像挿入するだけでRetinaに対応していたのに、対応出来なくなっているではないですか!

ということで、ダウングレードする方法も見つからなかったので、imgタグをカスタマイズしてRetina対応するように直しましたよって。

Retinaに対応する画像を挿入するってどういうこと?


細かいことは端折りますが、Retinaディスプレイというのは超高解像度なんですね。つまり、これまで普通に綺麗に見えていた画像でも、そのまま使用するとRetinaで見た際に画像がぼやけちゃうんです。

例えば、これまで幅500px、高さ300pxの画像を使っていたとしたら、Retina対応するには1000×600ぐらいの高解像度な画像をもってきて、解像度はそのままにCSSなんかで表示サイズを500×300とかに指定するとRetinaではハッキリくっきり美しく見ることが出来るようになるんですね。たぶんそういうことです。

正直なところ、実はオレっちもよく分かってません(汗)
そうすればRetinaで綺麗に見えるってことを知っただけです(笑)

詳しく知りたい方はどうぞググってくださいませ。|д゚)チラッ

MarsEditアップデートでRetinaに対応出来なくなった。


これまではblogメニューの「Edit Settings…」からサイズ指定をしておいて画像挿入するだけで、元データの解像度のままスタイルで縮小されていたのですが、元データ自体が指定サイズにリサイズされてアップロードされるようになったんです。当然解像度が指定サイズに落ちるワケですね。

oh…めんどくさい…( ꒪⌓꒪)

ならば、画像はFullsizeのままで、スタイル指定で縮小するようにMarsEditのimgタグをカスタマイズしちゃおうというワケです。

勝手にリサイズなんてさせないんだから(」°ロ°)」

MarsEditでimgタグをカスタマイズするやり方。


まずはMarsEditのblogメニューをクリックします。

 
20130423MarsEdit 002


 

 

blogメニュー内のEdit Settings…を選択します。

 

20130423MarsEdit 003


 

次に、開いたウィンドウ内のImage Sizeのところですが、これまでは「Defaults To Fit Constraint」を選択して、その上で幅や高さを指定しておけばスタイルで指定サイズにしてくれてたんですね。これがスタイルでの指定ではなくなって、そのサイズへ元画像をリサイズしよるんですわ。ヒィー(((゚Д゚)))ヤメテー

ということで、ここはリサイズさせないように「Defaults To Full Size」に変更します。フルサイズになるので、下の幅と高さはそのままでいいですよ。変更したらOKをぽち。

20130423MarsEdit 004


 

次にMediaウィンドウを開きます。

20130423MarsEdit 005


 

Mediaウィンドウを開いたら、Styleのところを変更します。少し下を見ると、すでに先ほどフルサイズの設定をしたので、幅と高さがとんでもないデカイ画像だということが分かりますね。この解像度のまま、リサイズさせずにスタイル指定で縮小してやるのだ。

20130423MarsEdit 006


 

Styleの中で「Customize…」を選びます。下の画像はすでにカスタムテンプレートを作成した後に撮ったのでRetina〜というテンプレートがありますが、あしからず。
20130423MarsEdit 007


 

Customize…を選んで、開いたウィンドウの左下にあるボタンから追加や削除ができます。追加をクリック。
20130423MarsEdit 008


 

 

名前は自分の好きなものにすればいいよね。その下の「Opening Markup」や「Closing Markup」のところへタグを打ち込んでやればいいです。オレっちは後々にCSSでも触りやすいようにclassタグも付けておきました。

ここでは横長画像について、スタイルで最大幅が500pxになるようにしてみました。高さも同時に指定しちゃうと画像によっては縦横比がおかしくなるので、横長画像の時にこのテンプレートを使うようにします。

20130423MarsEdit 009


 

縦長画像の際はこちらですね。横長用、縦長用で2種類作りました。

20130423MarsEdit 010


ちなみに、テンプレート作成の時に指定する画像のURLや代替テキスト、ファイル名などは「Insert Placeholder」から選んで入力できますよ。

入力できたらOKを押してimgタグのカスタムテンプレート作成が完了です。

実際に使ってみる。


どうですか?分かりますか?下はプレビュー画面のスクリーンショットですが、MarsEditの従来の設定でリサイズされた画像が上側のヤツで、今回作成したimgタグのカスタムテンプレートでスタイル指定したのが下側のヤツです。

20130423MarsEdit 011


上側はリサイズされちゃってますので若干ぼやけているのが分かりますでしょうか。このスクリーンショットでは分かりにくいのかもしれませんが、MacのRetinaディスプレイモデルを使っているとこの違いはものすごいんです。

ぼやけているのをずっと見てると、なんだか目が疲れてくるんです。テンションも下がりますね。

改めて、綺麗で鮮明な画像、Retinaディスプレイというのは「活力」を生むものだと納得させられます。

一度使うともう手放せません。・゚・(ノД`)・゚・。

 

え?フルサイズでアップロードしてスタイルでの縮小をしていたらデータが重たいって?

いいんです。それはそれでまた別ものとして考えましょう。美しくRetinaを活かすことが正義です(笑)

 

MarsEdit - the blog editor for WordPress, Tumblr, Blogger and more. 3.6.2 MarsEdit - the blog editor for WordPress, Tumblr, Blogger and more. - Red Sweater Software
価格: ¥3,450 (記事公開時)
カテゴリ: ソーシャルネットワーキング


 

TextExpander for Mac 3.4.2 TextExpander for Mac - SmileOnMyMac, LLC
価格: ¥3,000 (記事公開時)
カテゴリ: 仕事効率化


 

以上、MarsEditで挿入した画像がRetinaに対応出来なくなったから直した。の件でした。

LEAVE A REPLY

*

Return Top