はじめに
今回は、自分の本業でいつもお世話になっているVisual Studio Code（ビジュアル スタジオ コード）を使って、ブログの下書きを効率的にする方法を紹介しようと思います。
ブログ下書きにスマホのメモ帳ツールを使ったりしますが、ただテキストに書き起こすよりも効率的になる方法も一緒に紹介しますので、ぜひ見てみてください！
下書きした後のコピペ作業の手間が楽になると思いますので、ブログやられている方は是非参考にしてみてください(^^)/
今回は、WindowsのPCで行っていますが、似た手順でmacでもインストールすることができます。
もし、これからブログを始めようとしている方や
WordPressブログを立ち上げようと考えている方がいたら
是非こちらの記事を読んでみてください！
Visual Studio Codeとは？
そもそもこのソフトはプログラムを書く際に使われるソフトで、こういったソフト全般を「エディタ」と言ったりします。
名前は「ビジュアル スタジオ コード」といいます。略して「VS code(ブイエスコード)」と言ったりもします。
Visual Studio Code(以下VScode)はWindowsで有名なMicrosoftが開発したソフトです。
凄く極端に分かりやすく例えるのであれば、無償かつ多くの機能を自分好みにインストールして拡張することができるPC用の「メモ帳ツール」と思っていただけるとわかりやすいかと思います。（※実際はプログラムを書いていくためのツールです。）
ひとまずこちらをインストールしていきましょう！
VScodeのインストール
まず以下のサイトにアクセスします。
アクセスすると以下の画面が表示されるので、写真の「Windows」をクリックします。
次に以下のページに移動すると、右下にインストーラーがインストールされ始めます。
インストールが終わったら、写真の箇所をクリックし、「開く」をクリックします。
すると、インストーラーが開き、以下の画面が表示されます。
ここは「同意する」をクリック、「次へ」をクリックします。
次の画面では、すでに写真と同じようにチェックが付いているかと思うので、そのまま「次へ」をクリックします。
次の画面では、特に何もせずに「インストール」をクリックします。
これで、VScodeのインストールは終了です。
次にVScodeの日本語設定をしていきます。
VScodeの日本語設定
まず、VScodeを起動します。
PCの左下にある検索から「visual studio code」と入力し、出てきたら写真のように「開く」をクリックします。
VScodeが起動すると、以下のような画面が表示されます。
次に順番に操作を行うと以下の画像と同じ画面が表示されます。
- 左の四角いアイコンをクリックします。
- 検索欄に「japanese」と入力します。
- 地球儀のアイコンのものが下に出てくるので、クリックすると、右の画面に説明が出てきます。
右に出てきた説明画面のところに「Install」というボタンがあるので、クリックします。
クリックすると以下のように下にお知らせが出てきますので、「Restart」をクリックします。
（※もし表示されない場合は、VScodeの画面の右上にある「×」をクリックして一度VScodeを閉じ、先ほどと同じように起動してみてください。）
今の作業は何をしているかを分かりやすく説明すると、
「スマホにアプリをインストール」したり、「WordPressにプラグインをインストール」するのと同じように、
VScodeの表示を日本語表示できるようになる拡張機能をインストールしました。
ただ、日本語表示にするには再起動が必要なので、「Restart」でVScodeを再起動しています。
すると、VScodeが再起動されて日本語表記で画面が表示されます。
これで日本語設定は完了です。
マークダウンファイル作成
インストールが完了したら、VScodeで１つ「.md」という拡張子の「マークダウンファイル」を作成していきます。
まず、以下のようにファイルのアイコンをクリックし、左のメニューが変わったら、
「開いているエディタ」の場所にマウスカーソルをの載せると「＋マークがついたファイルアイコン」が表示されますので、クリックします。
すると、「Untitled-1」という名前のファイルが仮で作られます。
この仮で作られたファイルをマークダウンファイルとして保存します。
一番左上のメニューの「ファイル」をクリックし、その中の「名前を付けて保存」をクリックします。
次に以下の画面が表示されます。
- 保存先はとりあえずデスクトップにするので、デスクトップをクリックします。
- ファイル名はとりあえず今回は、テストとしました。
- ファイルの種類をクリックすると画像のようにメニューが表示されるので、そこから「Markdown」をクリックします。
次に下の「保存」をクリックします。
すると、以下のようにマークダウンファイルが出来上がります。
ここにマークダウン記法でブログの下書きを書いていくことになります。
マークダウンをプレビューで確認
実際に以下の内容を入力し、「ctrl」+「S」を押してファイルを上書き保存します。
(※macの場合は「command + S」で上書き保存します。)
# h1見出しです！
## h2見出しです！
### h3見出しです！
#### h4見出しです！
##### h5見出しです！ファイルを保存したら右上にある虫眼鏡アイコンをクリックします。
※「#」は半角で入力し、文章の前に「半角スペース」を１つ入れます。
すると、プレビューが右側に現れます。
正しく入力されていれば、以下の画像のように「見出し」が５つ並んでいるかと思います。
このプレビュー機能を使えば、マークダウン記法で書いた内容が正しく認識されるかが確認できます。
VScodeで下書きを行い、WordPressにコピペする
さきほどのように「マークダウン記法」を使って以下の文章を作成しました。
## はじめに
皆さん、こんにちは！
ブログ書いてるサメです(^^)/
今日は、カッコいいサメを紹介していきます！
## サメの種類
サメには以下のような種類がいます。
- ヨシキリザメ
- シュモクザ
...etc
### ヨシキリザメ
ヨシキリザメは・・・
### シュモクザメ
シュモクザメは・・・上記のマークダウン記法で書いた下書きをまずプレビューで確認すると以下のようになります。
仲間の紹介記事を書いてみました！笑
プレビューで問題ないことを確認したら、以下のようにマークダウン記法の内容をコピーします。
コピーしたら、実際にWorePressの投稿画面に行き、コピーした内容をブロックに貼り付けてみましょう。
貼り付けるときは右クリックから「貼り付け」では、うまく貼り付けられないので、
ブロックに入力できる状態になったら、「ctrl」＋「Shift」+「v」を押してください。
するとマークダウン記法が認識された形で貼り付けができます。
貼り付けを行うと以下のように、「見出しブロック」、「通常のブロック」「リストブロック」などが反映されます。
以上が下書きからWordPressに貼り付けるまでの方法でした。
スマホでマークダウン記法でテキストを書き起こすには？
スマホでマークダウン記法のテキストを書いたり、プレビューをできるアプリがあります。
それが以下のアプリです。
使い方は今回は省略しますが、出先などでブログの下書きをしたいときはこのアプリを使ってマークダウン記法で下書きをするといいと思いますよ(^_^)v
例えば、出先でこのアプリで下書きを書いておき、これを自宅でPCに送信し、そのままWordPressに先ほどのコピペの仕方で貼り付ければいいかと思います。
また、コピペして表示がおかしいときはVScodeに一度貼り付けて、微調整するのもいいかもしれません(^^)/
マークダウン記法は色々なものがあります。
書き方を載せているサイトを紹介しておきますね！
おわりに
今回は、ブログ下書きを効率的に行うツールの紹介と効率的に行う方法について紹介しました。
見出しや文章、リストぐらいは簡単に表現ができると思うので、大まかな骨組みまでは記事として下書きの段階で作り上げることができると思いますし、貼り付けた後にWordPress上で装飾や画像を追加すればすぐに記事を投稿することができると思います。
ブログを書く時間の確保が難しい方は是非試してみてはいかがでしょうか？
では、また！
コメント
コメント一覧 （1件）
[…] […]