ブログをPC,スマホで手軽に書く!Dropbox&Markdown超活用術【無料】

自分のサイトをたくさんの人に見てもらうためには記事を頻繁に更新する必要があります。

とはいえ、

  • 「腰を据えて記事を書く時間がない…」
  • 「HTMLタグを打ち込むのがめんどくさい…」

などの理由でなかなか手がつかないものですよね。

今回はブログに関するそんなお悩みをDropboxMarkdown記法を使って解決してみようと思います!

筆不精なブロガーのみなさん必見です!

HTMLよりも超簡単に文章を書く方法

WordPressなどで記事を書く際、文章を装飾するためにはHTMLの文法に沿って記述する必要があります。<h1></h1>とか<br>とかのタグで囲むあれですね。

そしてみなさんご存知の通りこの作業が非常に面倒くさい!!

よく使いそうな<h3></h3>タグをとってみても、

  • 記号 < を打ち
  • アルファベット h を打ち
  • 数字 3 を打ち
  • 記号 > を打つ

これでやっとタグの前半部分 <h3> が書けました。中身の文字列を書いた後、今度は後半の閉じタグ </h3> を書かなければなりません。

生来面倒くさがりの私は 見出しを書くだけなのにこんなに面倒なことがあっていいのか!? と思ってブログ執筆が捗りませんでした。

もちろん、ビジュアルエディタなどの機能を使って

  • 文を書き
  • ドラッグ&ドロップで選択し
  • h3タグを付与するボタンを押す(あるいは ctrl + B で太字にしたり)

と、少しだけ楽をすることもできますが書いた文をもう一度なぞるところがどうも気に入りません。

ましてや、スマホでの執筆はもう絶望的と言ってよいほどの手間がかかるでしょう…

Markdownって聞いたことある?

ブログ執筆のそんなとてつもない手間を超軽減してくれるのがMarkdown記法です!!

どれくらい楽になるかというと、例えば先ほどの <h3>見出し</h3> と同じことを実現しようとすると、### 見出し と書くだけで済むのです!!

  • <h3>見出し</h3> (12文字)

  • ### 見出し (スペース込み7文字)

ですよ!!Shift同時押しも考慮すると喜びもひとしおです!!

手数 HTMLの入力 HTMLの見え方 Markdownの入力 Markdownの見え方
1 Shift + , < Shift + 3 #
2 h <h Shift + 3 ##
3 3 <h3 Shift + 3 ###
4 Shift + . <h3> (スペース) ###
5 見出し <h3>見出し 見出し ### 見出し
6 Shift + , <h3>見出し<
7 / <h3>見出し</
8 h <h3>見出し</h
9 3 <h3>見出し</h3
10 Shift + . <h3>見出し</h3>

さぁ、テンションあがりすぎて表まで作ってしまいましたが、(ちなみにこの表もMarkdownで書いてます)ご覧の通りMarkdownはHTMLの半分の手数で済んでいます。

さらにそれだけでなく、Shift同時押しの数もHTML4回に対してMarkdownは3回

さらにさらに、MarkdownはShift同時押しが3回と言っても実質的にはShift + 333と連続して入力することを考えると、Markdown記法の楽さとスピーディさがご理解いただけるのではないでしょうか!

Markdown記法をザックリ紹介!

ここではよく使う書き方をまとめました。

見出し

意味 Markdown 見え方
h1 # 見出し

見出し

h2 ## 見出し

見出し

h3 ### 見出し

見出し

h4 #### 見出し

見出し

リスト

箇条書き

半角ハイフン、半角スペースに続けて文字を打つと箇条書きになります。

- みかん
- りんご
- ばなな
  • みかん
  • りんご
  • ばなな

ネスト

先頭にスペースを3つ以上打つとネストできます。

- くだもの
   - みかん
   - りんご
   - ばなな
- やさい
   - きゃべつ
   - はくさい
   - きゅうり
  • くだもの
    • みかん
    • りんご
    • ばなな
  • やさい
    • きゃべつ
    • はくさい
    • きゅうり

番号付きリスト

数字付きで列挙するには下記のように打ちます。

1. スカイツリー
1. 東京タワー
1. 通天閣
  1. スカイツリー
  2. 東京タワー
  3. 通天閣

番号付きリストのネスト

ネストも同様です。

1. 東京都
   1. スカイツリー
   1. 東京タワー
1. 大阪府
   1. 通天閣
  1. 東京都
    1. スカイツリー
    2. 東京タワー
  2. 大阪府
    1. 通天閣

文字装飾

意味 Markdown
太字 **太字**
イタリック *イタリック*
太イタリック _**太イタリック**_
打ち消し ~~打ち消し~~

1行目と2行目の間はハイフンで仕切ります。

| |列頭1|列頭2|
|—-|—-|—-|
|行頭1|要素1|要素2|
|行頭2|要素3|要素4|
列頭1 列頭2
行頭1 要素1 要素2
行頭2 要素3 要素4

コード

インライン

このように`コード部分を`バッククオートで囲む

このようにコード部分をバッククオートで囲む

複数行

```javascript
var i = 0;
```
var i = 0;

