SANGO Landにあるランキングブロック１

WordPressテーマ SANGO

 (5)

¥11,100（税込）

SANGOはユーザーフレンドリーを追求したWordPressテーマです。

公式サイトへ

購入ページへ

WordPressテーマ SANGO

 (5)

¥11,100（税込）

SANGOはユーザーフレンドリーを追求したWordPressテーマです。

公式サイトへ

購入ページへ

WordPressテーマ SANGO

 (5)

¥11,100（税込）

SANGOはユーザーフレンドリーを追求したWordPressテーマです。

公式サイトへ

購入ページへ

SANGO Landにあるランキングブロック2

ここにテキストが入ります

ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

レビュー記事

公式サイト

ここにテキストが入ります

ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

レビュー記事

公式サイト

ここにテキストが入ります

ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

レビュー記事

公式サイト

SANGO LandやSANGOブロックで簡単カスタマイズ

うきだいら

SANGO Landのボタンや、SANGOブロックをポチポチっとするだけで、いろいろランキングが作れます。

キャプションボックス

タイトル

うきだいら

SANGOのキャプションボックス内には画像、タイムライン、吹き出しなど、すべてのSANGOブロックが使えるようになっています。

見出しスタイル

吹き出し

うきだいら

ここに文章をいれるとこんな感じになります

うきだいら

右にも配置することもできます

うきだいら

吹き出しの色はクリックするだけでこんな風に変更できるようになっています。

うきだいら

SANGOの吹き出しにはリスト、画像、ボタンが設置できます。

• 吹き出しにリストが作れます1
• 吹き出しにリストが作れます2
• 吹き出しにリストが作れます3

吹き出しに画像が設置できます

吹き出しにボタンが設置できます

タイムライン

うきだいら

SANGOのタイムラインはこんな感じ。デザインはデフォルトで1パータンしか用意されていないので、CSSなどで自分でカスタマイズする必要があります。もしくは今後Sango Landのほうに追加されていく可能性はあります。

アコーディオン

記事一覧ブロック

table 2022年7月10日

SANGOのランキング機能 2022年5月29日

SANGOテーマのブロック 2022年5月22日

保護中: パスワードで保護されたページのテスト2│うきだいら 2022年3月7日

2022年7月10日 table

2022年5月29日 SANGOのランキング機能

2022年5月22日 SANGOテーマのブロック

2022年3月7日 保護中: パスワードで保護されたページのテスト2│うきだいら

2022年7月10日

table

2022年5月29日

SANGOのランキング機能

2022年5月22日

SANGOテーマのブロック

2022年3月7日

保護中: パスワードで保護されたページのテスト2│うきだいら

table

SANGOのランキング機能

SANGOテーマのブロック

保護中: パスワードで保護されたページのテスト2│うきだいら

うきだいら

その他にもSANGO LANDで記事一覧のスタイルが用意されています。

SANGO LANDの記事一覧スタイル

メモ

うきだいら

1クリックで選択できるメモスタイルは３つ用意されています。他に必要な場合は、アイコン変更、色変更、角の丸み設定などはできるのでオリジナルデザインを作ることができるようになっています。

ボックス

うきだいら

その他にもSANGO LANDでボックスのスタイルが用意されています。

SANGO LANDのボックススタイル

ボタンスタイル

うきだいら

その他にもSANGO LANDでボタンのスタイルが用意されています。

SANGO LANDのボタンスタイル

参考リンク

うきだいら

参考リンクはデザインが1種類用意されています。アイコンの変更、アイコン色の変更はできるようになっています。

レビューボックス

※この評価リストは価格ドットコムの掃除機レビューの表を参考にしてます

うきだいら

レビューボックスのデザインは一つ用意されています。今後SANGO LANDにて増えていく可能性があります。

タブのスタイル

うきだいら

タブのデザインは一つ用意されています。SANGO LANDには複数用意されており、今後も増えていく可能性があります。タブの数はいくつでも追加できます（上限があるかもしれませんがそれは確認してません）。

上記タブは4つで折り返すように設定しているので4つで折り返されてますが（PCで見た場合）、設定すれば5つでも6つでも並べて表示できます。ただし5つで折り返すといったことはできません。折り返し設定は4までです。

関連記事デザイン

2022年3月7日基本ブロックのテスト2│うきだいら

2022年3月7日 基本ブロックのテスト2│うきだいら

