WordPressテーマSWELLでMarkdown文書をコピペして投稿時間短縮

WordPress(SWELL)でも、Markdownテキストをビジュアルエディターに流し込むことで、ブログ作成の時間短縮をすることが出来ます。

この文章もMarkdownで記述してから、ちょっとした装飾を加えて完成しています。

私は、はてなブログではMarkdownでサクサクとブログを書いていたのだけど、WordPressの人気テーマSWELLでも同じことができないかしら?

とことで、試しにMarkdown文書をコピペしたところ、全てではないですが、かなりの部分が満足できたので、まとめてみます。

目次

Markdownとは?

Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。しかし、現在ではHTMLのほかパワーポイント形式やLATEX形式のファイルへ変換するソフトウェア(コンバータ)も開発されている。各コンバータの開発者によって多様な拡張が施されるため、各種の方言が存在する。

Wikipedia:Markdown

ざっくり説明すると、HTMLよりも簡単にHTMLっぽい文書が作成できますよ!ということですね。

私は主に、このシーンでMarkdownを使用しています。

  • プログラムの設計書代わり
  • githubのドキュメント
  • はてなブログの記述

ブロガーのみなさん的には「はてなブログの記法のひとつとして、Markdown記法モードが用意されている」という認識かと思います。

私はかなり慣れ親しんでいるので「WordPressのブロックエディターで楽々」みたいなハウツー記事を見ても、うああ…と思うだけで、なかなか重い腰が上がらなかったのです。が…

でも、Markdownも使えるよ!というブログ記事もいくつか見かけましたので、早速トライしてみました。

Markdownの例題

ブロックエディタに例題を貼り付けてみる

お手元にWordPress+SWELLがあれば、四角で囲った文章のすべてをブロックエディタに貼り付けてください。

うまく行かない場合は、一度テキストエディタ等にコピペしてから、ブロックエディタにペーストみてください。
Visual Studio Codeで上手くいかない場合は、BOM付きのUTF-8にしてみてください。

導入文を書きます。
公開後、目次はこの直後に挿入されるはずです。

## 行に関わる装飾

### 段落系

本文。
正式なMarkdownと異なり、前の行末に半角空白2文字を付けなくても改行できるようです。

1行開けると別の段落になります。

### 表組み系

|ヘッダー左|ヘッダー中央|ヘッダー右|
|:---|:---:|---:|
|名称は左がいい|○|123,456|


### リスト系(UL)

* 項目1
* 項目2
* 項目3

### 数字リスト系(OL)

1. 項目1
1. 項目2
1. 項目3

### 引用系

> 引用します
> 複数行の場合は繋がります。
>> ネストもできます。

### ソースコード

```
ソースコードを記述します。 
私はSWELLではなく、Highlighting Code Blockを使用するので、
欄外に言語名、ソースコード名を書いておき、あとで修正します。
```

## 文中の装飾

この`code`内に四角い装飾がついているはずです。

こちらは**太字**になっているはずです。

[いぬいぬらぼ](http:/inuinu.jp/ "いぬいぬらぼ")でリンクできるはずです。

