スピード無料診断
もくじ
リンク
アイコン
ダウンロード
外部リンク
用語集へのリンク
上記３種はWordpressにボタンを用意しています。
ダウンロードへの外部リンク
<a class="download">ダウンロード</a>
<a class="exit">外部リンク</a>
<a class="dic">用語集へのリンク</a>
<a class="exit download">ダウンロードへの外部リンク</a>問い合わせリンク
floatを使うとレイアウトが崩れるため、横並びができない点注意。
spanは基本入れなくて大丈夫。
<ul class="common-contact__list">
<li class="common-contact__item"><a href="#totop" class="contactBtn contactBtn-orange"><span>オレンジ</span></a></li>
<li class="common-contact__item"><a href="#totop" class="contactBtn contactBtn-green">グリーン</a></li>
</ul>固定ページ内リンク
本ページのデザインが記事ページのため、正しく反映されていないが、固定ページに使用した場合は、リンク２、リンク２－２が横に並ぶ。
| 見出し１ | リンク１ |
|---|---|
| 見出し２ | リンク２リンク２－２ |
<table class="contractor__nav">
<tbody>
<tr>
<th>見出し１</th>
<td><a>リンク１</a></td>
</tr>
<tr>
<th>見出し２</th>
<td><a>リンク２</a><a>リンク２－２</a></td>
</tr>
</tbody>
</table>ボタン（地味）
子要素に適用されるため、注意。
複数向け
<ul class="Inline-Button">
<li><a href="https://www.sagami-nenkin.com/speed">スピード無料診断</a></li>
<li><a href="https://www.sagami-nenkin.com/contact">お問い合わせ</a></li>
</ul>単体向け
<a href="#Totop"><span class="Inline-Button">リンク</span></a>ボタン（派手）
paddingやheightの指定が個別に必要。
overflowがhiddenのため、初期はbrが効かない。
全幅になるため、flex指定が必要？
top-policy__btnを設定する場合は、padding-bottom:100pxを設定しないと、overする。
- btnだけ設定
- btn top-policy__btn btn-arrowを設定
＋改行
<ul style="padding-bottom: 100px;">
<li class="btn">btnだけ設定</li>
<li class="btn top-policy__btn btn-arrow">btn top-policy__btn btn-arrowを設定
＋改行</li>
</ul>ボーダーなしリンク
親と子のaにも適用されます
<p class="NoLine">Pに適用<a>リンク１</a><a>リンク２</a></p>
リンク１のみに適用<a class="NoLine">リンク１</a><a>リンク２</a>前に丸のあるリンク
リンクの前にオレンジ色の丸がつきます
見本
<a class="Link_C">見本</a>文字色が茶色のリンク
<a href="" class="brown">class=brown</a>
<p class="brown"><a href="">親オブジェクトに設定</a><br>された<a href="">子オブジェクト</a></p>ホバー
横並びのフレキシブルメニュー
<div class="online_menu_container">
<div class="online_menu"><span class="online_number">１</span>
テキストテキストテキスト</div>
<div class="online_menu"><span class="online_number">２</span>
テキストテキスト</div>
<div class="online_menu"><span class="online_number">３</span>
ナンバーは自動採番ではなく、spanで入れている</div>
</div>画像の透明度を上げる
<div class="ArticleList">
<img src="">
</div>
スピード無料診断