Appendix. リストを使った場合のソース
複数のリンクをたくさん並べる場合は、ul要素とli要素を使って「リスト」の形式にした方がいいかも知れません。 リストの形式にした場合のソースをまとめて掲載しておきます。
■HTML:
<ul class="boxlinks">
<li>
<!-- 1つ目のリンク -->
<a href="★リンク先URL★">
<span class="siteguide">◆ガイド文◆</span><br>
<span class="sitename">●サイト名●</span><br>
<span class="siteurl">★リンク先URL★</span><br>
</a>
</li>
<li>
<!-- 2つ目のリンク -->
<a href="★リンク先URL★">
<span class="siteguide">◆ガイド文◆</span><br>
<span class="sitename">●サイト名●</span><br>
<span class="siteurl">★リンク先URL★</span><br>
</a>
</li>
<li>
<!-- 3つ目のリンク -->
<a href="★リンク先URL★">
<span class="siteguide">◆ガイド文◆</span><br>
<span class="sitename">●サイト名●</span><br>
<span class="siteurl">★リンク先URL★</span><br>
</a>
</li>
</ul>
<li>
<!-- 1つ目のリンク -->
<a href="★リンク先URL★">
<span class="siteguide">◆ガイド文◆</span><br>
<span class="sitename">●サイト名●</span><br>
<span class="siteurl">★リンク先URL★</span><br>
</a>
</li>
<li>
<!-- 2つ目のリンク -->
<a href="★リンク先URL★">
<span class="siteguide">◆ガイド文◆</span><br>
<span class="sitename">●サイト名●</span><br>
<span class="siteurl">★リンク先URL★</span><br>
</a>
</li>
<li>
<!-- 3つ目のリンク -->
<a href="★リンク先URL★">
<span class="siteguide">◆ガイド文◆</span><br>
<span class="sitename">●サイト名●</span><br>
<span class="siteurl">★リンク先URL★</span><br>
</a>
</li>
</ul>
リンクをp要素ではなくli要素で囲んでいる以外は、先ほどのソースと同一です。
上記のソースを、スタイルシートを使わずにそのまま表示すると、以下のように見えます。 (※サイト名やURLは、この記事の冒頭に掲載したサンプルを使っています。)
※All About共通のスタイルシートが一部に適用されているので、必ずしもデフォルトの(スタイルシートをまったく使わない)見え方ではありません。
これにスタイルシートを加えます。