ブログが最終的にどんな形となるのかを、プレビューで確認しながら記事を書く方法がありますので、紹介します。
ブログを書き始めた初心者さんは参考になるかもしれません。
ぜひご覧ください。
【効率化】プレビューを見ながらブログを書く方法【Atomを使う】
この記事では次のことがわかります。
- Atomのダウンロード・インストール。
- Atomのおすすめ設定。
- Atomでプレビュー画面を表示する方法。
Atomというエディタを使って、プレビュー表示を実現します。
次から具体的に説明していきます。
Atomのダウンロード・インストール。
まずはなんにせよ、自分のパソコンにインストールしましょう。
Atomのダウンロード。
下記のページからダウンロードができます。
https://atom.io/
適当なフォルダにダウンロードすればOK。
Atomのインストール。
実行ファイル（〇〇.exeファイル）をダウンロードし、ダウンロード後はダブルクリックで実行しましょう。
※少し注意！！
インストール先フォルダの指定などが始まると思いきや、いきなりインストールが始まります。
インストールが始まると下記のような画面になります。
インストールが完了すると、下記の画面になります。
ここでは、赤枠の設定をしましょう。（そうしないと、毎回起動するたびにWelcome画面が表示されてしまいます。。。）
次の画面でも、右側をクリックしておけばOKです。
直訳すると下記のとおりです。
結果のデータは、次に重点を置くものを決定する際に重要な役割を果たします。
データを送信したくない人は右ですね。
以上でとりあえず、インストールはおしまいです。
Atomのおすすめ設定。
次からはぜひやっておきたい、おすすめの設定になります。
Atomの日本語化。
「File – Settings」を選択しましょう。
次は、「Install」を選択し、「japanese-menu」を検索、インストールを行いましょう。
インストールが完了すると、下記のようにもう日本語に変っています。
ウィンドウ枠で折り返し表示設定
こちらもやっておくとよいです。
表示枠を超える場合に、勝手に折り返し表示をしてくれます。
「エディタ設定 – ソフトラップ」をONにしましょう。
Atomのテーマの変更。
こちらはお好みで。
「テーマ – テーマの選択」にて、見た目を好みのものに変更することができます。
数種類選択が可能ですので、自分に合ったものが見つかるとよいですね。
Atomでプレビュー画面を表示する方法。
いよいよ、プレビュー表示になります。
ちょっと長かったかもしれませんが、もうあと少しです。
プレビュー表示に反映する、スタイルシートの設定
Atomではプレビュー表示に適用させるcssを記載することができます。
ですので、自分のブログ用のcssをAtomに設定しておくことで、本来の見た目のまま記事を書いていくことができます。
左上から「ファイル – スタイルシート」を選択し、表示されたエリアにcssを記載していきましょう。
プレビュー表示をする。
さぁ準備は整いました。
「パッケージ – Markdown Preview – Toggle Preview」を選択します。
すると、下記のように左が作成している記事、右がプレビュー画面となります。
こんな風に見た目を確認しながら記載ができるのはいいですね。
記事に載せる画像に関しての問題点
自分のパソコンに保存されている画像を記事に使い、プレビュー表示させようと考えていても簡単にはプレビュー表示されません。
そんなときは、下記のように対応することで、プレビュー表示がされるようになります。
記事と同じ場所に画像を保存する。
まずは、記事と同じ場所に画像を保存します。
※なぜか同じ場所に配置しないと正しく表示されませんでした。
そして、下記のように画像の指定を行えばOKです。
<img src=”ファイル名.jpg” />
１つだけやりづらい点がありのですが、画像サイズの調整がAtomではうまいことできません。
WordPressの場合は、画像を貼り付けした後にクリックしたままマウスを動かすことでサイズの変更が行えますが、Atomではそのようなことはできません。
この部分については、Atomで書き終え、WordPressに貼り付けした後に、WordPress上で画像サイズの変更が必要となります。
今後はこの部分もなんとかしたいですね。