デザイン

賢威7のテンプレートを利用してアフィリエイトサイトを構築する際の応用例を紹介します。標準のCSSを少しカスタマイズして応用する方法になります。

記事のデザインパーツを活用する方法をまとめています。アフィリエイトサイトなどを構築する際に参考にしてください。

この記事は定期的に応用例を追加する予定です。


画像ボタン

リストの画像を横に並べる

画像をインラインで横に並べてナビゲーションメニューとして利用する応用例です。

レイアウト見本

<ul class="inline">
<li><a href="#"><img src="./1.png" width="150" height="50" class="m5"></a></li>
<li><a href="#"><img src="./2.png" width="150" height="50" class="m5"></a></li>
<li><a href="#"><img src="./3.png" width="150" height="50" class="m5"></a></li>
<li><a href="#"><img src="./4.png" width="150" height="50" class="m5"></a></li>
<li><a href="#"><img src="./5.png" width="150" height="50" class="m5"></a></li>
<li><a href="#"><img src="./6.png" width="150" height="50" class="m5"></a></li>
</ul>
画像の縦サイズが違う場合

画像の縦サイズがバラバラの場合は、CSSで「vl-t」を指定すると、上方向に画像の配置を揃えることができます。

<ul class="inline">
<li><a href="#"><img src="./1.png" width="150" height="50" class="m5 vl-t"></a></li>
<li><a href="#"><img src="./2.png" width="150" height="50" class="m5 vl-t"></a></li>
<li><a href="#"><img src="./3.png" width="150" height="50" class="m5 vl-t"></a></li>
<li><a href="#"><img src="./4.png" width="150" height="50" class="m5 vl-t"></a></li>
<li><a href="#"><img src="./5.png" width="150" height="50" class="m5 vl-t"></a></li>
<li><a href="#"><img src="./6.png" width="150" height="50" class="m5 vl-t"></a></li>
</ul>

リンクボタン

リンクボタンを横に並べる

リンクボタンをインラインで横に並べる応用例です。

レイアウト見本

<ul class="inline">
<li><a href="#" class="btn btn-blue m10">ブルー</a></li>
<li><a href="#" class="btn btn-green m10">グリーン</a></li>
<li><a href="#" class="btn btn-red m10">レッド</a></li>
<li><a href="#" class="btn btn-orange m10">オレンジ</a></li>
</ul>

リンクボタンを小さくする

リンクボタンを少し小さくする応用例です。
下記のCSSコードを追加することでリンクボタンを調整できます。

<ul class="inline">
<li><a href="#" class="btn btn-blue btn-mini">ブルー</a></li>
<li><a href="#" class="btn btn-green btn-mini">グリーン</a></li>
<li><a href="#" class="btn btn-red btn-mini">レッド</a></li>
<li><a href="#" class="btn btn-orange btn-mini">オレンジ</a></li>
</ul>
.btn-mini { padding: 10px 20px; margin: 0 10px 0 0; font-size: 1em; }

マウスオーバー効果

リンクのある画像のマウスオーバー効果

Aタグの中に入れられた画像に対して、マウスオーバー時に透明度を70%に変更する効果を付けることができます。画像の上にマウスを合わせた時に透明度が変わるので、リンクの有無が分かりやすくなります。

ネタワンのサイトでも利用しているマウスオーバー効果です。同じような効果を付けたい場合に参考にしてください。

a:hover img { opacity:0.7; filter:alpha(opacity=70); -ms-filter: "alpha( opacity=70 )"; background:none!important; }

以上