最近Macからblogを編集する際に、MarsEditを使っています、ども私です。

世間的には、Macからwordpress等のblogを記事編集するのには、MarsEditが定番って事になってるんですが、私も先月末からMarsEditを使用しています。

1ヶ月ほど使用してみて、気づいたことはMarsEditは設定をカスタマイズしていってこそ使い勝手が向上するアプリケーションだと言うことです。

というわけで、今日はMarsEditの画像周りの設定を変えていこうと思います。

画像のデフォルト最大サイズを変更する

私のブログでは、ページに表示する画像の最大サイズを横640pxにしているんですが、MarsEditではデフォルトで600pxが最大になっています。仮に横800pxの画像を挿入すると、600pxにリサイズしようとするんですね。

こんな感じで。毎回毎回640pxと書き替えるのは大変なので、ここを修正しようと思います。

手順1 設定画面を開く

MarsEditのメインウインドウからブログを選択して右クリックし、Edit Settingをクリック。
または、MarsEditのメインウインドウからブログを選択し、左下の歯車アイコンをクリックして、Edit Settingをクリック。

手順2 設定を変更する

EditingタブからMedia DefaultsにあるWidthとHeightを修正する。

私はとりあえず、Width、Heightともに640pxとしておきました。数字を変えたら、OKボタンを押して保存します。

これで画像を挿入する際の最大サイズが640pxになりました。

リンク付きの画像を挿入する

さて、画像の最大サイズが640pxにはなりました。しかし、このブログではオリジナルの画像ファイルの解像度が1920×1080だったり1280×720だったりすることが多いです。これは、ゲームのスクリーンショットがそうなってるからなんです。

あ、私のブログではあまりスクリーンショットは多用しませんでしたね、はいはい。

というわけで、ページに表示される画像の解像度をwidth 640pxとして、オリジナルサイズの画像にリンクをはるかたちにしたいと思います。

画像挿入のスタイルをカスタマイズする

MarsEditデフォルトでは、画像挿入する際にスタイルを選択できます。ただ、デフォルトで用意されているスタイルは、回り込みに関する違いがあるだけで、リンクを挿入するとかそういうのはありません。

このブログでは、画像の回り込みを使うことはほとんどないので（現状）、このあたりも修正していきたいと思います。

手順

適当にMedia Managerを開く。開く方法は、新しいエントリーに画像を放り込むとか、Media Libraryから開くとかお好きな方法で。

Media ManagerからStyleの中にあるCustomize…を選択する

スタイルの一覧が表示されるので、＋ボタンをクリック。

Nameには適当に名前をつけましょう。私は、とりあえずAdd Linkとしました。

Opening Markupの中に、イメージタグの中身を記述していきます。詳細は次の項で。
記述したら、OKボタンを押して保存します。

カスタマイズしたMarkupの中身

先ほど追加したスタイルの中身はこのようになっています。

<br />
<a href="#fileurl#"><img src="#fileurl#" alt="#alttext#" title="#alttext#" border="0" width="#imgwidth#" height="#imgheight#" /></a><br />

ただこれだと、やりたいことがうまく実現出来ていません。Windows Live Writterと異なり、MarsEditはサムネイル画像を自動で作成してくれません。このへんは不便ですね。

というわけで、ちと修正を加えます。まず、画像の最大サイズを変更します。このページの上の方で修正したやつです。幅を640pxから1280pxに。こうすることで、幅1280px以上の画像を幅1280pxにリサイズして、画像をアップロードするはずです（幅1280px以下限定で）。

次にスタイル側を調整します。

先ほど追加したAdd Linkというスタイルを以下のように変えます。

<br />
<a href="#fileurl"><img src="#fileurl"  alt="#alttext#" title="#alttext" border="0" width="640" height="auto" /></a><br />

スタイル側で画像サイズを640pxに固定し、高さは自動にしました。なので、ページに表示される画像は、オリジナルの画像が表示されますがブラウザ側で幅640にリサイズされて表示されるようになります。

以下は、実際に挿入してみた画像です。

最近のブラウザは、画像のリサイズもきれいにしてくれるので、いいんですが、スマホなんかで見ると、ファイルサイズの関係上厳しいものがあるかもしれません。

そのへんは要調整ですかね。

本日はここまで。