マークダウンで素早くHTMLを作成し、ブログ投稿する方法

とにかくマークダウンでのブログ投稿の試行錯誤を重ねています。

Markdown記法、とりあえず覚えるものは14個!!
14個！！いいか？たった14個！！厳選したから、とにかく覚えろーーー！！ 13個です。 あと注意が必要なのが「引用の>、>>」です。HTMLの特殊文字として認識されることがあるようです。 勝手ながら決めました。まぁ自分のブログなので備忘録と...
okenigou.com
2020.02.07

文章を書くときのエディタは何でもいいです。なんでもいいとは言っても、私は「メモ帳」か「VSCODE」しか使っていません。すぐにアップできそうなネタや文字数が比較的少ないものは最初からVSCODEで作業するとサクサクいけます。数時間、または1日ではどうにもならないようなネタはメモ帳でもなんでもいいので一旦txtに保存し、フォルダにストックします。

1番楽なのはマークダウンタグ14個を使って、ざっくりマークダウンし、そして「akamist 変換 markdown」で結果表示されるサイトで一発変換できること。

コードやタグの組み合わせか何かで、上記サイトを使った変換で不具合やエラーが出る場合は、VSCODEの拡張機能「Markdown PDF:export」へ即切り替える。こちらの「Markdown PDF:export」はデザインをうまい具合になんだかんだやってくれるのだが、シンプルなHTMLにする場合は少々編集が必要である。

結局はどうなってもいいようにまずは文章構成をしっかりすること。

よって、ある程度の文字数の文章があるとして、次の手順でブログ投稿を試みます。

【手順】

  1. VSCODEでテキストファイルを開く
  2. 右下の言語モードの選択を「markdown」
  3. プレビューを表示
  4. マークダウンしていき、体裁を整えて表示を確認する

この時点でhtmlとして保存しておいてもいい。その場合、言語モードは「markdown」を継続します。記述の注意点としては要素と要素の間は1行あけましょう！くっつけると変換時に不具合が多かったです。

要素どうしは離すこと。例えば…

<h1>見出し</h1>
<p>文章</p>

ではなく、

<h1>見出し</h1>

<p>文章</p>

とすること。

すべての要素でこれを行う。

基本的にデザインはデフォルトのままです。WoordPressにアップするときに投稿記事ごとにCSSの設定を変えられるようですが、カスタマイズやプラグインを使う必要があるようです。この辺はどうにか達成したいものです。

  1. VSCODEのプレビューで見た目が大体整ったとする
  2. コードをコピペ
  3. 「akamist変換markdown」様のサイトで変換

しかし！！ここから2つに分かれます。

  • 「akamist変換markdown」様のサイト」で変換がうまくいった場合
  • 「akamist変換markdown」様のサイト」で変換出来ずエラーが出た場合

8-1【akamist変換markdownでうまくいった】場合

  1. HTMLを取得
  2. 仮にabc.htmlを作る(すでにHTMLとして保存している場合は上書き保存する)
  3. ブラウザとVSCODEで確認する(この段階でVSCODEプレビューはもう使わない)
  4. aタグに「 target=”_blank”」を追加する
  5. そのほかに編集・追加することがあればここで行う
  6. ブラウザとVSCODEで最終確認する
  7. wordpress/wp-adminで新規投稿「コードエディター」
  8. HTMLコピペ
  9. タイトルの部分だけコピペ編集
  10. 公開
  11. 確認を繰り返し、終了する

8-2【akamist変換markdownでエラー】の場合

  1. 頭を切り替える
    拡張機能「Markdown PDF:export」を使う
  2. 変換前に注意点。現在確認できている注意点ですが、見出しhタグに自動的にidが付加されます。HTMLを修正する際に面倒になるので、「## 」を「h2」へ書き換え、仮クラス「class=”abc”」を付加する。

Markdown PDF:exportでやることになったとき。
hタグは勝手にidが付与されます。これ消すのが非常にメンドクサイ。
しかし、実験したところ、何かしらのidかclassが指定されていれば、ランダムな文字列の付与がありません。だから、hタグには仮に「class=”abcdefg”」とか付けておくことをおすすめします。

  1. ここで一旦、変換してみる。いま編集しているファイルが.htmlなら.mdを新規作成し、「Markdown PDF:export」を利用する。
  2. 作成されたHTMLをブラウザとVSCODEで開く
  3. body以外削除する
    preタグにも自動的に「<pre class=”hljs”>」が付くので「class=”hljs”」を削除する。

ここからは手順が同じ。

  1. ブラウザとVSCODEで確認する(この段階でVSCODEプレビューはもう使わない)
  2. aタグに「 target=”_blank”」を追加する
  3. そのほかに編集・追加することがあればここで行う
    hタグの仮クラスもここで削除しておく
  4. ブラウザとVSCODEで最終確認する
  5. wordpress/wp-adminで新規投稿「コードエディター」
  6. HTMLコピペ
  7. タイトルの部分だけコピペ編集
  8. 公開
  9. 確認を繰り返し、終了する

まとめ

パターンを認識し、クセを理解し、回避するか達成できる方法を考える。

スポンサーリンク
投稿記事
スポンサーリンク
okenigou
OKE2GOU
スポンサーリンク