投稿として安全に表示するため、一覧の参照先は既存の「マークアップ」カテゴリーの記事6件に限定しています。絞り込み条件を含む元の設定例は統合原本に保持しています。

最新の投稿（1/13）

ブロックの設定を比較するサンプルです。各例の直前に変更設定と値を記載しています。

画像等は同梱素材を使用します。コピー用コードと書かれた例は、説明に従って必要なデータ・編集場所を用意してください。

sample-06028 / core/latest-posts　基本形

• マークアップ: HTML タグとフォーマット
• マークアップ: 画像の配置
• マークアップ: テキスト配置

sample-06029 / core/latest-posts　postsToShow：postsToShow=2

• マークアップ: HTML タグとフォーマット
• マークアップ: 画像の配置

sample-06030 / core/latest-posts　postsToShow：postsToShow=5

• マークアップ: HTML タグとフォーマット
• マークアップ: 画像の配置
• マークアップ: テキスト配置
• マークアップ: 特殊記号を含むタイトル ~`!@#$%^&*()-_=+{}[]/;:’”?,.>
• マークアップ: マークアップ付きのタイトル

sample-06031 / core/latest-posts　postsToShow：postsToShow=10

• マークアップ: HTML タグとフォーマット
• マークアップ: 画像の配置
• マークアップ: テキスト配置
• マークアップ: 特殊記号を含むタイトル ~`!@#$%^&*()-_=+{}[]/;:’”?,.>
• マークアップ: マークアップ付きのタイトル
• 極端な例: たくさんのカテゴリー

sample-06032 / core/latest-posts　displayPostContent：displayPostContent=false

• マークアップ: HTML タグとフォーマット
• マークアップ: 画像の配置
• マークアップ: テキスト配置

sample-06033 / core/latest-posts　displayPostContent：displayPostContent=true

• マークアップ: HTML タグとフォーマット
  目次 見出し見出し弐見出し参見出し四見出し五見出し六引用 (Blockquote) テストテーブル非順序リスト… 続きを読む: マークアップ: HTML タグとフォーマット
• マークアップ: 画像の配置
  画像の配置テストへようこそ ! 画像をいろいろな位置に配置してみるのに一番良い方法は、言葉の海の中に画像をそっ… 続きを読む: マークアップ: 画像の配置
• マークアップ: テキスト配置
  デフォルト これは段落です。特別なテキスト配置処理が付いていない状態になっている必要があります。通常のテキスト… 続きを読む: マークアップ: テキスト配置

sample-06034 / core/latest-posts　displayPostContentRadio：displayPostContentRadio="excerpt"

• マークアップ: HTML タグとフォーマット
  目次 見出し見出し弐見出し参見出し四見出し五見出し六引用 (Blockquote) テストテーブル非順序リスト… 続きを読む: マークアップ: HTML タグとフォーマット
• マークアップ: 画像の配置
  画像の配置テストへようこそ ! 画像をいろいろな位置に配置してみるのに一番良い方法は、言葉の海の中に画像をそっ… 続きを読む: マークアップ: 画像の配置
• マークアップ: テキスト配置
  デフォルト これは段落です。特別なテキスト配置処理が付いていない状態になっている必要があります。通常のテキスト… 続きを読む: マークアップ: テキスト配置

sample-06035 / core/latest-posts　displayPostContentRadio：displayPostContentRadio="full_post"

