==教えることは自分育て==

リンクについて
リンクタグは<a href="URL" target="_blank">画像あるいは文字</a>です。
エキサイトブログの場合、フォルダはエキサイトの管理下です。自分でフォルダはいじれません。ですからURLは絶対パス(http://で始まるURL)になっています。

Qの解答

リンクは初級で学ばれたと思いますが、URLの最後の
拡張子によってweb上で開かれるソフトが違います。

クリックして、立ち上がるソフトをご確認ください。

.index.htm,.index.htm(ウェブ頁)・・・・・・・・・InternetExplorer
.wmv(動画)・・・・・・・・・・・・・・・・・・MediaPlayer
.doc(ワード文書)・・・・・・・・・・・・Microsoft Word
.mid,.mp3(音楽)・・・・・MediaPlayer
.css(スタイルシート文書)
・・・・・Notepad(メモ帳)
.swf(フラッシュ)・・・・・・・・・・・FlashPlayer
.PDF(PDF)・・・・・・・・・・・AcrobatReader


ブラウザの標準機能だけでは再生することができない音声や動画などを再生するためのソフトのことはプラグインソフトと言います。詳しくはサイトをご覧下さい。→説明サイト
言葉等わからない時は、Googleで検索すると勉強になりますよ。
[PR]
# by otomi7771 | 2007-06-23 13:48 | ├リンクについて |TOPに戻る
画像のぼかし方
背景の画像は、文字入れの邪魔にならないように、白くぼかしたいときがありますね。
その時は、Jtrimを使うと簡単にできます。

b0063421_13422157.jpgツールの【新規作成】→【キャンバスの色】を下やじるしで【白】を選び、OK。

ツールの【開く】→画像を選んで、 キャンバスに画像をだす。→【リサイズ】で適当な大きさにする。→OK。
b0063421_13522433.jpg

b0063421_13591443.jpgメニューバーの【カラー】→【グラデーション】。

色1、色2は白が無難です。画像処理によっては、色を選んでも可。

不透明度は、お好きな数値で。→OK。
↓全体にぼけました。
b0063421_1453133.jpg


b0063421_1412971.jpg【加工】→【フェードアウト】

1回目は四角いままフェードアウト。
2回目は【円形フェードアウト】にチェックをいれ、円形にフェードアウト(2重フェードアウト)。
数値はお好みで、いろいろ試してみて下さい。

b0063421_1432435.jpg      b0063421_14322263.jpg

[PR]
# by otomi7771 | 2007-06-22 13:36 | ├Jtrim(画像作成) |TOPに戻る
画像から別の画像へのリンク
ある画像から、別の画像へのリンクをタグで作りましょう。
最初に画像を2枚アップしておきます。

椿


画像タグはリンクタグと組み合わせて使うと、デフォルトでは画像の周りに枠が付きます。
その枠を除くには、imgの方に、border="0" を入れましょう。枠が消えます。
                        ↓ 
椿

最後に画像のエキサイト擬似タグを削除します。決してアップロード済みの画像は削除しませんように。

参考までに、下にサムネイルのタグを載せておきます。コピペして画像URL だけ変えて利用なんていうのもよし!! でも最後は自分でタグを書き込んで、作成できるようにしましょう。

何も指定しない(デフォルト)ですと、左寄せになります。右寄せのタグは、align="right "
左寄せはalign="left"です。
今回は<center></center>で挟んで中央に配置しました。

<center><a href="http://pds.exblog.jp/pds/1/200706/18/21/b0063421_16542246.jpg" target="_blank"><img src="http://pds.exblog.jp/pds/1/200706/18/21/b0063421_1654525.jpg" alt="椿" width="240" height="180" border="0"></a></center>
[PR]
# by otomi7771 | 2007-06-18 16:54 | ├タグでサムネイル |TOPに戻る
サムネイル(1)
サムネイルとは、「親指の爪」の意から転じて縮小された画像のこと。通常は多数の画像を一覧表示するために使う手法です。小さい画像をクリックすると同じ画像が大きく拡大されて表示されます。

バラ


まず大きな画像を1枚UPします。(←この場合400×300)

最初は画像タグを書きます。
<img src="http://pds.exblog.jp/pds/1/200707/12/21/b0063421_9193790.jpg" alt="バラ" width="120" height="90" border="0"> (←幅と高さを小さく設定して、見かけを小さくします。縦・横の比率は変えないように。)
                 ↓
画像をリンクタグで挟みます。この時画像URLは同じものです。
                 ↓
<a href="http://pds.exblog.jp/pds/1/200707/12/21/b0063421_9193790.jpg" target="_blank"><img src="http://pds.exblog.jp/pds/1/200707/12/21/b0063421_9193790.jpg" alt="バラ" width="120" height="90" border="0"></a>
                 ↓
中央寄せにしました。これで出来上がりです。
<center><a href="http://pds.exblog.jp/pds/1/200707/12/21/b0063421_9193790.jpg" target="_blank"><img src="http://pds.exblog.jp/pds/1/200707/12/21/b0063421_9193790.jpg" alt="バラ" width="120" height="90" border="0"></a></center>
[PR]
# by otomi7771 | 2007-06-18 13:07 | ├タグでサムネイル |TOPに戻る
サムネイル(2)
2行×4列のサムネイルを作って見ましょう。

まず8枚の画像をUPします。

2
一組のサムネイルはもう出来ましたね。画像はデフォルトでは、左寄せで表示されます。それをコピー&ペーストすると画像はくっつきます。



そこで一組目にインラインCSSで、<img>にmarginを設定すれば余白ができます。
タグは下です。尚、小さい画像サイズは120×90にしました。
<img src="http://pds.exblog.jp/pds/1/200605/22/41/b0018441_3182314.jpg" width="120" height="90" border="0" style="margin:2px;">



一枚目のサムネイルのタグを8枚コピー&ペーストします。
余白がなくなれば自動的に下に回ります。



画像のURLを替えれば、はい出来上がり。



160×120にすると、下のようになります。


[PR]
# by otomi7771 | 2007-06-18 11:04 | ├タグでサムネイル |TOPに戻る
サムネイル(3)
このサムネイルは<div>で枠を作っています。そして、その中に画像と文字を配置して画像はサムネイルにしています。p14の基本的な枠の最後に勉強します。

上・・・擬似タグとタグの混在。
下・・・タグのみ。 少し難しいですね。

b0063421_13562.jpg
月の輪椿
草野町椿ウォーキング
b0063421_22322939.jpg
岩根椿
草野町椿ウォーキング



月の輪

月の輪椿
草野町椿ウォーキング
月の輪

岩根椿
草野町椿ウォーキング



<div>の枠を二つ並べたいときは、スタイルに float:left; を付け加えます。
[PR]
# by otomi7771 | 2007-06-18 10:04 | ├タグでサムネイル |TOPに戻る
主なタグの説明
良く使われている主なタグに付いて、簡単に説明しておきます。

h(heading)ヘディング・・・・・・・・・・・・・・・見出し。
p(paragraph)パラグラフ・・・・・・・・・・・・・段落。
a(anchor)アンカー・・・・・・・・・・・・・・・・・・リンクの作成。
div(division)ディビジョン・・・・・・・・・・・・・複数の要素をグループ化。
span(〃)スパン・・・・・・・・・・・・・・・・・・・・・・文字の装飾範囲を指定。
br(break)ブレイク・・・・・・・・・・・・・・・・・・・行の途中で改行。
blockquote(〃)ブロッククウォート・・・・・・・引用文。
embed(〃)エンベッド・・・・・・・・・・・・・・・・・プラグインを埋め込む。
marquee(〃)マーキー・・・・・・・・・・・・・・・・文字や画像を移動。
style(〃)スタイル・・・・・・・・・・・・・・・・・・・・HTMLの中でCSSを指定。
img(image)イメージ・・・・・・・・・・・・・・・・・・画像の埋め込み。
align(〃)アライン・・・・・・・・・・・・・・・・・・・・・・・・配置の指定。
src(source)ソース・・・・・・・・・・・・・・・・・・・画像のある場所。
hr(horizontal rule)ホリゾンタルルール・・水平線。

[PR]
# by otomi7771 | 2007-06-15 19:37 | ├タグの説明 |TOPに戻る
タグの記述の補足
タグの記述は、基本的には開始タグと終了タグで挟む。

(例)<h1>見出しの文章</h1>
(例外)単体のタグは終了タグがない・・・<img><br><hr>

タグは要素、属性、値から成り立っている。要素にいくつも属性を設定できる。値は ="" とダブルコーテーションの中にかく。
b0063421_20352577.jpg
属性の区切りは半角のスペースです。
属性の順番はどうでも構いません。

<img>要素でいえば、src、alt、borderも属性です。ですから、属性と属性の間は半角スペースが入ります。

その他の注意事項

1)タグは半角。alt を全角で入れたあと、半角に戻すのを間違えないように。
2)ゆっくり、正確に打ちましょう。
3)""のどちらか一方かけてもダメ。
4)スペルの間違いは認識しません。見直しましょう。
5)半角スペースを2回入れてもダメ。スペースのサービスは必要なし。
[PR]
# by otomi7771 | 2007-06-15 18:22 | ├タグの説明 |TOPに戻る
altについて
下の写真の上にマウスを乗せると文字が出ますね。これがalt設定です。

