レイアウト見本

SimplicityでHTML要素を用いて記事を書くと、以下のようなレイアウトになります。

WordPressテストデータを用いたデモサイトはこちら。

見出し弐

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。

見出し参

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。

見出し四

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。

見出し五

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。

見出し六

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。

引用 (Blockquote) テスト

引用:

一行だけの引用。

この行は引用ではありません。以下は長い引用:

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

そしてこれはその後に続くテキスト。

テーブルレイアウトのテスト

タイトル 閲覧数
テストユーザーについて 1 以上
260 1 以上
アーカイブ 1 以上
235 1 以上

リストタイプのテスト

定義リスト

定義リストタイトル

これは定義リストです。

定義

物事、領域、何かについての意味の正確な文章や説明: 詩を構成するものの定義。

ギャラリー

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> タグを使用しています:

〒650-0045 兵庫県神戸市中央区港島9丁目1番地神戸インキュベーションオフィス日本

これは <anchor> (もしくはリンクとも呼ばれます) の例です。この abbr. はセンテンスの中にある <abbr> タグの例です。これは <acronym> タグを使用した TLA です。 <big> タグを使用した some大きめのサイズのテキスト をご覧になりたいですか? <cite> タグを使って、そのリファレンス引用したいですか? タグ名はすべて <code> タグを使用した コード形式 で表示されていることにお気づきになりましたか? 同じように、<kbd> タグを使用してキーボードテキストをエミュレートしたり、<tt> タグを使用してテレタイプ(等幅)テキストをエミュレートできます。 おっと、いけない!間違って書いてしまいました。<del>タグを使用して消したほうがよさそうです。もしくは <strike> タグを使用して線を引いて消したり、あるいは <s> タグで線を引いて消したりすることもできます。これは挿入されたテキストで、明確にするために <ins> タグを使用してハイライトしています。 コードのカタマリのような完全にフォーマットされないテキストを表示する必要がありますか?<pre> タグを使用すると次のように表示されます:

#container {
	float: left;
	margin: 0 -240px 0 0;
	width: 100%;
}

WordPress のキャッチフレーズ Code is Poetry を引用したいですか?<q> タグで囲むと引用符が追加されます。これは <strong>タグを使用した強調テキストです。(もしくはボールドとも呼ばれます) H2O もしくは E = MC2? と書く必要がありますか?<sub> タグを使った サブスクリプティング テキストや <sup> タグを使った サブスクリプティング テキストがお役に立つでしょう。引数や変数であることを示すには <var> タグをつかいます。

Div と Span のテスト。

何も顔のまずい例に特に吾輩を出さなくっても、よさそうなものだ。
これは <div> を使った別の div の中にある “myclass” クラスを持った div です。

吾輩だって喜多床へ行って顔さえ剃って貰やあ、そんなに人間と異ったところはありゃしない。

何も顔のまずい例に特に吾輩を出さなくっても、よさそうなものだ。 これは <span> タグを使用したパラグラフ内の span です。吾輩だって喜多床へ行って顔さえ剃って貰やあ、そんなに人間と異ったところはありゃしない。

スポンサーリンク
アドセンス(大)
アドセンス(大)

フォローする