アフィリエイト
ランキング
サイトマップ
ホーム

初心者でもアフィリエイトで副業

PR
スポンサーサイト [スポンサー広告]  [--/-- --]
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

メニューを作る
ブログで記事を見ていて、不便に思った事は何ですか?
知りたい情報へ直ぐにアクセスできない事、ありませんか?

役に立つ記事も何処にあるのか分からなければ、意味がありません
このブログも、左メニューにアフィリエイト入門のメニューを追加する事で
記事を読んでくれる率がかなり上がりました。

と言う事で、今回はメニューの付け方を説明します



まず何をすれば良い?
メニューを追加するという事は、ブログのHtmlとスタイルシートも変更する事になります
Htmlは、アフィリエイト入門のHTML?で説明した知識で十分間に合います
スタイルシート?と言う方も多いと思うので、スタイルシートに付いて軽く説明します
スタイルシート?
スタイルシートとは、ブログやホームページの見た目を指定する物です
例えば、文字の大きさ、背景の色、枠線、リンクの色、などを指定して
好みのデザインに変える事ができます

スタイルシートの記述方法は3つあります
・Htmlの好きなところへ書く
・Htmlの<Head>~</Head>の間にまとめて書く
・外部ファイルに書く

記述方は下に行くほど優先順位は低くなります
例えば、外部ファイルでタイトルの文字色を赤に指定します
その後でHtml内でタイトルの色を青に指定すると、タイトルは青で表示されます

では実際にスタイルシートを使って文字の色を変えて見ます
<div style="color:blue">これが青で表示されます</div>と書くと
これが青で表示されます
と表示されます

「style=」以降には;で区切る事で複数プロパティを指定できます
<div style="color:white;background-color:red">こうなります</div> と書くと
こうなります
colorプロパティで文字色を指定し、background-colorプロパティで背景色を指定しています
プロパティの種類を調べるのはHTMLクイックリファレンスさんが非常に使いやすいです
メニュー
更にスタイルシートを勉強したい方は、見る人に優しいウェブ作成とほほのWWW入門など
素晴らしいホームページがあります

と言う事でスタイルシートの説明はこれ位にして、メニュー作成に入ります
今回は「Htmlの好きなところへ書く」インラインと言う記述方で記述します

サンプルとしてメニューのソースを載せておきます
サンプルを色々編集して自分好みのメニューを作ってみて下さい
・使い方
下のHtmlをコピーし、テンプレートのHtmlへ貼り付け編集して下さい
*貼り付け方は広告と変わらないので、当ブログのサイドメニューに広告を参照して下さい

サイズの変更
width:20%の20%を好きな数値に書き換えます
色の変更
色の指定部分は
color:#ffffff; 文字色
background-color:#FFBA22; 背景色
border-color:#FFE9BB 線の色

リンクの挿入
Htmlの「メニュー1」を好きな文字に書き換えます
書き換えた文字にリンクを貼ってください
例えば、<a href="リンク先のUrl">サイトマップ</a>
サンプル
メニュー1
メニュー2
メニュー3
Htmlには下記のように書かれています、同じものを3つ並べただけです
プロパティが見やすいように一つ置きに色をつけています
<DIV style="width:20%;color:#ffffff;font-size:115%;font-weight:bolder;background-color:#FFBA22;margin-top:15px;margin-bottom:0px;border-width:2px;border-style:groove solid none solid;border-color:#FFE9BB;">メニュー1</div>
<DIV style="width:20%;color:#ffffff;font-size:115%;font-weight:bolder;background-color:#FFBA22;margin-top:15px;margin-bottom:0px;border-width:2px;border-style:groove solid none solid;border-color:#FFE9BB;">メニュー2</div>
<DIV style="width:20%;color:#ffffff;font-size:115%;font-weight:bolder;background-color:#FFBA22;margin-top:15px;margin-bottom:0px;border-width:2px;border-style:groove solid none solid;border-color:#FFE9BB;">メニュー3</div>
メニュー見出し
・メニュー1
・メニュー2
・メニュー3
・メニュー4
見出しと、メニュー部分に分かれています
見出し部分
<DIV style="width:30%;color:#ffffff;font-size:115%;font-weight:bolder;background-color:#00B0FF;margin-top:15px;margin-bottom:0px;border-width:1px;border-style:solid solid none solid;border-color:#aaaaaa;">メニュー見出し</div>
メニュー部分
<DIV style="width:30%;font-weight:bolder;margin-top:0px;border-width:1px;border-style:solid solid solid solid;border-color:#aaaaaa;">・メニュー1<br>・メニュー2<br>・メニュー3<br>・メニュー4<br></div>

各メニューの文字を変更しリンクを貼ればメニューの出来上がりです
HTMLクイックリファレンスさんを見ながら色々と試して見ましょう

サンプルの説明
メニュー見出しとメニューに分かれている物の解説です
メニュー見出し
・メニュー1
・メニュー2
・メニュー3
・メニュー4
説明
メニュー見出し開始
メニューの幅
文字色
文字サイズ
文字の太さ
背景色
上スペース
下スペース
線の太さ
線の種類
線の色
見出し文字
メニュー見出し終了
メニュー開始
メニューの幅
文字の太さ
上スペース
線の太さ
線の種類
線の色
メニュー文字
メニュー文字
メニュー文字
メニュー文字
メニュー終了
ソース
<div style="
width:30%
color:#ffffff;
font-size:125%;
font-weight:bolder;
background-color:#00B0FF;
margin-top:15px;
margin-bottom:0px;
border-width:1px;
border-style:solid solid none solid;
border-color:#aaaaaa;">
メニュー見出し
</div>
<div style="
width:30%
font-weight:bolder;
margin-top:0px;
border-width:1px;
border-style:solid;
border-color:#aaaaaa;">
・メニュー1<br>
・メニュー2<br>
・メニュー3<br>
・メニュー4<br>
</div>

質問はコメントで受け付けています、気軽にどうぞ

次はカテゴリの折り畳みの説明です。 9 カテゴリの折り畳みへ⇒




スポンサード リンク




 
現在コメント投稿後URL欄に記入したURLが表示されませんが
管理人には見えていますのでご安心を

Trackback URL

http://ifs.blog5.fc2.com/tb.php/99-7732b88d


PR
PR
サイト内検索
カスタム検索
category
recent Entry
RssFeed

Subscribe in NewsGator Online Add 'ブログで副業アフィリエイト入門 - 雑 記 -' to Newsburst from CNET News.com Subscribe in Bloglines
other

Skin:Babyish-アフィリエイト
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。