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

HTML作成が初めての方等、ソースを貼りつけても良く分からないと言う方は、こちらから貼り付けて使ってみてください。
→ 少し上級者向け素材コード一覧を、使ってみてください。

---

【基本的な使い方】
※タグにはそれぞれ、解説が入っています。埋め込む際は、解説を削除したうえでご自身の置きたい文言を入れてお使いください。
黄色い背景のテキストボックスの中がソースになります。

---

【PDFの文章作成のひな形部分がコピーできない方へ】
ひな形を利用して文章を作成したいのに、コピーが出来ない場合は、こちらをお試しください。

▼基本の見出し▼

見出しの文言を入力してください

<h2><strong>見出しの文言を入力してください</strong></h2>

見出しの途中に改行を入れてもそれなりに見えます。

見出しの文言を入力してください
改行タグも入れられますよ。
ある程度の行数までは対応してます。

このぐらいまでなら大丈夫です。

 

---

▼アイキャッチの無い見出し▼

見出し（アイキャッチ無し）の文言を入力してください。

<h2>見出し（アイキャッチ無し）の文言を入力してください。</h2>

---

▼段落タグの例です。 http://tool.muzin.org/pbr/ 　等でpタグ付きの文章に自動変換できます。▼

段落文章を入れてください余った場合は削除してください。

段落文章を入れてください余った場合は削除してください。

段落文章を入れてください余った場合は削除してください。

段落文章を入れてください余った場合は削除してください。

段落文章を入れてください余った場合は削除してください。

<p>段落文章を入れてください余った場合は削除してください。</p> <p>段落文章を入れてください余った場合は削除してください。</p> <p>段落文章を入れてください余った場合は削除してください。</p> <p>段落文章を入れてください余った場合は削除してください。</p> <p>段落文章を入れてください余った場合は削除してください。</p>

---

▼改行方法例<br />で改行されます。置かないと改行されません。　http://tool.muzin.org/pbr/　でも改行タグ挿入可能です。▼

改
行

<p>改<br /> 行</p>

---

▼テーブル例　th や tdのなかに、様々な物を置く事が出来ます。少し難しいかもしれませんが思考錯誤して使ってみてください。▼

1位	詳細はこちら	ここに案件名。 ここにUSPを書く。ランキング1位はなるべく多く書く。 ボタンの名を入力してください
2位	詳細はこちら	ここに案件名 ここにUSPを書く。ランキング2位の商品もたまに売れるので、しっかりとUSPを書く。でも、1位より目立たないように気をつける。2位の商品の特徴まで書き終わった時点で、しっかりと1位が目立っているか確認する。 ボタンの名を入力してください
3位	詳細はこちら	ここに案件名 ここにUSPを書く。このあたりからランキングサイトでは、いわゆる当て馬。アクションもほとんど発生しないので、手を抜きすぎない程度にさらっと紹介しておく。 ボタンの名を入力してください
4位	詳細はこちら	ここに案件名 ここにUSPを書く。当て馬2合なので、適当に書く。 ボタンの名を入力してください
5位	詳細はこちら	ここに案件名 ここにUSPを書く。当て馬3号なので、適当に書く。 ボタンの名を入力してください

<table border="0" cellspacing="0" cellpadding="0" class="ranktable"> <!-- 段――――――――――――――― --> <tr> <th width="100">1位</th> <td width="200"><a href="アフィリエイトリンク等飛び先のURLを入れます"><img src="images/商品画像等のファイル名（ファイルの種類も含めた【例】xxx.jpg等）を入力してください" width="200" height="300" alt="画像の説明" /><br /> 詳細はこちら</a></td> <td width="460"><h2>ここに案件名。</h2> <p>ここにUSPを書く。ランキング1位はなるべく多く書く。</p> <p class="minibt"><a href="アフィリエイトリンク等飛び先のURLを入れます"><span>ボタンの名を入力してください</span></a></p> </td> </tr> <!-- 段――――――――――――――― --> <tr> <th width="100">2位</th> <td><a href="アフィリエイトリンク等飛び先のURLを入れます"><img src="images/商品画像等のファイル名（ファイルの種類も含めた【例】xxx.jpg等）を入力してください" width="200" height="300" alt="画像の説明" /><br /> 詳細はこちら</a></td> <td><h2>ここに案件名</h2> <p>ここにUSPを書く。ランキング2位の商品もたまに売れるので、しっかりとUSPを書く。でも、1位より目立たないように気をつける。2位の商品の特徴まで書き終わった時点で、しっかりと1位が目立っているか確認する。</p> <p class="minibt"><a href="アフィリエイトリンク等飛び先のURLを入れます"><span>ボタンの名を入力してください</span></a></p> </td> </tr> <!-- 段――――――――――――――― --> <tr> <th width="100">3位</th> <td><a href="アフィリエイトリンク等飛び先のURLを入れます"><img src="images/商品画像等のファイル名（ファイルの種類も含めた【例】xxx.jpg等）を入力してください" width="200" height="300" alt="画像の説明" /><br /> 詳細はこちら</a></td> <td><h2>ここに案件名</h2> <p>ここにUSPを書く。このあたりからランキングサイトでは、いわゆる当て馬。アクションもほとんど発生しないので、手を抜きすぎない程度にさらっと紹介しておく。</p> <p class="minibt"><a href="アフィリエイトリンク等飛び先のURLを入れます"><span>ボタンの名を入力してください</span></a></p> </td> </tr> <!-- 段――――――――――――――― --> <tr> <th>4位</th> <td><a href="アフィリエイトリンク等飛び先のURLを入れます"><img src="images/商品画像等のファイル名（ファイルの種類も含めた【例】xxx.jpg等）を入力してください" width="200" height="300" alt="画像の説明" /><br /> 詳細はこちら</a></td> <td><h2>ここに案件名</h2> <p>ここにUSPを書く。当て馬2合なので、適当に書く。</p> <p class="minibt"><a href="アフィリエイトリンク等飛び先のURLを入れます"><span>ボタンの名を入力してください</span></a></p> </td> </tr> <!-- 段――――――――――――――― --> <tr> <th>5位</th> <td><a href="アフィリエイトリンク等飛び先のURLを入れます"><img src="images/商品画像等のファイル名（ファイルの種類も含めた【例】xxx.jpg等）を入力してください" width="200" height="300" alt="画像の説明" /><br /> 詳細はこちら</a></td> <td><h2>ここに案件名</h2> <p>ここにUSPを書く。当て馬3号なので、適当に書く。</p> <p class="minibt"><a href="アフィリエイトリンク等飛び先のURLを入れます"><span>ボタンの名を入力してください</span></a></p></td> </tr> <!-- 段――――――――――――――― --> </table>

