MENU
Cloud Cloud
Rainbow

人生をにじいろに変えるブログ

Cloud Cloud

ブログ執筆をマークダウン×VSCodeでしてみたら快適だった話

たか

はい、こんにちは。文章を考えるとき口がとんがるクセがある「にじいろのたか」です。外では恥ずかしくてブログ書けません。

さて。

今日はブログ執筆に行き詰まって(まだ4記事しかかいてないやろ!)きたので執筆環境を整えたいと思って試してみた方法が意外と快適だった話をしてみようと思います。

試してみた方法というのが「VS Code × Markdown」の組み合わせです。

目次

Gutenbergは、執筆にはあまり向いていない?

Gutenberg(WordPressのブロックエディタ)は手軽に文章の構造や見た目を整える事ができる素晴らしいシステムです。
ただし、それは「htmlやcssの初学者や初心者にとっては」という条件付きで、です。

WEBの技術でどんなことが出来るかをある程度分かってくると、もっと楽にできる方法がないかと考え始めます。

  • 書き始めるまでのハードル下げたい
  • マウスに触れずに執筆作業できないかしら
  • 装飾は後回しにしたい。でも、執筆中にもある程度整えておきたい
  • オフラインでも作業したい

そんな欲求が湧いてきます。
僕も例に漏れずその一人で・・・
ブログ開始序盤の今こそ楽〜に更新出来る方法を模索してみるべきかなと考えました。

馴染みのあるエディタ「VS Code」を選びました。

僕はエンジニアをしているので色んなエディタを使ってきました。
今使っているのはVS Codeという超有名な誰でも無料で利用できるエディタです。
これをブログ執筆に使えないかと考えました。

VS Codeの良さそうなところは

  • シンプルなUIなので集中して執筆できそう
  • フォルダごとに複数のファイルを管理できるところ

これだけでもかなり強力なんですが、こんな使い方したらもっと便利かなと思ったのが以下の方法です。

  • htmlで直接装飾しながら書ける
  • Markdown記法を使ったらもっと便利?

僕はMarkdownは今まで使用したことが無かったんですが、この機に覚えてみるのもいいかなと考えました。

Markdownは基本的なルールを少し覚えたら使える有用な記法でした

名前だけは知っていたMarkdown記法。
使っている人がたくさんいることも知っていましたが、今まで素通りしてきました。
読めるけどちゃんとルール知らないからうまく書けない。

それに、最近GitやNotionをよく使うのでMarkdownを覚えるのはそちらにもいい影響がありそうです。

  • 名前だけは知ってたけど、ちゃんと使ってなかった
  • 書き方はちょっと覚えるだけでOK
  • リストも見出しも一発で整う=構成が頭に入りやすい
  • プレーンテキストよりも“構造化されている”から、整理しやすい

とりあえずブログでよく使いそうな、見出し、リスト、太字、この辺の書き方を頭に入れて、実際に書き始めてきました。
※imgタグはGutenbergの方に役割を分担しようと思います。

保存形式は「.md」気をつける点はスペースを忘れないようにすることかな

見出し、リスト、太字(これは実はあまり使わない)だけ頭に入れていざ書いてみます。
こちらが実際に書いた文章です。練習のためにリストを少し多めにしています。

気をつけなきゃなと感じたのは##や-のあとにスペースを入れなきゃいけないこと。
これは意外と忘れそうです。でもVS Codeのコードハイライト機能でスペースがない時はすぐ気付けるかな。

あと注意点というほどでもないんですが、保存のときは「.md」拡張子を使うことですね。

Gutenbergへのコピペには注意が必要

ある程度文章が完成したらGutenbergにコピペしてみます。

実際のMarkdownのコードを載せます

## Gutenbergは、執筆にはあまり向いていない?

Gutenberg(WordPressのブロックエディタ)は手軽に文章の構造や見た目を整える事ができる素晴らしいシステムです。
ただし、それは「htmlやcssの初学者や初心者にとっては」という条件付きで、です。

WEBの技術でどんなことが出来るかをある程度分かってくると、もっと楽にできる方法がないかと考え始めます。

- 書き始めるまでのハードル下げたい
- マウスに触れずに執筆作業できないかしら
- 装飾は後回しにしたい。でも、執筆中にもある程度整えておきたい
- オフラインでも作業したい

そんな欲求が湧いてきます。
僕も例に漏れずその一人で・・・
ブログ開始序盤の今こそ楽〜に更新出来る方法を模索してみるべきかなと考えました。

これをGutenbergに直接コピペ。めっちゃ楽です。ちゃんと見出しとリストに変換してくれました。神。

たか

もっと早く気付けばよかった!

ただ、一回目はうまく行ったんですが、編集し直して再度コピペしたら変換してくれませんでした。
ちょっと原因がわからないんですが、うまくいくときといかない時があるのはなんか気持ち悪いですね。
でもだいたい大丈夫そうなので、今はスルーしておきます。

変換されない理由がわかりました。プレーンテキストで貼り付けしていなかったため変換されなかったようです。原因分かってよかった(2025/4/18)

執筆はVS Code × Markdown 装飾はGutenberg

僕って結構神経質なところがあって。

「使いにくいな」とか「なんか違和感」みたいなのに気を取られて集中力を書いてしまうことが多かったんですけど、今回試してみたVS CodeとMarkdownの組み合わせは使いやすさも違和感もなく作業できるので最強だと感じています。

やっぱりね、集中力って大事なんですよ。

少し文章を書いたら、マウスでブロックを選択して、また文章打って、ブロックの並べ替えをして、いいブロックがないかなって探してみたりして・・・・これが今までの流れだったんだけど、これじゃあ集中できないですよね。

今回試したVS CodeとMarkdownの組み合わせは、執筆中にマウスに手をかけることもほぼ無く、装飾に気を回すこともないから文章だけに集中できます。

VS Codeを使ったことがない方にとっては、新しいアプリケーションを覚える必要が出てくるし大変かもしれないんですが、それ以上に文章の世界に入り込んで執筆できる体験のほうが何倍も気持ちいいと思うので、Gutenbergでの執筆にちょっとでもストレスを感じている方がいたら試してみてはいかがでしょうか?

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

コメント

コメントする

目次