モブログでMarkdownって使えるものなの?（その14:スタイル）

驚いた。


Markdownには裏がある

TextwellならモブログでMarkdownが使いやすい MathJax
Markdownには、ある種の書きやすさがある。まず、今の関心を見出しに書く。すると、関連する文が思い浮かぶ。出てきた文を箇条書きする。段落に整え、見出しを書き直す。足りない部分が出てくるので、それを...

Markdownはレイアウトが決められないから、あまり面白いデザインにならない。そう思ってました。MathJaxアクションも、ソース内にstyle変数でカスタマイズできるようにしています。でももしかしたら、それは誤解だったかも知れません。


思いのままのスタイルで


本文中にスクリプトを書くと、プレビューが変わることに気づきました。



本来ならこんな感じ。メリハリがない。



それが、まったく別のドキュメントになります。全体の基調は抹茶テイストで、リストも◉にしてみました。引用は丸みの帯びた二重枠で懐紙をイメージし、コード引用は短冊っぽいルックス。和風な感じにしようとして、どことなくサイバーな方向に落ち着きました。


styleの解説

下記スクリプトを本文の末尾に置きます。

<style>
h4 {
  color: lime;
  background: green;
  font-weight: bold;
  padding: 10px;
}

ul li {
  list-style-type:none;
}

ul li:before {
  content: "&#9673; ";
  color: green;
}

blockquote {  
  padding: 0 20px;
  border: 5px solid #ddd;
  background-color: #eee;
  border-radius: 5px;
}

pre {
  padding: 5px;
  background: lightgreen;
  border-left: 7px solid green;
}

img {
  max-width: 400px;
}
</style>

たとえば「h4 {・・・}」は、h4タグのスタイル指定。color が文字の色で、background が背景色です。font-weight でボールド(太字)にして、paddingで周囲に隙間を空けます。基本となるのは、そこあたりでしょうか。そんなふうにカスタマイズできる。

styleタグ内はMarkdownに表示されない。でも機能的には生きている。その性質を利用しています。使いにくかった画像の埋め込みも、imgタグのmax-widthで最大幅を指定。max-widthの数値より大きなサイズは、自動的に縮小される。これが出来るんだったら、写真やイラストを取り込んだドキュメントも作りやすくなります。個々の画像にサイズを書くよりも、リンク系は一括管理するほうがMarkdownらしい。


汎用性のある方法？

あまりに意外だったので、UpWordやWorkflowでも実験してみました。すると、反映するタグと、そうでないタグがあるようです。それぞれに自前のスタイルが用意されているため、かえって、文中のスタイルを上書きする様子。親切が仇となっている。

そもそもブログに投稿するにしても、styleを書き換えてしまう記事はマナー違反です。ブログのスタイルは、一括してスタイルシートに定義しておくもの。外部cssを使うとか。そう考えるとこのテクニック、現実的ではありません。せっかく見つけたのに残念。


スタイルシートをlinkする

むしろ自分とこのブログのcssをlinkで貼り付けると、プレビューの段階で完成イメージが見れますよね。文中のどこにlinkタグを置いても良いようです。不具合がなければ、そのままMathJaxアクションの一行目にでも組み込んでください。そのほうが実用的かも。
ネットで調べるとMarkdown用スタイルを公開しているサイトもありました。

  • Let's make the Web prettier.

    • <link href="http://kevinburke.bitbucket.org/markdowncss/markdown.css" rel="stylesheet"></link>

  • simonlc/Markdown-CSS · GitHub

    • <link href="https://raw.github.com/simonlc/Markdown-CSS/master/markdown.css" rel="stylesheet"></link>

  • 日本語を含むMarkdown用CSS

    • <link href="http://szk-engineering.com/markdown.css" rel="stylesheet"></link>

    Markdownは禅スタイルです。もともとHTMLから無駄を削っている。ミニマルな記号の組み合わせで構造を引き立てます。そのcssも極力シンプルで、それでいて粋なデザインが好まれるようです。どのデザインも原稿が読みやすい。派手なのもあって良いと思うけどね。


    まとめ


    そんなわけで、オススメは別のアプリに転送するときかな。MathJaxアクションで Open in を使うときです。好きなデザインで印刷イメージを得られる。PDFに変換するPrinterProを使うと、カラフルな文書が作成できます。好みのデザインを定型文として保管し、それを組み合わせて用いると、不可思議な世界に近づける。

  • Textwellで書いたMarkdownをPrinterProで印刷するアクション