ものぐさ父さんの子育て

超簡単トップページの作り方

超簡単トップページの作り方

テキスト中心のトップページの作り方の例

以下の HTML の記述は、直接楽天広場のトップページ編集欄で行ってももちろん構いませんが、あとあとの更新作業を考えるとエディターを使った方がいいと思います。Windows では、メモ帳などで十分です。ワープロソフトでテキストファイルとして保存してももちろん構いません。記述した HTML は、ウェブブラウザーにドラッグ&ドロップあるいは、ウェブブラウザーから作成したテキストファイルを開くことで確認できます。ただし、楽天のトップページでは、もともとテーブルタグなどで横幅が決まっているようなので、ウェブブラウザーでテキストファイルを確認した場合とはレイアウトがやや異なりますのでご注意下さい。

1. メニュースペースの作成
僕が使っている楽天のデザインでは、<h3></h3>でテキストをはさむと他の項目と一貫性のあるデザインの表題になることが偶然わかったので、ここに****(トップページの名前)メニューなどと書きます。CSS のことはよく知りませんが、おそらく楽天のデザインの中に CSS が定義されているのでしょう。
ものぐさ父さんのトップページの場合、以下のように記述してあります。

<h3>ものぐさ父さん・メニュー</h3>


2. リンク先のコピー
サイドバーにある各フリーページにカーソルをあわせ、右クリックして「リンク先をクリップボードに保存」する(Macintosh 上で Safari を使った場合。Windows でも操作は一緒です。確か似たような表現だったと思います。)
これを<a href="と ">の間にコピーします。さらにその後、リンク先のページ名を記述し、</a>で閉じます。ものぐさ父さんのトップページの場合、以下のように記述されています。

<a href="http://plaza.rakuten.co.jp/monogusa103/3000>ものぐさ父さんのおすすめ絵本</a>

このテキストリンクの下に各ページの内容を紹介したいのであれば、改行タグ(<br>)に続けてページの説明文を記述して下さい。次のテキストリンクと行を変えるために再び改行タグ(<br>)を加えてお終いです。
あとは、この操作を作成済みのフリーページの数だけ繰り返します。単純な、テキストリンクですのであらかじめメニューに載せたいフリーページ数がわかっている必要もありませんし、メニュー項目の追加も簡単です。

3. バナーの追加(オプション)
テキストベースのメニューだけでは、寂しいという人には小さめの楽天オフィシャルバナーのペーストをおすすめします。もちろん、ショップのリンクでも構いません。ものぐさ父さんのトップページの場合、楽天ブックスの小さめのバナーを張り付けています。張り付ける HTML の記述は、アフィリエイトのページからたどっていけば見つかりますので、好きなバナーを選んで必要な HTML をコピー&ペーストして下さい。
以上の記述を終了したら、作成したテキストファイルを保存して下さい。拡張子は、TXT または HTM がいいでしょう。前者の場合には、ダブルクリックでテキストファイルエディタでが開きますが、後者の場合はデフォルトのウェブブラウザーで開くことになります。後者のテキストファイルを編集する場合には、メモ帳などのエディターから開くか、直接エディターに作成したテキストファイルをドラッグ&ドロップすることで編集することができます。
以下に実際のものぐさ父さんのトップページに張り付けてある HTML を転記してみました。

<h3>ものぐさ父さん・メニュー</h3> <p><a href="http://plaza.rakuten.co.jp/monogusa103/2000">
<font size="-1">
子供たちに買ってやりたいおもちゃ</a><br>
ものぐさ父さんが選んだおもちゃです。これまでの経験から男の子が喜ぶおもちゃ、女の子が喜ぶおもちゃを独断と偏見でピックアップしました。<br>
</font>
<a href="http://plaza.rakuten.co.jp/monogusa103/3000">
ものぐさ父さんのおすすめ絵本</a><br>
<font size="-1">
長男が生まれたときにたてた教育方針は、とにかく本が好きな子供に育てようでした。ものぐさな父さんもこれだけは、実践してきました。これまでに読んで聞かせた絵本から子供たちに人気だった絵本をピックアップしました。
</font><br>
</p><center>
<a href="http://pt.afl.rakuten.co.jp/c/004abb21.52c72150/?url=http%3a%2f%2fbooks.rakuten.co.jp%2fRBOOKS%2findex.html" target="_blank"><img src="http://image.rakuten.co.jp/com/inc/directory-afl/200162/img/2004/0401/224x33_books1.gif" border=0 alt="楽天ブックストップページ"></a>


© Rakuten Group, Inc.
X

Mobilize your Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: