今更ながらStackEditを使って、Bloggerの記事をMarkdown記法で書いてみた

今更ながらMarkdown記法というものを知る機会があり、本ブログもMarkdown記法で書いていきたいと思うようになった。本ブログはBloggerで作成しており、そのままでは直接Markdown記法による記事投稿はできないので、一度Markdown記法に対応したエディターでHTMLを作成し、それを貼りつけることで対応するようにした。

StackEditを使う

 Markdown記法に対応したエディターとして、StackEditを使うことにした。StackEditはWeb上でMarkdown記法を書きつつ、プレビューも同時に表示できる。

データはGoogleドライブ上に保存されるので、メモツールとして利用する場合でも非常に有用だ。

Bloggerのテーマを編集して見出しタグ修正する

Bloggerの見出し設定は以下になっていることがわかった。

見出しタグ	適用箇所
h1	ブログタイトル
h2	日付・ウィジェットタイトル・記事内の見出し1
h3	記事タイトル・記事内の見出し2
h4	コメント
h5	未使用
h6	未使用

h1タグはページのタイトルとなるので、ブログタイトルとなっていることは問題ないが、h2タグ、h3タグには以下問題がある。

• 記事タイトルがh2タグではなく、なぜかh3タグ
• h2タグが日付・ウィジェットタイトル・記事見出し1など複数で設定されており、特に「日付」といったタイトルにすべきではない項目がh2タグで設定されている

理想は見出しタグを以下のように変更したい。

見出しタグ	適用箇所
h1	ブログタイトル
h2	記事タイトル
h3	記事見出し1
h4	記事見出し2
h5	未使用
h6	未使用

上記が理想ではあるが、変更箇所が多岐にわたるため、まずは以下のようにBloggerのテーマを編集することにした。最低限、「日付」を見出しとして扱わないよう変更する。

見出しタグ	適用箇所
h1	ブログタイトル
h2	ウィジェットタイトル・記事見出し1
h3	記事タイトル・記事見出し2
h4	コメント
h5	未使用
h6	未使用

CSSの修正箇所は以下の通り。

# 353行付近
h2.date-header {
  font: $(date.header.font);
}
　　　↓
.date-header {
  font: $(date.header.font);
}

HTMLの修正箇所は以下の通り。

# 996行付近
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
# 1350行付近
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
　　　↓
<div class='date-header'><span><data:post.dateHeader/></span></div>

BloggerのCSSを追加して見やすくする

今まであまりこだわってはいなかったのだが、記事の見やすさを向上させるため、見出しタグや、コード表示のためのpreタグのCSSを修正することにすることにした。

見出しのデザインはCSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選が非常に参考になった。

上記URLのデザインを参考にしつつ、本ブログでは以下の通りCSSを追加した。

h2 {
font-size: medium;
margin-top: 1.5em;
margin-bottom: 0.5em;
padding: 0.3em;
color: #494949;
background: #f4f4f4;
border-left: solid 5px #249fa3;
border-bottom: solid 3px #d7d7d7;
}

h3 {
margin-top: 1.5em;
margin-bottom: 0.5em;
padding: 0.3em 0em;
border-bottom: solid 3px #249fa3;
}

pre {
background: #e2f1ea;
border: dashed 1px #249fa3;
margin: 1em 0em;
}

table, td, th {
border: solid 1px #249fa3;
border-collapse: collapse;
margin: 1em 0em;
}

th {
background: #e2f1ea;
}

Bloggerのテーマの編集からCSSの追加はできるが、CSSが二重で設定されたりするので、「HTMLの編集」にて追加した。

StackEditで作成したHTMLをBloggerに貼る

StackEditの「Export to disk」→「Export as HTML」を選択し、「Plain HTML」を選んだ後、「Copy」ボタンを押すと、HTMLがクリップボードにコピーされる。これをBloggerの記事のHTMLとして貼りつけてやればよい。

画像はStackEditではなくBlogger側で管理させたいため、HTMLを貼りつけた後、必要な個所に画像を挿入する手法をとっている。

また、Bloggerの仕様により段落を表すpタグが消えるようなので、<br />を適宜挿入し、文章の整形をしている。