コンテンツエリアのマークアップで必要なHTMLの要素。コピペすると使える。

見出し壱：夏目漱石著『吾輩は猫である』

見出し弐：レオ・レオニ作『スイミー小さなかしこいさかなのはなし』

見出し参：あまんきみこ作、上野紀子絵『ちいちゃんのかげおくり』

見出し四：モンゴルの民話『スーホの白い馬』

見出し五：新美南吉作『手袋を買いに』

見出し六：芥川龍之介著『羅生門』

引用 (Blockquote) テスト

これは言語みたいなものだ。アルファベットすなわち音階を学び、文すなわちコードを学ぶ。そしてやがてホーンと即興で会話するようになる。即興で話すのはすばらしいことだと思うが、私には決して会得できないだろう。しかし音楽ともなれば、私は即座によろこんで会話する。そう、それがジャズ音楽のすべてだ。
スタン・ゲッツ

テーブル

社員	給料
山田太郎	1ドル	スティーブ・ジョブズが必要なサラリーと同じ額。
田中花子	1,000万円	ブログを書くために必要になる資金。
山本次郎	1億円	百聞は一見にしかず、ということで、カメラマンはブロガーの100倍。
中山愛子	10億円	特に理由は要りません。

定義リストタイトル（dt）: これは定義リストです。(dd)
定義の定義: 物事、領域、何かについての意味の正確な文章や説明: 詩を構成するものの定義。
ギャラリーとはなにか: WordPress 2.5 から導入された、投稿に添付された画像を展示するための機能です。同じように、投稿を編集中にアップロードすると、そのファイルは「投稿に添付」されます。
Gravatar (グラバター): グラバターとはグローバルに認識されるアバター (あるユーザーを表すグラフィックイメージや写真) です。グラバターはメールアドレスと紐づいていて、Gravatar.com サービスによって管理されています。このサービスを利用すると、ブログ所有者は自分のブログを設定することによりコメント欄にユーザーのグラバターを表示させることができます。

非順序リスト (ネスト化)

リスト項目 1
- リスト項目 1
  - リスト項目 1
  - リスト項目 2
  - リスト項目 3
  - リスト項目 4
- リスト項目 2
- リスト項目 3
- リスト項目 4
リスト項目 2
リスト項目 3
リスト項目 4

順序リスト (ネスト化)

リスト項目 1
1. リスト項目 1
  1. リスト項目 1
  2. リスト項目 2
  3. リスト項目 3
  4. リスト項目 4
2. リスト項目 2
3. リスト項目 3
4. リスト項目 4
リスト項目 2
リスト項目 3
リスト項目 4

ネスト化された混合リストでは以下が正しく表示されるようにしてください。

リストの中のリストは番号付きリストの順番を壊さないこと
箇条書きのスタイルの深さは十分であること

番号付きリスト – 番号なしリスト – 番号付きリスト

番号付きリストアイテム
番号付きリストアイテム
- 番号なし
- 番号なし
  1. 番号付きリストアイテム
  2. 番号付きリストアイテム
番号付きリストアイテム
番号付きリストアイテム

番号付きリスト – 番号なしリスト – 番号なしリスト

番号付きリストアイテム
番号付きリストアイテム
- 番号なし
- 番号なし
  - 番号なしリストアイテム
  - 番号なしリストアイテム
番号付きリストアイテム
番号付きリストアイテム

番号なしリスト – 番号付きリスト – 番号なしリスト

番号なしリストアイテム
番号なしリストアイテム
1. 番号付き
2. 番号付き
  - 番号なしリストアイテム
  - 番号なしリストアイテム
番号なしリストアイテム
番号なしリストアイテム

番号なしリスト – 番号なしリスト – 番号付きリスト

番号なしリストアイテム
番号なしリストアイテム
- 番号なし
- 番号なし
  1. 番号付きリストアイテム
  2. 番号付きリストアイテム
番号なしリストアイテム
番号なしリストアイテム

HTML 要素タグテスト

これは <anchor> (もしくはリンクとも呼ばれます) の例です。

Delete タグ

<del> タグは~~打ち消し線~~などで表現されますが、このタグは HTML5 ではサポートされていません (代わりに <strike> を使ってください)。

Insert タグ

<ins> タグは挿入されたコンテンツを意味します。

Strong タグ

このタグは太字テキストを表しています。

テキストのマークアップ

デフォルト

これは段落です。特別なテキスト配置処理が付いていない状態になっている必要があります。通常のテキストフローと同じように表示されるべきです。なにも特別なことはありません。ただ、愛とともに自由に流れるテキストだけ。完全に中立的で、どちらかの肩を持つこともなく、かといってどっちつかずの態度というわけでもない。それだけ。それだけです。ここにいることが好きで、片方のサイドを選ぶ必要を感じていない。そんな彼はほっといてあげてください。彼は彼のままで。私を信じて。

左寄せ

これは段落です。左寄せになっています。彼の視点はやや左寄りです。好きな色は緑。左寄せな彼はエコフレンドリーになりがちですが、実際にそうだというはっきりした証拠というのはとくにありません。彼は富を共有するのが好きですが、公平な配分については両端揃えの彼にお任せといったところです。

