BloggerでMarkdown記法を使って書く (要StackEdit)

Googleが提供するブログサービスBloggerは、便利なMarkdown記法が使えません。
そこで、Google Chromeアプリの「StackEdit」(フリー)を使います。

StackEdit タイトル

若干クセはありますが慣れてしまえば簡単なので、実際に僕が採用している方法を紹介します。

目次

Markdown記法とは

この記事を読まれているということはご存知かと思いますが、いちおう。
Markdownとは、簡単な記述でHTMLを表現する記法です。

例えば、太字なら

**太字にする**

と編集画面で書くだけで、

<strong>太字にする</strong>

と、記事上ではHTMLに変換されます。

簡単ですね。他にも、テーブル等も表現できます。
Markdown記法の解説記事は沢山あるので、調べてみてください。

【参考】文章作成やメモ書きにも便利、Markdown記法 - KOJIKA17

StackEditについて

Google Chrome上で使えるテキストエディタです。
書き出し先としてBloggerやTumblrを指定でき、それらのサービスで記事の公開ができます。また、書き終えたテキストファイルをGoogle Driveにバックアップを取っておくなどの機能もあります。

まずはインストール

とりあえず入れてしまいましょう。
https://chrome.google.com/webstore/detail/stackedit/iiooodelglhkcpgbajoejffhijaclcdg

※Blogger専用のGoogleアカウントを作っている場合は、そのアカウントをChromeのユーザにした状態で行う。

StackEditを使った記事の書き方からBloggerでの公開まで

一通りの流れ

  1. StackEditで記事を書く
  2. StackEditでBlogger へ記事をパブリッシュする(この時点では記事を公開しないように設定する)
  3. ここからBloggerへ移り、記事のオプション設定をしてから、記事を公開する

新たに記事を書くときも、記事を修正するときも、この手順を採ります。(記事を修正するときBloggerで変更してしまうと、StackEdit側のデータと一致せず後々混乱するため)

僕の場合、Evernoteで下書きを書いておき、StackEditにペーストして公開用に編集しています。

.

新規記事の書き方と修正

StackEditを起動すると、次のような画面になります。
左側のスペースがテキスト編集画面で、右側には簡易プレビューが表示されます。
(初めて起動したときは、以下のようなサンプルが表示されます)

StackEdit 編集画面

※新規に記事を書くときは、右メニューを開き「New document」をクリックします。

.

1.記事の基本設定をする

ウィンドウ右上のテキストボックスには、記事のタイトルを入力します。StackEdit上のファイル名になりますが、Bloggerでは記事のタイトルとして公開されます。

最初に、左側の編集ウィンドウに記事の基本情報をコピー&ペーストします。(以下は仮のものです)

---
date : 2015-11-20 10:00:00
tags : [ラベルA,ラベルB,ラベルC]
published : false
---

順番に、記事の公開日時(仮でOK)、タグ(Blogger上ではラベル)、記事の公開設定 です。
ここで大切なのが「published: false」です。これを忘れると、後に説明するBloggerへ送信したときに直ぐに記事が公開されてしまいます。

参考までに、今ご覧になっているこの記事だとStackEditでは以下のようになっています。

StackEdit 編集例

Blogger側でも日時やラベル(タグ)の設定はできますが、StackEditとBloggerの整合性を保つため、「日時やラベルの編集はStackEditでする」とルールを決めておいた方がいいです。

.

2. 記事の内容を書く

記事の基本設定の下に、続けて本文を書きます。ここでは勿論、Markdown記法が使えます。(そのために周りくどいことをしているわけですから)

.

3. 書き終わったら、Bloggerへパブリッシュする

StackEdit の Publish

StackEditウインドウの左上「#」がメニューになっています。これをクリックして開き「Publish (Export to the web)」を選び、「Blogger (※Blogger Pageでない方)」を選択しましょう。

StackEdit の Blogger パブリッシュダイアログ

