共通部品：リンク・ボタン

リンク

一般的なリンク

説明文～～～～～

<p>説明文～～～～～</p>
<p>→ <a href="#">[ページ名など]</a></p>

一般的な外部へのリンク

aタグに「class="external-link"」を追加してください。

※外部リンクには「target="_blank"」を設定して別ウィンドウで表示するようにしてください。

→ [サイト名／ページ名など]

<p>説明文～～～～～</p>
<p>→ <a href="#" class="external-link" target="_blank">[サイト名／ページ名など]</a></p>

目立たせたいリンク（ボタン）

このリンクボタンの背景色は共通ページ、デスクトップ製品、システム製品で異なります。左メニューの一番上の製品名箇所の背景色と同じになります。

[ページ名など]

<p>説明文～～～～～</p>
<p class="common-link-btn"><a href="#">[ページ名など]</a></p>

ボタン

PDFダウンロードボタン

PDFファイル

<a class="commmon-pdf-btn" href="productname_pdf/catalogue.pdf" title="カタログダウンロード"
target="_blank">PDFファイル</a>

PDFを日本語名でダウンロードさせたい場合

カタログダウンロード

<a class="commmon-pdf-btn" href="productname_pdf/catalogue.pdf" title="カタログダウンロード"
   download="統合版 12 カタログ.pdf">カタログダウンロード</a>

詳細へリンクするボタン

詳細はこちら

<p class="common-detail-btn">
   <a href="">詳細はこちら</a>
</p>

カゴに入れるボタン

オンラインショップの「カゴに入れる」ボタンです。リンクのURLの「product_id=nnnn」と「product_class_id=nnnn」を編集してください。「nnnn」は半角の数字。商品ごとに異なりますので、オンラインショップに確認してください。

<p class="common-shopcart-btn">
   <a href="https://web.antenna.co.jp/shop/html/products/detail.php?product_id=nnnn&quantity=1&product_class_id=nnnn&mode=cart"><img src="../img/common_img/common-btn-shopcart.png" alt="カゴに入れる"></a>
</p>

カゴに入れるボタン（文章中）

以下のをクリックすると、弊社「アンテナハウスオンラインショップ」にページが変わり、スタンドアロンライセンス（ダウンロード版）のご購入手続きが可能です。以下のをクリックすると、弊社「アンテナハウスオンラインショップ」にページが変わり、スタンドアロンライセンス（ダウンロード版）のご購入手続きが可能です。

<img src="../img/common_img/common-btn-shopcart.png" alt="カゴに入れる" class="common-shopcart-btn-inline">

問い合わせフォーム

問い合わせ先用

※Webフォームのアドレス、メールアドレス（2箇所）、電話番号を変更してください。

問い合わせ先用の表示フォーマット（3つパターン）です。

Webフォーム: Webフォームからお問い合わせ

電子メール: sales@antenna.co.jp

電話: 03-5829-9021

   <div class="common-inquiry-wrap">
      <div class="common-inquiry-form-wrap large">
         <dl class="common-inquiry-form">
            <dt>Webフォーム</dt>
            <dd><a href="/purchase/eval/sal_Ent.cgi">Webフォームからお問い合わせ</a></dd>
         </dl>
      </div>
      <div class="common-inquiry-mail-wrap small">
         <dl class="common-inquiry-mail">
            <dt>電子メール</dt>
            <dd><a href="mailto:sales@antenna.co.jp">sales@antenna.co.jp</a></dd>
         </dl>
      </div>
      <div class="common-inquiry-tel-wrap small">
         <dl class="common-inquiry-tel">
            <dt>電話</dt>
            <dd>03-5829-9021</dd>
         </dl>
      </div>
   </div>

問い合わせ先用の表示フォーマット（2つパターン）です。

電子メール: sales@antenna.co.jp

電話: 03-5829-9021

<div class="common-inquiry-wrap">
   <div class="common-inquiry-mail-wrap large">
      <dl class="common-inquiry-mail">
         <dt>電子メール</dt>
         <dd><a href="mailto:sales@antenna.co.jp">sales@antenna.co.jp</a></dd>
      </dl>
   </div>
   <div class="common-inquiry-tel-wrap small">
      <dl class="common-inquiry-tel">
         <dt>電話</dt>
         <dd>03-5829-9021</dd>
      </dl>
   </div>
</div>

電話: 03-5829-9021

Webフォーム: Webフォームからお問い合わせ

      <div class="common-inquiry-wrap">
         <div class="common-inquiry-tel-wrap large">
            <dl class="common-inquiry-tel">
               <dt>電話</dt>
               <dd>03-5829-9021</dd>
            </dl>
         </div>
         <div class="common-inquiry-form-wrap small">
            <dl class="common-inquiry-form">
               <dt>Webフォーム</dt>
               <dd><a href="/purchase/eval/sal_Ent.cgi">Webフォームからお問い合わせ</a></dd>
            </dl>
         </div>
      </div>

問い合わせ先用の表示フォーマット（1つパターン）です。

電子メール: sales@antenna.co.jp

<div class="common-inquiry-wrap">
   <div class="common-inquiry-mail-wrap">
      <dl class="common-inquiry-mail">
         <dt>電子メール</dt>
         <dd><a href="mailto:sales@antenna.co.jp">sales@antenna.co.jp</a></dd>
      </dl>
   </div>
</div>

電話: 03-5829-9021

<div class="common-inquiry-wrap">
   <div class="common-inquiry-tel-wrap">
      <dl class="common-inquiry-tel">
         <dt>電話</dt>
         <dd>03-5829-9021</dd>
      </dl>
   </div>
</div>

Webフォーム: Webフォームからお問い合わせ

<div class="common-inquiry-wrap">
   <div class="common-inquiry-form-wrap">
      <dl class="common-inquiry-form">
         <dt>Webフォーム</dt>
         <dd><a href="#">Webフォームからお問い合わせ</a></dd>
      </dl>
   </div>
</div>

アイコン集

Newアイコン

この機能が新しくなりました

※使う箇所のテキストサイズの高さに合うようになっています。

<p>この機能が新しくなりました<img src="../img/common_img/common-icon-new.svg" alt="new!" class="common-icon-new"></p>

その他各種アイコン

<img src="../img/common_img/common-icon-circle.png" alt="○" class="common-icon">
<img src="../img/common_img/common-icon-cross.png" alt="×" class="common-icon">
<img src="../img/common_img/common-icon-triangle.png" alt="△" class="common-icon">
<img src="../img/common_img/common-icon-hyphen.png" alt="-" class="common-icon">
<img src="../img/common_img/common-icon-check-pink.png" alt="チェックマーク" class="common-icon">
<img src="../img/common_img/common-icon-check-green.png" alt="チェックマーク" class="common-icon">
<img src="../img/common_img/common-icon-check-blue.png" alt="チェックマーク" class="common-icon">

※クラス名を<common-icon-inline>に変更すると、使う箇所のテキストサイズの高さに合うようになります。