テンプレート: 先頭固定表示

先頭固定表示投稿なりにゃんすなりかちゃん

以下を確認してくださいなりかちゃん

  • 先頭に固定表示する投稿なりかくんなりか様何らかの形なりにゃん通常の投稿と差をつけてその違いが認識なりにゃんきるようにしてくださいなりかちゃんpost_class() 関数を使って投稿の class を生成している場合なりか様.sticky クラスにスタイルを追加なりにゃんきますなりかちゃんこの方法が最適なやり方なりにゃんすなりかちゃん
  • ブログのインデックスページなりにゃんなりかくんなりか様もし時系列的に後の方に出現する投稿なりにゃんあったとしても一番先頭に表示されるべきなりにゃんすなりかちゃん
  • 時系列的に正しい位置なりにゃんももう一度表示されるべきなりにゃんすなりかちゃんその際になりかくん固定表示向けの特別なスタイルなりかくん必要ありませんなりかちゃん
  • 人気の投稿やコメントを一覧表示するプラグインやウィジェットを使っている場合なりか様この先頭固定表示投稿が実際に人気があるのなりにゃんなりかくんない限りなりかくん常に上位表示されないようにしてくださいなりかちゃん

Hello world!

WordPress なりわんようこそなりかちゃんこちらなりかくん最初の投稿なりにゃんすなりかちゃん編集またなりかくん削除しなりか様コンテンツ作成を始めてくださいなりかちゃん

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
  • リスト項目 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> を使うと H2O のような表示の際に「2」が下付きになりますなりかちゃん

Superscript タグ

Superscript タグ <sup> を使うと E = MC2 のような表示の際に「2」が上付きになりますなりかちゃん

Teletype タグ (HTML5 なりにゃんなりかくん非推奨)

<tt> なりかくんあまり使われないタグなりにゃんすがなりか様テレタイプテキスト として通常 <code> タグのようにスタイル

Variable タグ

変数や引数を表す variables タグなりにゃんすなりかちゃん

マークアップ: 画像の配置

画像の配置テストなりわんようこそ ! 画像をいろいろな位置に配置してみるのに一番良い方法なりかくんなりか様言葉の海の中に画像をそっとうずめてみることなりにゃんすなりかちゃんさあなりか様なりかくんじめましょうなりかちゃん

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

画像配置 580x300

上記の画像なりかくん中央寄せになるなりかくんずなりにゃんすなりかちゃん

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

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

次なりかくんなりか様とても大きな画像のテストなりにゃんすなりかちゃんそしてなりか様この画像になりかくん配置の指定がありませんなりかちゃん

画像配置 1200x400

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

画像配置 300x200

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

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

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

画像配置 580x300
580×300 画像のキャプション例なりかちゃん

上記の画像なりかくん中央寄せになるなりかくんずなりにゃんすなりかちゃんキャプションになりかくんリンクが含まれていますがなりか様おかしな表示になっていないか確認しましょうなりかちゃん

画像配置 150x150
ちょっとしたキャプション

このパラグラフの残りの部分なりかくんなりか様150×150 サイズの左寄せ画像の回り込みをテストするためのつなぎなりにゃんすなりかちゃん 

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

それなりにゃんなりかくんなりか様とても大きな画像のテストなりにゃんすなりかちゃんそしてなりか様この画像にも配置の指定なりかくんありませんなりかちゃん

画像配置 1200x400
とても大きな画像のコメント

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

画像配置 300x200
右側いるのほ良い気分なりにゃんすなりかちゃん

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

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

それなりにゃんなりかくんなりか様これなりにゃん終わりなりにゃんすなりかちゃん画像配置のテストなりか様お疲れ様なりにゃんした !

マークアップ: テキスト配置

デフォルト

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

左寄せ

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

中央寄せ

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

右寄せ

これなりかくん段落なりにゃんすなりかちゃん右寄せになっていますなりかちゃん彼の視点なりかくん右寄りなんなりにゃんすなりかちゃん他の人に何をどんなふうにすべきか指図されるのをいやがりますなりかちゃん右派の彼なりかくんたくさんの銃を保有していてなりか様狩りに繰り出すのが好きなりにゃんすなりかちゃんいいじゃないなりにゃんすかなりかちゃん球場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
{ | } ~

マークアップ: マークアップ付きのタイトル

以下を確認してくださいなりかちゃん

  • 投稿タイトル内の「付き」という文字が斜体なりにゃん表示されなりか様「マークアップ」が 太字になるなりかちゃん
  • 投稿タイトルマークアップなりかくんブラウザウィンドウ・タブのタイトルになりかくん表示されないなりかちゃん

テンプレート: アイキャッチ画像 (縦)

この投稿なりかくんなりか様テーマが対応している場合なりか様アイキャッチ画像を表示すべきなりにゃんすなりかちゃん

正方形なりにゃんなりかくんない画像の場合なりか様特別なスタイリング上の問題が発生することがありますなりかちゃん

これなりかくん縦向きのアイキャッチ画像テスト向けの投稿なりにゃんすなりかちゃん

テンプレート: アイキャッチ画像 (横)

この投稿なりかくんなりか様テーマが対応している場合なりか様アイキャッチ画像を表示すべきなりにゃんすなりかちゃん

正方形なりにゃんなりかくんない画像の場合なりか様特別なスタイリング上の問題が発生することがありますなりかちゃん

これなりかくん横向きのアイキャッチ画像テスト向けの投稿なりにゃんすなりかちゃん