誰の絵でしょうか?


altとは<img>タグにalt属性を指定したもので、画像の代わりに表示される代替テキストのことです。画像ファイルの読み込みに失敗した場合や、ユーザーが画像を表示しない設定にしている場合などに、代替テキストが表示されます。また、視覚障害を持ったユーザーは、音声読み上げソフトを使います。この時このaltを画像の変わりに読み上げます。

純然たる画像の説明でしたら、<title>という属性もあります。入れ替えて試して見てください。表示の結果は同じです。



そうだとしたら、見る側にやさしいaltを使いたいですね。altの入ったWebページは上質です。残念ながら、エキサイトブログでは、タグ打ちで画像をいれないと、このaltは入れられません。

このように、タグは知れば知るほど、Webページの幅がひろがりますよ~。
[PR]
# by otomi7771 | 2007-06-15 17:02 | ├タグの説明 |TOPに戻る
タグ打ちの諸注意
エキサイトブログの投稿画面は、癖があります。

1)投稿画面=ソースではありません。文字の確定のEnter以外では、Enterを打つごとに
<br>タグがソースの方に打ち込まれます。タグは横にずらずら打ちましょう。

2)擬似タグは、本来のタグに書き換えられます。例えば、下の反転しているところが擬似タグのソースです。
b0063421_23131334.jpg
               ↓
b0063421_2322975.gif

スペースは要注意です。の後をドラッグして見てください。それがそれぞれ該当のスペースです。

スペースが 入っています。(←半角スペース1つ)
スペースが 入っています。(←半角スペース2つ)
スペースが 入っています。(←全角スペース)
改行タグが
入っています。       (←<br>タグ)

★半角スペースはソースでは2つ入りますが、Web上では1つしか認識しません

<center></center>は特に要注意です。

</center>を入れ忘れたり、スペルが違っていると、中央揃いが引きずってコメント以下そのページが中央揃いになります。
ご注意ください。

★タグ打ちは細心の注意を払ってくださいね。

その他

background-image: url(""); ダブルクォーテーションは省略できます。

style=""    ダブルクォーテーションは省略できません

<img src="240" height="180">ダブルクォーテーションは省略できます。        ↑HTMLは単位なし。

style="border:1px solid green;width:240px;"
             ↑CSSは単位あり。

プレビューでしていると、フリーズしたり、他のメニューにいくと、送信してませんから努力が水の泡になります。非公開にチェックをいれて、送信で結果を見ましょう。
[PR]
# by otomi7771 | 2007-06-15 01:42 | ├タグの説明 |TOPに戻る