検索

リンク

目次

  1. コンバージョン内部デザイン
  2. ミニコンバージョン内部デザイン
  3. 外部リンクアイコン
  4. 更に詳しく内部デザイン
  5. pager
  6. pdf
  7. 関連ページ
  8. ページ内横スクロールナビ
  9. パンくずリンク
  10. CTA1
  11. CTA2
  12. CTA3
  13. CTA4
  14. CTA5
  15. CTA6
  16. CTA7

コンバージョン内部デザイン

コンバージョンボタン

<p class="c-conversion"><a href="#">コンバージョンボタン</a></p>
コピー完了

ミニコンバージョン内部デザイン

ミニコンバージョンボタン

<p class="c-miniConversion"><a href="#">ミニコンバージョンボタン</a></p>
コピー完了

外部リンクアイコン

外部リンクアイコン

<p><a href="/" target="_blank" class="c-blank">外部リンクアイコン</a></p>
コピー完了

更に詳しく内部デザイン

さらに詳しく
<div class="c-more"><a href="#">さらに詳しく</a></div>
コピー完了

pager

  • 1
  • 2
<div class="c-pager">
    <ul class="order">
        <li class="prev"><a href="#">前のページ</a></li>
        <li class="next"><a href="#">次のページ</a></li>
    </ul>
    <ul class="direct">
        <li>1</li>
        <li><a href="#">2</a></li>
    </ul>
</div>
コピー完了

pdf

xxxについてのPDFファイル

<p><a href="#" class="c-pdf" target="blank">xxxについてのPDFファイル</a></p>
コピー完了

関連ページ

ロゴトレース費用
ロゴトレース費用

名刺やチラシからロゴデータをなぞってベクター化する作業。
2案
ロゴ制作2案

2案作成したものから2回以内の修正。

 
<div class="c-related-article-container">
    <div class="c-related-article-box">
        <a href="/solution/web/price/maintenance-trace">
            <div class="img"><img src="/images/img/coding/guide/freo/html-frame_01.jpg" alt="ロゴトレース費用" width="200" height="140"></div>
            <div class="txt">
                <div class="tit">ロゴトレース費用</div>
                <p>名刺やチラシからロゴデータをなぞってベクター化する作業。</p>    
            </div>
        </a>
    </div>
    <div class="c-related-article-box">
        <a href="/solution/web/price/design-logo2">
            <div class="img"><img src="/images/img/coding/guide/freo/template-file_01.png" alt="2案" width="200" height="140"></div>
            <div class="txt">
                <div class="tit">ロゴ制作2案</div>
                <p>2案作成したものから2回以内の修正。</p>    
            </div>
        </a>
    </div>
</div>
コピー完了
コピー完了 
<nav class="c-breadcrumb">
    <ol>
        <li><a href="/">トップページ</a></li>
        <li><a href="/regulation">デザイン規定</a></li>
        <li><a href="/regulation/text">テキスト</a></li>
    </ol>
</nav>
コピー完了

CTA1

お問合せはこちらからCONTACT

  • お電話からのお問合せ
  • tel.03-0000-0000
  • 受付時間：月〜金 10:00-17:00
<div class="cta1-container">
    <p>お問合せはこちらから<span>CONTACT</span></p>
    <div>
        <ul>
            <li><i class="fas fa-laptop" aria-hidden="true"></i></li>
            <li>Webからのお問合せ</li>
            <li><a href="#">お問合せフォームへ</a></li>
        </ul>
        <ul>
            <li><i class="fas fa-mobile-screen-button" aria-hidden="true"></i></li>
            <li>お電話からのお問合せ</li>
            <li>tel.03-0000-0000</li>
            <li>受付時間：月〜金 10:00-17:00</li>
        </ul>
        <ul>
            <li><i class="fab fa-line" aria-hidden="true"></i></li>
            <li>LINEからのお問合せ</li>
            <li><a href="#">お友達登録はこちら</li>
        </ul>
    </div>
</div>
コピー完了

CTA2

CTA3

CTA4

CTA5

CTA6

CTA7