皆さんはWordPressでブログ記事を書くとき、どのように執筆していますか？ 私は普段から慣れているMarkdownで下書きをして、最後にWordPressのエディタに貼り付けることが多いです。
でも、この作業、地味に面倒じゃないですか？
- Markdownのままでは正しく表示されない（太字や見出しなど）
- 特に、技術ブログで必須の数式の変換がうまくいかない...
- いちいち手動でHTMLタグに修正するのが大変！
そんな悩みを解決するために、Markdownで書いた文章をWordPress記法に一発で変換するWebアプリ「Markdown → WordPress Converter」を開発しました！
この記事では、そのアプリの機能や使い方、開発のこだわりポイントについてご紹介します。
🔗 アプリはこちらから
まずはこちらから触ってみてください！インストール不要ですぐに使えます。
Markdown → WordPress Converter
https://nomuyu00.github.io/markdown-to-wordpress
✨ このツールの主な機能
🚀 使い方
使い方はとてもシンプルです。
- 左側のエリアに、Markdownで書いた文章を貼り付けます。
- 右側のエリアに、変換後のWordPress用コードがリアルタイムで表示されます。
- 「コピー」ボタンをクリックすると、変換結果がクリップボードにコピーされます。
- あとはWordPressの投稿画面（HTMLを直接編集できる「カスタムHTML」ブロックなど）に貼り付けるだけ！
⚠️ ご利用にあたっての注意点
このツールを最大限に活用するために、2点だけ注意点があります。
1. 数式の表示には「MathJax」プラグインが必要
WordPressで数式 を正しく表示するには、MathJax系のプラグインをインストールする必要があります。多くのプラグインがありますので、お好みのものをご利用ください。
2. 太字表示のためのCSS設定
このツールでは、太字を というタグに変換しています。これは、WordPressのテーマによっては タグのスタイルが意図しないものになることがあるためです。
👨💻 開発者向け情報
最後に、技術的なお話を少しだけ。
技術仕様
- フレームワーク: React + TypeScript
- スタイリング: CSS + Framer Motion
- アイコン: Lucide React
- ホスティング: GitHub Pages
Reactの学習も兼ねて、モダンな技術スタックで開発してみました。UIのアニメーションにはFramer Motionを使って、リッチな表現を簡単に実装できました。
ソースコード
ソースコードはGitHubで公開しています。ローカルで動かしてみたい方や、コードに興味がある方はぜひご覧ください。コントリビュートも大歓迎です！
GitHub - nomuyu00/markdown-to-wordpress
🎉 まとめ
今回は、自作アプリ「Markdown → WordPress Converter」をご紹介しました。
WordPressで記事、特に数式を含む技術記事を書いている方にとって、執筆の効率を少しでも上げられるツールになっていれば嬉しいです。
ぜひ一度使ってみて、感想や「こんな機能が欲しい！」といったご意見があれば、ブログのコメントやGitHubのIssueなどで教えてください！