*サンプルページ – 投稿編集用 - 山口県山口市 ホームページ制作(WordPress・ネットショップ・リニューアル)/デザイン制作(名刺制作・チラシ制作・ロゴ制作・ブランディング等)  |  株式会社スワークス

*サンプルページ – 投稿編集用

(1)cssライブラリ

本文

リード文:lead

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

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

背景付引用:bq_bk

引用見出し
引用が入ります。引用が入ります。引用が入ります。引用が入ります。引用が入ります。引用が入ります。引用が入ります。

 HTMLコード<blockquote class="bq_bk"><strong>引用見出し</strong>
引用が入ります。引用が入ります。引用が入ります。引用が入ります。引用が入ります。引用が入ります。引用が入ります。</blockquote>

テーブル

水平スクロールテーブル:res-h

テーブル見出し テーブル見出し テーブル見出し
テーブルのデータ テーブルのデータ テーブルのデータ
テーブルのデータ テーブルのデータ テーブルのデータ
 HTMLコード<table class="res-h">
  <tbody>
  <tr>
    <th>テーブル見出し</th>
    <th>テーブル見出し</th>
    <th>テーブル見出し</th>
  </tr>
  <tr>
    <td>テーブルのデータ</td>
    <td>テーブルのデータ</td>
    <td>テーブルのデータ</td>
  </tr>
  <tr>
    <td>テーブルのデータ</td>
    <td>テーブルのデータ</td>
    <td>テーブルのデータ</td>
  </tr>
  </tbody>
</table>

お問い合わせリンクスタイル:contact

◯◯◯◯◯に関することはお気軽にお問い合わせください!

000-000-0000
営業時間 月~金 9:00~18:00

お問い合わせ・資料請求

メールは24時間受け付けております。

 HTMLコード<div class="contact">
<div class="contact_sb">
<p class="lead">◯◯◯◯◯に関することはお気軽にお問い合わせください!</p>
<p class="tel"><a href="#"><i class="fa fa-phone" aria-hidden="true"></i> 000-000-0000
<small>営業時間 月~金 9:00~18:00</small></a></p>
<p class="mail"><a href="#"><i class="fa fa-envelope-o" aria-hidden="true"></i> お問い合わせ・資料請求</a></p>
<p class="ex">メールは24時間受け付けております。</p>
</div>
</div>

(2)コンポーネント

画像+文章

画像+文章(ノーマル/画像左):imgtxt_l

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
 HTMLコード<div class="imgtxt_l">
<div class="ttl"><a href="http://ae129ev2x2.smartrelease.jp/wps/wp-content/uploads/noimage-mid.png"><img class="alignnone size-full wp-image-725" src="http://ae129ev2x2.smartrelease.jp/wps/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a></div>
<div class="txt">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</div>
</div>

画像+文章(ノーマル/画像右):imgtxt_r

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
 HTMLコード<div class="imgtxt_r">
<div class="ttl"><a href="http://ae129ev2x2.smartrelease.jp/wps/wp-content/uploads/noimage-mid.png"><img class="alignnone size-full wp-image-725" src="http://ae129ev2x2.smartrelease.jp/wps/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a></div>
<div class="txt">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</div>
</div>

画像+文章(フルワイズ)

画像+文章(フルワイズ/画像左):imgtxt_full_l

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
 HTMLコード<div class="imgtxt_full_l">
<div class="ttl"><a href="http://ae129ev2x2.smartrelease.jp/wps/wp-content/uploads/noimage-mid.png"><img class="alignnone size-full wp-image-725" src="http://ae129ev2x2.smartrelease.jp/wps/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a></div>
<div class="txt">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</div>
</div>

画像+文章(フルワイズ/画像右):imgtxt_full_r

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
 HTMLコード<div class="imgtxt_full_r">
<div class="ttl"><a href="http://ae129ev2x2.smartrelease.jp/wps/wp-content/uploads/noimage-mid.png"><img class="alignnone size-full wp-image-725" src="http://ae129ev2x2.smartrelease.jp/wps/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a></div>
<div class="txt">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</div>
</div>

価格カード:price_card

価格カード(1個)

商品名A – AAAA11111
23,000
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
 HTMLコード<div class="price_card">
<div class="price_card-in">
<div class="ttl">商品名A - AAAA11111</div>
<div class="prc">23,000<span class="cu">円</span></div>
<div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
<div class="buy"><a href="#">詳細</a></div>
</div>
</div>

価格カード(2個)

商品名A – AAAA11111
23,000
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
商品名A – AAAA11111
23,000
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
 HTMLコード<div class="price_card">
<div class="price_card-in">
<div class="ttl">商品名A - AAAA11111</div>
<div class="prc">23,000<span class="cu">円</span></div>
<div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
<div class="buy"><a href="#">詳細</a></div>
</div>
</div>

