テストページ_バナー挿入手順(wiki外URLリンク)
提供: 不登校ウィキ・WikiFutoko | 不登校情報センター
- 手順1
- 画像ファイル(.jpg .jpeg .png .giif など)をサーバーにアップロードする。
※このページの画像のファイル名は"bnr_snp001.jpg"
※このページの画像の保存先は、"http://www.futoko.co.jp/zzimage/bnr_snp/bnr_snp001.jpg"
- 手順2
- 手順1の画像ファイルにリンクした、htmlファイル(.html .htm)をサーバーにアップロードする。
※このページのhtmlファイルのファイル名は"bnr_snp001.html"
※このページの htmlファイルの保存先は、"http://www.futoko.co.jp/zzmediawiki/extensions/HTMLets/htmlets/bnr_snp001.html"
- 手順3
- wiki編集画面で、画像を入れたい場所に"<HTMLet>htmlファイル名</HTMLet>"と入力してwikiページを保存する。
※"htmlファイル名"には拡張子(.html)を付けない
手順2の htmlファイル
<a href="http://www.futoko.co.jp/"> <img src="http://www.futoko.co.jp/zzimage/bnr_snp/bnr_snp001.jpg" alt="バナーサンプル001" width="200" height="60" style="border: 0px solid #;"> </a>
※<html><head><body>タグは必要ない。(wikiページの<body>タグの中に上記のHTMLが埋め込まれるため。)
※<a>タグのhref属性にクリック先のURLを入力。
※<img>タグのsrc属性に画像ファイルの保存先を入力。
※<img>タグのwidth属性(画像の横幅)に200(px)height属性(画像の縦幅)に60(px)と入力。
元の画像と縦横比が変わる場合はheight="60"に合わせてwidthの値を調節。
元の画像は200×60pxより大きく作っておくと綺麗。
※"target="_blank""は使わない方がいいかも。
※文字化けする時は、htmlファイルの文字コードをUTF-8で保存してアップロードする。
手順3終了後、手順2のhtmlファイルを再アップロードするだけでは、wikiページに変化は無い。
1度編集画面に入ってページを保存し直すと、再アップロードがwikiページに反映される。
(このページの場合)
"<HTMLet>htmlファイル名</HTMLet>"から変換される<a><img>タグはインライン要素なので、
wiki編集画面で"<HTMLet>htmlファイル名</HTMLet>"と"<HTMLet>htmlファイル名</HTMLet>"の間に、
"<br>"か"空行"を入れる等しなければ、画像は横に並ぶ。
親要素に"text-align:center;"を付ければ中央揃えになる。