目次
動画解説
1.サイドバーとは？
※クリックすると画像が大きくなります。
サイト左側にあるメニューや各ページへアクセスする為のバナーなどを配置するスペースです。
2.サイドバーのソースコード
※クリックすると画像が大きくなります。
対応しているソースコードは上記の画像の通りとなっています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!--▼ページ左部コンテンツー開始--> <!--▼サイドバー--> <div class="side"> <div class="side_top"><img src="img/koukoku.png" alt=""/></div> <div class="lefts"> <!--▼サイドメニュー--> <div class="about"> <div class="read">メニュー</div> <ul class="about"> <li class="dai"><a href="index.html">トップページ</a></li> <li class="dai"><a href="sitemap.html">サイトマップ</a></li> <li class="dai"><a href="company.html">運営者情報</a></li> </ul> </div> <!--▲サイドメニュー--> <!--▼バナー画像--> <div class="read"> 目的別で選ぶ</div> <div class="ban"> <ul> <li class="yaji"><a href="#"><img src="images/baner1.png" alt="タイトル"/></a></li> </ul> <ul> <li class="yaji"><a href="#"><img src="images/baner2.png" alt="タイトル"/></a></li> </ul> <ul> <li class="yaji"><a href="#"><img src="images/baner3.png" alt="タイトル"/></a></li> </ul> <!--▲バナー画像--> <div class="about"> <div class="read">コラム</div> <ul class="about"> <li class="dai"><a href="#">Page1</a></li> </ul> </div> </div> <div class="fluid koukoku" style="text-align:center; margin-bottom:15px;"><img src="img/koukoku2.png" alt=""/></div> </div> </div> <!--▲サイドバー--> <!--▲ページ左部コンテンツ終了--> |
上記が実際のソースコードです。
3.広告スペースの変更をする
|
1 2 3 4 |
<!--▼サイドバー--> <div class="side"> <div class="side_top"><img src="img/koukoku.png" alt=""/></div> <div class="lefts"> |
|
1 |
<img src="img/koukoku.png" alt=""/> |
ここの部分をアフィリエイト運営会社から配布されるタグに書き換えて下さい。
【例】
|
1 2 3 4 5 6 7 |
<!--▼サイドバー--> <div class="side"> <div class="side_top"><a href="http://px.a82.net/svt/ejp?a8mat=dsggreFDFGREG" target="_blank"> <img border="0" width="250" height="250" alt="" src="http://www22.a82.net/svt/bgt?aid=141020416454&wid=049&eno=01&mid=s99999981174123&mc=1"> </a> <img border="0" width="1" height="1" src="http://www10.a82.net/0.gif?a8mat=sfdfds2GFGF+51" alt=""></div> <div class="lefts"> |
画像サイズは、正方形もしくは正方形に出来るかぎり近い形のバナーを選択して下さい。（320×250)なども可。横長のバナーなどを入れると全体の表示が崩れる可能性があります。
4.メニューの追加・変更をする
メニューは各ページへアクセスする為のリンクです。HTMLを編集する事により自由に追加・編集が可能です。
■サイドバーソースコードの7行目～12行目です。
|
1 2 3 4 5 6 7 8 9 10 |
<!--▼サイドメニュー--> <div class="about"> <div class="read">メニュー</div> <ul class="about"> <li class="dai"><a href="index.html">トップページ</a></li> <li class="dai"><a href="sitemap.html">サイトマップ</a></li> <li class="dai"><a href="company.html">運営者情報</a></li> </ul> </div> <!--▲サイドメニュー--> |
上記がメニュー部分のソースコードです。
■変更例
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!--▼サイドメニュー--> <div class="about"> <div class="read">サイトメニュー</div> <ul class="about"> <li class="dai"><a href="index.html">トップページ</a></li> <li class="dai"><a href="ranking.html">ランキング</a></li> <li class="dai"><a href="mokuteki.html">目的別ランキング</a></li> <li class="dai"><a href="colum.html">コラム</a></li> <li class="dai"><a href="company.html">会社情報</a></li> </ul> </div> <!--▲サイドメニュー--> |
黄色の部分は変更箇所です。このように変更する事によりメニューの追加や変更が可能です。
5.バナー画像の追加・変更をする。
■コメントアウト<!–▼バナー画像–>で始まる部分です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!--▼バナー画像--> <div class="read"> 目的別で選ぶ</div> <div class="ban"> <ul> <li class="yaji"><a href="#"><img src="images/baner1.png" alt="タイトル"/></a></li> </ul> <ul> <li class="yaji"><a href="#"><img src="images/baner2.png" alt="タイトル"/></a></li> </ul> <ul> <li class="yaji"><a href="#"><img src="images/baner3.png" alt="タイトル"/></a></li> </ul> <!--▲バナー画像--> |
上記がバナー画像部分のソースコードです。
■変更例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!--▼バナー画像--> <div class="read"> 目的別ランキング</div> <div class="ban"> <ul> <li class="yaji"><a href="sokujitu.html"><img src="images/baner1.png" alt="即日発行ランキング"/></a></li> </ul> <ul> <li class="yaji"><a href="setuyaku.html"><img src="images/baner2.png" alt="節約カードランキング"/></a></li> </ul> <ul> <li class="yaji"><a href="ryokou.html"><img src="images/baner3.png" alt="旅行で使えるランキング"/></a></li> </ul> <ul> <li class="yaji"><a href="etc.html"><img src="images/baner4.png" alt="ETCカードランキング"/></a></li> </ul> <!--▲バナー画像--> |
①作成したページへのリンクを設定します。→【<a href="ryokou.html">】
②イメージバナーのタイトルを変更します。
③バナー工房等で作成したバナー画像を、同じ名前で上書き保存します。→【<img src="images/baner3.png" alt="旅行で使えるランキング"/>】
6.ファイルの上書き保存をする
※クリックすると画像が大きくなります。
TeraPadの矢印部分『ファイル』をクリックします。
※クリックすると画像が大きくなります。
TeraPadの矢印部分『上書き保存』をクリックします。
以上で、編集されたファイルが出来上がりました。
以上で、編集されたファイルが出来上がりました。