• マークアップ: HTML タグとフォーマット

  見出し

  見出し壱

  見出し弐

  見出し参

  見出し四

  見出し五

  見出し六

  引用 (Blockquote) テスト

  一行の引用。

  ハングリーであれ、愚かであれ。

  cite 参照を含む複数行の引用。

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

  テーブル

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

  定義リストタイトル

  これは定義リストです。

  定義

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

  ギャラリー

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

  Gravatar (グラバター)

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

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

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

  順序リスト (ネスト化)

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

  HTML 要素タグテスト

  他の HTML タグは FAQ をご覧ください。 住所タグ 以下は住所の例です。<address> タグを使用しています:

  〒100-0000東京都千代田区1-1-1 日本

  anchor タグ (リンク) これは <anchor> (もしくはリンクとも呼ばれます) の例です。 abbr タグ この abbr は文章の中にある <abbr> タグの例です。 Acronym タグ (HTML5 では非推奨) これは <acronym> タグを使用した TLA です。 Big タグ(HTML5 では非推奨) このテストは大きな文字を表す <big> タグの例ですが、このタグは HTML5 ではサポートされていません。 Cite タグ “Code is poetry.” —WordPress Code タグ <code> タグはこのように使います: word-wrap: break-word; Delete タグ <del> タグは打ち消し線などで表現されますが、このタグは HTML5 ではサポートされていません (代わりに <strike> を使ってください)。 Emphasize タグ <em> タグは文章の強調に使われます。欧文では斜体になっていることがよくあります。 Insert タグ <ins> タグは挿入されたコンテンツを意味します。 Keyboard タグ このあまり知られていない <kbd> タグは Ctrl のようにキーボードテキストをエミュレートします。通常、<code> タグと同じようにスタイリングされます。 Preformatted タグ <pre> タグは複数行のコードのスタイリングに使います。

  .post-title {
  
  	margin: 0 0 5px;
  
  	font-weight: bold;
  
  	font-size: 38px;
  
  	line-height: 1.2;
  
  	and here's a line of some really, really, really, really long text, just to see how the PRE tag handles it and to find out how it overflows;
  
  }

  Quote タグ デベロッパーズ、デベロッパーズ, デベロッパーズ… –スティーブ・バルマー Strike タグ (HTML5 では非推奨) このタグは打ち消し線を表しています。 Strong タグ このタグは太字テキストを表しています。 Subscript タグ Subscript タグ <sub> を使うと H₂O のような表示の際に「2」が下付きになります。 Superscript タグ Superscript タグ <sup> を使うと E = MC² のような表示の際に「2」が上付きになります。 Teletype タグ (HTML5 では非推奨) <tt> はあまり使われないタグですが、テレタイプテキスト として通常 <code> タグのようにスタイル Variable タグ 変数や引数を表す variables タグです。
• マークアップ: 画像の配置
  画像の配置テストへようこそ ! 画像をいろいろな位置に配置してみるのに一番良い方法は、言葉の海の中に画像をそっとうずめてみることです。さあ、はじめましょう。 画像の配置では、ユーザーが「指定なし」「右寄せ」「左寄せ」「中央揃え」の中から自分の好きなものを選べるようにする必要があります。さらに、「サムネイル」「中サイズ」「大サイズ」「フルサイズ」という選択肢の中から大きさを選べるようにするべきです。

  

  上記の画像は中央寄せになるはずです。 このパラグラフの残り画像を左寄せしたとき、文章が150ピクセルの画像の周りを囲むようになるかどうか見るためのものです。 ご覧のとおり、画像の上・下・右にスペースが空いている事がわかると思います。テキストは画像にこっそりと忍びよってはいません、忍び寄ることは良くない事です。画像だって十分に呼吸ができるスペースが必要なのです。画像が文章にイライラさせられることなく役割を果たせるようにしてあげてください。次の文章では、テキストが画像の右から下へとシームレスに途切れることなく続いている事がわかりますね。これで完了です ! 次は、とても大きな画像のテストです。そして、この画像には配置の指定がありません。 上記の画像は1200ピクセルもありますが、コンテンツエリアからはみ出る事はなく収まっています。 そして今後は右寄せに移りたいと思います。また今度も、画像の上、下、左に十分な余白があると思います。ほら、あっちにいる彼を見てください ! 右側の方にいるあの画像 ! 左寄せ画像がなんて言うかなんてどうでもいいんです、美しい配置ですよ。他の人の意見なんて気にしないでいいんです。 そしてこのへんでテキストが右寄せの画像の下に回り込んで、ちょうど良い具合に収まっているのが分かると思います。ひきつづきちょうど良い具合にスペースが残されていて、すべてがきれいに表示されているべきです。そうです…。右画像に回り込むのって気持ちいいですね。 さて、これで終わりと思ったかもしれませんが、これからキャプションのテストに入ります !

  

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

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

  

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

  このパラグラフの残りの部分は、150×150 サイズの左寄せ画像の回り込みをテストするためのつなぎです。  ご覧の通り、画像の上・下・右にスペースが必要です。テキストは画像にこっそりと忍びよってはいません、忍び寄ることは良くない事です。画像だって十分に呼吸ができるスペースが必要なのです。画像が文章にイライラさせられることなく役割を果たせるようにしてあげてください。次の文章では、テキストが画像の右から下へとシームレスに途切れることなく続いている事がわかりますね。これで完了です ! それでは、とても大きな画像のテストです。そして、この画像にも配置の指定はありません。

  

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

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

  

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

  そして今後は右寄せ画像に移りたいと思います。また今度も、画像の上、下、左に十分な余白があると思います。ほら、あっちにいる彼を見てください ! 右側の方にいるあの画像 ! 左寄せ画像がなんて言うかなんてどうでもいいんです、美しい配置ですよ。他の人の意見なんて気にしないでいいんです そしてこのへんでテキストが右寄せの画像の下に回り込んで、ちょうど良い具合に収まっているのが分かると思います。ひきつづきちょうど良い具合にスペースが残されていて、すべてがきれいに表示されているべきです。そうです…。右画像に回り込むのって気持ちいいですね。 それでは、これで終わりです。画像配置のテスト、お疲れ様でした !