基本ブロックのテスト2│うきだいら 2022年3月7日

うきだいら

関連記事のデザインは三つ用意されています。SANGO LANDには複数用意されており、今後も増えていく可能性があります。

線のスタイル

うきだいら

線のデザインは二つ用意されています。線はここからは別のコンテンツだよといった区切りに使ったりします。

リストスタイル

うきだいら

リストスタイルはデフォルトでも多いうえに、設定できる項目も多いのでかなり多くのパターンが作れるようになってます。またSANGO LANDでもどんどん増えていくと思われます。

コード入力

<h2 class="title">タイトル</h2>
<p>コンテンツの内容</p>

h2 .title{ font-size:20px;
}

うきだいら

デフォルトではこんなコードブロックが用意されています。色は基本水色で、変えるにはCSSをイジる必要があります。SANGO LANDにもいくつかコードブロックが用意されているので確認してみてください。

SANGOのQ&A

うきだいら

SANGOのQ&Aはこんなデザインになっています。デフォルトではデザインは1種類だけになりますが、SANGO LANDにこれから追加されていく可能性があります。

ヒーローヘッダー

ここにタイトルを入力する

ここに説明文を入力する

詳細はこちら

ここにタイトルを入力する

ここに説明文を入力する

詳細はこちら

うきだいら

SANGOのヒーローヘッダーはデフォルトで2種類あり、1種類は左右反転することができます。ヒーローヘッダーはSANGO LANDにあるもののほうが使い勝手良いので、そちらも確認してみると良いでしょう。

条件分岐ブロック

うきだいら

条件分岐ブロックを使ってこの吹き出しはPCでのみ表示されるようにしています。なのでこの吹き出しはスマホでは表示されていません。その他にもカテゴリで条件分岐したりもできるようになっています。

画像スライダー

うきだいら

SANGOのスライダーはこんな感じになっています。高さの設定、同時に表示させる枚数、自動切り替え、などが設定できるようになっています。画像ごとにリンクを貼ることはできますが、画像の上にボタンを設定したり、テキストを入力したりすることはできません。

フルサイズ背景

うきだいら

フルサイズ背景は記事だとイマイチどう使うかわからないかもしれませんが、個別記事をトップページに設定した場合などに効果を発揮します。長くなるのでここでは紹介しませんが、フルサイズ背景はオシャレなサイトを作るのに必須な機能。と頭のはじっこにでも置いといてください。

ボックスメニュー

うきだいら

ボックスメニューはカラム数の設定、アイコンを画像に変更、カラーの設定、などができるようになっています。

コンテンツブロック

うきだいら

コンテンツブロックの説明は長くなるので、SANGO公式のマニュアルをご確認ください。

プロフィール

テキストテキストテキスト

うきだいら

プロフィールブロックは主にサイドバーに設置するものになります。なおSANGOのプロフィール画像の設定はGravatarなどを使わずに、メディアライブラリから画像を選択して設定できるようになっています。

ボタングループ

うきだいら

ボタングループはボタンを横や縦に並べて表示できる機能になります。

ABテスト

うきだいら

ABテストの説明は長くなるのでSANGO公式マニュアルをご確認ください。

この投稿は複数のページに分かれていて、各種レイアウト、画像、HTMLタグその他を含みます。

火の巻

西瓜

一

伏見桃山の城地を繞めぐっている淀川の水は、そのまま長流数里、浪華江なにわえの大坂城の石垣へも寄せていた。――で、ここら京都あたりの政治的なうごきは、微妙に大坂のほうへすぐ響き、また大坂方の一将一卒の言論も、おそろしく敏感に伏見の城へ聞えて来るらしい。

今――

摂津、山城の二ヵ国を貫くこの大河を中心にして、日本の文化は大きな激変に遭あっている。太閤たいこうの亡き後を、さながら落日の美しさのように、よけいに権威を誇示して見せている秀頼や淀君の大坂城と、関ヶ原の役から後、拍車をかけて、この伏見の城にあり、自ら戦後の経綸けいりんと大策に当たり、豊臣とよとみ文化の旧態を、根本から革あらためにかかっている徳川家康の勢威と――その二つの文化の潮流が、たとえば、河の中を往来している船にも、陸おかをゆく男女の風俗にも、流行歌はやりうたにも、職をさがしている牢人の顔つきにも、混色こんしょくしているのだった。