価格カード(3個)

商品名A – AAAA11111
23,000
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
商品名A – AAAA11111
23,000
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
商品名A – AAAA11111
23,000
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
 HTMLコード<div class="price_card">
<div class="price_card-in">
<div class="ttl">商品名A - AAAA11111</div>
<div class="prc">23,000<span class="cu">円</span></div>
<div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
<div class="buy"><a href="#">詳細</a></div>
</div>
<div class="price_card-in">
<div class="ttl">商品名A - AAAA11111</div>
<div class="prc">23,000<span class="cu">円</span></div>
<div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
<div class="buy"><a href="#">詳細</a></div>
</div>
<div class="price_card-in">
<div class="ttl">商品名A - AAAA11111</div>
<div class="prc">23,000<span class="cu">円</span></div>
<div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
<div class="buy"><a href="#">詳細</a></div>
</div>
</div>

フロー図:flow_chart

登録からお仕事開始までの流れ

  • 登録の申し込み
    吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
  • 登録のご説明
    吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
  • 登録書類のご記入
    吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
  • コーディネーターとの面談
    吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
  • お仕事開始
    吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
 HTMLコード<div class="flow_chart">
<p class="ttl">登録からお仕事開始までの流れ</p>
<ul>
<li class="flow-box">
<div class="flow-l">登録の申し込み</div>
<div class="flow-r">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div></li>
<li class="flow-box">
<div class="flow-l">登録のご説明</div>
<div class="flow-r">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div></li>
<li class="flow-box">
<div class="flow-l">登録書類のご記入</div>
<div class="flow-r">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div></li>
<li class="flow-box">
<div class="flow-l">コーディネーターとの面談</div>
<div class="flow-r">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div></li>
<li class="flow-box">
<div class="flow-l">お仕事開始</div>
<div class="flow-r">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div></li>
</ul>
</div>

フロー図:flow_chart

タイトルが入ります。タイトルが入ります。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
タイトルが入ります。タイトルが入ります。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
 HTMLコード<div class="flow_chart2">
<div class="img"><img class="alignnone size-full wp-image-725" src="http://ae129ev2x2.smartrelease.jp/wps/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></div>
<div class="txt"><strong>タイトルが入ります。タイトルが入ります。</strong>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</div>
</div>
<div class="flow_mark"><img src="http://ae129ev2x2.smartrelease.jp/wps/wp-content/themes/sw/img/flow_mark.png" /></div>
<div class="flow_chart2">
<div class="img"><img class="alignnone size-full wp-image-725" src="http://ae129ev2x2.smartrelease.jp/wps/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></div>
<div class="txt"><strong>タイトルが入ります。タイトルが入ります。</strong>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</div>
</div>

イメージボックススタイル

サンプル画像
タイトルが入ります吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
 HTMLコード<div class="image_box">
<div class="img"><img src="http://ae129ev2x2.smartrelease.jp/wps/wp-content/uploads/noimage-mid-300x200.png" alt="サンプル画像" /></div>
<div class="txt"><strong>タイトルが入ります</strong>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</div>
</div>

料金プラン:rate_plan

商品名A ? AAAA11111 商品名B ? AAAA11111 商品名C ? AAAA11111
月額料金 10,000 20,000 30,000
特徴
ネットショップ
ECサイトとブログを含む
AAAAA AAAAA AAAAA
ネットショップ
ECサイトとブログを含む
BBBBB BBBBB BBBBB
ネットショップ
ECサイトとブログを含む
CCCCC CCCCC CCCCC
ネットショップ
ECサイトとブログを含む
DDDDD DDDDD DDDDD
詳細 詳細 詳細
 HTMLコード<table class="rate_plan">
<tbody>
<tr class="ttl">
<th></th>
<th>商品名A ? AAAA11111</th>
<th>商品名B ? AAAA11111</th>
<th>商品名C ? AAAA11111</th>
</tr>
<tr class="prc">
<th>月額料金</th>
<td>10,000<span class="cu">円</span></td>
<td>20,000<span class="cu">円</span></td>
<td>30,000<span class="cu">円</span></td>
</tr>
<tr>
<th class="feature" colspan="4">特徴</th>
</tr>
<tr>
<th>ネットショップ
ECサイトとブログを含む</th>
<td>AAAAA</td>
<td>AAAAA</td>
<td>AAAAA</td>
</tr>
<tr>
<th>ネットショップ
ECサイトとブログを含む</th>
<td>BBBBB</td>
<td>BBBBB</td>
<td>BBBBB</td>
</tr>
<tr>
<th>ネットショップ
ECサイトとブログを含む</th>
<td>CCCCC</td>
<td>CCCCC</td>
<td>CCCCC</td>
</tr>
<tr>
<th>ネットショップ
ECサイトとブログを含む</th>
<td>DDDDD</td>
<td>DDDDD</td>
<td>DDDDD</td>
</tr>
<tr class="buy">
<th></th>
<td><a href="#">詳細</a></td>
<td><a href="#">詳細</a></td>
<td><a href="#">詳細</a></td>
</tr>
</tbody>
</table>

