テーマストア制作用サンプルエントリーをMarkdownモードと見たままモード用に作ってみた
こんばんは。先日、会社の健康診断を受けてきたBのりだーです。そしてその際、胃の検診がありバリウムを飲んだんですが、そのバリウムがなんとイチゴ風味だったんです。
だからバリウムを飲む嫌な気分が、ほんのちょっと安らいで、ほんのちょっとだけ幸せを感じました。
ま、そんな前置きはどうでもよいですね（笑）
それはさておき、ここのところずっと写真ネタが続いていたので、たまには違うネタで攻めてみたいと思います。今回は、はてなブログにおける編集モードに絡んだネタです。
サンプルエントリーをMarkdownモードと見たままモード用に作成した理由
はてなブログには、編集モードが3つあるのはみなさんご存知だと思います。
- 見たままモード
- はてな記法モード
- Markdownモード
自分は、はてなブログを始めた当初見たままモードを使っていたのですが、『見たまま編集』と『HTML編集』、そして『プレビュー』表示を切り替えて確認するのがあまりにもめんどくさかったので、間もなくはてな記法モードに変更しました。
そして、はてな記法モードに満足して最近まで使っていたのですが、ひょんなきっかけからMarkdownモードに変更したんですね。
もちろん自分にとってメリットがあったからこそ変更したんですが、その件の紹介については別の機会に譲るとして、今回は『はてなブログテーマ制作の手引き』で紹介されている『サンプルエントリー』を、Markdown記法と（おまけで）見たままモード用に作成してみたので紹介したいと思います。
ちなみにこのサンプルエントリーは、テーマ作成をされたことのある方ならご存知だと思いますが、はてな記法で書かれています。そして、はてな記法モードでない編集モードを使用していた場合、はてな記法モードに切り替えてからこのサンプルエントリーをコピーしなければならず、場合によっては結構面倒だと思ったんです。
そこで『それぞれのモード用にサンプルエントリーが用意されていれば楽なんじゃないのか？』というのと、自分がMarkdown記法に慣れるためのちょうどいい機会ということもあり、作成してみました。
もしテーマを自作しようとしている方で『編集モードを切り替えるのがめんどくせー』という方は、今回紹介させていただくサンプルエントリーをぜひ使ってみてください。
あとテーマを自作する方以外でも、特に『はてな記法とMarkdown記法で、記述がどう違うのか参考にしたい』という方にもお勧めです。
なお、このサンプルエントリーを用いて、はてな記法とMarkdown記法の違いについて書いたエントリ記事を、後日投稿したいと考えています。
目次
それぞれページ内リンクになっています。
ちなみに、ページ内リンクをクリックするとスムーズスクロールで移動しますが、これの実現方法について興味のある方は、自分が過去に書いた記事「はてなブログでページ内スムーズスクロールを実現させる」を参考にしてみてください。
はてな記法モード用サンプルエントリー
これについては、上記でも紹介した、はてな公式のサンプルエントリー（ヘルプ - はてなブログ）を参照してください。
Markdownモード用サンプルエントリー
カスタムテーマ制作用のサンプルエントリーです。下記をコピーして記事を作成してください。
※ Markdown記法で書かれています。必ずブログの「設定」-> 「編集モード」を「Markdownモード」に変更してから記事を作成してください。
#### 段落
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
#### フォトライフ
##### 左
[f:id:hatenablog:20101106100658j:image:w300:left]あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
<br style="clear:both">
##### 右
[f:id:hatenablog:20101106100658j:image:w300:right]あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
<br style="clear:both">
##### ブロック
[f:id:hatenablog:20101106100658j:image:w300]あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
##### 大きい画像
[f:id:hatenablog:20101106100658j:image]あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
#h1見出し（#）
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890
## h2見出し（##）
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890
###h3見出し（###）
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890
#### h4見出し（####）
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890
##### h5見出し（#####）
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890
###### h6見出し(######)
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890
#### asin
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
[asin:4798110523:detail]
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
#### 引用
> 本日（11月12日）から11月27日まで、はてなダイアリーの公開デザインコンテスト「公開デザイン祭2007秋」を開催します。
[「公開デザイン祭2007秋」を開始しました - はてなダイアリー日記](http://d.hatena.ne.jp/hatenadiary/20071112/1194858362)
#### リスト（ul,ol,dl）
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
- 大賞1名：Amazonギフト券5万円分
- 入選9名：Amazonギフト券1万円分
- 大賞1名：Amazonギフト券5万円分
- 入選9名：Amazonギフト券1万円分
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
1. 大賞1名：Amazonギフト券5万円分
1. 入選9名：Amazonギフト券1万円分
1. 大賞1名：Amazonギフト券5万円分
1. 入選9名：Amazonギフト券1万円分
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
<dl>
<dt>大賞1名</dt><dd>Amazonギフト券5万円分</dd>
<dt>入選9名</dt><dd>Amazonギフト券1万円分</dd>
</dl>
#### テーブル
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
|名前|色|個数|
|-|:-:|-:|
|りんご|赤|1|
|みかん|だいだい|2|
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
#### PRE
```css
.XXX {
width:999px;
height:999px;
}
.propA, .propB, .propC {
width:999px;
height:999px;
}
#YYY {
width:9px;
height:999px;
}
```
ここまでがサンプルエントリー本来の内容で、ここからは参考としてMarkdownモードにのみ存在する記法を載せました。
#### 太字
**太字**
#### 斜体（フォントによっては、斜体になりません）
*斜体*
#### 打消
~~打消~~
#### CODE
`CODE`
見たままモード用サンプルエントリー
カスタムテーマ制作用のサンプルエントリーです。下記をコピーして記事を作成してください。
※ 見たままモードで書かれています。必ずブログの「設定」-> 「編集モード」を「見たままモード」に変更後記事を作成し、「HTML編集」に切り替えてコピーしてください。
<h4>段落</h4>
<p>あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
<p>あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
<div class="section">
<h4>フォトライフ</h4>
<div class="section">
<h5>左</h5>
<p><span><a class="hatena-fotolife" href="http://f.hatena.ne.jp/hatenablog/20101106100658"><img class="hatena-fotolife hatena-image-left" style="width: 300px;" title="f:id:hatenablog:20101106100658j:image:w300:left" src="http://cdn-ak.f.st-hatena.com/images/fotolife/h/hatenablog/20101106/20101106100658.jpg" alt="f:id:hatenablog:20101106100658j:image:w300:left" /></a></span>あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
</div>
<div class="section">
<h5>右</h5>
<p><span><a class="hatena-fotolife" href="http://f.hatena.ne.jp/hatenablog/20101106100658"><img class="hatena-fotolife hatena-image-right" style="width: 300px;" title="f:id:hatenablog:20101106100658j:image:w300:right" src="http://cdn-ak.f.st-hatena.com/images/fotolife/h/hatenablog/20101106/20101106100658.jpg" alt="f:id:hatenablog:20101106100658j:image:w300:right" /></a></span>あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
</div>
<div class="section">
<h5>ブロック</h5>
<p><span><a class="hatena-fotolife" href="http://f.hatena.ne.jp/hatenablog/20101106100658"><img class="hatena-fotolife" style="width: 300px;" title="f:id:hatenablog:20101106100658j:image:w300" src="http://cdn-ak.f.st-hatena.com/images/fotolife/h/hatenablog/20101106/20101106100658.jpg" alt="f:id:hatenablog:20101106100658j:image:w300" /></a></span>あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
</div>
<div class="section">
<h5>大きい画像</h5>
<p><span><a class="hatena-fotolife" href="http://f.hatena.ne.jp/hatenablog/20101106100658"><img class="hatena-fotolife" title="f:id:hatenablog:20101106100658j:image" src="http://cdn-ak.f.st-hatena.com/images/fotolife/h/hatenablog/20101106/20101106100658.jpg" alt="f:id:hatenablog:20101106100658j:image" /></a></span>あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
<h1>h1見出し</h1>
<p>あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。<br />ABCDEFGHIJKLMabcdefghijklm1234567890</p>
<h2>h2見出し</h2>
<p>あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。<br />ABCDEFGHIJKLMabcdefghijklm1234567890</p>
</div>
</div>
<div class="section">
<h3>h3見出し（大見出し）</h3>
<p>あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。<br /> ABCDEFGHIJKLMabcdefghijklm1234567890</p>
<div class="section">
<h4>h4見出し（中見出し）</h4>
<p>あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。<br /> ABCDEFGHIJKLMabcdefghijklm1234567890</p>
<div class="section">
<h5>h5見出し（小見出し）</h5>
<p>あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。<br /> ABCDEFGHIJKLMabcdefghijklm1234567890</p>
<h6>h6見出し</h6>
<p>あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。<br />ABCDEFGHIJKLMabcdefghijklm1234567890</p>
</div>
</div>
<div class="section">
<h4>asin</h4>
<p>あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
<div class="hatena-asin-detail"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4798110523/amaassocmiks-22/"><img class="hatena-asin-detail-image" title="「へんな会社」のつくり方 (NT2X)" src="http://ecx.images-amazon.com/images/I/51CEFZGYJVL._SL160_.jpg" alt="「へんな会社」のつくり方 (NT2X)" /></a>
<div class="hatena-asin-detail-info">
<p class="hatena-asin-detail-title"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4798110523/amaassocmiks-22/">「へんな会社」のつくり方 (NT2X)</a></p>
<ul>
<li><span class="hatena-asin-detail-label">作者:</span> <a class="keyword" href="http://d.hatena.ne.jp/keyword/%B6%E1%C6%A3%BD%DF%CC%E9">近藤淳也</a></li>
<li><span class="hatena-asin-detail-label">出版社/メーカー:</span> <a class="keyword" href="http://d.hatena.ne.jp/keyword/%E6%C6%B1%CB%BC%D2">翔泳社</a></li>
<li><span class="hatena-asin-detail-label">発売日:</span> 2006/02/13</li>
<li><span class="hatena-asin-detail-label">メディア:</span> 単行本</li>
<li><span class="hatena-asin-detail-label">購入</span>: 62人 <span class="hatena-asin-detail-label">クリック</span>: 1,985回</li>
<li><a href="http://d.hatena.ne.jp/asin/4798110523/amaassocmiks-22" target="_blank">この商品を含むブログ (1087件) を見る</a></li>
</ul>
</div>
</div>
<br /> あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</div>
<div class="section">
<h4>引用</h4>
<blockquote cite="http://d.hatena.ne.jp/hatenadiary/20071112/1194858362">
<p>本日（11月12日）から11月27日まで、はてなダイアリーの公開デザインコンテスト「公開デザイン祭2007秋」を開催します。</p>
<cite><a href="http://d.hatena.ne.jp/hatenadiary/20071112/1194858362">「公開デザイン祭2007秋」を開始しました - はてなダイアリー日記</a></cite></blockquote>
</div>
<div class="section">
<h4>リスト（ul,ol,dl）</h4>
<p>あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
<ul>
<li>大賞1名：Amazonギフト券5万円分</li>
<li>入選9名：Amazonギフト券1万円分
<ul>
<li>大賞1名：Amazonギフト券5万円分</li>
<li>入選9名：Amazonギフト券1万円分</li>
</ul>
</li>
</ul>
<p>あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
<ol>
<li>大賞1名：Amazonギフト券5万円分</li>
<li>入選9名：Amazonギフト券1万円分<ol>
<li>大賞1名：Amazonギフト券5万円分</li>
<li>入選9名：Amazonギフト券1万円分</li>
</ol></li>
</ol>
<p>あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
<dl><dt>大賞1名</dt><dd>Amazonギフト券5万円分</dd><dt>入選9名</dt><dd>Amazonギフト券1万円分</dd></dl></div>
<div class="section">
<h4>テーブル</h4>
<p>あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
<table>
<tbody>
<tr><th>名前</th><th>色</th><th>個数</th></tr>
<tr>
<td>りんご</td>
<td>赤</td>
<td>1</td>
</tr>
<tr>
<td>みかん</td>
<td>だいだい</td>
<td>2</td>
</tr>
</tbody>
</table>
<p>あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
</div>
<div class="section">
<h4>PRE</h4>
<pre class="code lang-css" data-lang="css" data-unlink=""><span class="synIdentifier">.XXX</span> <span class="synIdentifier">{</span>
<span class="synType">width</span>:<span class="synConstant">999px</span>;
<span class="synType">height</span>:<span class="synConstant">999px</span>;
<span class="synIdentifier">}</span>
<span class="synIdentifier">.propA</span>, <span class="synIdentifier">.propB</span>, <span class="synIdentifier">.propC</span> <span class="synIdentifier">{</span>
<span class="synType">width</span>:<span class="synConstant">999px</span>;
<span class="synType">height</span>:<span class="synConstant">999px</span>;
<span class="synIdentifier">}</span>
<span class="synIdentifier">#YYY</span> <span class="synIdentifier">{</span>
<span class="synType">width</span>:<span class="synConstant">9px</span>;
<span class="synType">height</span>:<span class="synConstant">999px</span>;
<span class="synIdentifier">}</span>
</pre>
</div>
</div>
