|
|
|
テストページ＿バナー挿入手順（wiki外URLリンク）
提供: 不登校ウィキ・WikiFutoko | 不登校情報センター
（版間での差分）
| （1人の利用者による、間の19版が非表示） | |||
| 1行： | 1行： | ||
| − | + | <div style="text-align:center;"> | |
| − | + | ||
<HTMLet>bnr_snp001</HTMLet> | <HTMLet>bnr_snp001</HTMLet> | ||
| + | <HTMLet>bnr_snp001</HTMLet> | ||
| + | <HTMLet>bnr_snp001</HTMLet> | ||
| + | </div> | ||
;手順１ | ;手順１ | ||
| − | :<span style="color:#993333;">画像ファイル</span>（.jpg .jpeg .png .giif など）をサーバーにアップロードする。<br>※このページの画像のファイル名は"<span style="color:#336633;"> | + | :<span style="color:#993333;">画像ファイル</span>（.jpg .jpeg .png .giif など）をサーバーにアップロードする。<br>※このページの画像のファイル名は"<span style="color:#336633;">bnr_snp001.jpg</span>"<br>※このページの画像の保存先は、"<span style="color:#336633;"><nowiki>http://www.futoko.co.jp/zzimage/bnr_snp/</nowiki></span>bnr_snp001.jpg" |
| + | |||
;手順２ | ;手順２ | ||
| − | :<b>手順１</b>の画像ファイルにリンクした、<span style="color:#993333;">htmlファイル</span>（.html .htm）をサーバーにアップロードする。<br>※このページのhtmlファイルのファイル名は"<span style="color:#336633;"> | + | :<b>手順１</b>の画像ファイルにリンクした、<span style="color:#993333;">htmlファイル</span>（.html .htm）をサーバーにアップロードする。<br>※このページのhtmlファイルのファイル名は"<span style="color:#336633;">bnr_snp001.html</span>"<br>※このページの htmlファイルの保存先は、"<span style="color:#336633;"><nowiki>http://www.futoko.co.jp/zzmediawiki/extensions/HTMLets/htmlets/</nowiki></span>bnr_snp001.html" |
| + | |||
;手順３ | ;手順３ | ||
:wiki編集画面で、画像を入れたい場所に"<span style="color:#993333;"><nowiki><HTMLet>htmlファイル名</HTMLet></nowiki></span>"と入力してwikiページを保存する。<br>※"htmlファイル名"には拡張子（.html）を付けない | :wiki編集画面で、画像を入れたい場所に"<span style="color:#993333;"><nowiki><HTMLet>htmlファイル名</HTMLet></nowiki></span>"と入力してwikiページを保存する。<br>※"htmlファイル名"には拡張子（.html）を付けない | ||
<div style="border:1px dotted #993333;padding:10px;margin:10px 0px;"> | <div style="border:1px dotted #993333;padding:10px;margin:10px 0px;"> | ||
| − | + | <b>手順２</b>の htmlファイル<br> | |
<pre> | <pre> | ||
| − | + | <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 #;"> | |
| − | <img src="http://www.futoko.co.jp/ | + | </a> |
| − | + | ||
| − | + | ||
</pre> | </pre> | ||
| − | ※<html><head><body> | + | ※<html><head><body>タグは必要ない。（wikiページの<body>タグの中に上記のHTMLが埋め込まれるため。）<br> |
| − | + | ※<a>タグのhref属性に<span style="color:#993333;">クリック先のURL</span>を入力。<br> | |
| − | + | ※<img>タグのsrc属性に<span style="color:#993333;">画像ファイルの保存先</span>を入力。<br> | |
| + | ※<img>タグのwidth属性（画像の横幅）に<span style="color:#993333;">200（px）</span>height属性（画像の縦幅）に<span style="color:#993333;">60（px）</span>と入力。<br> | ||
| + | 元の画像と縦横比が変わる場合は<span style="color:#993333;">height="60"</span>に合わせてwidthの値を調節。<br> | ||
| + | 元の画像は<span style="color:#993333;">200×60pxより大きく</span>作っておくと綺麗。<br> | ||
| + | ※"<span style="color:#993333;">target="_blank"</span>"は使わない方がいいかも。<br> | ||
| + | ※文字化けする時は、htmlファイルの文字コードを<span style="color:#993333;">UTF-8</span>で保存してアップロードする。 | ||
</div> | </div> | ||
<div style="border:1px dotted #993333;padding:10px;margin:10px 0px;"> | <div style="border:1px dotted #993333;padding:10px;margin:10px 0px;"> | ||
<p> | <p> | ||
| − | <b>手順３</b> | + | <b>手順３</b>終了後、手順２の<span style="color:#993333;">htmlファイル</span>を再アップロードするだけでは、wikiページに変化は無い。<br> |
| − | + | １度編集画面に入ってページを保存し直すと、再アップロードが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> | ||
<p> | <p> | ||
| − | + | 親要素に"<span style="color:#993333;">text-align:center;</span>"を付ければ中央揃えになる。 | |
| − | + | ||
| − | + | ||
</p> | </p> | ||
</div> | </div> | ||
2011年10月8日 (土) 16:31時点における最新版
- 手順１
- 画像ファイル（.jpg .jpeg .png .giif など）をサーバーにアップロードする。
※このページの画像のファイル名は"bnr_snp001.jpg"
※このページの画像の保存先は、"http://www.futoko.co.jp/zzimage/bnr_snp/bnr_snp001.jpg"
- 手順２
- 手順１の画像ファイルにリンクした、htmlファイル（.html .htm）をサーバーにアップロードする。
※このページのhtmlファイルのファイル名は"bnr_snp001.html"
※このページの htmlファイルの保存先は、"http://www.futoko.co.jp/zzmediawiki/extensions/HTMLets/htmlets/bnr_snp001.html"
- 手順３
- wiki編集画面で、画像を入れたい場所に"<HTMLet>htmlファイル名</HTMLet>"と入力してwikiページを保存する。
※"htmlファイル名"には拡張子（.html）を付けない
手順２の 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で保存してアップロードする。
手順３終了後、手順２のhtmlファイルを再アップロードするだけでは、wikiページに変化は無い。
１度編集画面に入ってページを保存し直すと、再アップロードがwikiページに反映される。
（このページの場合）
"<HTMLet>htmlファイル名</HTMLet>"から変換される<a><img>タグはインライン要素なので、
wiki編集画面で"<HTMLet>htmlファイル名</HTMLet>"と"<HTMLet>htmlファイル名</HTMLet>"の間に、
"<br>"か"空行"を入れる等しなければ、画像は横に並ぶ。
親要素に"text-align:center;"を付ければ中央揃えになる。
