Sabakura Blog

このブログはWordPressにWP HatenaNotationプラグインを導入した上で、主にはてな記法で記事本文を書いています。ですが、最近Markdown記法の記事をちらほら目にするようになり、そろそろ記法を乗り換えようかなと考えるようになりました。

ただMarkdownへの乗換えや導入記事は色々あっても、記法自体を比べている記事があまり見つからなかったので、簡単に比べてみました。

強調表現

Markdown記法

 *文字列* または _文字列_ （主に斜体での強調）
 **文字列** または __文字列__ （主に太字での強調）

はてな記法

はてな記法には強調表現はありません。

コード

Markdown記法

`コード`

または

    コード1行目（先頭に半角スペース4つ）
    コード2行目
    コード3行目

はてな記法

 >|| 文字列 ||<

番号なしリスト

Markdown記法

 * リスト内容
 * リスト内容
 * リスト内容

はてな記法

 -リスト内容
 -リスト内容
 -リスト内容

番号付きリスト

Markdown記法

1. リスト内容1
2. リスト内容2
3. リスト内容3

※数字の小さい順に番号付きリストになります。もし「4.5.6.」と入力しても、実際には「1.2.3.」と表示されます。

はてな記法

 +リスト内容1
 +リスト内容2
 +リスト内容3

階層付きリスト

Markdown記法

 * 親リスト内容
  * 子リスト内容
  * 子リスト内容
 * 親リスト内容

はてな記法

 -親リスト内容
 --子リスト内容
 --子リスト内容
 -親リスト内容

見出し

Markdown記法

# h1の内容
## h2の内容
### h3の内容

はてな記法

 *h1の内容
 **h2の内容
 ***h3の内容

引用

Markdown記法

> 引用内容。引用内容。引用内容。

はてな記法

 >> 引用内容。引用内容。引用内容。 <<

リンク

Markdown記法

[linkref]: http://google.co.jp "Google先生"

