無料配布テンプレートの素材コード一覧

ある程度、タグを見るのに慣れてきた方なら、タグに書いてある解説が邪魔になってきたころだと思います。極力入力していただく文言を極力「■」として置いています。こちらの方が作成のしやすい方は、こちらからソースをコピーして使ってください。

入力する内容の解説無しでは、理解が難しい場合は、→ 入門用素材コード一覧を使ってみてください。

■

<h2><strong>■</strong></h2>

■

<h2>■</h2>

段落

<p>■</p>

改行

<br />

1位	詳細はこちら	■ ■ ■
2位	詳細はこちら	■ ■ ■
3位	詳細はこちら	■ ■ ■
4位	詳細はこちら	■ ■ ■
5位	詳細はこちら	■ ■ ■

<table border="0" cellspacing="0" cellpadding="0" class="ranktable"> <tr> <th width="100">1位</th> <td width="200"><a href="■"><img src="images/serviceimage.png" width="200" height="300" alt="■" /><br /> 詳細はこちら</a></td> <td width="460"> <h2>■</h2> <p>■</p> <p class="minibt"><a href="■"><span>■</span></a></p> </td> </tr> <tr> <th width="100">2位</th> <td><a href="■"><img src="images/serviceimage.png" width="200" height="300" alt="■" /><br /> 詳細はこちら</a></td> <td> <h2>■</h2> <p>■</p> <p class="minibt"><a href="■"><span>■</span></a></p> </td> </tr> <tr> <th width="100">3位</th> <td><a href="■"><img src="images/serviceimage.png" width="200" height="300" alt="■" /><br /> 詳細はこちら</a></td> <td> <h2>■</h2> <p>■</p> <p class="minibt"><a href="■"><span>■</span></a></p> </td> </tr> <tr> <th>4位</th> <td><a href="■"><img src="images/serviceimage.png" width="200" height="300" alt="■" /><br /> 詳細はこちら</a></td> <td> <h2>■</h2> <p>■</p> <p class="minibt"><a href="■"><span>■</span></a></p> </td> </tr> <tr> <th>5位</th> <td><a href="■"><img src="images/serviceimage.png" width="200" height="300" alt="■" /><br />◆ 詳細はこちら</a></td> <td> <h2>■</h2> <p>■</p> <p class="minibt"><a href="■"><span>■</span></a></p> </td> </tr> </table>

文章の右側に側に画像を置きたい場合文章の右側に側に画像を置きたい場合文章の右側に側に画像を置きたい場合文章の右側に側に画像を置きたい場合文章の右側に側に画像を置きたい場合文章の右側に側に画像を置きたい場合文章の右側に側に画像を置きたい場合文章の右側に側に画像を置きたい場合文章の右側に側に画像を置きたい場合文章の右側に側に画像を置きたい場合文章の右側に側に画像を置きたい場合文章の右側に側に画像を置きたい場合文章の右側に側に画像を置きたい場合文章の右側に側に画像を置きたい場合文章の右側に側に画像を置きたい場合文章の右側に側に画像を置きたい場合文章の右側に側に画像を置きたい場合文章の右側に側に画像を置きたい場合文章の右側に側に画像を置きたい場合文章の右側に側に画像を置きたい場合文章の右側に側に画像を置きたい場合文章の右側に側に画像を置きたい場合文章の右側に側に画像を置きたい場合文章の右側に側に画像を置きたい場合文章の右側に側に画像を置きたい場合文章の右側に側に画像を置きたい場合

<p class="fr"><a href="■"><img src="images/sample.png" width="200" height="200" alt="■" /></a></p>

文章の左側に側に画像を置きたい場合文章の左側に側に画像を置きたい場合文章の左側に側に画像を置きたい場合文章の左側に側に画像を置きたい場合文章の左側に側に画像を置きたい場合文章の左側に側に画像を置きたい場合文章の左側に側に画像を置きたい場合文章の左側に側に画像を置きたい場合文章の左側に側に画像を置きたい場合文章の左側に側に画像を置きたい場合文章の左側に側に画像を置きたい場合文章の左側に側に画像を置きたい場合文章の左側に側に画像を置きたい場合文章の左側に側に画像を置きたい場合文章の左側に側に画像を置きたい場合文章の左側に側に画像を置きたい場合文章の左側に側に画像を置きたい場合文章の左側に側に画像を置きたい場合文章の左側に側に画像を置きたい場合文章の左側に側に画像を置きたい場合文章の左側に側に画像を置きたい場合文章の左側に側に画像を置きたい場合文章の左側に側に画像を置きたい場合文章の左側に側に画像を置きたい場合文章の左側に側に画像を置きたい場合文章の左側に側に画像を置きたい場合

<p class="fl"><a href="■"><img src="images/sample.png" width="200" height="200" alt="■" /></a></p>

左側に画像を置いた場合、右側に画像を置いた場合、文章が短い場合は、連動してレイアウトが崩れてしまう可能性があります。
その場合は、以下の、コードを連動してほしくないものの手前に置いてください。

<br class="cl" />

<p class="fc"><a href="■"><img src="images/sample.png" width="200" height="200" alt="■" /></a></p>

<p class="fcb"><a href="■"><img src="images/sample.png" width="200" height="200" alt="■" /></a> </p>

■

<p class="tx-r">■</p>

■

<p class="fc">■</p>

• ■
• ■

<ul class="ch"> <li>■</li> <li>■</li> </ul>

■

<p class="bt"><a href="■"><span>■</span></a></p>

■

<p class="bigfontlink"><a href="■">■</a></p>

太字

<strong>■</strong>

赤い太字

<span class="red">■</span>

少し大きい赤い太字

<span class="red-big">■</span>

黄色くハイライト

<span class="ybg">■</span>

黄色くハイライトして太字にする

<strong class="ybg">■</strong>

黄色くハイライトして少し大きくする

<span class="ybg-big">■</span>

黄色くハイライトして少し大きく太字にする

<strong class="ybg-big">■</strong>

少し大きく黄色くハイライトした赤いふと文字

<span class="ybg-r">■</span>

アンダーライン

<span class="underline">■</span>