記事本文等で利用される、リッチテキストエディタ(WYSIWYG)のスタイル。以下の条件に合致する要素に適用される。

  1. .wysiwyg クラスを付与した要素で包括されている
  2. 要素自体に以下のクラスが付与されていない
    • a: link, btn, label
    • h: title
    • ul: list
    • ol: list, linenums
    • dl: list
    • hr: すべてのクラス
    • blockquote: すべてのクラス
    • table: すべてのクラス
  3. table要素が.column-table-で包括されている

.wysiwyg 内の最初の要素は、強制的に上マージンが0となる。(!importantを使用)

あいうえおかきくけ10_h1

あいうえおかきくけ10_h2

あいうえおかきくけ10さしすせ太字ですそたちつて20なにぬねのはひ斜体ですふへ30まみむめもやゆよっ40らりるれろわをんー50
あいうえおかきく太字+斜体ですけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおか斜体+太字ですきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50

さしすせそたちつて20_h3

リンクを貼りました

リンクですがボタンなので装飾が適用されません

なにぬねのはひふへ30_h4

あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30ま
みむめもやゆよっ40らりるれろわをんー50あいうえおかき
くけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50

まみむめもやゆよっ40_h5

あいうえおかきくけ10さしすせそたちつて20
なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそた
ちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50

らりるれろわをんー50_h6

あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40ら
りるれろわをんー50あいうえおかきくけ10
さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50

  • マーク付きリスト
  • マーク付きリスト
  • マーク付きリスト
    • マーク付きリスト子
    • マーク付きリスト子
  • マーク付きリスト
  • マーク付きリスト
  1. 数字リスト
  2. 数字リスト
  3. 数字リスト
    1. 数字リスト子
    2. 数字リスト子
  4. 数字リスト
  5. 数字リスト
  • マーク付きリスト
  • マーク付きリスト
  • マーク付きリスト
    1. 数字リスト子
    2. 数字リスト子
  • マーク付きリスト
  • マーク付きリスト
  1. 数字リスト
  2. 数字リスト
  3. 数字リスト
    • マーク付きリスト子
    • マーク付きリスト子
  4. 数字リスト
  5. 数字リスト
定義語
あいうえおかきくけ10さしすせそたちつて20なにぬ
定義語
あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40
定義語
あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよ
定義語
あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30ま

↓水平線です


吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
吾輩は猫である 名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩は猫である名前はまだ無い。 どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩は猫 である名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

title-02

あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30ま
みむめもやゆよっ40らりるれろわをんー50あいうえおかき
くけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50

title-02

あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30ま
みむめもやゆよっ40らりるれろわをんー50あいうえおかき
くけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50

media

.mediaも .wysiwyg内で使用することができます

<div class="wysiwyg">

<h1>あいうえおかきくけ10_h1</h1>

<h2>あいうえおかきくけ10_h2</h2>

<p>あいうえおかきくけ10さしすせ<strong>太字です</strong>そたちつて20なにぬねのはひ<em>斜体です</em>ふへ30まみむめもやゆよっ40らりるれろわをんー50<br>
あいうえおかきく<strong><em>太字+斜体です</em></strong>け10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおか<em><strong>斜体+太字です</strong></em>きくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50</p>

<h3>さしすせそたちつて20_h3</h3>

<p><a href="#">リンクを貼りました</a></p>

<p><a href="#" class="btn btn-first">リンクですがボタンなので装飾が適用されません</a></p>

<h4>なにぬねのはひふへ30_h4</h4>

<p>あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30ま<br>みむめもやゆよっ40らりるれろわをんー50あいうえおかき<br>くけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50</p>

<h5>まみむめもやゆよっ40_h5</h5>

<p>あいうえおかきくけ10さしすせそたちつて20<br>なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそた<br>ちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50</p>

<h6>らりるれろわをんー50_h6</h6>

<p>あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40ら<br>りるれろわをんー50あいうえおかきくけ10<br>さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50</p>

<ul>
  <li>マーク付きリスト</li>
  <li>マーク付きリスト</li>
  <li>マーク付きリスト
    <ul>
      <li>マーク付きリスト子</li>
      <li>マーク付きリスト子</li>
    </ul>
  </li>
  <li>マーク付きリスト</li>
  <li>マーク付きリスト</li>
</ul>

<ol>
  <li>数字リスト</li>
  <li>数字リスト</li>
  <li>数字リスト
    <ol>
      <li>数字リスト子</li>
      <li>数字リスト子</li>
    </ol>
  </li>
  <li>数字リスト</li>
  <li>数字リスト</li>
</ol>

<ul>
  <li>マーク付きリスト</li>
  <li>マーク付きリスト</li>
  <li>マーク付きリスト
    <ol>
      <li>数字リスト子</li>
      <li>数字リスト子</li>
    </ol>
  </li>
  <li>マーク付きリスト</li>
  <li>マーク付きリスト</li>
</ul>

<ol>
  <li>数字リスト</li>
  <li>数字リスト</li>
  <li>数字リスト
    <ul>
      <li>マーク付きリスト子</li>
      <li>マーク付きリスト子</li>
    </ul>
  </li>
  <li>数字リスト</li>
  <li>数字リスト</li>
</ol>

<dl>
  <dt>定義語</dt>
  <dd>あいうえおかきくけ10さしすせそたちつて20なにぬ</dd>
  <dt>定義語</dt>
  <dd>あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40</dd>
  <dt>定義語</dt>
  <dd>あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよ</dd>
  <dt>定義語</dt>
  <dd>あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30ま</dd>
</dl>

<p>↓水平線です</p>

<hr>

<blockquote>
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。<br>
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
</blockquote>

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


<div class="l-f-row m-b-lg">
    <div class="l-f-col l-f-col-4-lg m-b">
        <div class="bg-second bg-fade">
            <h2 class="title title-02 m-b-lg">title-02</h2>
            <p>あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30ま<br>みむめもやゆよっ40らりるれろわをんー50あいうえおかき<br>くけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50</p>
        </div>
    </div>
    <div class="l-f-col l-f-col-4-lg m-b">
        <div class="bg-second bg-fade">
            <h2 class="title title-02 m-b-lg">title-02</h2>
            <p>あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30ま<br>みむめもやゆよっ40らりるれろわをんー50あいうえおかき<br>くけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50</p>
        </div>
    </div>
    <div class="l-f-col l-f-col-4-lg m-b">
        <div class="bg-second bg-fade">

<div class="media">
    <div class="media-inner">
        <div class="media-img">
            <div class="thumbnail">
                <img src="https://placehold.jp/100x100.jpg" alt="">
            </div><!-- /.thumbnail -->
        </div><!-- /.media-img -->

        <div class="media-contents">
            <h4 class="title title-05 m-b-sm">media</h4>
            <p>.mediaも .wysiwyg内で使用することができます</p>
        </div><!-- /.media-contents -->
    </div><!-- /.media-inner -->
</div><!-- /.media -->

        </div>
    </div>
</div>

</div>