はてな記法

 [ http://www.google.co.jp:title=Google先生 ]

定義リスト

Markdown記法

Markdown記法は標準では定義リストをサポートしていません。
（ただしextraという拡張ではサポートするものもあります）

はてな記法

 :Google:とても有名な検索エンジン

感想

こうして比較してみると、Markdownの方がやや記法が洗練されている気がするものの、乗換えを決意するほどの違いではないかな、という感じでした。ちょっとMarkdownに期待しすぎていたかもしれません。

とくに素のMarkdownでは定義リストに対応していないというのは厳しいところです。このあたりはWordPressのプラグインでextra対応しているものがあれば解決しそうですが。

あと細かいところですが、Markdownの場合は、リストの途中で改行が入ってもリストが終了にならないのは嬉しいところです。改行ありの文章でリストを作りたい場合、はてなだと記法を諦めてHTMLで対応するしかなかったので。

このほかMarkdownエディタやWordpressプラグインなどもうちょっと調べて、良いものがあればまた追加で記事にしたいと思います。

6月14日からWordPressの最新版3.4が使えるようになりました。テーマのカスタマイズなど気になる新機能も多く、さっそく更新している方も多いと思います。

かくいう私もさっそく3.4にしたのですが、ひとつ戸惑った箇所がありました。それが「特定の固定ページをトップページにする方法が見当たらなくなった」ということです。

3.3まではダッシュボードの「設定」→「表示設定」を開くと、どのページをトップページにするかを選択することが出来ました。ところが3.4ではこの箇所が消えています。

テーマのカスタマイズから設定する

この解決方法ですが、3.4からはどのページをトップページにするかはテーマのカスタマイズ機能から行うようになりました。

1. ダッシュボードの「外観」→「テーマ」と進んで、現在使用しているテーマの「カスタマイズ」をクリックすると、テーマのカスタマイズ画面が表示されます。
   
2. 左サイドバーの「固定フロントページ」をクリックし、「固定ページ」にチェックを入れます。
3. 「フロントページ」のリストボタンからページを選ぶと、その固定ページをトップページとして設定できます。
   

以上の手順で設定が行えます。3.4になってお困りの方の参考になれば幸いです。

本業がWebデザイナーの方々にとってはもしかしたら知ってて当然のことなのかもしれませんが、最近感動したのでちょっと記事にしてみます。

GoogleChrome付属のDeveloperTools

ブラウザはFirefoxをメインで使っているのですが、サブではGoogleChromeも使っています。そして最近、Chromeに標準で付属しているWeb開発ツール「DeveloperTools」を知って、その便利さに驚きました。

Javascriptのデバッグなどにも便利だと思うのですが、HTMLやCSSの編集のみを行う場合でも非常に便利な機能が備わっています。

それがCSSを編集することで、編集内容がリアルタイムにWebブラウザに反映されるということです。これにより「CSSをFTPでアップロード→ブラウザをリロードして確認」という作業が大幅に減り、デザイン調整がとにかく楽になります。

これまでにもNotepad++のFTPプラグインを使ってアップロード作業を自動化したりはしていたのですが、これにしてもブラウザのリロードは必要だったり、私の環境ではFTPSで接続するとすぐタイムアウトになったりと、色々と問題は残っていました。

しかしDeveloperToolsを使えば、リロードを必要とする作業が格段に減ります。（なおCSSだけでなく、HTMLもリアルタイムに編集できます）

Firebugとの違いは「CSSがそのままコピーできる」

と、ここまで書くと「それならFirefoxアドオンのFirebugでもいいのでは？」という声も聞こえてきそうです。

実際、Firebugでも各要素のCSSをチェック、CSSの編集をリアルタイムに反映させる、といったDeveloperToolsと同じことができます。言うまでもなく、私も今まではFirebugのお世話になっていました。

がしかし、Firebugには大きな問題が一つあります。
それは「編集後のCSSをそのままコピーできない」という問題です。デザインがおかしいときの確認や修正には便利なのですが、それをチェックし終わったあとは、あらためて本来のCSSファイルを開いて、同じ編集作業をしなければなりません。

しかしDeveloperToolsの場合、CSSファイルを表示してWクリックして編集状態にすれば、全文選択してそのままコピーできます。さらに言えば、右クリックして「save as…」を選べば、そのままローカルに保存することもできます。

つまり、CSSの編集と確認が終わったら、それをそのままローカルファイルと置き換えてアップロードするだけで、すべての作業が完了します。これはものすごく楽です。

DeveloperToolsの基本設定

というわけで個人的におすすめのDeveloperToolsですが、せっかくなのでごく基本的な使い方も書いておきます。

起動方法

編集したいWebサイトを表示させている状態で、「Ctrl+Shift+I」派を押すと起動します。またはサイト上の適当な場所を右クリックして「要素を検証」をクリックしてもOKです。

表示設定

1. DeveloperTools右下の歯車ボタンをクリックすると、「Settings」画面が開きます。
2. 「Dock to right」にチェックを入れると、ウィンドウ右側に固定されます。またチェックを外すとウィンドウ下側に固定されます。
3. また左下のウィンドウが重なっているボタンをクリックすることで、DeveloperToolsを独立したウィンドウにすることもできます。

使い方

HTMLとCSSの編集ということに限って言えば、以下の二点を押さえておけば大丈夫です。

• DeveloperTools左下の虫眼鏡ボタンを押し、その状態でWebサイト上の各要素にマウスをあわせると、HTMLタグとwidthおよびheightが表示されます。また要素をクリックすると、適用されているCSSの状況を確認できます。

• 「Resources」タブを開き、「Frames」→「サイトURL」→「StyleSheets」と辿り、スタイルシートファイルをクリックすると、右側にCSSの内容が表示されます。表示内容をWクリックすることで編集モードに入ります。また右クリックして「save as…」をクリックすることで、現在の編集内容をローカルに保存できます。

まとめ

静的なウェブサイトであれば、制作や修正で一番時間がかかるのがデザイン部分だと思います。DeveloperToolsは、その際のCSS編集を非常に効率よく行えるツールです。Firebugにはない利点も備えていますので、普段はChromeを使わないという方も、ぜひ一度利用してみてください。