プログラミング学習やフリーランスエンジニア情報を発信していきます。現役フリーランスエンジニア2人で運営してます!

  1. WordPress

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

最終更新日:2019/03/07

Markdown

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

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

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

The following two tabs change content below.

ぞえ

実務未経験から1年でフリーランスエンジニアになって給料が6倍になった男/アル中の記憶ない系/しかも190cmの巨人。今は週3勤務しながら@ryudoi1と当メディア運営中 詳細なプロフ ぞえのプロフィール!! Twitterアカウント Twitter 技術系の雑談や、質問の行える無料サロンもやっています。 windii social

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

PAGE TOP