Skip to content

Instantly share code, notes, and snippets.

@ShinichiNishikawa

ShinichiNishikawa/WP Content Area Markup

Last active March 18, 2016 05:20
Show Gist options
  • Save ShinichiNishikawa/01616298fbcf6ec3426a to your computer and use it in GitHub Desktop.
Save ShinichiNishikawa/01616298fbcf6ec3426a to your computer and use it in GitHub Desktop.
Download ZIP
Tags I use a lot in WordPress content area.
Raw
WP Content Area Markup
<h1>見出し壱：夏目漱石著『吾輩は猫である』</h1>
<h2>見出し弐：レオ・レオニ作『スイミー 小さなかしこいさかなのはなし』</h2>
<h3>見出し参：あまん きみこ作、上野 紀子絵『ちいちゃんのかげおくり』</h3>
<h4>見出し四：モンゴルの民話『スーホの白い馬』</h4>
<h5>見出し五：新美南吉作『手袋を買いに』</h5>
<h6>見出し六：芥川龍之介著『羅生門』</h6>
<h2>引用 (Blockquote) テスト</h2>
<blockquote>これは言語みたいなものだ。アルファベットすなわち音階を学び、文すなわちコードを学ぶ。そしてやがてホーンと即興で会話するようになる。即興で話すのはすばらしいことだと思うが、私には決して会得できないだろう。しかし音楽ともなれば、私は即座によろこんで会話する。そう、それがジャズ音楽のすべてだ。
<cite>スタン・ゲッツ</cite></blockquote>
<h2>テーブル</h2>
<table>
<thead>
<tr>
<th>社員</th>
<th>給料</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<th><a href="http://example.org/">山田太郎</a></th>
<td>1ドル</td>
<td>スティーブ・ジョブズが必要なサラリーと同じ額。</td>
</tr>
<tr>
<th><a href="http://example.org/">田中花子</a></th>
<td>1,000万円</td>
<td>ブログを書くために必要になる資金。</td>
</tr>
<tr>
<th><a href="http://example.org/">山本次郎</a></th>
<td>1億円</td>
<td>百聞は一見にしかず、ということで、カメラマンはブロガーの100倍。</td>
</tr>
<tr>
<th><a href="http://example.org/">中山愛子</a></th>
<td>10億円</td>
<td>特に理由は要りません。</td>
</tr>
</tbody>
</table>
<dl><dt>定義リストタイトル（dt）</dt><dd>これは定義リストです。(dd)</dd><dt>定義の定義</dt><dd>物事、領域、何かについての意味の正確な文章や説明: <em>詩を構成するものの定義。</em></dd><dt>ギャラリーとはなにか</dt><dd>WordPress 2.5 から導入された、投稿に添付された画像を展示するための機能です。同じように、投稿を編集中にアップロードすると、そのファイルは「投稿に添付」されます。</dd><dt>Gravatar (グラバター)</dt><dd>グラバターとはグローバルに認識されるアバター (あるユーザーを表すグラフィックイメージや写真) です。グラバターはメールアドレスと紐づいていて、Gravatar.com サービスによって管理されています。このサービスを利用すると、ブログ所有者は自分のブログを設定することによりコメント欄にユーザーのグラバターを表示させることができます。</dd></dl>
<h2>非順序リスト (ネスト化)</h2>
<ul>
<li>リスト項目 1
<ul>
<li>リスト項目 1
<ul>
<li>リスト項目 1</li>
<li>リスト項目 2</li>
<li>リスト項目 3</li>
<li>リスト項目 4</li>
</ul>
</li>
<li>リスト項目 2</li>
<li>リスト項目 3</li>
<li>リスト項目 4</li>
</ul>
</li>
<li>リスト項目 2</li>
<li>リスト項目 3</li>
<li>リスト項目 4</li>
</ul>
<h2>順序リスト (ネスト化)</h2>
<ol>
<li>リスト項目 1
<ol>
<li>リスト項目 1
<ol>
<li>リスト項目 1</li>
<li>リスト項目 2</li>
<li>リスト項目 3</li>
<li>リスト項目 4</li>
</ol>
</li>
<li>リスト項目 2</li>
<li>リスト項目 3</li>
<li>リスト項目 4</li>
</ol>
</li>
<li>リスト項目 2</li>
<li>リスト項目 3</li>
<li>リスト項目 4</li>
</ol>
ネスト化された混合リストでは以下が正しく表示されるようにしてください。
<ul>
<li>リストの中のリストは番号付きリストの順番を壊さないこと</li>
<li><span style="line-height: 1.714285714; font-size: 1rem;">箇条書きのスタイルの深さは十分であること</span></li>
</ul>
<h3>番号付きリスト - 番号なしリスト - 番号付きリスト</h3>
<ol>
<li>番号付きリストアイテム</li>
<li>番号付きリストアイテム
<ul>
<li><strong>番号なし</strong></li>
<li><strong>番号なし</strong>
<ol>
<li>番号付きリストアイテム</li>
<li>番号付きリストアイテム</li>
</ol>
</li>
</ul>
</li>
<li>番号付きリストアイテム</li>
<li>番号付きリストアイテム</li>
</ol>
<h3>番号付きリスト - 番号なしリスト - 番号なしリスト</h3>
<ol>
<li>番号付きリストアイテム</li>
<li>番号付きリストアイテム
<ul>
<li><strong>番号なし</strong></li>
<li><strong>番号なし</strong>
<ul>
<li>番号なしリストアイテム</li>
<li>番号なしリストアイテム</li>
</ul>
</li>
</ul>
</li>
<li>番号付きリストアイテム</li>
<li>番号付きリストアイテム</li>
</ol>
<h3>番号なしリスト - 番号付きリスト - 番号なしリスト</h3>
<ul>
<li>番号なしリストアイテム</li>
<li>番号なしリストアイテム
<ol>
<li>番号付き</li>
<li>番号付き
<ul>
<li>番号なしリストアイテム</li>
<li>番号なしリストアイテム</li>
</ul>
</li>
</ol>
</li>
<li>番号なしリストアイテム</li>
<li>番号なしリストアイテム</li>
</ul>
<h3>番号なしリスト - 番号なしリスト - 番号付きリスト</h3>
<ul>
<li>番号なしリストアイテム</li>
<li>番号なしリストアイテム
<ul>
<li>番号なし</li>
<li>番号なし
<ol>
<li><strong>番号付きリストアイテム</strong></li>
<li><strong>番号付きリストアイテム</strong></li>
</ol>
</li>
</ul>
</li>
<li>番号なしリストアイテム</li>
<li>番号なしリストアイテム</li>
</ul>
<h2>HTML 要素タグテスト</h2>
これは <a href="http://example.com/" rel="nofollow"><code>&lt;anchor&gt;</code></a> (もしくはリンクとも呼ばれます) の例です。
<strong>Delete タグ</strong>
<code>&lt;del&gt;</code> タグは<del>打ち消し線</del>などで表現されますが、このタグは HTML5 ではサポートされていません (代わりに <code>&lt;strike&gt;</code> を使ってください)。
<strong>Insert タグ</strong>
<code>&lt;ins&gt;</code> タグは<ins>挿入されたコンテンツ</ins>を意味します。
<strong>Strong タグ</strong>
このタグは<strong>太字</strong>テキストを表しています。
<h2>テキストのマークアップ</h2>
<h3>デフォルト</h3>
これは段落です。特別なテキスト配置処理が付いていない状態になっている必要があります。通常のテキストフローと同じように表示されるべきです。なにも特別なことはありません。ただ、愛とともに自由に流れるテキストだけ。完全に中立的で、どちらかの肩を持つこともなく、かといってどっちつかずの態度というわけでもない。それだけ。それだけです。ここにいることが好きで、片方のサイドを選ぶ必要を感じていない。そんな彼はほっといてあげてください。彼は彼のままで。私を信じて。
<h3>左寄せ</h3>
<p style="text-align: left;">これは段落です。左寄せになっています。彼の視点はやや左寄りです。好きな色は緑。左寄せな彼はエコフレンドリーになりがちですが、実際にそうだというはっきりした証拠というのはとくにありません。彼は富を共有するのが好きですが、公平な配分については両端揃えの彼にお任せといったところです。</p>
<h3>中央寄せ</h3>
<p style="text-align: center;">これは段落です。中央寄せになっています。中央に寄っているというのはつまり、どっちつかずということです。意見がコロコロ変わったりします。自分の意見を決めるのに時間がかかります。どちらかのサイドを選びたいと思っているんです。本当に。意図はすばらしいんですが、実際には助けになるというより物事を必要以上に複雑にしてしまったりします。彼の気持ちを振り向かせられれば最高でしょう。中央寄せの彼は賄賂も受け取るらしいですよ。</p>
<h3>右寄せ</h3>
<p style="text-align: right;">これは段落です。右寄せになっています。彼の視点は右寄りなんです。他の人に何をどんなふうにすべきか指図されるのをいやがります。右派の彼はたくさんの銃を保有していて、狩りに繰り出すのが好きです。いいじゃないですか。球場5つ分くらいの距離からなかなかいい弾を撃つわけです。どんぴしゃに。すごいですよ。</p>
<h3>両端揃え</h3>
<p style="text-align: justify;">これは段落です。左右両端揃えになっています。英語ではジャスティファイドと呼ばれていますがジャスティン・ティンバーレイクとは関係ありません。普通、両端揃えの彼はかなり厳格です。すべてがあるべき場所にぴったりと収まっていないと気が済まず、他の配置のようにばらばらだったりはしません。だから彼の方がいいなんて言ってるわけではないんですよ。でもまあ確かに、エリート気取りの態度だなって感じることはありますけど。</p>
<h2>画像のマークアップ</h2>
画像の配置では、ユーザーが「指定なし」「右寄せ」「左寄せ」「中央揃え」の中から自分の好きなものを選べるようにする必要があります。さらに、「サムネイル」「中サイズ」「大サイズ」「フルサイズ」という選択肢の中から大きさを選べるようにするべきです。
<p style="text-align: center;"><img class="size-full wp-image-906 aligncenter" title="画像配置 580x300" src="http://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-580x300.jpg" alt="画像配置 580x300" width="580" height="300" /></p>
上記の画像は<strong>中央寄せ</strong>になるはずです。
<strong><img class="size-full wp-image-904 alignleft" title="画像配置 150x150" src="http://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-150x150.jpg" alt="画像配置 150x150" width="150" height="150" /></strong>このパラグラフの残り画像を左寄せしたとき、文章が150ピクセルの画像の周りを囲むようになるかどうか見るためのものです。
ご覧のとおり、画像の上・下・右にスペースが空いている事がわかると思います。テキストは画像にこっそりと忍びよってはいません、忍び寄ることは良くない事です。画像だって十分に呼吸ができるスペースが必要なのです。画像が文章にイライラさせられることなく役割を果たせるようにしてあげてください。次の文章では、テキストが画像の右から下へとシームレスに途切れることなく続いている事がわかりますね。これで完了です !
次は、<strong>とても大きな画像</strong>のテストです。そして、この画像には<strong>配置の指定がありません</strong>。
<img class="alignnone wp-image-907" title="画像配置 1200x400" src="http://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-1200x4002.jpg" alt="画像配置 1200x400" width="1200" height="400" />
上記の画像は1200ピクセルもありますが、コンテンツエリアからはみ出る事はなく収まっています。
<img class="size-full wp-image-905 alignright" title="画像配置 300x200" src="http://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-300x200.jpg" alt="画像配置 300x200" width="300" height="200" />
そして今後は右寄せに移りたいと思います。また今度も、画像の上、下、左に十分な余白があると思います。ほら、あっちにいる彼を見てください ! 右側の方にいるあの画像 ! 左寄せ画像がなんて言うかなんてどうでもいいんです、美しい配置ですよ。他の人の意見なんて気にしないでいいんです。
そしてこのへんでテキストが右寄せの画像の下に回り込んで、ちょうど良い具合に収まっているのが分かると思います。ひきつづきちょうど良い具合にスペースが残されていて、すべてがきれいに表示されているべきです。そうです…。右画像に回り込むのって気持ちいいですね。
これからキャプションのテストに入ります !
[caption id="attachment_906" align="aligncenter" width="580"]<img class="size-full wp-image-906 " title="画像配置 580x300" src="http://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-580x300.jpg" alt="画像配置 580x300" width="580" height="300" /> 580x300 画像の<a title="画像設定" href="http://en.support.wordpress.com/images/image-settings/">キャプション</a>例。[/caption]
上記の画像は<strong>中央寄せ</strong>になるはずです。キャプションにはリンクが含まれていますが、おかしな表示になっていないか確認しましょう。
[caption id="attachment_904" align="alignleft" width="150"]<img class="size-full wp-image-904 " title="画像配置 150x150" src="http://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-150x150.jpg" alt="画像配置 150x150" width="150" height="150" /> ちょっとしたキャプション[/caption]
このパラグラフの残りの部分は、150x150 サイズの<strong>左寄せ</strong>画像の回り込みをテストするためのつなぎです。
ご覧の通り、画像の上・下・右にスペースが必要です。テキストは画像にこっそりと忍びよってはいません、忍び寄ることは良くない事です。画像だって十分に呼吸ができるスペースが必要なのです。画像が文章にイライラさせられることなく役割を果たせるようにしてあげてください。次の文章では、テキストが画像の右から下へとシームレスに途切れることなく続いている事がわかりますね。これで完了です !
それでは、<strong>とても大きな画像</strong>のテストです。そして、この画像にも<strong>配置の指定はありません</strong>。
[caption id="attachment_907" align="alignnone" width="1200"]<img class=" wp-image-907" title="画像配置 1200x400" src="http://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-1200x4002.jpg" alt="画像配置 1200x400" width="1200" height="400" /> とても大きな画像のコメント[/caption]
上記の画像は1200ピクセル幅ですが、コンテンツエリアからはみ出すべきではありません。コンテンツのフローを視覚的に邪魔しないかたちで、指定のエリア内に収まっている必要があります。
[caption id="attachment_905" align="alignright" width="300"]<img class="size-full wp-image-905 " title="画像配置 300x200" src="http://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-300x200.jpg" alt="画像配置 300x200" width="300" height="200" /> 右側いるのほ良い気分です。[/caption]
そして今後は<strong>右寄せ</strong>画像に移りたいと思います。また今度も、画像の上、下、左に十分な余白があると思います。ほら、あっちにいる彼を見てください ! 右側の方にいるあの画像 ! 左寄せ画像がなんて言うかなんてどうでもいいんです、美しい配置ですよ。他の人の意見なんて気にしないでいいんです
そしてこのへんでテキストが右寄せの画像の下に回り込んで、ちょうど良い具合に収まっているのが分かると思います。ひきつづきちょうど良い具合にスペースが残されていて、すべてがきれいに表示されているべきです。そうです…。右画像に回り込むのって気持ちいいですね。
<h2>WordPress がサポートしている embed のスタイル</h2>
Twitter のURL貼り付け
https://twitter.com/wckansai2015/status/628076493424320512
Instagram のURL貼り付け
https://instagram.com/p/92kuEXIVZt/
Youtube のURL貼り付け
https://www.youtube.com/watch?v=qcnL7J5p3rs
Kickstarter のプロジェクトURL貼り付け
https://www.kickstarter.com/projects/2106691934/blocks-the-worlds-first-modular-smartwatch
SlideShare のURL貼り付け
http://www.slideshare.net/NSKW/learning-from-theme-review-requirements
TED のURL貼り付け
http://www.ted.com/talks/kaki_king_a_musical_escape_into_a_world_of_light_and_color
このページのHTML要素
https://gist.github.com/ShinichiNishikawa/01616298fbcf6ec3426a
以下は、ページングのテストのためのものです。
<!--nextpage-->
2ページ目のコンテンツ
<!--nextpage-->
3ページ目のコンテンツ
<!--nextpage-->
4ページ目のコンテンツ
<!--nextpage-->
5ページ目のコンテンツ
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment