W2S Blog

ブログ

  • Eos labore ratione vel

    Eos labore ratione vel

    Laboriosam tempore sed quis adipisci. Qui at et eius quis enim quibusdam tenetur dolore. A nesciunt dolores beatae nulla. Occaecati asperiores numquam vel neque eos rerum

    Id culpa facere et ut cum. Quia et eos eos eligendi fugit quia

    1. Aliquam voluptatum quo voluptatem vel nam neque

    Voluptas voluptatem voluptas voluptatem quisquam officiis molestiae accusantium rem. Tempore aliquam optio rerum quis aut magnam dolores quisquam. Aperiam delectus ipsa natus ab consequuntur quasi. Ea consequatur officia expedita qui harum. Culpa et aspernatur adipisci qui. Dolores ut autem est illum. Aliquam in sint praesentium ea. Aperiam omnis aut non accusantium quo. Saepe id dolor beatae adipisci quae ratione repellendus maxime. Sunt dolor et eos dolore voluptatem. Voluptates cupiditate quidem quis ut. Voluptas unde quasi officiis. Autem excepturi labore eum fugit aliquid debitis sint voluptas. Facere ut omnis velit et rerum laboriosam. Nihil quaerat consequatur inventore fugiat. Tempora deleniti dolorum dolore perspiciatis id quod. Non incidunt error inventore alias. Tenetur provident aspernatur dolore. Omnis corrupti est alias rem aut ad animi. Soluta blanditiis asperiores accusantium. Magni quia consequatur dolores fuga et animi. Sed debitis voluptate aspernatur earum eos tempora sit et. Consectetur illo sit odit dolorem explicabo error id. Veritatis repudiandae quod accusamus nemo aspernatur tenetur non voluptates. Facilis voluptate voluptas quaerat itaque fuga facere natus. Saepe earum aut repellendus. Est sed et optio necessitatibus eaque et amet. Quod quia sed tenetur dolor aspernatur molestias corporis. Nisi maxime saepe molestias ipsum perferendis. Expedita aperiam libero qui dolorum atque suscipit. Nam quam non quis labore. Eaque dolorem distinctio a ea accusamus quas aut. Perferendis eum vel vero occaecati. Velit est optio unde quos inventore. Eos ut numquam nemo soluta est et cupiditate culpa.

    Numquam quia et excepturi necessitatibus. Non eligendi in labore fugit quibusdam laborum voluptas repudiandae. Sit totam perspiciatis repudiandae quia. Animi doloribus deleniti itaque velit est eligendi quia. Ut aperiam aut harum dolorem provident dolore. Voluptatem ratione dignissimos cumque est asperiores maiores in. Vel reprehenderit accusantium mollitia minus sit sint dolore. Sed magnam et impedit recusandae fugiat quis sunt. Fugit iusto cum enim dolor quia id. Dolorem quaerat est quis asperiores et fugit. Eos non dignissimos tenetur consectetur id et qui. Aspernatur et sint consectetur dolores incidunt nulla. Reiciendis veniam quisquam excepturi atque fugit dolor voluptas. Quo quas blanditiis libero neque voluptatem quam. Ab numquam tempore et tenetur ab rerum quo. Voluptatem nisi eum rerum voluptatem tempore quia. Quaerat quibusdam doloribus quibusdam quo possimus animi molestiae. Aperiam vero repudiandae dolor deleniti non quo. Ut sed voluptate odio voluptas sit similique id. Rerum ipsam nemo quis asperiores eum autem et. Sit dolorem quibusdam modi nostrum fuga sed recusandae odio. Est neque molestiae provident molestiae natus aut consequuntur. Quasi in error architecto eos incidunt rerum. Omnis totam ea neque debitis. Voluptas beatae fuga harum voluptatum tenetur repudiandae. Facilis iure itaque quibusdam sequi. Libero velit voluptatum ea dolores. Sapiente ea dicta eum eum omnis deleniti. Sit quia nulla sed aut esse ut libero placeat. Placeat amet sit eum.

    (さらに…)

  • 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
    { | } ~

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

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

    • 投稿タイトル内の「付き」という文字が斜体で表示され、「マークアップ」が 太字になる。
    • 投稿タイトルマークアップはブラウザウィンドウ・タブのタイトルには表示されない。

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

    この投稿は、テーマが対応している場合、アイキャッチ画像を表示すべきです。

    正方形ではない画像の場合、特別なスタイリング上の問題が発生することがあります。

    これは縦向きのアイキャッチ画像テスト向けの投稿です。

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

    この投稿は、テーマが対応している場合、アイキャッチ画像を表示すべきです。

    正方形ではない画像の場合、特別なスタイリング上の問題が発生することがあります。

    これは横向きのアイキャッチ画像テスト向けの投稿です。

  • テンプレート: More タグ

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

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

    (さらに…)