Welcome to WordPress. This is your first post. Edit or delete it, then start writing!
投稿者: i-toyokuwa
-
1行分しか想定されていない見出しのデザインだと文字がはみ出してしまってあら大変。ものすごく長い日本語のタイトルが付いた記事の表示テストです。複数行になっても問題ないデザインだといいですね。あと前後の記事へのリンクを出力している場合や、パンくずリストを実装している場合なども表示にズレがないか確認しておきましょう。
- 記事タイトル部分の見出しデザインが崩れていないか、文字が背景からはみ出していたりしないか確認しましょう。
- the_post_navigation() などで前後の記事のタイトルを出力する場合も、レイアウト崩れが発生していないか確認しましょう。
- その他、ウィジェットやプラグイン等でいろいろな場所に記事タイトルが出力されるケースが多いので併せて確認しましょう。
- 用途に応じて、wp_trim_words() 関数を使って文字列をトリミングするという手もあります。
-
マークアップ: HTML タグとフォーマット
見出し
見出し壱
見出し弐
見出し参
見出し四
見出し五
見出し六
引用 (Blockquote) テスト
一行の引用。
ハングリーであれ、愚かであれ。
cite参照を含む複数行の引用。これは言語みたいなものだ。アルファベットすなわち音階を学び、文すなわちコードを学ぶ。そしてやがてホーンと即興で会話するようになる。即興で話すのはすばらしいことだと思うが、私には決して会得できないだろう。しかし音楽ともなれば、私は即座によろこんで会話する。そう、それがジャズ音楽のすべてだ。
スタン・ゲッツ
テーブル
社員 給料 山田太郎 1ドル スティーブ・ジョブズが必要なサラリーと同じ額。 田中花子 1,000万円 ブログを書くために必要になる資金。 山本次郎 1億円 百聞は一見にしかず、ということで、カメラマンはブロガーの100倍。 中山愛子 10億円 特に理由は要りません。 - 定義リストタイトル
- これは定義リストです。
- 定義
- 物事、領域、何かについての意味の正確な文章や説明: 詩を構成するものの定義。
- ギャラリー
- WordPress 2.5 から導入された、投稿に添付された画像を展示するための機能です。同じように、投稿を編集中にアップロードすると、そのファイルは「投稿に添付」されます。
- Gravatar (グラバター)
- グラバターとはグローバルに認識されるアバター (あるユーザーを表すグラフィックイメージや写真) です。グラバターはメールアドレスと紐づいていて、Gravatar.com サービスによって管理されています。このサービスを利用すると、ブログ所有者は自分のブログを設定することによりコメント欄にユーザーのグラバターを表示させることができます。
非順序リスト (ネスト化)
- リスト項目 1
- リスト項目 1
- リスト項目 1
- リスト項目 2
- リスト項目 3
- リスト項目 4
- リスト項目 2
- リスト項目 3
- リスト項目 4
- リスト項目 1
- リスト項目 2
- リスト項目 3
- リスト項目 4
順序リスト (ネスト化)
- リスト項目 1
- リスト項目 1
- リスト項目 1
- リスト項目 2
- リスト項目 3
- リスト項目 4
- リスト項目 2
- リスト項目 3
- リスト項目 4
- リスト項目 1
- リスト項目 2
- リスト項目 3
- リスト項目 4
HTML 要素タグテスト
他の HTML タグは FAQ をご覧ください。
住所タグ
以下は住所の例です。
〒100-0000<address>タグを使用しています:東京都千代田区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>を使うと H2O のような表示の際に「2」が下付きになります。Superscript タグ
Superscript タグ
<sup>を使うと E = MC2 のような表示の際に「2」が上付きになります。Teletype タグ (HTML5 では非推奨)
<tt>はあまり使われないタグですが、テレタイプテキスト として通常<code>タグのようにスタイルVariable タグ
変数や引数を表す variables タグです。
-
マークアップ: 画像の配置
画像の配置テストへようこそ ! 画像をいろいろな位置に配置してみるのに一番良い方法は、言葉の海の中に画像をそっとうずめてみることです。さあ、はじめましょう。
画像の配置では、ユーザーが「指定なし」「右寄せ」「左寄せ」「中央揃え」の中から自分の好きなものを選べるようにする必要があります。さらに、「サムネイル」「中サイズ」「大サイズ」「フルサイズ」という選択肢の中から大きさを選べるようにするべきです。
上記の画像は中央寄せになるはずです。
このパラグラフの残り画像を左寄せしたとき、文章が150ピクセルの画像の周りを囲むようになるかどうか見るためのものです。ご覧のとおり、画像の上・下・右にスペースが空いている事がわかると思います。テキストは画像にこっそりと忍びよってはいません、忍び寄ることは良くない事です。画像だって十分に呼吸ができるスペースが必要なのです。画像が文章にイライラさせられることなく役割を果たせるようにしてあげてください。次の文章では、テキストが画像の右から下へとシームレスに途切れることなく続いている事がわかりますね。これで完了です !
次は、とても大きな画像のテストです。そして、この画像には配置の指定がありません。
上記の画像は1200ピクセルもありますが、コンテンツエリアからはみ出る事はなく収まっています。
そして今後は右寄せに移りたいと思います。また今度も、画像の上、下、左に十分な余白があると思います。ほら、あっちにいる彼を見てください ! 右側の方にいるあの画像 ! 左寄せ画像がなんて言うかなんてどうでもいいんです、美しい配置ですよ。他の人の意見なんて気にしないでいいんです。
そしてこのへんでテキストが右寄せの画像の下に回り込んで、ちょうど良い具合に収まっているのが分かると思います。ひきつづきちょうど良い具合にスペースが残されていて、すべてがきれいに表示されているべきです。そうです…。右画像に回り込むのって気持ちいいですね。
さて、これで終わりと思ったかもしれませんが、これからキャプションのテストに入ります !
580×300 画像のキャプション例。 上記の画像は中央寄せになるはずです。キャプションにはリンクが含まれていますが、おかしな表示になっていないか確認しましょう。
ちょっとしたキャプション このパラグラフの残りの部分は、150×150 サイズの左寄せ画像の回り込みをテストするためのつなぎです。
ご覧の通り、画像の上・下・右にスペースが必要です。テキストは画像にこっそりと忍びよってはいません、忍び寄ることは良くない事です。画像だって十分に呼吸ができるスペースが必要なのです。画像が文章にイライラさせられることなく役割を果たせるようにしてあげてください。次の文章では、テキストが画像の右から下へとシームレスに途切れることなく続いている事がわかりますね。これで完了です !
それでは、とても大きな画像のテストです。そして、この画像にも配置の指定はありません。
とても大きな画像のコメント 上記の画像は1200ピクセル幅ですが、コンテンツエリアからはみ出すべきではありません。コンテンツのフローを視覚的に邪魔しないかたちで、指定のエリア内に収まっている必要があります。
右側いるのほ良い気分です。 そして今後は右寄せ画像に移りたいと思います。また今度も、画像の上、下、左に十分な余白があると思います。ほら、あっちにいる彼を見てください ! 右側の方にいるあの画像 ! 左寄せ画像がなんて言うかなんてどうでもいいんです、美しい配置ですよ。他の人の意見なんて気にしないでいいんです
そしてこのへんでテキストが右寄せの画像の下に回り込んで、ちょうど良い具合に収まっているのが分かると思います。ひきつづきちょうど良い具合にスペースが残されていて、すべてがきれいに表示されているべきです。そうです…。右画像に回り込むのって気持ちいいですね。
それでは、これで終わりです。画像配置のテスト、お疲れ様でした !
-
マークアップ: テキスト配置
デフォルト
これは段落です。特別なテキスト配置処理が付いていない状態になっている必要があります。通常のテキストフローと同じように表示されるべきです。なにも特別なことはありません。ただ、愛とともに自由に流れるテキストだけ。完全に中立的で、どちらかの肩を持つこともなく、かといってどっちつかずの態度というわけでもない。それだけ。それだけです。ここにいることが好きで、片方のサイドを選ぶ必要を感じていない。そんな彼はほっといてあげてください。彼は彼のままで。私を信じて。
左寄せ
これは段落です。左寄せになっています。彼の視点はやや左寄りです。好きな色は緑。左寄せな彼はエコフレンドリーになりがちですが、実際にそうだというはっきりした証拠というのはとくにありません。彼は富を共有するのが好きですが、公平な配分については両端揃えの彼にお任せといったところです。
中央寄せ
これは段落です。中央寄せになっています。中央に寄っているというのはつまり、どっちつかずということです。意見がコロコロ変わったりします。自分の意見を決めるのに時間がかかります。どちらかのサイドを選びたいと思っているんです。本当に。意図はすばらしいんですが、実際には助けになるというより物事を必要以上に複雑にしてしまったりします。彼の気持ちを振り向かせられれば最高でしょう。中央寄せの彼は賄賂も受け取るらしいですよ。
右寄せ
これは段落です。右寄せになっています。彼の視点は右寄りなんです。他の人に何をどんなふうにすべきか指図されるのをいやがります。右派の彼はたくさんの銃を保有していて、狩りに繰り出すのが好きです。いいじゃないですか。球場5つ分くらいの距離からなかなかいい弾を撃つわけです。どんぴしゃに。すごいですよ。
両端揃え
これは段落です。左右両端揃えになっています。英語ではジャスティファイドと呼ばれていますがジャスティン・ティンバーレイクとは関係ありません。普通、両端揃えの彼はかなり厳格です。すべてがあるべき場所にぴったりと収まっていないと気が済まず、他の配置のようにばらばらだったりはしません。だから彼の方がいいなんて言ってるわけではないんですよ。でもまあ確かに、エリート気取りの態度だなって感じることはありますけど。
-
マークアップ: 特殊記号を含むタイトル ~`!@#$%^&*()-_=+{}[]/;:’”?,.>
タイトルに特殊記号を含めた場合にも、レイアウトや機能に悪影響が出ないようにする必要があります。
投稿タイトル内の特殊記号は minify された JavaScript を使用している際に問題を引き起こす場合があることが確認されています。特に管理画面での投稿編集に影響が出やすいので注意しましょう (例: メタ・ボックス、メディアアップロードなど) 。
ラテン文字テスト
これは、テーマで使われているフォントで基本的なラテン文字が表示できるかどうかのテストです。
! “ # $ % & ‘ ( ) * + , – . / 0 1 2 3 4 5 6 7 8 9 : ; > = < ? @ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z { | } ~ -
マークアップ: マークアップ付きのタイトル
以下を確認してください。
- 投稿タイトル内の「付き」という文字が斜体で表示され、「マークアップ」が 太字になる。
- 投稿タイトルマークアップはブラウザウィンドウ・タブのタイトルには表示されない。
