サイドバーの編集作業

目次

動画解説

1.サイドバーとは?

s2

※クリックすると画像が大きくなります。

サイト左側にあるメニューや各ページへアクセスする為のバナーなどを配置するスペースです。

2.サイドバーのソースコード

s1

※クリックすると画像が大きくなります。

対応しているソースコードは上記の画像の通りとなっています。
上記が実際のソースコードです。

3.広告スペースの変更をする

s3

 

ここの部分をアフィリエイト運営会社から配布されるタグに書き換えて下さい。

【例】

画像サイズは、正方形もしくは正方形に出来るかぎり近い形のバナーを選択して下さい。(320×250)なども可。横長のバナーなどを入れると全体の表示が崩れる可能性があります。

4.メニューの追加・変更をする

s4

メニューは各ページへアクセスする為のリンクです。HTMLを編集する事により自由に追加・編集が可能です。

サイドバーソースコードの7行目~12行目です。

上記がメニュー部分のソースコードです。

■変更例

黄色の部分は変更箇所です。このように変更する事によりメニューの追加や変更が可能です。

5.バナー画像の追加・変更をする。

s5

■コメントアウト<!–▼バナー画像–>で始まる部分です。

 

上記がバナー画像部分のソースコードです。

■変更例

①作成したページへのリンクを設定します。→【<a href="ryokou.html">】
②イメージバナーのタイトルを変更します。
バナー工房等で作成したバナー画像を、同じ名前で上書き保存します。→【<img src="images/baner3.png" alt="旅行で使えるランキング"/>】

6.ファイルの上書き保存をする

s5
※クリックすると画像が大きくなります。

TeraPadの矢印部分『ファイル』をクリックします。

s6

※クリックすると画像が大きくなります。

TeraPadの矢印部分『上書き保存』をクリックします。
以上で、編集されたファイルが出来上がりました。

 

コメントを残す