WP-MarkdownでWordPressの記事をMarkdownでも書けるようにする

20131009 0

記事をMarkdownで書く機会が増えているのでWordPressへの投稿記事もMarkdownに全面移行することにしました。と言っても実は個人的には既にやっていてエディタ上で記事を書いてHTMLに変換したコードを貼り付けるというやり方でしたが、スタッフたちにもMarkdownで記事を書いてもらうにあたって、中にはWordPressのダッシュボードから記事を書くメンバーもいるだろうと思い「WP-Markdown」を導入しました。

導入方法

WordPressのダッシュボード>プラグイン>新規追加で「WP-Markdown」を検索してインストールするだけです

設定方法

個人的にはここで一瞬詰まった(^^;
設定項目の中にどこを見てもWP-Markdownがないので「あれ?失敗した?」と思ったら…

ダッシュボード>設定>投稿設定

でした。こちらを開くと投稿設定の中にMarkdownの項目があり、どの投稿の際にMarkdownを有効にするかを設定することができます。

20131009 2

記事の投稿

Markdownを有効にすると、投稿画面でMarkdownで記事を書くと、下半分にHTMLに変換された記事が表示されるようになりました。

20131009 1

これでMarkdownでもWordPressの記事が書けるように!!

Instant Markdown
Instant Markdown
posted with amazlet at 13.10.09
Packt Publishing (2013-08-26)
プロが選ぶ WordPress優良プラグイン事典
相原 知栄子 一戸 健宏 鳥山 優子 西川 伸一 服部 久純 星野 邦敏 松田 千尋 吉澤 富美 大串 肇 大島 義裕 大曲 仁 北村 崇 小島 勝茂 後藤 賢司 染谷 昌利 高野 直子 高橋 文樹
エムディエヌコーポレーション
売り上げランキング: 25,980

Middlemanで静的サイト制作

20131008 0

以前書いた「Middlemanで静的サイト制作」の記事の続きです

Middlemanのインストール

gem install middleman

新規サイトの制作

middleman init my_new_project

これを実行した時点ではmy_new_projectフォルダ以下にいくつかのファイルとsourceフォルダが生成されます。サイトの制作作業はsourceフォルダ内でおこないます。

config.rb

サイトの設定情報が記録されています。初期値は以下の様な構成になっています。ほとんどがコメントアウトされていますが、スタイルシートや画像、javascriptの保存場所もここで指定します。

サーバーの起動

middleman server

このコマンドを実行すると開発用のサーバーが起動します。http://0.0.0.0:4567にアクセスすることでサイトを見ることができます。config.rbにactivate :livereloadと追記しておくと、ファイルが更新された時に一緒にブラウザも再読み込みしてくれるので便利です。

ファイルの生成

middleman build

sourceフォルダの中身を元にhtmlを生成します。生成したファイルはbuildフォルダに配置されます。

ファイルのデプロイ

middleman deploy

buildフォルダの中身を設定された場所にデプロイします。

middleman deployでftp

middleman-deployを利用することでサイトのデプロイ時にサーバーにできあがったファイルをFTPすることができます

middleman deploy

サーバーの情報はconfig.rbに以下のように追記します。

middleman-deploy

Middlemanで静的サイト制作

パーフェクトRuby (PERFECT SERIES 6)
Rubyサポーターズ すがわら まさのり 寺田 玄太郎 三村 益隆 近藤 宇智朗 橋立 友宏 関口 亮一
技術評論社
売り上げランキング: 7,652
Webデザインの基本ルール-プロに学ぶ、一生枯れない永久不滅テクニック (Design Lab+ 1-3)
デザインラボ編集部
ソフトバンククリエイティブ
売り上げランキング: 9,223
Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語
インプレスジャパン (2013-10-02)
売り上げランキング: 1,700

Markdownの使い方

20131004 0

Markdownの使い方

先日「Markdown使っていますか?」という記事を書いたまま続きをなかなか書くことができませんでしたが、株式会社wEVAのインターンシップ(OJT)メンバーのうちの今月からの新メンバーが諸事情で日報ブログをはてなブログにしたこともあり「ちゃんと説明する機会を設けなきゃ!!}というわけで、今回は再度Markdownについて書いていきます。

Markdownとは?

Markdown は、文書を記述するための軽量マークアップ言語のひとつである。「書きやすくて読みやすいプレーンテキストとして記述した文書を、妥当なXHTML(もしくはHTML)文書へと変換できるフォーマット」として、ジョン・グル―バー(John Gruber)により作成された。アーロン・スワーツ(Aaron Swartz)も大きな貢献をしている。[1] Markdownの記法の多くは、電子メールにおいてプレーンテキストを装飾する際の慣習から着想を得ている。

Markdown – ウィキペディア – Wikipedia

パソコンを使ってブログやつぶやきなど何かを書くというアクションが当たり前の世界になってきました。そして、文章も長い文章などを書く必要がある…というケースも多くあるようになりました。

Markdownを使うと長い文章が簡単に書けるようになる!! 」ということはありませんが、見出し、本文などをわかりやすく明記していく癖をつけることで「文章の全体構造を見やすくなり、書きやすくなる」という効果はあるんじゃないかと個人的には思っています。

見出し

# を行頭に記述することで見出しを指定することができます。見出しはH1〜H6までの6種類の見出しをつくることができ、#の個数で表現します


見出し1

見出し2

見出し3

見出し4

見出し5
見出し6

段落

改行で囲まれた文章のブロックは段落をあらわします。

改行

文章の末尾に半角スペースを2個以上入れると改行になります。

装飾

文字の装飾については以下のような書式になります

強調

文字の前後を 「** 文字 **」 と言う具合に 2つのアスタリスクで囲むと、囲まれた文字は強調 として表示されます

イタリック

アスタリスクが1個の場合はイタリック体になります

打ち消し線

\~\~ で囲まれた文字は打ち消しになります。「打ち消し

リスト

行頭に「-」「+」「*」のどれかを書くとリストになります。行頭に空白を入れて記号を別のものに切り替えることでインデントをつくることができます

  • 項目1
    • 項目2
  • 項目3

行頭に数字と.を記述すると数字型のリストになります

  1. 項目1
  2. 項目2
  3. 項目3
引用

引用を記述する時は行頭に「>」をおきます

水平線

「—」「***」「___」などの3つ以上の記号行は水平線をあらわします


リンク

「[テキスト](URL)」と書くことでリンクになります

画像

「!テキスト」と書くとURLで指定された画像ファイルを表示することができます

コード 

“`で囲まれたブロックはコードとして扱われます

puts "Hello World"

参考

Instant Markdown
Instant Markdown
posted with amazlet at 13.10.04
Packt Publishing (2013-08-26)
Markdown und Pandoc
Markdown und Pandoc
posted with amazlet at 13.10.04
ebooks.kofler (2013-05-20)