「どうなるんだ？」

と、人々はすぐそういう話題に興味を持つ。

「どうって、何が？」

「世の中がよ」

「変るだろう。こいつあ、はっきりしたことだ。変らない世の中なんて、そもそも、藤原道長以来、一日だってあった例ためしはねえ。――源家平家の弓取が、政権を執とるようになってからは猶なおさらそいつが早くなった」

「つまり、また戦いくさか」

「こうなっちまったものを、今さら、戦のない方へ、世の中を向け直そうとしても、力に及ぶまい」

「大坂でも、諸国の牢人衆へ、手をまわしているらしいな」

「……だろうな、大きな声ではいえねえが、徳川様だって、南蛮船から銃や弾薬たまぐすりをしこたま買いこんでいるというし」

「それでいて――大御所様のお孫の千姫を、秀頼公の嫁君にやっているのはどういうものだろ？」

「天下様のなさることは、みな聖賢の道だろうから、下人げにんにはわからねえさ」

石は焼けていた。河の水は沸いている。もう秋は立っているのだが、暑さはこの夏の土用にも勝まさって酷きびしい。

淀の京橋口の柳はだらりと白っぽく萎なえている。気の狂ったような油蝉あぶらぜみが一匹、川を横ぎって町屋の中へ突き当ってゆく。その町も晩の灯の色はどこへか失って、灰を浴びたような板屋根が乾き上がっているのだった。橋の上下かみしもには、無数の石船がつながれていて、河の中も石、陸おかも石、どこを見まわしても石だらけなのである。

その石も皆、畳二枚以上の巨おおきなものが多かった。焼けきった石の上に、石曳いしひきの労働者たちは、無感覚に寝そべったり腰かけたり仰向けに転がったりしている。ちょうど今が、昼飯刻どきでその後の半刻休みを楽しんでいるのであろう。そこらに材木をおろしている牛車の牛も涎よだれをたらして、満身に蠅はえを集めてじっとしている。

伏見城の修築だった。

いつのまにか、世の人々に「大御所」と呼ばしめている家康がここに滞在しているからではない。城普請しろぶしんは、徳川の戦後政策の一つだった。

譜代大名ふだいだいみょうの心を弛緩しかんさせないために。――また、外様とざま大名の蓄力を経済的にそれへ消耗させてしまうために。

もう一つの理由は、一般民に、とにかく徳川政策を謳歌おうかさせるためには、土木の工を各地に起して、下層民へ金をこぼしてやるに限る。

今、城普請は全国的に着手されていた。その大規模なものだけでも、江戸城、名古屋城、駿府城、越後高田城、彦根城、亀山城、大津城――等々々。

このコンテンツは more タグです。

この文のすぐ後は、「続きを読む」ボタンが表示されます。

そして、これは more タグの後のコンテンツです。

標準テキストのテスト

伏見桃山の城地を繞めぐっている淀川の水は、そのまま長流数里、浪華江なにわえの大坂城の石垣へも寄せていた。――で、ここら京都あたりの政治的なうごきは、微妙に大坂のほうへすぐ響き、また大坂方の一将一卒の言論も、おそろしく敏感に伏見の城へ聞えて来るらしい。

今――

摂津、山城の二ヵ国を貫くこの大河を中心にして、日本の文化は大きな激変に遭あっている。太閤たいこうの亡き後を、さながら落日の美しさのように、よけいに権威を誇示して見せている秀頼や淀君の大坂城と、関ヶ原の役から後、拍車をかけて、この伏見の城にあり、自ら戦後の経綸けいりんと大策に当たり、豊臣とよとみ文化の旧態を、根本から革あらためにかかっている徳川家康の勢威と――その二つの文化の潮流が、たとえば、河の中を往来している船にも、陸おかをゆく男女の風俗にも、流行歌はやりうたにも、職をさがしている牢人の顔つきにも、混色こんしょくしているのだった。

「どうなるんだ？」

と、人々はすぐそういう話題に興味を持つ。

「どうって、何が？」

「世の中がよ」

「変るだろう。こいつあ、はっきりしたことだ。変らない世の中なんて、そもそも、藤原道長以来、一日だってあった例ためしはねえ。――源家平家の弓取が、政権を執とるようになってからは猶なおさらそいつが早くなった」

「つまり、また戦いくさか」

