こんにちは、パラレルブロガーのゆーすけ(@yusuke_plmrstn)です。
先日紹介したこちらの「CSSで画像に枠線を付けて目立たせる方法」の記事。
投稿した画像をWord Pressエディタで開き、画像1つ1つに手動でclass名を指定する方法を紹介しました。
面倒に見える方法ですが、枠線を付けたい画像とそうでない画像を区別して投稿できるので実は便利な方法なんですが、わざわざWord Pressエディタで設定するのは正直面倒でした。
いつも使ってる MarsEdit でclassを指定できればと思っていたのですが、簡単な設定をすることで予めclassを指定した状態で投稿できることが判明！
今回はその方法をご紹介します。
この記事の目次一覧
MarsEditの設定
ここから先は MarsEdit の設定を変更していきましょう。
Upload Utility
まずは MarsEdit を起動し、なんでもいいので画像をドラッグ＆ドロップで挿入するとこんな Upload Utility というのが起動します。
この中の Style 部分をクリックすると選択肢がいくつか表示されるので、その中から “Customize” を選択します。
Customize
その先ではこんな風に名前を設定したりタグを設定する画面になるので、次の通りにコピペしましょう。
- 名前：自分の好きなわかりやすい名前を入力
- Opening Markup：下記のタグを入力
- Closing Markup：空欄のままにしておく
HTML
<img style=”display:block; margin-left:auto; margin-right:auto;” src=”#fileurl#” class=”aaa” alt=”#alttext#” title=”#displayname#” border=”0″ width=”#imgwidth#” height=”#imgheight#” />
完成形
ここまで入力できたらOKを押して保存します。
僕は自分でわかりやすいように aaa という簡単な名前をつけました。
すると一覧の中に自分が設定した項目が増えているのがわかりますね。
これで成功です！かんたんな設定でしょ？
投稿時の設定
次は実際に MarsEdit を使って記事を作成する時の手順です。
画像をドラッグ＆ドロップ
MarsEdit で記事作成画面を開き、投稿したい画像をドラッグ＆ドロップで挿入します。Upload Utilityが開きますね。
Styleの選択
同じように Style を選択すると、さっき自分で Customize した項目が増えていることがわかります。それを選択しましょう。
実はたったこれだけで作業完了なんです。
このまま記事を投稿して Word Pressエディタで画像を調べてみると無事に画像CSSクラスが最初から入力されていることがわかります。
これで多少は楽できます。よかったよかった。
まとめ
簡単な設定変更だけで MarsEdit はますます便利なエディタとして使うことができます。
MarsEdit は有料アプリの中でも高額なものとして有名ですが、この書きやすさを考えるとマジで安いもんです。
個人的に気に入っているのはオフライン環境でもガッツリ記事を書けること。これだけでも飛行機の移動中や電波環境が悪いところでも作業できるのでめちゃくちゃ助かってます。
今回紹介したような設定を追加して便利に効率的にブログ記事を書きましょう！