カスタム検索(不登校情報センターの全サイト内から検索)

 
Clip to Evernote  Twitterボタン  AtomFeed  このエントリーをはてなブックマークに追加  


テストページ_バナー挿入手順(wiki外URLリンク)

提供: 不登校ウィキ・WikiFutoko | 不登校情報センター
(版間での差分)
移動: 案内, 検索
 
(1人の利用者による、間の22版が非表示)
1行: 1行:
ページつくり直し中
+
<div style="text-align:center;">
 
+
<HTMLet>bnr_snp001</HTMLet>
<HTMLet>x1_img</HTMLet>
+
<HTMLet>bnr_snp001</HTMLet>
 +
<HTMLet>bnr_snp001</HTMLet>
 +
</div>
  
 
;手順1
 
;手順1
:<span style="color:#993333;">画像ファイル</span>(.jpg .jpeg .png .giif など)をサーバーにアップロードする。<br>※このページの画像のファイル名は"<span style="color:#336633;">x1.jpg</span>"<br>※このページの画像の保存先は、"<span style="color:#336633;"><nowiki>http://www.futoko.co.jp/abe_img/</nowiki></span>x1.jpg"
+
:<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"
 +
 
 
;手順2
 
;手順2
:<b>手順1</b>の画像ファイルにリンクした、<span style="color:#993333;">htmlファイル</span>(.html .htm)をサーバーにアップロードする。<br>※このページのhtmlファイルのファイル名は"<span style="color:#336633;">x1_img.html</span>"<br>※このページの htmlファイルの保存先は、"<span style="color:#336633;"><nowiki>http://www.futoko.co.jp/zzmediawiki/extensions/HTMLets/htmlets/</nowiki></span>x1_img.html"
+
:<b>手順1</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"
 +
 
 
;手順3
 
;手順3
 
: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>手順2</b>の htmlファイル↓<br>
+
<b>手順2</b>の htmlファイル<br>
 
<pre>
 
<pre>
<div style="text-align:center;margin:;">
+
<a href="http://www.futoko.co.jp/">
<!--<a href="" target="_blank">-->
+
<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/abe_img/x1.jpg" alt="テスト画像1" border="0" width="400" height="300" hspace="0" vspace="0">
+
</a>
<!--</a>-->
+
</div>
+
 
</pre>
 
</pre>
※<html><head><body>タグは必要ない。<img>タグだけでも良い。<br>
+
※<html><head><body>タグは必要ない。(wikiページの<body>タグの中に上記のHTMLが埋め込まれるため。)<br>
 (wikiページの<body>タグの中に上記のHTMLが埋め込まれるため。)<br>
+
※<a>タグのhref属性に<span style="color:#993333;">クリック先のURL</span>を入力。<br>
※文字化けする時は、htmlファイルの文字コードをUTF-8で保存してアップロードする。
+
<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>手順3</b>を終えると、"<span style="color:#993333;">(手順2の)htmlファイルを埋め込んだwikiページ</span>"がサーバーに保存され、<br>
+
<b>手順3</b>終了後、手順2の<span style="color:#993333;">htmlファイル</span>を再アップロードするだけでは、wikiページに変化は無い。<br>
これ以降、手順2の<span style="color:#993333;">htmlファイル</span>を再アップロードするだけでは、wikiページに変化は無い。<br>
+
1度編集画面に入ってページを保存し直すと、再アップロードが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>
手順3の"<span style="color:#993333;"><nowiki><HTMLet>htmlファイル名</HTMLet></nowiki></span>"を切り取ってwikiページを1度保存、<br>
+
親要素に"<span style="color:#993333;">text-align:center;</span>"を付ければ中央揃えになる。
手順3の"<span style="color:#993333;"><nowiki><HTMLet>htmlファイル名</HTMLet></nowiki></span>"を貼り付けてwikiページを再度保存すると、<br>
+
手順2の<span style="color:#993333;">htmlファイル</span>の再アップロードがwikiページに反映される。
+
 
</p>
 
</p>
 
</div>
 
</div>

2011年10月8日 (土) 16:31時点における最新版

 バナーサンプル001  バナーサンプル001  バナーサンプル001

手順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;"を付ければ中央揃えになる。



さくらメンタルクリニック

個人用ツール
名前空間
変種
操作
案内
地域
不登校情報センター
イベント情報
学校・教育団体
相談・支援・公共機関
学校・支援団体の解説
情報・広告の掲載
体験者・当事者
ショップ
タグの索引
仕事ガイド
ページの説明と構造
ツールボックス