65行目~:メインコンテンツ

Posted: サン | カテゴリ: トップページ | 編集する

<!--ここからメインテーブルです-->
・・・
・・・
・・・
<!--ここまでがメインテーブル-->

までをカスタマイズしましょう!ここが一番の正念場です。がんばりましょう。

「続きを読む…」をクリックして、続きをご覧ください。

一箇所づつ完成させていきましょう。


1番上の項目

<div class="content">
<h3>更新情報</h3>
<div align="center">
<p>常連さんのために、パッと見えるところに更新情報を書いておいたほうがいいです。</p>
</div>
</div>

この部分が今どのように表示されているかというと、↓のとおりです。
メイン部分

見出しを変えるには<h3>~</h3>を変更すればOKです。
更新情報というタイトルを、例えば英語で「What's new」にしたければ、<h3>部を

<h3>What's new</h3>

とするだけでOKです。

さて、本文部ですがここにはテキストエリアテンプレートを使います。パーツテンプレートのページからお好きなテキストエリアテンプレートをコピーしてきてください。私は左上のものをコピーしてきました。このコピーしたものを<p>~</p>を消して、そこにペーストしてください。つまり↓のようになります。

<div class="content">
<h3>更新情報</h3>
<div align="center">
<textarea name="test" rows="7" cols="80" style="font-size: 12px;
background-color: #ffe8e8;
border-width: 0px;
scrollbar-3dlight-color:#ff6666;
scrollbar-track-color:#ffffff;
scrollbar-darkshadow-color:#ffcccc;
scrollbar-face-color:#ffffff;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#ffffff;
scrollbar-arrow-color:#ff0000;"
>
ここに書く
</textarea>
</div>
</div>

「ここに書く」という部分に、今後更新情報を書いていきます。


2番目のメイン部分

<div class="content">
<h3>お小遣いサイトについて</h3>
<div align="center">
<p>はじめての方のために、小遣いサイトの説明をサラッとします。</p>
</div>
</div>

2番目のメイン部です。この辺に小遣いサイトの説明を書いておくのがベストだと思います。<p>~</p>にずらずらと書いてください。例えばこんな風にです。↓

文例(コピーOK)

<div class="content">
<h3>お小遣いサイトについて</h3>
<div align="center">
<p>インターネットには、誰でも気軽にお小遣い稼ぎのできるサイトがあります。
もちろん、すべて無料で利用でき、お金がかかる事はありません。詳しくは「お小遣いサイトって?」のページをご覧くださいネ^^</p>
</div>
</div>

このように表示されます→メイン部分No,2

ただベタ打ちするだけでは、見にくいのでHTMLという言語を使うことをオススメします。すごく簡単なので、次にあげる3つのタグだけでも覚えておくと便利です。

覚えておくと便利なHTML

  • <BR>
         改行
  • <strong>~</strong>
         <strong>タグで囲まれた区間が太字になります。
  • <font color="red">~</font>
         <font>タグで囲まれた区間が赤文字になります。(blue、gray、orangeなども使えます。)

HTMLを使って書いてみました。

文例(コピーOK)

<div class="content">
<h3>お小遣いサイトについて</h3>
<div align="center">
<p>インターネットには、<font color="red"><strong>誰でも気軽にお小遣い稼ぎのできるサイト</strong></font>があります。<br>
もちろん、すべて無料で利用でき、お金がかかる事はありません。詳しくは「お小遣いサイトって?」のページをご覧くださいネ^^</p>
</div>
</div>

こんな風に表示されます→メイン部分No,2HTML版

※自分で文章を考えるのが面倒くさければ、この文章をコピーしても構いません。


3番目のメイン部

<div class="content">
<h3>特選情報</h3>
<div align="center">
<p>トップページで紹介単価の高いものを掲載するのが定石です。</p>
</div>
</div>

トップページで紹介単価の高いものを紹介しちゃいましょう。「特選情報」でなくて、「オススメ情報」などに書き換えても構いません。ご自由にどうぞ。

ここでの本文は、特選情報テンプレートを使って書くといいかもしれません。サンプルページでは、テンプレートNo,2を使いました。このテンプレートの使い方は、パーツテンプレートのページで解説しているので、そこでカスタマイズしてください。そして、カスマイズしたものを<p>~</p>を消して、その部分に貼り付ければ完成です。


項目を増やすには

基本形は↓です。項目を増やすときはこれに肉付けすればいいです。

<div class="content">
<h3>見出し</h3>
<div align="center">
<p>本文</p>
</div>
</div>
   

コメント・質問をどうぞ


クッキーを保存しますか?