|
このブログや掲示板ではタグの利用が出来ますので、文字や画像にリンクを付けて
大きな画像や、PDFのような書類や、音楽・ビデオなどへ誘導することができます。
文字色や文字の大きさを変えるなどのデザインをつけることも簡単です。
タグを上手に使うことで面白くて楽しい日記や掲示板にすることができます。
ここに一般的な利用法を掲載しておきますのでご利用下さい。
*赤文字で表記されているタグは見やすくするため太文字で表示されていますが
必ず標準英数小文字の直接入力( IME表示 A )で記入してくださいね。 |
|
1.文字色の設定 |
文字色は黒字が基本設定ですが、選択色以外に一部好きな色に変えることが出来ます。
使用するタグは <font color="#xxxxxx">○○○○</font>
○○○○ に入力した文字が #xxxxxx に下記色番号を入れた色で表示されます。英語のカラーコードも有効ですが中間色は上手く出ません。 |
色番号 |
赤 |
青 |
緑 |
茶 |
紺 |
紫 |
ゴールド |
グレー |
#ff0000 |
#0000cc |
#009900 |
#660000 |
#0000a0 |
#800040 |
#999900 |
#666666 |
red |
blue |
green |
maroon |
navy |
purple |
gold |
gray |
|
2.文字の大きさ |
|
文字の大きさは 1〜6 で 2〜3 が 標準です。 4、5、6 と大きくなります。
使用タグは <font size="x">○ ○ ○</font>
○ ○ ○に記入した文字が x で指定した文字サイズに変化します。 |
サイズ |
1 小 |
2 普通 |
3 少し大きめ |
4 かなり大きめ |
5 大 |
6 特大 |
|
3.文字の装飾 |
|
その他の文字装飾については太文字、斜め文字、アンダーラインがあります。
それぞれ ○ ○ ○ に記入した文字が変化します。 |
タグ |
太文字 <B>○ ○ ○</B> |
斜体 <I>○ ○ ○</I> |
アンダーライン <U.>○ ○ ○</U> |
|
全部使用した場合の例(大き目の文字で緑色文字太字斜体で下線付きで表示する場合のタグ使用例)
<b><i><u><font size="4" color="#ff0000">こんな表示になりますよ </font></u></i></b> |
|
4. 画像を呼び出したり貼り付ける場合は |
タグ |
<img src="URL"> ネット上のアドレスにある画像をこの位置へ呼び出します。 |
|
たとえば 事務局からのお知らせというロゴを右クリックしてプロパティからアドレスをコピーし、URLの位置に嵌めこむと右のロゴが
ここへ出て来ます。 → |
5. ハイパーリンクを付ける場合 |
タグ |
<a href="URL">○ ○ ○</a>
○ ○ ○をクリックするとURL(http://xxxx)にあるページや写真を表示したり別のサイトへ飛ぶことができます。
新しいウインドー(別窓)で表示させたい場合は
<a href="URL" Target="_blank">○ ○ ○</a> となります。
(ここで言うURLとはネット上に存在する全てのファイル(画像・音楽・映像・ページなど)にはアドレスがあり、当該する画像などの上で
右クリックしてプロパティーを開くとアドレスが載せてあります。
このアドレスを指定すれば掲示板などへ表示したり、音楽を聞かせることが出来ます。)
|
4.で呼び出した事務居からのお知らせという文字に ブログへ案内するハイパーリンクを付けてみます。
タグとしては以下のようになります。なお、 target="_blank" はリンク先を別窓で開くタグです。
これがない場合は 画像がある位置に サイトが開いてしまいます。
<a href="http://tutujigaoka.net/" target="_blank"><img src="http://tutujigaoka.net/images/logo4.gif"></a>
ですが、試してみてください →
|
6. 表示させる位置を指定する |
タグ |
ブログの記事の表示位置は基本設定では左寄せです。
添付ファイルの表示位置も左寄せで最上段へ並べて表示されます。
画像は画面開いているインターネット画面の大きさにも拠りますが、2個〜4個の縮小表示画像がでます。
説明文と添付ファイルの位置をマッチングさせたい場合などは、説明文を書いた後改行してUPFILE# 更に改行してUPFILE#とすれば、
説明の下へ 添付ファイルが表示されます。(左寄せ)
説明文の直ぐ右へUPFILE#は 行内挿入となり、高さが合わないのでやめましょう。
説明文及び添付ファイルの表示位置を中央寄せにしたい場合は
<center> xxxxx </center> で囲まれた部分が中央寄せになります。
添付ファイルだけを中央寄せにする 説明文共に中央寄せにする どちらも可能です。
改行もスペースも含んだまま、囲まれた全ての部分が中央表示となります。
<center>UPFILE1</center> で 一番目の添付ファイルが中央寄せで行の中間へ出ます。
<center>PFILE1 UPFILE2</center> とすると 2つの添付ファイルが中央に2スペースの間隙を空けて並びます。
中間スペースは日本語入力におけるスペースが有効になります。英語入力におけるスペースは無効です(間を開けたつもりでも、
くっついて並んでしまいます。
文章を添付画像の右や左に回り込ませて表示したいときの方法はブログ書き込み画面に説明がありますが、
Wordで言う文字列の折り返し、「四角」の適用となり、記事に取り囲まれた左肩か、右肩に画像表示(プレビュー)がでる
スタイルになります。説明文が少ない場合は高さ合わせが難しく、利用しないほうが賢明です。
<p style="float:right">UPFILE1</p>
画像を左側へおいて文章を回り込ませたい時は
<p style="float:left">UPFILE1</p>
|
|
|
|
7. 4.と5.を組み合わせると 外のページにある画像をここへ表示させ、
さらにその画像にリンクを組み込むことが可能になります。 |
タグ |
<a href="URL01"><img src="URL02"></a>
URL02に存在するバナーやロゴもしくは画像などを○ ○ ○の代わりに表示させ、
それをクリックすることで次の目標URL01
へ移動することが出来ます。
次の目標を別窓で表示したい場合は
<a href="URL01" target="_blank"><img src="URL02"></a>
と なります。
|
8. マーキー(表示させた画像や文字を動かしたり流れるようにする) |
タグ |
<marquee scrollamount="2" width="300"><img src="images/logo3.gif" border="0"></marquee>
これで上記のQ&A BBSというタイトル画像が 右から左へ300ピクセルの幅で流れるように繰り返し表示されます。
scrollamountは動く早さで、2は比較的ゆっくりとした動きです。 width="--" は動く幅です。記事本欄は "600" 幅程度を想定して
設計してあるので、それ以上は指定しないでください。幅を指定しない場合は記事幅いっぱいに動きます。
ブログで添付ファイル(もしくは縮小画像)を動かしたい場合は<Img src="xxx">の部分を UPFILE1 に変えるだけ。
勿論入力した文字も同じように動きます。
動きを往復動作にしたいときは behavior="alternate" を追加します。
動きを下から上へとする場合は direction=”up" 動く範囲(高さ)を設定する場合は height="50" など 高さを設定します。
一行分の高さは約10です。
|
9.アイフレーム(ページの中へ囲いを作り 他所にある ページを表示させる) |
タグ |
YouTubeの動画やMSNの地図を静止画像としてではなく、ネットの画面をそのまま移動してくることができます。
<iframe src="URLxx" height="zzzz" width="xxxx">
URLxxが覗き見るネットのアドレス、 height は 覗き穴の高さ width は窓の幅です。
記事の部分へ表示させるので、画面の大きさは 幅が600程度、高さは450位が適正でしょう。
地図やYoutube では 共有をクリックすると埋め込みタグが表示されるのでコピーして張り付けるだけですが、同じように
アイフレームを利用しています。 |
10.指定する部分に背景色を付ける |
タグ |
<div style="background-color:#色番号;"> 〇 〇 〇 </div>
タグに挟まれた 〇 〇 〇 の部分へ背景色を加えることが出来ます。濃い色の背景色に白や黄色など
明るい色の文字を使う場合に有効。
|
|
その他たくさんのタグがありますのでインターネットなどで検索して使ってみてください。面白いですよ。
|