「こうなっちまったものを、今さら、戦のない方へ、世の中を向け直そうとしても、力に及ぶまい」

「大坂でも、諸国の牢人衆へ、手をまわしているらしいな」

「……だろうな、大きな声ではいえねえが、徳川様だって、南蛮船から銃や弾薬たまぐすりをしこたま買いこんでいるというし」

「それでいて――大御所様のお孫の千姫を、秀頼公の嫁君にやっているのはどういうものだろ？」

「天下様のなさることは、みな聖賢の道だろうから、下人げにんにはわからねえさ」

石は焼けていた。河の水は沸いている。もう秋は立っているのだが、暑さはこの夏の土用にも勝まさって酷きびしい。

淀の京橋口の柳はだらりと白っぽく萎なえている。気の狂ったような油蝉あぶらぜみが一匹、川を横ぎって町屋の中へ突き当ってゆく。その町も晩の灯の色はどこへか失って、灰を浴びたような板屋根が乾き上がっているのだった。橋の上下かみしもには、無数の石船がつながれていて、河の中も石、陸おかも石、どこを見まわしても石だらけなのである。

その石も皆、畳二枚以上の巨おおきなものが多かった。焼けきった石の上に、石曳いしひきの労働者たちは、無感覚に寝そべったり腰かけたり仰向けに転がったりしている。ちょうど今が、昼飯刻どきでその後の半刻休みを楽しんでいるのであろう。そこらに材木をおろしている牛車の牛も涎よだれをたらして、満身に蠅はえを集めてじっとしている。

伏見城の修築だった。

いつのまにか、世の人々に「大御所」と呼ばしめている家康がここに滞在しているからではない。城普請しろぶしんは、徳川の戦後政策の一つだった。

譜代大名ふだいだいみょうの心を弛緩しかんさせないために。――また、外様とざま大名の蓄力を経済的にそれへ消耗させてしまうために。

もう一つの理由は、一般民に、とにかく徳川政策を謳歌おうかさせるためには、土木の工を各地に起して、下層民へ金をこぼしてやるに限る。

今、城普請は全国的に着手されていた。その大規模なものだけでも、江戸城、名古屋城、駿府城、越後高田城、彦根城、亀山城、大津城――等々々。

テキスト配置のテスト

デフォルト

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

左寄せ

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

中央寄せ

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

右寄せ

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

見出しのテスト

見出し2

見出し3

見出し4

見出し5

見出し6

引用 (Blockquote) テスト

一行の引用。

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

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

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

スタン・ゲッツ

テーブルのテスト

定義リストタイトル これは定義リストです。 定義 物事、領域、何かについての意味の正確な文章や説明: 詩を構成するものの定義。 ギャラリー 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

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

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

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

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

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

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

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

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

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 タグです。

ラテン文字テスト

これは、テーマで使われているフォントで基本的なラテン文字が表示できるかどうかのテストです。

Twitterの埋め込みテスト

画像テスト

画像キャプションのテスト

画像リンクのテスト

画像配置のテスト

画像の配置テストへようこそ ! 画像をいろいろな位置に配置してみるのに一番良い方法は、言葉の海の中に画像をそっとうずめてみることです。さあ、はじめましょう。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

それでは、これで終わりです。画像配置のテスト、お疲れ様でした !

音声のテスト

動画 (WordPress.tv)のテスト

Codexの手順に従い投稿。

動画 (YouTube)のテスト

ルイス・アームストロングの「Hello Dolly」ライブパフォーマンス。

動画埋め込みについて詳しくはWordPress Codex 日本語版の該当ページをご覧ください。

価格表

ボタン

ギャラリー

表

価格表

ボタン

ギャラリー

表

標準テキストのテスト

伏見桃山の城地を繞めぐっている淀川の水は、そのまま長流数里、浪華江なにわえの大坂城の石垣へも寄せていた。――で、ここら京都あたりの政治的なうごきは、微妙に大坂のほうへすぐ響き、また大坂方の一将一卒の言論も、おそろしく敏感に伏見の城へ聞えて来るらしい。

今――