ちなみにiPhoneでバッククオートを打つにはシングルクオートを長押ししましょう。するとバッククオートが候補に現れるので入力できます。

Dropboxでいつでもどこでも書く

Markdownで文章を書く手間は軽くなりましたが、「忙しくてそもそもブログを書く時間がない…」 という方もいるのではないでしょうか。

そういう時はスキマ時間を有効活用しましょう!

ここではDropboxを活用して外でも家でも記事を書くオススメのツールを紹介します!

※以降はDropbox上に以下のフォルダ構成でMarkdownファイル(拡張子.md)を配置してあるものとします
/blog
|-articles
| `-editing_with_dropbox_and_markdown.md
`-css
`-style.css

iPhoneアプリで書く!

Dropboxに配置した.mdファイルをMarkdown対応のiPhoneアプリで編集します。

  • Dropbox同期可能
  • Markdown編集可能
  • 無料
  • 最近もアップデートされている

iPhoneでこの4条件を満たすのはPermanoteというエディタアプリです。

Permanote

Permanote (formerly Nebulous Notes)

Permanote (formerly Nebulous Notes)
無料
posted with アプリーチ

もともと有料だったのですが、最近広告付きで無料になったようです。

ただ、なぜか私のiPhoneでは広告らしい広告は表示されず、「広告を外すならアップグレードしてね」という主旨のメッセージのみが表示されています。

permanote_no_ads

メッセージは邪魔と言えば邪魔ですが、広告が出ないのはラッキーなのでこのまま使い続けようと思っています。

ショートカットキーとCSSのカスタマイズが可能

個人的にPermanoteで気に入っているのは次の2点です。

  1. Keyboard Stripと呼ばれるショートカットキーのカスタマイズが可能
  2. Markdownのプレビュー画面で適用するCSSのカスタマイズが可能

1について

Keyboard Stripとは、-#などのよく使うキーを、キーボードの上に常時表示しておける機能です。

permanote_keyboard_strip

1画面に収まらなくても左右にスクロール可能なので、多くのコマンドを登録しておくことができます。

さらに、アンドゥやリドゥなどの特殊なコマンドも登録可能で、iPhoneでの記事編集がますます捗ります!

2について

独自のCSSをプレビュー画面に適用し、自分のブログでの見た目を再現することができます!

permanote_css_preview

ただし、サーバ上からCSSファイルの内容ををコピー&ペーストするだけではうまく適用されないかもしれません。

その場合は、要らないクラスセレクタを削除するなどしてみてください。

ちなみに私は、h1タグのセレクタが.post_article h1 {...}となっていたのをh1 {...}と書き換える(.post_articleを削除)ことでスタイルがうまく適用されるようになりました。

PCでプレビューしながら書く!

次に、自宅で腰を落ち着けて書く時にオススメの方法を紹介します。

編集対象のファイルは引き続きDropbox上の.mdファイルです。

Visual Studio Code

vscode_screenshot

VS Codeとも略されますが、こちらはMicrosoftの開発したフリーの高機能エディタです。

もともとはプログラミングのためのエディタですが、非常に軽快な動作でテキストエディタとしても扱いやすいので、記事の執筆に愛用するユーザーも多いようです。

Markdown記法による入力が標準でサポートされています。

カスタムCSS

PCの広いモニターで作業するなら、プレビュー画面を同時に開きながら記事を編集したいですよね。

それだけで執筆も捗るというものですが、前述のPermanoteと同じように自前のCSSを適用することで、自身のサイトの見た目とそっくりにすることができます!以下では説明のため、VS Code起動後に上述のblogフォルダを開いたものとします。

vscode_css_preview

vscode_markdown_css_settings

Settingsで適用したいCSSファイルの場所を指定してください。

ただしセパレータ”/”は二重に打つ点に注意してください。

ここでも要らないセレクタを削除するなどしてスタイルを調整する必要があります。

また、私の場合はVS Codeを暗めのテーマで使っているので、サイトの背景色と雰囲気が大きく異なりました。

そこで、background-colorプロパティにサイトの背景色を指定し、より自分のサイトに近いスタイルでプレビューできるようにカスタマイズしました。

これでPCでの執筆もサクサク進みます!

書いた記事をWordpressにアップする!

スマホやPCで記事を書き上げたら、いよいよWordpressにアップしましょう!

プラグインを使ってMarkdownを入力できるようにする方法もありますが、ここでは最も簡単な方法をご紹介します!

なんとドラッグ&ドロップするだけ!

VS Codeのプレビュー画面で記事を全選択状態にしてから、Wordpressのビジュアルエディタにドラッグ&ドロップするだけで装飾などのスタイルを(ほぼ)再現できます!多少崩れますのでそこだけ微修正しましょう。

ちなみに、Wordにはコピー&ペーストでスタイルを再現できます。大学のレポート作成などにも応用できそうですね!

 

今回は筆不精なブロガーさんのためにDropboxMarkdown記法を使った超速執筆術をご紹介しました!

これでサイトの更新頻度は爆上げ! PV数も爆上げ! ですね!


スポンサーリンク
by

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です