公開設定のダイアログが表示されます。
「Blog URL」にご自身のBloggerのURLを入力ください。(当サイトだと http://voices.ku-neko.com
「Format」が「HTML」になっていなければ選択してください。これはStackEditで書いたテキストを、どんな書式でBloggerに送るかの設定です。(Markdownを選ばないこと)

設定が済んだら、OKボタンを押します。

この時点で、Bloggerに記事データが送られます。
では、Bloggerの管理画面に行ってみましょう。

.

4.Bloggerで最終チェックして、公開する

Bloggerの管理画面で送信した記事を見つけたら開いてください。右側の「投稿の設定」を見てみましょう。日付やラベルなどが既に付与されていると思います。

Blogger の投稿設定

Bloggerで編集するべきは、「パーマリンク」「検索向け説明」「オプション」です。
パーマリンクは、設定しなければ自動的に記事のURLが作られますので、自分でURLを決めたいときに。検索向け説明は、METAタグのdescriptionに設定されます。オプションではコメントの可否などを設定できます。(Bloggerでは記事毎にコメントの可否を決められます)

いずれの設定も、不要であれば飛ばして構いません。

(大丈夫だと思いますが、オプションの「構成モード:プレビュー」「改行:<br> タグを使用 」になっているのを確認しておきましょう)

済んだら、Bloggerの公開ボタンを押しましょう。
ここでようやく記事がネットに公開されます。(公開日時が未来であれば、予約投稿となります)
※すぐに公開しないで保存しておきたい場合は、保存ボタンを。

.

5.公開後に記事を書き直すときは

公開後に記事を修正したい場合は、手順の先頭に戻り、StackEditで記事を書きなおして下さい。その際、StackEditのpublished設定はtrueにするか消すこと。(そうでないとパブリッシュ時に非公開に戻るので)

StackEditで記事を書き直したら更新ボタンを。

記事を書き終えたら、StackEditの右上にある記事タイトル右の更新ボタンを押すだけでOKです。

StackEditでもっと書くためのTips

画像の挿入について

StackEditでは画像のアップロードができないため、Bloggerにあらかじめアップロードしておきます。僕の場合、画像アップロード専用の非公開な記事を一つ作っています。この記事上でアップロードを行い、画像のHTMLタグを取ってきて、StackEditの編集画面に貼り付けています。

「続きを読む」はどう書くか

StackEditの編集ウィンドウで「<!-- more -->(後に改行)」と書きましょう。これ以降は「続きを読む」の後に表示されます。

Markdownの特殊文字「*」等を表示したいときは

バックスラッシュ「\*」を付けましょう。

2つ以上の改行が使えない

Markdownの欠点で、これはできません。どうしても使いたいときは、「.(ピリオド)」だけの行を挟んだりし空行にしないようにしてそれっぽく代用します。(この記事でもやっています)

Google DriveにStackEditの記事をバックアップする

左上メニューの「Synchronize」で「Save on Google Drive」を選びます。Folder IDには保存先のGoogle Driveのフォルダを選択して、OKボタンを押します。(あらかじめGoogle DriveでBlogger保存用のフォルダを作っておくといいです)Google Driveの認証を求められたら許可してください。設定後は、記事の編集中に Ctrl (Cmd) + S を押すとGoogle Driveにシンク(保存)するようになります。自動シンクの設定もあります。
気になる場合は、やっておくと良いでしょう。

おわりに

さて、このブログの一番人気はブログサービス比較の記事で、その追加記事として書きました。

僕がブログサービスを決める上で重視していたものの一つに「Markdown記法が使えること」があります。あいにくBloggerでは使えず、それ以外の機能は気に入っていただけに、採用には踏み切れずにいました。

StackEditがあるからこそ、僕はBloggerを選んだといっても良いかもしれません。

あなたのBloggerライフがより快適なものになりますよう!

.
(ほぼこの使い方で満足してはいますが、一つ気になる点を付け加えておくと「StackEditでは記事(ファイル)が日付で管理できないこと」でしょうか。増えてくると大変かも?

0 件のコメント :

follow us in feedly feed

PAGE TOP