テーブルタグについて、詳しくご存じない方は、こちらを参考にされてください。

ランキングテーブルの詳しい取り扱い解説ページ。

---

▼画像を文章の横に置く例です。コードは右に移動する画像のみです。このコードの後に続く文章そのほか諸々左側に行きます▼

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

<p class="fr"><a href="アフィリエイトリンク等飛び先のURLを入れます"><img src="images/商品画像等のファイル名（ファイルの種類も含めた【例】xxx.jpg等）を入力してください" width="200" height="200" alt="画像の説明" /></a></p>

---

▼画像を文章の横に置く例です。コードは左に移動する画像のみです。このコードの後に続く文章諸々右側に行きます▼

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

<p class="fl"><a href="アフィリエイトリンク等飛び先のURLを入れます"><img src="images/商品画像等のファイル名（ファイルの種類も含めた【例】xxx.jpg等）を入力してください" width="200" height="200" alt="画像の説明" /></a></p>

---

▼文章以外のものが、横に行く画像を置いた事でつられてしまう時は、つられて欲しくないもののまえにコードを置くとつられません▼

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

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

例えば、<br class="cl" />が入ってないとこの見出しのようになります。

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

文章の左側に側に画像を置きたい場合文章の左側に側に画像を置きたい場合文章の左側に側に画像を置きたい場合文章の左側に側に画像を置きたい場合文章の左側に側に画像を置きたい場合文章の左側に側に画像を置きたい場合文章の左側に側に画像を置きたい場合文章の左側に側に画像を置きたい場合文章の左側に側に画像を置きたい場合文章の左側に側に画像を置きたい場合文章の左側に側に画像を置きたい場合文章の左側に側に画像を置きたいこの辺のソース上に<br class="cl" />がはいってます。ソースを表示するとこのへんにあります。→

手前に、<br class="cl" />が入っていれば大丈夫です。

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

<br class="cl" />

---

▼画像を中心に置きたい時はこれ！▼

<p class="fc"><a href="アフィリエイトリンク等飛び先のURLを入れます"><img src="images/商品画像等のファイル名（ファイルの種類も含めた【例】xxx.jpg等）を入力してください" width="200" height="200" alt="画像の説明" /></a></p>

---

▼画像を中心に置いて、サイトいっぱいに広がる枠を付けたい時はこれ！▼

<p class="fcb"><a href="アフィリエイトリンク等飛び先のURLを入れます"><img src="images/商品画像等のファイル名（ファイルの種類も含めた【例】xxx.jpg等）を入力してください" width="200" height="200" alt="画像の説明" /></a> </p>

---

▼文字を右に置きたい時はこれ！▼

文言を入力してください

<p class="tx-r">文言を入力してください</p>

---

▼文字を中心に置きたい時はこれ！▼

文言を入力してください

<p class="fc">文言を入力してください</p>

---

▼ブレットと呼ばれるチェックマークを置きたい時はこちら！▼

• 文言を入力してくださいチェックボックスの付いた項目を増やしたい場合は<li>から</li>を増やしてください。
• 文言を入力してくださいチェックボックスの付いた項目を増やしたい場合は<li>から</li>を増やしてください。

<ul class="ch"> <li>文言を入力してくださいチェックボックスの付いた項目を増やしたい場合は&lt;li&gt;から&lt;/li&gt;を増やしてください。</li> <li>文言を入力してくださいチェックボックスの付いた項目を増やしたい場合は&lt;li&gt;から&lt;/li&gt;を増やしてください。</li> </ul>

---

▼17文字程度入る大きなボタンを置きたい時はこれ！▼

大ボタンの文言を入力してください。

<p class="bt"><a href="アフィリエイトリンク等飛び先のURLを入れます"><span>大ボタンの文言を入力してください。</span></a></p>

---

▼中心に大きな文字でリンクを貼りたい時はこれ！文言途中に改行を入れる事も出来ます。▼

大きいテキストリンクの文言を入力してください。

<p class="bigfontlink"><a href="アフィリエイトリンク等飛び先のURLを入れます">大きいテキストリンクの文言を入力してください。</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>