Q&A

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。?
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
 HTMLコード<div class="faq_list">
<dl>
<dt>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。?</dt>
<dd>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</dd>
</dl>
</div>

ポイント説明::point_list

見出し見出し

キャプションキャプションキャプションキャプション

文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。

見出し見出し

キャプションキャプションキャプションキャプション

文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。

見出し見出し

キャプションキャプションキャプションキャプション

文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。

見出し見出し

キャプションキャプションキャプションキャプション

文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。

見出し見出し

キャプションキャプションキャプションキャプション

文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。

 HTMLコード<div class="point_list"><section><header>
<p class="ttl">見出し見出し</p>
<p class="cap"><small>キャプションキャプションキャプションキャプション</small></p>
</header>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。
</section><section><header>
<p class="ttl">見出し見出し</p>
<p class="cap"><small>キャプションキャプションキャプションキャプション</small></p>
</header>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。
</section><section><header>
<p class="ttl">見出し見出し</p>
<p class="cap"><small>キャプションキャプションキャプションキャプション</small></p>
</header>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。
</section><section><header>
<p class="ttl">見出し見出し</p>
<p class="cap"><small>キャプションキャプションキャプションキャプション</small></p>
</header>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。
</section><section><header>
<p class="ttl">見出し見出し</p>
<p class="cap"><small>キャプションキャプションキャプションキャプション</small></p>
</header>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。
</section></div>

リンクボタン:blk

リンクボタン(1個)

 HTMLコード<div class="blk"><a href="#">詳細はこちら <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a></div>

リンクボタン(2個)

 HTMLコード<div class="blk"><a href="#">詳細はこちら <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a><a href="#">詳細はこちら <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a></div>

リンクボタン(3個)

 HTMLコード<div class="blk"><a href="#">詳細はこちら <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a><a href="#">詳細はこちら <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a><a href="#">詳細はこちら <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a></div>

リンクボタン(4個)

 HTMLコード<div class="blk"><a href="#">詳細はこちら <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a><a href="#">詳細はこちら <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a><a href="#">詳細はこちら <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a><a href="#">詳細はこちら <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a></div>

リンクボタン(2個/中央)

 HTMLコード<div class="blk blk-c"><a href="#">詳細はこちら <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a><a href="#">詳細はこちら <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a></div>

リンクボタン(4個/中央)

 HTMLコード<div class="blk blk-c"><a href="#">詳細はこちら <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a><a href="#">詳細はこちら <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a><a href="#">詳細はこちら <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a><a href="#">詳細はこちら <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a></div>

リンクボタン(マルチ)

 HTMLコード<div class="blk blk-multi"><a href="#">詳細はこちら <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a><a href="#">詳細はこちら <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a><a href="#">詳細はこちら <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a><a href="#">詳細はこちら <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a></div>

チャットスタイル:chat_normal

チャットスタイル(通常)

名前

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
 HTMLコード<div class="chat_normal">
<div class="img">
<img class="alignnone size-full wp-image-626" src="http://ae129ev2x2.smartrelease.jp/wps/wp-content/uploads/noimage.png" alt="" width="150" height="150" />
<p class="name">名前</p>
</div>
<div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</div>
</div>

(3)ランディングページ用デザイン

見出し

背景色が変更可能なテーブル見出し:headline_table

テーブル見出し

文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。

 HTMLコード<table class="headline_table">
<tbody>
<tr>
<td>テーブル見出し</td>
</tr>
</tbody>
</table>

(4)その他

アイコン

awesome font

ホーム
チェック
ダウンロード
注意
カート
アイコンリスト

 HTMLコード<p><i class="fa fa-home"></i> ホーム</p>
<p><i class="fa fa-check"></i> チェック</p>
<p><i class="fa fa-download"></i> ダウンロード</p>
<p><i class="fa fa-warning"></i> 注意</p>
<p><i class="fa fa-shopping-cart"></i> カート</p>

レスポンシブ画像

レスポンシブイメージ – プラグインなし

レスポンシブイメージ – プラグインあり

 HTMLコード<img class="res_img" src="http://ae129ev2x2.smartrelease.jp/wps/wp-content/themes/sw/img/responsiveimg.png">
※スマートフォンサイズ(468px以下)ではresponsiveimg_sp.pngという画像に切り替わる

(2)コンポーネント

チームメンバー

カウントダウン

こちらの記事も読まれています。

前後の記事

  前の記事
  次の記事
PAGE TOP