テストページ_バナー挿入手順(wiki外URLリンク)
(版間での差分)
15行: | 15行: | ||
<div style="border:1px dotted #993333;padding:10px;margin:10px 0px;"> | <div style="border:1px dotted #993333;padding:10px;margin:10px 0px;"> | ||
− | + | <b>手順2</b>の htmlファイル<br> | |
<pre> | <pre> | ||
<a href="http://www.futoko.co.jp/" target="_blank"> | <a href="http://www.futoko.co.jp/" target="_blank"> | ||
22行: | 22行: | ||
</pre> | </pre> | ||
※<html><head><body>タグは必要ない。(wikiページの<body>タグの中に上記のHTMLが埋め込まれるため。)<br> | ※<html><head><body>タグは必要ない。(wikiページの<body>タグの中に上記のHTMLが埋め込まれるため。)<br> | ||
− | ※<a> | + | ※<a>タグのhref属性に<span style="color:#993333;">クリック先のURL</span>を入力。<br> |
− | ※<img> | + | ※<img>タグのsrc属性に<span style="color:#993333;">画像ファイルの保存先</span>を入力。<br> |
※文字化けする時は、htmlファイルの文字コードをUTF-8で保存してアップロードする。 | ※文字化けする時は、htmlファイルの文字コードをUTF-8で保存してアップロードする。 | ||
</div> | </div> | ||
36行: | 36行: | ||
手順3の"<span style="color:#993333;"><nowiki><HTMLet>htmlファイル名</HTMLet></nowiki></span>"を貼り付けてwikiページを再度保存すると、<br> | 手順3の"<span style="color:#993333;"><nowiki><HTMLet>htmlファイル名</HTMLet></nowiki></span>"を貼り付けてwikiページを再度保存すると、<br> | ||
手順2の<span style="color:#993333;">htmlファイル</span>の再アップロードがwikiページに反映される。 | 手順2の<span style="color:#993333;">htmlファイル</span>の再アップロードがwikiページに反映される。 | ||
+ | </p> | ||
+ | </div> | ||
+ | |||
+ | <div style="border:1px dotted #993333;padding:10px;margin:10px 0px;"> | ||
+ | <p> | ||
+ | <b>(このページの場合)</b><br> | ||
+ | "<span style="color:#993333;"><nowiki><HTMLet>htmlファイル名</HTMLet></nowiki></span>"から変換される<span style="color:#993333;"><a><img></span>タグはインライン要素なので、 | ||
+ | </p> | ||
+ | <p> | ||
+ | wiki編集画面で"<span style="color:#993333;"><nowiki><HTMLet>htmlファイル名</HTMLet></nowiki></span>"と"<span style="color:#993333;"><nowiki><HTMLet>htmlファイル名</HTMLet></nowiki></span>"の間に、<br> | ||
+ | "<span style="color:#993333;"><nowiki><br></nowiki></span>"か"<span style="color:#993333;">空行</span>"を入れる等しなければ、画像は横に並ぶ。 | ||
+ | </p> | ||
+ | <p> | ||
+ | 親要素に"<span style="color:#993333;">text-align:center;</span>"を付ければ中央揃えになる。 | ||
</p> | </p> | ||
</div> | </div> |
2011年7月29日 (金) 17:20時点における版
- 手順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/" target="_blank"> <img src="http://www.futoko.co.jp/zzimage/bnr_snp/bnr_snp001.jpg" alt="バナーサンプル001" border="0" width="200" height="60" hspace="0" vspace="0"> </a>
※<html><head><body>タグは必要ない。(wikiページの<body>タグの中に上記のHTMLが埋め込まれるため。)
※<a>タグのhref属性にクリック先のURLを入力。
※<img>タグのsrc属性に画像ファイルの保存先を入力。
※文字化けする時は、htmlファイルの文字コードをUTF-8で保存してアップロードする。
手順3を終えると、"(手順2の)htmlファイルを埋め込んだwikiページ"がサーバーに保存され、
これ以降、手順2のhtmlファイルを再アップロードするだけでは、wikiページに変化は無い。
手順3の"<HTMLet>htmlファイル名</HTMLet>"を切り取ってwikiページを1度保存、
手順3の"<HTMLet>htmlファイル名</HTMLet>"を貼り付けてwikiページを再度保存すると、
手順2のhtmlファイルの再アップロードがwikiページに反映される。
(このページの場合)
"<HTMLet>htmlファイル名</HTMLet>"から変換される<a><img>タグはインライン要素なので、
wiki編集画面で"<HTMLet>htmlファイル名</HTMLet>"と"<HTMLet>htmlファイル名</HTMLet>"の間に、
"<br>"か"空行"を入れる等しなければ、画像は横に並ぶ。
親要素に"text-align:center;"を付ければ中央揃えになる。