中央寄せ

これは段落です。中央寄せになっています。中央に寄っているというのはつまり、どっちつかずということです。意見がコロコロ変わったりします。自分の意見を決めるのに時間がかかります。どちらかのサイドを選びたいと思っているんです。本当に。意図はすばらしいんですが、実際には助けになるというより物事を必要以上に複雑にしてしまったりします。彼の気持ちを振り向かせられれば最高でしょう。中央寄せの彼は賄賂も受け取るらしいですよ。

右寄せ

これは段落です。右寄せになっています。彼の視点は右寄りなんです。他の人に何をどんなふうにすべきか指図されるのをいやがります。右派の彼はたくさんの銃を保有していて、狩りに繰り出すのが好きです。いいじゃないですか。球場5つ分くらいの距離からなかなかいい弾を撃つわけです。どんぴしゃに。すごいですよ。

両端揃え

これは段落です。左右両端揃えになっています。英語ではジャスティファイドと呼ばれていますがジャスティン・ティンバーレイクとは関係ありません。普通、両端揃えの彼はかなり厳格です。すべてがあるべき場所にぴったりと収まっていないと気が済まず、他の配置のようにばらばらだったりはしません。だから彼の方がいいなんて言ってるわけではないんですよ。でもまあ確かに、エリート気取りの態度だなって感じることはありますけど。

画像のマークアップ

画像の配置では、ユーザーが「指定なし」「右寄せ」「左寄せ」「中央揃え」の中から自分の好きなものを選べるようにする必要があります。さらに、「サムネイル」「中サイズ」「大サイズ」「フルサイズ」という選択肢の中から大きさを選べるようにするべきです。

上記の画像は中央寄せになるはずです。

このパラグラフの残り画像を左寄せしたとき、文章が150ピクセルの画像の周りを囲むようになるかどうか見るためのものです。

ご覧のとおり、画像の上・下・右にスペースが空いている事がわかると思います。テキストは画像にこっそりと忍びよってはいません、忍び寄ることは良くない事です。画像だって十分に呼吸ができるスペースが必要なのです。画像が文章にイライラさせられることなく役割を果たせるようにしてあげてください。次の文章では、テキストが画像の右から下へとシームレスに途切れることなく続いている事がわかりますね。これで完了です !

次は、とても大きな画像のテストです。そして、この画像には配置の指定がありません。

上記の画像は1200ピクセルもありますが、コンテンツエリアからはみ出る事はなく収まっています。

そして今後は右寄せに移りたいと思います。また今度も、画像の上、下、左に十分な余白があると思います。ほら、あっちにいる彼を見てください ! 右側の方にいるあの画像 ! 左寄せ画像がなんて言うかなんてどうでもいいんです、美しい配置ですよ。他の人の意見なんて気にしないでいいんです。

そしてこのへんでテキストが右寄せの画像の下に回り込んで、ちょうど良い具合に収まっているのが分かると思います。ひきつづきちょうど良い具合にスペースが残されていて、すべてがきれいに表示されているべきです。そうです…。右画像に回り込むのって気持ちいいですね。

これからキャプションのテストに入ります !

580×300 画像のキャプション例。

上記の画像は中央寄せになるはずです。キャプションにはリンクが含まれていますが、おかしな表示になっていないか確認しましょう。

ちょっとしたキャプション

このパラグラフの残りの部分は、150×150 サイズの左寄せ画像の回り込みをテストするためのつなぎです。

ご覧の通り、画像の上・下・右にスペースが必要です。テキストは画像にこっそりと忍びよってはいません、忍び寄ることは良くない事です。画像だって十分に呼吸ができるスペースが必要なのです。画像が文章にイライラさせられることなく役割を果たせるようにしてあげてください。次の文章では、テキストが画像の右から下へとシームレスに途切れることなく続いている事がわかりますね。これで完了です !

それでは、とても大きな画像のテストです。そして、この画像にも配置の指定はありません。

とても大きな画像のコメント

上記の画像は1200ピクセル幅ですが、コンテンツエリアからはみ出すべきではありません。コンテンツのフローを視覚的に邪魔しないかたちで、指定のエリア内に収まっている必要があります。

右側いるのほ良い気分です。

そして今後は右寄せ画像に移りたいと思います。また今度も、画像の上、下、左に十分な余白があると思います。ほら、あっちにいる彼を見てください ! 右側の方にいるあの画像 ! 左寄せ画像がなんて言うかなんてどうでもいいんです、美しい配置ですよ。他の人の意見なんて気にしないでいいんです

WordPress がサポートしている embed のスタイル

Twitter のURL貼り付け

WordCamp Kansai 2015の参加者のみなさまから、たくさんのブログ書いていただきましたので一挙にご紹介！ご意見やご感想は次回のWordCamp Kansaiの参考にさせてもらいまーす！ヽ|。´・ω・`|ﾉ　ﾜﾌﾟｰhttps://t.co/gaqweVX1Np

— WordCamp Kansai 2015 (@wckansai2015) August 3, 2015

Instagram のURL貼り付け

https://instagram.com/p/92kuEXIVZt/

Youtube のURL貼り付け

Kickstarter のプロジェクトURL貼り付け