摂津、山城の二ヵ国を貫くこの大河を中心にして、日本の文化は大きな激変に遭あっている。太閤たいこうの亡き後を、さながら落日の美しさのように、よけいに権威を誇示して見せている秀頼や淀君の大坂城と、関ヶ原の役から後、拍車をかけて、この伏見の城にあり、自ら戦後の経綸けいりんと大策に当たり、豊臣とよとみ文化の旧態を、根本から革あらためにかかっている徳川家康の勢威と――その二つの文化の潮流が、たとえば、河の中を往来している船にも、陸おかをゆく男女の風俗にも、流行歌はやりうたにも、職をさがしている牢人の顔つきにも、混色こんしょくしているのだった。

「どうなるんだ？」

と、人々はすぐそういう話題に興味を持つ。

「どうって、何が？」

「世の中がよ」

「変るだろう。こいつあ、はっきりしたことだ。変らない世の中なんて、そもそも、藤原道長以来、一日だってあった例ためしはねえ。――源家平家の弓取が、政権を執とるようになってからは猶なおさらそいつが早くなった」

「つまり、また戦いくさか」

「こうなっちまったものを、今さら、戦のない方へ、世の中を向け直そうとしても、力に及ぶまい」

「大坂でも、諸国の牢人衆へ、手をまわしているらしいな」

「……だろうな、大きな声ではいえねえが、徳川様だって、南蛮船から銃や弾薬たまぐすりをしこたま買いこんでいるというし」

「それでいて――大御所様のお孫の千姫を、秀頼公の嫁君にやっているのはどういうものだろ？」

「天下様のなさることは、みな聖賢の道だろうから、下人げにんにはわからねえさ」

石は焼けていた。河の水は沸いている。もう秋は立っているのだが、暑さはこの夏の土用にも勝まさって酷きびしい。

淀の京橋口の柳はだらりと白っぽく萎なえている。気の狂ったような油蝉あぶらぜみが一匹、川を横ぎって町屋の中へ突き当ってゆく。その町も晩の灯の色はどこへか失って、灰を浴びたような板屋根が乾き上がっているのだった。橋の上下かみしもには、無数の石船がつながれていて、河の中も石、陸おかも石、どこを見まわしても石だらけなのである。

その石も皆、畳二枚以上の巨おおきなものが多かった。焼けきった石の上に、石曳いしひきの労働者たちは、無感覚に寝そべったり腰かけたり仰向けに転がったりしている。ちょうど今が、昼飯刻どきでその後の半刻休みを楽しんでいるのであろう。そこらに材木をおろしている牛車の牛も涎よだれをたらして、満身に蠅はえを集めてじっとしている。

伏見城の修築だった。

いつのまにか、世の人々に「大御所」と呼ばしめている家康がここに滞在しているからではない。城普請しろぶしんは、徳川の戦後政策の一つだった。

譜代大名ふだいだいみょうの心を弛緩しかんさせないために。――また、外様とざま大名の蓄力を経済的にそれへ消耗させてしまうために。

もう一つの理由は、一般民に、とにかく徳川政策を謳歌おうかさせるためには、土木の工を各地に起して、下層民へ金をこぼしてやるに限る。

今、城普請は全国的に着手されていた。その大規模なものだけでも、江戸城、名古屋城、駿府城、越後高田城、彦根城、亀山城、大津城――等々々。

テキスト配置のテスト

デフォルト

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

左寄せ

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

中央寄せ

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

右寄せ

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

見出しのテスト

見出し2

見出し3

見出し4

見出し5

見出し6

引用 (Blockquote) テスト

一行の引用。

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

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

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

スタン・ゲッツ

テーブルのテスト

定義リストタイトル これは定義リストです。 定義 物事、領域、何かについての意味の正確な文章や説明: 詩を構成するものの定義。 ギャラリー 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

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

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

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

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

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

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

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

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

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 タグです。

ラテン文字テスト

これは、テーマで使われているフォントで基本的なラテン文字が表示できるかどうかのテストです。

Twitterの埋め込みテスト

画像テスト

画像キャプションのテスト

画像リンクのテスト

画像配置のテスト

画像の配置テストへようこそ ! 画像をいろいろな位置に配置してみるのに一番良い方法は、言葉の海の中に画像をそっとうずめてみることです。さあ、はじめましょう。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

それでは、これで終わりです。画像配置のテスト、お疲れ様でした !

音声のテスト

動画 (WordPress.tv)のテスト

Codexの手順に従い投稿。

動画 (YouTube)のテスト

ルイス・アームストロングの「Hello Dolly」ライブパフォーマンス。

動画埋め込みについて詳しくはWordPress Codex 日本語版の該当ページをご覧ください。