• マークアップ: テキスト配置

  デフォルト

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

  左寄せ

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

  中央寄せ

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

  右寄せ

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

  両端揃え

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

sample-06036 / core/latest-posts　excerptLength：excerptLength=10

• マークアップ: HTML タグとフォーマット
  目次 見出し見出し弐… 続きを読む: マークアップ: HTML タグとフォーマット
• マークアップ: 画像の配置
  画像の配置テストへよ… 続きを読む: マークアップ: 画像の配置
• マークアップ: テキスト配置
  デフォルト これは段… 続きを読む: マークアップ: テキスト配置

sample-06037 / core/latest-posts　excerptLength：excerptLength=55

• マークアップ: HTML タグとフォーマット
  目次 見出し見出し弐見出し参見出し四見出し五見出し六引用 (Blockquote) テストテーブル非順序リスト… 続きを読む: マークアップ: HTML タグとフォーマット
• マークアップ: 画像の配置
  画像の配置テストへようこそ ! 画像をいろいろな位置に配置してみるのに一番良い方法は、言葉の海の中に画像をそっ… 続きを読む: マークアップ: 画像の配置
• マークアップ: テキスト配置
  デフォルト これは段落です。特別なテキスト配置処理が付いていない状態になっている必要があります。通常のテキスト… 続きを読む: マークアップ: テキスト配置

sample-06038 / core/latest-posts　excerptLength：excerptLength=100

• マークアップ: HTML タグとフォーマット
  目次 見出し見出し弐見出し参見出し四見出し五見出し六引用 (Blockquote) テストテーブル非順序リスト (ネスト化)順序リスト (ネスト化)HTML 要素タグテスト 見出し 見出し壱 見出し弐… 続きを読む: マークアップ: HTML タグとフォーマット
• マークアップ: 画像の配置
  画像の配置テストへようこそ ! 画像をいろいろな位置に配置してみるのに一番良い方法は、言葉の海の中に画像をそっとうずめてみることです。さあ、はじめましょう。 画像の配置では、ユーザーが「指定なし」「右… 続きを読む: マークアップ: 画像の配置
• マークアップ: テキスト配置
  デフォルト これは段落です。特別なテキスト配置処理が付いていない状態になっている必要があります。通常のテキストフローと同じように表示されるべきです。なにも特別なことはありません。ただ、愛とともに自由に… 続きを読む: マークアップ: テキスト配置

sample-06039 / core/latest-posts　displayAuthor：displayAuthor=false

• マークアップ: HTML タグとフォーマット
• マークアップ: 画像の配置
• マークアップ: テキスト配置