編集モードとブログデザインを変えました。

GithubやGistをよく使うようになり、Markdown記法を使う機会が増えました。

Markdownとは？

Wikipediaより

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

記法等についての説明は下記サイトをご覧下さい。

• blog::2310 » Markdown文法の全訳
• 文章作成やメモ書きにも便利、Markdown記法｜Web Design KOJIKA17

ブログをMarkdown記法に変えた

これまでHTMLを用いてブログを書いてきましたが、今記事からMarkdown記法でブログを書くようにします。 HTMLタグにidやclassを割り当てることはできませんが、シンプルにマークアップできるのはいいですね。

ブログデザインとCSSも変えました

前述の通り、HTMLタグにidやclassを割り当てられないため、ブログデザインとCSSもMarkdownに合うように変更しました。 ブログデザインは公式の「Report」です。白がベースなので見易いですね。 カスタムCSSはまだまだ少ないですが、以下のようになっています。

/* <system section="theme" selected="report"> */
@import "/css/theme/report/report.css";
/* </system> */

/* <system section="background" selected="default"> */
/* default */
/* </system> */

/* 見出し1 */
h3 {
    border-bottom: 5px solid #64c99b !important;
}

/* 見出し2 */
h4 {
    padding-left: 5px;
    border-left: 5px solid #b2e4cd;
}

/* 引用部 */
blockquote {
    border-style: dashed !important;
    background: #eee url(http://cdn-ak.f.st-hatena.com/images/fotolife/t/tech-tsubaki/20130817/20130817103911.png) no-repeat 5px 5px;
}
blockquote, blockquote .keyword {
    color: #666;
}
blockquote > h4 {
    margin-top: 0 !important;
    border: 0;
}

/* コード */
pre {
    border-style: dashed !important;
    background: #f9f9f9;
}

/* 画像 */
.entry-content img {
    -moz-box-shadow: 0 1px 5px black;
    -webkit-box-shadow: 0 1px 5px black;
    box-shadow: 0 1px 5px black;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.entry-content img:hover {
    opacity: 0.7;
}