エディタ用パーツ一覧

1. エディタ用CSSをダウンロード
2. 管理画面の「ファイル管理」の「files」直下にCSSをアップロード

「レイアウト管理」で以下のdefault-themeのCSS類を読み込むことで各種スタイルが適用されます。

<!-- /* CSS */-->
<link rel="stylesheet" href="https://common.assets.gear-s.app/files/isfw_assets/css/isfw_v1.2.css">
<!-- /* theme */-->
<link rel="stylesheet" href="https://common.assets.gear-s.app/files/theme/v1.2/theme-default/assets/css/style.css">

default-themeでは、各パーツの他、「.isfw_editor-template」内では以下のデフォルトのスタイルが用意されています。

htmlをコピーする クリップボードへコピー

<div class="isfw_tab">
  <ul class="tab-list">
    <li class="tab-item current"><span>tab1</span></li>
    <li class="tab-item"><span>tab2</span></li>
    <li class="tab-item"><span>tab3</span></li>
  </ul>
  <div class="isfw_tab-contents">

    <div class="tab-content">
      tab1の中身
    </div>

    <div class="tab-content">
     tab2の中身
    </div>

    <div class="tab-content">
     tab3の中身
    </div>

  </div>
</div>
<!-- /.tab -->

htmlをコピーする クリップボードへコピー

<a class="btn_default size-l" href="">ボタン（大）</a>

あああああああああ◎

ダミーテキストあああああああああ◎あああああああああ◎ 詳しくはこちら

木曾路はすべて山の中である

一筋の街道はこの深い森林地帯を貫いていた。 詳しくはこちら

見出しが入りますあああああああああ◎

あああああああああ◎あああああああああ◎あああああああああ◎あああああああああ◎あああああああああ◎あああああああああ◎ 詳しくはこちら

htmlをコピーする クリップボードへコピー

<div class="isfw_editor-template">
  <div class="isfw_summary">
    <div class="item">
      <div class="image"><img class="thumbnail" src="/files/img/placeholder_square.jpg"/></div>
      <div class="text">
        <h3 class="title_lv3">あああああああああ◎</h3>
        <p class="summary-text">ダミーテキストあああああああああ◎あああああああああ◎ <a class="page-link" href="">詳しくはこちら</a></p>
      </div>
    </div>
    <div class="item">
      <div class="image"><img class="thumbnail" src="/files/img/placeholder_square.jpg"/></div>
      <div class="text">
        <h3 class="title_lv3">木曾路はすべて山の中である</h3>
        <p class="summary-text">一筋の街道はこの深い森林地帯を貫いていた。 <a class="page-link" href="">詳しくはこちら</a></p>
      </div>
    </div>
    <div class="item">
      <div class="image"><img class="thumbnail" src="/files/img/placeholder_square.jpg"/></div>
      <div class="text">
        <h3 class="title_lv3">見出しが入りますあああああああああ◎</h3>
        <p class="summary-text">あああああああああ◎あああああああああ◎あああああああああ◎あああああああああ◎あああああああああ◎あああああああああ◎ <a class="page-link" href="">詳しくはこちら</a></p>
      </div>
    </div>
  </div>
</div>

見出しが入ります

見出しが入ります

見出しが入りますあああああああああ◎

見出しが入ります

htmlをコピーする クリップボードへコピー

<div class="isfw_editor-template">
  <div class="isfw_summary">
    <div class="item">
      <div class="image"><img class="thumbnail" src="/files/img/placeholder_circle.png"/></div>
      <div class="text">
        <h3 class="title_lv3"><a class="page-link" href="">見出しが入ります</a></h3>
      </div>
    </div>
    <div class="item">
      <div class="image"><img class="thumbnail" src="/files/img/placeholder_circle.png"/></div>
      <div class="text">
        <h3 class="title_lv3"><a class="page-link" href="">見出しが入ります</a></h3>
      </div>
    </div>
    <div class="item">
      <div class="image"><img class="thumbnail" src="/files/img/placeholder_circle.png"/></div>
      <div class="text">
        <h3 class="title_lv3"><a class="page-link" href="">見出しが入りますあああああああああ◎</a></h3>
      </div>
    </div>
    <div class="item">
      <div class="image"><img class="thumbnail" src="/files/img/placeholder_circle.png"/></div>
      <div class="text">
        <h3 class="title_lv3"><a href="">見出しが入ります</a></h3>
      </div>
    </div>
  </div>
</div>

見出しが入ります

ダミーテキスト。木曾路はすべて山の中である。

見出しが入ります

ダミーテキスト。木曾路はすべて山の中である。あるところは岨づたいに行く崖の道であり、あるところは数十間の深さに臨む木曾川の岸であり、あるところは山の尾をめぐる谷の入り口である。

