project-wysiwyg

WYSIWYG Styles (WordPress)

コンテンツ・マネージメント・システムの仕様上、クラスを指定することができない、自由文エリアの標準スタイル。
.p-wysiwyg 内の最初の要素は、強制的に上マージンが0となる(!important)。
以下の条件に合致する要素に適用され、この条件から漏れるようなコンポーネントは使用できない。

  1. .p-wysiwyg を付与した要素で包括されている
  2. 要素に以下のクラスが付与されていない
    • a: link, btn, label
    • h1 - h6: title
    • ul: list
    • ol: list
    • dl: list
    • hr: すべてのクラス
    • blockquote: すべてのクラス
    • table: すべてのクラス
  3. img要素に以下のクラスが付与されている
    • align-*
  4. figure要素に以下のクラスが付与されている
    • align-*

以下は、WordPressテーマディレクトリのサンプルコードを日本語訳し、より想定外のケースに対応したものです。

このHTMLの目的は、CSSを使ってどのようなデフォルト設定を決定し、可能なHTML要素がこのHTMLに含まれているかを確認し、サイトを設計する際に考えられる要素を見落とさないようにすることです。


見出し1

見出し2

見出し3

見出し4

見出し5
見出し6

見出し1_見出しのテキストに
改行が入っていて複数行になります

見出し2_見出しのテキストに
改行が入っていて複数行になります

見出し3_見出しのテキストに
改行が入っていて複数行になります

見出し4_見出しのテキストに
改行が入っていて複数行になります

見出し5_見出しのテキストに
改行が入っていて複数行になります
見出し6_見出しのテキストに
改行が入っていて複数行になります

[ページ先頭へもどる]


段落

吾輩は猫である。名前はまだ無い。テストリンクですどこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。

吾輩は猫である。名前は弱い強調ですまだ無い。どこで生れたかとんと見当がつかぬ。何でも強い強調です薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。

[ページ先頭へもどる]


リストタイプ

定義リスト

定義リストのタイトル
これは定義リストの説明です。
定義リストのタイトル
これは定義リストの説明ですが、とても長く複数行になるくらい文字数があります。これは定義リストの説明ですが、とても長く複数行になるくらい文字数があります。これは定義リストの説明ですが、とても長く複数行になるくらい文字数があります。これは定義リストの説明ですが、とても長く複数行になるくらい文字数があります。これは定義リストの説明ですが、とても長く複数行になるくらい文字数があります。
定義リストのタイトル
これは定義リストの説明です。

番号リスト

  1. これは1番目の番号リストです。
  2. これは2番目の番号リストですが、とても長く複数行になるくらい文字数があります。これは2番目の番号リストですが、とても長く複数行になるくらい文字数があります。これは2番目の番号リストですが、とても長く複数行になるくらい文字数があります。これは2番目の番号リストですが、とても長く複数行になるくらい文字数があります。
  3. これは3番目の番号リストです。
    1. これは1番目の番号リストです。
    2. これは2番目の番号リストです。
    3. これは3番目の番号リストです。
  4. これは4番目の番号リストです。
  5. これは5番目の番号リストです。
    • これは1番目の順序なしリストです。
    • これは2番目の順序なしリストです。
    • これは3番目の順序なしリストです。
  6. これは6番目の番号リストです。

順序なしリスト

  • これは1番目の順序なしリストです。
  • これは2番目の順序なしリストですが、とても長く複数行になるくらい文字数があります。これは2番目の順序なしリストですが、とても長く複数行になるくらい文字数があります。これは2番目の順序なしリストですが、とても長く複数行になるくらい文字数があります。これは2番目の順序なしリストですが、とても長く複数行になるくらい文字数があります。
  • これは3番目の順序なしリストです。
    • これは1番目の順序なしリストです。
    • これは2番目の順序なしリストです。
    • これは3番目の順序なしリストです。
  • これは4番目の順序なしリストです。
  • これは5番目の順序なしリストです。
    1. これは1番目の番号リストです。
    2. これは2番目の番号リストです。
    3. これは3番目の番号リストです。
  • これは6番目の順序なしリストです。

[ページ先頭へもどる]


画像

alignnone_画像のキャプションです

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。

alignleft_画像のキャプションです

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。

alignright_画像のキャプションです

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。

掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙を吹く。どうも咽せぽくて実に弱った。これが人間の飲む煙草というものである事はようやくこの頃知った。

aligncenter_画像のキャプションです

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。

[ページ先頭へもどる]


フォーム

legend要素(フィールドセットの表題)

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

フォーム内要素

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




ラジオボタン1
ラジオボタン2
ラジオボタン3

チェックボックス1
チェックボックス2
チェックボックス3


[ページ先頭へもどる]


表組

表見出し1 表見出し2 表見出し3
表のデータ1 表のデータ2 表のデータ3
表のデータ1 表のデータ2 表のデータ3
表のデータ1 表のデータ2 表のデータ3

[ページ先頭へもどる]


その他 - abbr、acronym、pre、code、sub、supなど

Lorem superscript dolor subscript amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. cite. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. NBA Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. AVE

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. NBA Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. AVE

"このスタイルシートは
とても驚くほど助けになるだろう" - 引用

[ページ先頭へもどる]