検索

リンク

目次

  1. コンバージョン内部デザイン
  2. ミニコンバージョン内部デザイン
  3. 外部リンクアイコン
  4. 更に詳しく内部デザイン
  5. pager
  6. pdf
  7. 関連ページ
  8. ページ内横スクロールナビ

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

コンバージョンボタン

<p class="conversion"><a href="#">コンバージョンボタン</a></p>

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

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

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

外部リンクアイコン

外部リンクアイコン

<p><a href="/" target="_blank" class="blank">外部リンクアイコン</a></p>

更に詳しく内部デザイン

さらに詳しく
<div class="more"><a href="#">さらに詳しく</a></div>

pager

  • 1
  • 2
<div class="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="pdf" target="blank">xxxについてのPDFファイル</a></p>

関連ページ

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

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

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

 
<div class="related-article-container">
    <div class="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="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>