htmlをコピーする クリップボードへコピー

<div class="isfw_editor-template">
  <div class="isfw_image-text">
    <div class="image"><img class="thumbnail" src="/files/img/placeholder_rectangle.jpg"/></div>
    <div class="text">
      <h3 class="title_lv3">見出しが入ります</h3>
      <p class="summary-text">ダミーテキスト。木曾路はすべて山の中である。</p>
    </div>
    <div class="image"><img class="thumbnail" src="/files/img/placeholder_rectangle.jpg"/></div>
    <div class="text">
      <h3 class="title_lv3">見出しが入ります</h3>
      <p class="summary-text">ダミーテキスト。木曾路はすべて山の中である。あるところは岨づたいに行く崖の道であり、あるところは数十間の深さに臨む木曾川の岸であり、あるところは山の尾をめぐる谷の入り口である。</p>
    </div>
  </div>
</div>

htmlをコピーする クリップボードへコピー

<div class="isfw_col1_text">
  <h2>H2見出し</h2>
  <p>コンテンツ本文です。</p>
</div>

htmlをコピーする クリップボードへコピー

<div class="isfw_col1_heading_text">
  <h3>H3見出し</h3>
  <p>タイトル下の文章</p>
</div>

H2見出し

コンテンツ本文です。

htmlをコピーする クリップボードへコピー

<div class="isfw_image-text">
  <div class="image"><img class="thumbnail" src="/files/img/placeholder_square.jpg"></div>
  <div class="text">
    <h3 class="title_lv3">H2見出し</h3>
    <p class="summary-text">コンテンツ本文です。</p>
  </div>
</div>

H2見出し

コンテンツ本文です。

htmlをコピーする クリップボードへコピー

<div class="isfw_editor-template">
  <div class="isfw_text-image">
  <div class="text">
    <h3 class="title_lv3">H2見出し</h3>
    <p class="summary-text">コンテンツ本文です。</p>
  </div>
  <div class="image"><img class="thumbnail" src="/files/img/placeholder_square.jpg"></div>
  </div>
</div>

htmlをコピーする

<script type="text/javascript" src="https://common.assets.gear-s.app/files/isfw_assets/js/slick.min.js"></script>
<script type="text/javascript" src="https://common.assets.gear-s.app/files/isfw_assets/js/slide-show.js"></script>

<div class="slide-show">
  <div class="slider-list">
    <div class="slider-item"><img src="https://common.assets.gear-s.app/files/img/slideshow_1.jpg"></div>
    <div class="slider-item"><img src="https://common.assets.gear-s.app/files/img/slideshow_2.jpg"></div>
    <div class="slider-item"><img src="https://common.assets.gear-s.app/files/img/slideshow_3.jpg"></div>
  </div>
</div>

キャプション1

キャプション2

キャプション3

htmlをコピーする

<script type="text/javascript" src="https://common.assets.gear-s.app/files/isfw_assets/js/slick.min.js"></script>
<script type="text/javascript" src="https://common.assets.gear-s.app/files/isfw_assets/js/slide-show_caption.js"></script>

<div class="slide-show_caption">
  <div class="slider-list">
    <div class="slider-item"><img src="https://common.assets.gear-s.app/files/img/slideshow_2.jpg">
      <p class="caption">キャプション1</p>
    </div>
    <div class="slider-item"><img src="https://common.assets.gear-s.app/files/img/slideshow_3.jpg">
      <p class="caption">キャプション2</p>
    </div>
    <div class="slider-item"><img src="https://common.assets.gear-s.app/files/img/slideshow_1.jpg">
      <p class="caption">キャプション3</p>
    </div>
  </div>
</div>

htmlをコピーする

<script type="text/javascript" src="https://common.assets.gear-s.app/files/isfw_assets/js/slick.min.js"></script>
<script type="text/javascript" src="https://common.assets.gear-s.app/files/isfw_assets/js/slide-show_thumbnail.js"></script>

<div class="slide-show_thumbnail">
  <div class="slider-list">
    <div class="slider-item"><img src="https://common.assets.gear-s.app/files/img/slideshow_3.jpg"></div>
    <div class="slider-item"><img src="https://common.assets.gear-s.app/files/img/slideshow_1.jpg"></div>
    <div class="slider-item"><img src="https://common.assets.gear-s.app/files/img/slideshow_2.jpg"></div>
  </div>
</div>

htmlをコピーする クリップボードへコピー

<div class="category_tags">
  <div class="tag_item tag_labeltaglabel">タグ名</div>
  <div class="date_item">2021/11/11</div>
</div>