MediaNewsWebLifeWorkGoodsAboutHOMEWeb【Atom設定】WordPressの下書きで大活躍するテキストエディタ!爆速!【Atom設定】WordPressの下書きで大活躍するテキストエディタ!爆速!2020年2月1日Webツイートシェアはてブ送るPocketWordPressのエディターでブログを書いていると文字入力が重くなりませんか?文字を入力すると、文字が表示されるまでコマ送りなっちゃような現象です。文字数が多くなればなるほど、この現象はひどくなります。この現象はWordPressがダメなのではなく、Webページのフォーム全般の挙動なんです。いくらWordPressの設定を頑張ってもたぶんあまり改善されないということ...。するのかと言うと、Wordやメモ帳に下書きをしてから、WordPressのエディタにコピペをします。すれば書いてる途中に重くなることがないので、気持ちよく文章を書くことができます。紹介したいと思います。プログラミングなどで使うソフトなのですが、ブログの下書きでも大活躍してくれます!AtomのインストールからAtomの設定、下書き後にWordPressに上げる方法までをわかりやすく紹介しているので、この記事を読んでいただければAtomでスピーディーにブログを書けるようになります♪WordPressのエディターが使い物にならん!と思ってる方は、ぜひお試しください。まとめテキストエディタ「Atom」とは?テキストエディタAtomの特徴Atomとは無料で使うことのできる高機能のテキストエディタです。自分好みに様々な機能を追加させることができたり、実際にブラウザにどう表示されるのか、プレビューを確認しながら作業をすることができます。Atomオープンソースのという仕組みを取り入れているので、世界中のエンジニアがAtomの開発に参加しており、今後も使いやすい高機能なテキストディタになっていく可能性がとても高いです。Atomはプログラミングだけではなく、Markdown形式での文章作成ができます。このMarkdown形式というのが、ブログの下書きを書くときにすごく便利です。Markdown形式とは?Markdown(マークダウン)は文章を記述するための記法(マークアップ言語)の一つです。これだと意味がわからないと思うので、下記例を見てみてください。見出し1(h1)をHTMLで書く場合は、<h1>見出し1</h1>こう書きます。見出し2こうなります。#の数で見出しの種類が変わります。このようにマークダウン形式で下書きを書いていき、書き終わったら下書きをHTMLに変換できるので、変換したHTMLをWordPresnのエディタにペーストすれば、見出しや、段落、リストなど文章の装飾が自動的に行われます。最初は少しとまどうかもしれませんが、慣れてきたらブログを書くスピードが確実にUPするので、ぜひMarkdown形式を試してみてください!Markdown形式の拡張子Markdown形式の拡張子は、〇〇〇.mdになります。僕は最初〇〇〇.htmlでmarkdownの記述を書こうとして、一切できずに泣いていたので皆さん気を付けてください...。Atom本体のインストールでは、Atomをインストールしていきましょう!AtomはWindowsでもMacでも使うことができます。この記事での説明画像はWindowsになります。Atomのダウンロードサイトにいって、Atomをダウンロードします。ダウンロードサイトに行けば、あなたの使っているOSに適したものが自動で表示されます。OSが合ってるか一応確認してダウンロードをします。ダウンロードが完了したら、それをダブルクリックすれば特に項目なども出ずにインストールをしてくれます。インストールが完了したらデスクトップにショートカットアイコンが作成されるので、アイコンをダブルクリックすればAtomが起動します。チェックボックスを外します。guide」が自動で表示されなくなります。HELP」をクリックしましょう。(貢献したい人はYESを選べばOK)文章作成に便利なパッケージをインストールインストールが完了したら、Atomを使いやすくするためにパッケージというものをインストールしていきます。パッケージと言うのは、Atomに便利な機能を追加するためのソフトみたいなものです。逆にいらないと思った機能は、パッケージを削除・停止することで無くすこともできます。細かい設定の前に、とりあえずひと通り必要なパッケージのインストールを先にしちゃいましょう!パッケージのインストール方法パッケージのインストール方法は、Atomを起動させたら画面左上の「File」→「Settings」を選択します。Settingタグが表示されるので、左側メニューの「Install」をクリックします。インストールパッケージ欄に、インストールしたいパッケージの名前を入れて検索すると、目的のパッケージが表示されるので「Install」ボタンをクリックすればインストールすることができます。メニューの日本語化まずはメニューを日本語にしましょう!インストールパッケージ欄に、「japanese-menu」と入力するとパッケージが表示されます。インストールすれば自動的にメニューが日本語で表示されるようになります。エディタとプレビューを同時スクロールAtomはエディタに文章を書きながらリアルタイムでプレビューを確認することができます(この設定は後程!)。「markdown-scroll-sync」というパッケージを入れておかないと、文章が長くなったときにエディタをスクロールさせたさい、プレビュー画面が一緒にスクロールしてくれません。markdown-scroll-syncをインストールすれば、同時スクロールさせることができるので、プレビューを確認しやするくなります。インストールパッケージ欄に、「markdown-scroll-sync」と入力するとパッケージが表示されるのでインストールします。「markdown-writer」はMarkdown形式の入力補助をしてくれるパッケージです。リストを作りたいときは、-を入力するのですが、毎回-を入力する必要があります。markdown-writerをインストールしていれば、2個目以降のlistに関してはEnterを押すだけで自動で-が入力されます。みかん(Enterを押せば自動で-を入力してくれる)–インストールパッケージ欄に、「markdown-writer」と入力するとパッケージが表示されるのでインストールします。ツールーバーを表示させる「tool-bar」はWordPressのようなツールバーを表示してくれるパッケージです。このパッケージをインストールした後に、次に紹介する「tool-bar-markdown-writer」をインストールすると、WordPressのようなアイコンが並んだツールバーを表示させることができます。インストールパッケージ欄に、「tool-bar」と入力するとパッケージが表示されるのでインストールします。「tool-bar-markdown-writer」はツールバーにマークダウンのボタンを表示するパッケージです。Markdown形式の入力が最初はわからないと思うので、まずはこのアイコンを使って下書きを書いていけば、Markdown形式の入力にもどんどん慣れていきます。インストールパッケージ欄に、「tool-bar-markdown-writer」と入力するとパッケージが表示されるのでインストールします。「wordcount」は文字数をカウントしてくれるパッケージです。左側のWがWord(単語)で、右側のCがCharacter(文字数)です。日本語を扱う場合はWordのカウントはうまくできないようなので、自分は文字数のみのカウントを目安に見ています。インストールパッケージ欄に、「wordcount」と入力するとパッケージが表示されるのでインストールします。パッケージをインストールする際の注意点Atomには便利なパッケージがたくさんあるので、テンションが上がっていろいろとインストールしまくると、パッケージの機能同士がぶつかってうまく動かなくなることがあります。そんなときはGoogleで検索すればある程度解決方法を見つけることができます。解決方法が見つからない場合は気合いでなんとかする!もしくはそのパーケージはあきらめるかの2択!最初にやっておいたほうがいい設定プレビューの表示エディタの入力画面で、Ctrl+Shift+Mを押せばプレビューが表示されます。プレビューの背景色を白に変更したい場合は、以下の設定をします。初期設定では、文字を入力していくと、右端まで文字を入力したときに文字が折り返されずに、横スクロールバーが出てしまいます。メニューの「エディタ設定」を選択→「ソフトラップ」にチェックを入れるエディタの改行を有効にするエディタの改行を有効にしておかないと、エディタでは改行したのに、プレビューでは改行されないなどうまく反映されません。Newline」にチェックを入れるエディタの最終行に自動で改行が入らないようにするエディタに文字を入力して保存をすると、自動的に最終行に改行が入ってしまいます。WordPressにエディタにコピペしたときに、最終行に改行が入ってしまうので、改行が入らないように設定をしておきましょう。Newline」のチェックを外すエディタの真ん中の線を消すAtomはテキストの折り返しの目安のために真ん中に線が入っています。Guide」を入力→「設定」をクリック→「Enabled」のチェックを外す文字の赤い点線を消す日本語を入力すると、赤い点線が入ってしまいます。これはスペルミスですよー!って教えられているのですが、Atomのスペルチェックは日本語に対応していないので削除しちゃいましょう!画面左上の「ファイル」→「設定」→「パーケージ」→入力欄に「spell-check」を入力→「無効にする」ボタンをクリックAtomで下書きが完成したらAtomで下書きが完成したら、WordPressのエディタにコピペをしましょう。HTMLを選択すればコピーすることができます。コピーしたHTMLをWordPressのエディタに張り付けるだけです。張り付けた後は、画像を入れたり、細かい調整をして記事の完成となります。まとめWordPressのエディタは、まだ不便なところが多いです。文字数が多くなってくると、文字を打ってから表示されるまでのラグがきつい...入力用のスクロールバーを動かしたいのに、全体のスクロールバーが動いてしまう...もっとサクサク文章の入力をしたいと考えていたときにAtomに出会いました。Atomをプログラミングなどでも使っている人も多いと思いますが、僕は今のところAtomは文章作成専用のエディタとして使っています。必要のないパッケージは極力入れないようにしています。今回も文章作成に最低限必要なパッケージだけを紹介しました。WordPressのエディタに「うぉーーー!」と思っている方の参考になれば幸いです。コメントをキャンセルメールアドレスが公開されることはありません。USTaichiWebの仕事をいろいろしてる人バーテンダー→Web制作会社→Webコンサルティング会社→現在とある中小企業のWeb担当です。制作会社では主に様々な企業の新規サイト制作、サイトリニューアルなど、1000件以上の案件に関わりました。その後、成果が出るWebサイト運営を学ぶために、Webコンサルティング会社へ転職。そこで学んだことを生かすために、現在とある企業のWeb担当者をしています。地元千葉が大好きなので、地元の活性化につながるような仕事を今後はしていきたいと思っています。企業のWeb担当者Webサイトを分析し、戦略を練るのが好物です。