MarsEditで表(テーブル)を作成する方法を考えたところ、【MobTabGen】というTableタグ自動生成してくれるWebサービスが一番良かった。

      2016/03/21

MarsEditでテーブルを作成する方法を考えたのですが、MobTabGenが一番使いやすく、というか楽ちんだったので使い方も併せて書きたいと思います。

photo via : Adam Campbell

 

Sponsored Links

 

参照させて頂いたサイト

下記サイトを参照させて頂きました。これからお世話になります。

モバイルブロガーのための超速Tableタグ生成ツールMobTabGenを作ってみた

元々はモバイルブロガーのためのWebサービスのようなのですが、Mac上のSafari や Chromeでも動作することを確認できました。

基本的に僕はMacでMarsEditというアプリでブログを書いており、このアプリでブログを書く際はHTMLの知識が多少必要になるのですが、僕自身あまりHTMLの知識はありませんので、なるべく簡略化したいと思い、テーブル作成に関してはこのWebサービスにたどり着きました。 

 

テーブルを作成するためにはTableタグを使います。HTMLの知識があまり無い僕にとってHTML直打ちでは無理がありました。

そのtableタグを自動的に作成してくれるのがこのWebサービスです。

下記ページからテーブル作成のためのTableタグを作成できます。

MobTabGen

 

 

MobTabGenの使い方 

まずは、上記にも載せているMobTabGenへアクセス。

150426 table tag html 1

 

上の段に作成したい表を「|」で区切り、入力していきます。

するとプレビュースペースの部分で確認ができます。

150426 table tag html 3

 

その下の「HTMLソースコード出力」の部分に作成されたTableタグが表示されますので、それをMarsEditに貼り付けるだけです。

150426 table tag html 4

 

今回は下記のように入力してみました。

|iPhone 6|iPhone 6Plus

画面サイズ|4.7インチ|5.5インチ

重さ|129g|172g

 

実際のテーブルが下記です。

すごく簡単に作成できちゃいました。 

  iPhone 6 iPhone 6Plus
画面サイズ 4.7インチ 5.5インチ
重さ 129g 172g

 

MobTabGenの設定について

150426 table tag setting 1

 

ヘッダー行を付ける場合は、下記を【Yes】にします。

上記の例として作成したテーブルはヘッダー付きで作成しています。

150426 table tag setting 2

 

下記の書式情報(CSS)も出力を【Yes】にすると、CSSのコードも表示されます。

150426 table tag setting 4 

 

下記がCSS出力を【Yes】にした場合。

150426 table tag setting 3

この【<style>】から【</style>】までを自分のブログのスタイルシートに追記すると、プレビュー表示とまったく同じ表示になります。

この部分については必要な時だけで、基本的に表示はさせないで大丈夫だと思います。

 

まとめ

MobTabGenかなりの勢いで楽です。これからお世話になります。

今回はPC上での動作で説明していますが、画面の表示通り、【するぷろに送る】や【Textforceに送る】とあるように、モバイル端末でブログを書く場合、各ブログ用アプリと連携が可能です。

 

 

Sponsored Links

 

 - Webサービス(WP)
 -