WordPressで記事の執筆速度を抜群に上げる方法【Markdown対応】

WordPress
1817 view

WordPressで記事の執筆速度を抜群に上げる方法【Markdown対応】

最終更新日:2019/03/07

Markdown

今回、新たに当ブログをWordPressで構築したのですが、今後記事を書いていく上で流石にMarkdownが使えないのはありえない！！と思い早速Markdown対応を行いました。

Markdownって何？
- - h4サンプル
WordPressでMarkdownを使用する方法
JetpackでMarkdownに対応する設定
デザインカスタマイズ
まとめ
- - WINDII
  - 最新記事 by WINDII (全て見る)

Markdownって何？

気軽に文章を記述できるチートです。

例えば
#+半角スペースでh1タグが生成されます。
##+半角スペースだとh2タグが生成されます。
####+半角スペースだとh4タグが生成されます。

h4サンプル

引用は文頭に>を置くことで引用になります。

その他にもコードの挿入、リンク、強調、テーブルの挿入、目次作成など大体の事ができるので、HTMLタグを知らない人でも気軽に文章を書くことが可能です。

詳しくはMarkdown記法チートシートを見るといいかもしれません。

WordPressでMarkdownを使用する方法

WordPressでMarkdownを使用する方法はいくつかありますが、今回はJetpackプラグインを利用します。

既に入っていない場合は、ダッシュボード > プラグイン　> 新規追加からJetpackをインストールして有効化してください。
JetpackはMarkdown対応以外にも、アクセス解析や、サイトの高速化などをしてくれる素晴らしいプラグインですのでオススメ度☆☆☆☆☆です。

JetpackでMarkdownに対応する設定

ダッシュボード上部Jetpackから設定に移動してください。

プレーンテキストのMarkDown構文で投稿や記事に書き込みの部分を有効にします。

これでもうmarkdownを使う事ができるようになりました。
僕はJetpackの他の機能も使うのでJetpackにしましたが、他の機能いらない、なんとなくJetpack嫌だ！という方は
JP Markdown
というプラグインがいいようです。

デザインカスタマイズ

デフォルトのスタイルでも全然綺麗なのですが、少し整地する事にします。

html{
font-size:16px;
}
.mobile #post_title{
font-size:1.4em!important;
}
#post_title{
font-size:2.2em!important;
}
.post_content h2 {
font-size: 2em;
border-bottom:1px solid #ccc;
color:#333;
margin-bottom:1rem;
}
.post_content h3{
font-size: 1.8em;
color:#333;
margin-bottom:1rem;
}
p{
font-size:16px;
}
ol{
font-size:16px;
}
em{
font-weight:bold;
color:#333;
}

整地前

整地後

まとめ

Jetpackの一機能を使用する事で、マークダウンに簡単に対応できる事が出来ました。
ソースコード部分を綺麗にカスタマイズする記事は以下の記事にまとめて置いたので、是非見てください。

【超簡単】WordPressのソースコードを綺麗に表示する方法

。はじめに以前WordPressでMarkdown対応を行ったのですが、ソースコードがあまり美しく表示されなかったのでカスタマイズをしました。驚く程簡単で、便利なので記事にしようと思った次第であります。以前書いた記事整形前のコードMarkdownカスタマイズの目標・シンタ...

WINDIIがWordPressで行なっている背作を全てまとめた記事はこちら

WordPressの運用で行なっている事まとめ【プログラミング知識不要】

WINDIIがWordPressで行なっている施策をまとめた記事です。WINDIIの運用方針の一つに極力ソースコードはいじらないがあるのでプログラミングの知識がない方でも行えるものばかりです。初心者の方でもわかりやすいものから、KUSANAGI導入やAMP対応まで様々な記事があ...

この記事を書いた人
最新の記事

WINDII

WINDII（ウィンディ）は、フリーランスエンジニアが運営するテックメディアです。日々の業務で得た知見を、皆さんに役立つコンテンツにして発信していくので応援よろしくお願いします！また、Slackで無料コミュニティも運営しています。たくさんのエンジニアが参加していて、プログラミングの相談や雑談などをしている楽しいコミュニティなので、興味ある方はぜひお気軽にご参加ください。 Slackコミュニティはこちらから

現役フリーランスエンジニアが運営するテックメディア。日々の業務で得た知識を発信していきます！

WINDIIテック