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

I Am Worth Loving Wallpaper

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

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

画像配置 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
{ | } ~

テンプレート: 抜粋 (自動生成)

これは投稿の内容です。単独ページで表示する場合、自動生成の抜粋ではなく、これが表示されるべきです。アーカイブの目次のページは、この内容から自動生成された抜粋が表示するべきです。テーマで定義されたフィルターに依存し、テーマごとに自動抜粋の長さは変わるでしょう。デフォルトの自動抜粋の長さは55語です。したがって、自動抜粋のテストのためには、この投稿は55語以上でなければなりません。

レイアウトの問題が出ないことを保証するために、ぜひ自動生成の抜粋の整形をテストしてください。また、<code>excerpt_length</code> や <code>excerpt_more</code> などすべてのフィルターが適用され、正しく表示されることを確認してください。

【訳注】日本語の場合、WP Multibyte Patch の利用を強くお奨めします。抜粋の量を「語数」ではなく「文字数」にするなど多くの補助機能が提供されます。詳しくは WP Multibyte Patch をご覧ください。

テンプレート: ページ分け

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

火の巻

西瓜

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

今――

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

「どうなるんだ?」

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

「どうって、何が?」

「世の中がよ」

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

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

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

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

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

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

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

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

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

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

伏見城の修築だった。

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

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

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

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

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

先頭固定表示投稿です。

以下を確認してください。

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