MarsEditを使って画像classを指定して投稿する方法

スポンサーリンク

The following two tabs change content below.

ゆーすけ

ブログに加え、デザイン、カメラマン、執筆をこなすサラリーマン。通称パラレルブロガー。のんびりしてそうでホントにのんびり屋。プロフィールはこちら。運営サイト:サインを作るならご署名ネット。クラシックミニ専門サイトの32miniドットコム

こんにちは、パラレルブロガーのゆーすけ(@yusuke_plmrstn)です。

先日紹介したこちらの「CSSで画像に枠線を付けて目立たせる方法」の記事。

CSSで画像に枠線を付けて目立たせる方法

2017.03.10

投稿した画像をWord Pressエディタで開き、画像1つ1つに手動でclass名を指定する方法を紹介しました。

面倒に見える方法ですが、枠線を付けたい画像とそうでない画像を区別して投稿できるので実は便利な方法なんですが、わざわざWord Pressエディタで設定するのは正直面倒でした。

いつも使ってる MarsEdit でclassを指定できればと思っていたのですが、簡単な設定をすることで予めclassを指定した状態で投稿できることが判明!

今回はその方法をご紹介します。

スポンサーリンク

MarsEditの設定

ここから先は MarsEdit の設定を変更していきましょう。

Upload Utility

まずは MarsEdit を起動し、なんでもいいので画像をドラッグ&ドロップで挿入するとこんな Upload Utility というのが起動します。

Marspic

この中の Style 部分をクリックすると選択肢がいくつか表示されるので、その中から “Customize” を選択します。

Customize

Marspic2

その先ではこんな風に名前を設定したりタグを設定する画面になるので、次の通りにコピペしましょう。

Marspic3
  • 名前:自分の好きなわかりやすい名前を入力
  • 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#” />

赤字の部分 aaa を自分の好きな画像CSSクラスに書き換えて使おう

完成形

ここまで入力できたらOKを押して保存します。

Marspic4

僕は自分でわかりやすいように aaa という簡単な名前をつけました。

すると一覧の中に自分が設定した項目が増えているのがわかりますね。

Marspic5

これで成功です!かんたんな設定でしょ?

 

投稿時の設定

次は実際に MarsEdit を使って記事を作成する時の手順です。

画像をドラッグ&ドロップ

MarsEdit で記事作成画面を開き、投稿したい画像をドラッグ&ドロップで挿入します。Upload Utilityが開きますね。

Marspic 6

Styleの選択

同じように Style を選択すると、さっき自分で Customize した項目が増えていることがわかります。それを選択しましょう。

Marspic7

実はたったこれだけで作業完了なんです。

このまま記事を投稿して Word Pressエディタで画像を調べてみると無事に画像CSSクラスが最初から入力されていることがわかります。

Marspic8

これで多少は楽できます。よかったよかった。

スポンサーリンク

まとめ

簡単な設定変更だけで MarsEdit はますます便利なエディタとして使うことができます。

MarsEdit は有料アプリの中でも高額なものとして有名ですが、この書きやすさを考えるとマジで安いもんです。

個人的に気に入っているのはオフライン環境でもガッツリ記事を書けること。これだけでも飛行機の移動中や電波環境が悪いところでも作業できるのでめちゃくちゃ助かってます。

今回紹介したような設定を追加して便利に効率的にブログ記事を書きましょう!

スポンサーリンク

スタイリッシュなサイン、作ります!

世界に1つだけのあなたのオリジナルサインをゆーすけが作成します。

ローマ字、日本語、カタカナ、芸能人のようなサインまで多種多様な用途に応じて作ります。

サービス開始から半年たらずで100件以上のオーダーをいただいています。

サインは1件3000円。納品時には書き方のコツ資料、書き順動画、サイン練習帳もお送りします。

クレジットカードや書類にビシッとかっこいいサインが書けたら素敵ですね!