![アイコン](https://inuinu.jp/wp-content/uploads/cropped-favicon.jpg "アイコン")

https://www.youtube.com/watch?v=fAhH9bUGC9k

URLだけの行があると「埋め込みリンクとみなす」模様。
動画の内容は気にしないでくださいね。笑

これで、ブログのかなりの部分が完成すると思います。

やや味気ない印象もありますので、装飾をつけて完成!といったところでしょうか。

Markdownでできること、できないこと

できること

以下のブロックは、ほぼそのまま行けそうです。

  • H1/H2/H3といった見出し群
  • リスト(UL/OL)
    味気ない場合は「○」「☓」「△」「①」などの装飾に変更する
    (このリストは「○」に変更しています。)

ひと手間かければ完成

下記のブロックは、ひと手間かければ完成します。

  • 段落の装飾
    この文章では「!」や、鉛筆マークの箇所です。
  • 表組
    右詰め、センタリングが上手く変換できない様なので、あとで調整が必要。
  • 画像、埋め込みリンク
    サイズの調整はあとで行う。
  • ソースコード
    Highlighting Code Blockに変更し、言語を選択し、ソース名を書き込む。
  • マーカー(アンダーライン)
    太字にしておき、あとで装飾する。

他の方のブログを読んだ印象では、WordPressではセンタリングや右詰めもサポートしているように読めましたが、SWELLでは有効になってくれないのが、ちょっと残念ですね。

できないこと

  • SWELL、WordPress独自のブロック
    このエントリでは「ステップ」の箇所がそうです。
  • 再利用ブロックの挿入

「/faq」のようなSWELLのショートカットを呼び出すことはできないようです。
(できたとしても、めちゃくちゃになるだけかもしれませんが…)

さらに、拡張MarkdownのようなWordPress/SWELL方言も、ネットに上には見当たりませんでした。

できないものはできないので、とりあえずはブロックエディタのお世話になることにします。

具体的な作業方法(mdファイル作成から、WordPressブログ公開まで)

それでは、私が実際にMarkdownを使用した、ブログ作成までの手順を説明していきます。

STEP
Markdown(mdファイル)で下書き作成

ブラウザのMarkdown表示プラグインを導入しチェック。
文章の構成や本文はここで確定させることがベター。

STEP
WordPressにMarkdown文章を流し込む

軽く読んでみて、誤字脱字を調整。
大規模な文章の見直しがある場合は、STEP1からやり直す。

STEP
SWELLの装飾を施す

リストや表組み、ソースコードの装飾を変更して行きます。

STEP
ブログ公開

完成したら、ブログを公開します。

STEP1:Markdown(mdファイル)で下書き作成

エディタはテキストエディタで十分ですが、Markdownで色分けをしてくれるエディタがあると便利です。
私の業界であるIT系では、Visual Stadio CodeやSublime Textといった多機能エディタを使う方が多いようです。

ファイル拡張子は「.md」で、文字コードはUTF-8で、改行はCRLFでもLFでもどちらでもOKです。

また、ブラウザにMarkdownを表示してくれるプラグインを入れおくと、「.md」ファイルであれば、ドラックアンドドロップで、整形した形でプレビューしてくれます。

裏技ですが、はてなブログ(Mrakdownモード)の下書きで代用することも可能です。
(プレビューもしてくれますしね。)
逆に考えると、はてなブログの原稿をMarkdownで記述していれば、移行は比較的楽になります。

前出の「ひと手間かければ完成」「できないこと」の箇所は、目印(「★ステップを挿入★」等)を書いておくと、SWELL装飾のし忘れがなくなります。

  1. 文章を伴うものに関しては、文頭に目印を付け、通常の段落として書き、あとで装飾を施す
  2. 文章を伴わない場合や、独特な表組みの場合は、再利用ブロックやSWELLブロックを呼び出す旨の目印だけ用意し、あとで書き込む

で、WordPressに流し込んだあとの作業に備えます。

STEP2:WordPressにMarkdown文章を流し込む

文章が出来上がったら、WordPressに一気に流し込みます。

ここで誤字脱字等を確認します。
(慣れれば「SWELLの装飾を施す」の段階でも大丈夫です。)

大規模な文章の見直しがある場合は、この前のステップからやり直します。
が、プレビュー等をきちんとやっておけば、防げるかなとは思います。

STEP3:SWELLの装飾を施す

前出の「ひと手間かければ完成」「できないこと」を参考に、装飾を施し、わかりやすいブログにしていきます。

同時に、STEP1の目印を削除することをお忘れなく。

STEP4:ブログ公開

完成したらブログを公開しましょう!

最後に

スピード重視であればあるほど、公開したあとで、表現が気に入らなかったり、文章構成をああすればよかった!と思う部分は多々あると思います。

リライトも頑張りましょう!

それでは、また。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA

目次