ページマークアップとフォーマット

見出し２

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

見出し３

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

見出し４

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

見出し５

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

見出し６

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

リスト

非順序リスト

• リスト項目 1
  • リスト項目 1
    • リスト項目 1
    • リスト項目 2
  • リスト項目 2
  • リスト項目 3
• リスト項目 2
• リスト項目 3

順序リスト

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

定義リスト

定義リストタイトル

これは定義リストです。

定義

物事、領域、何かについての意味の正確な文章や説明: 詩を構成するものの定義。

ギャラリー

WordPress 2.5 から導入された、投稿に添付された画像を展示するための機能です。同じように、投稿を編集中にアップロードすると、そのファイルは「投稿に添付」されます。

Gravatar (グラバター)

グラバターとはグローバルに認識されるアバター (あるユーザーを表すグラフィックイメージや写真) です。グラバターはメールアドレスと紐づいていて、Gravatar.com サービスによって管理されています。このサービスを利用すると、ブログ所有者は自分のブログを設定することによりコメント欄にユーザーのグラバターを表示させることができます。

その他のタイポグラフィ

– b要素は、重要性は持たずに他のテキストとは区別する。

– em要素は、強勢（アクセント）をつける。

– strong要素は、強い重要性を表す。

– u要素は下線をつけるが、HTML5では廃止された。

– この要素はテキストリンク。

カード型レイアウト

テーブル

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

引用

乳をしぼってつめたいパンをひたしてたべ、それから黒い革のかばんへすこしの書類や雑誌を入れ、靴もきれいにみがき、並木のポプラの影法師を大股にわたって市の役所へ出て行くのでした。

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。宮沢賢治『ポラーノの広場』

またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。

画像

中央寄せ

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

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

左寄せ

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

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

フルサイズ

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

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

右寄せ

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

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

キャプションつき中央寄せ

さて、これで終わりと思ったかもしれませんが、これからキャプションのテストに入ります！

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

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

キャプションつき左寄せ

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

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

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

キャプションつきフルサイズ

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

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

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

キャプションつき右寄せ

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

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

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