フリー素材*使い方&解説(JavaScriptも少しだけ紹介)* +IT Support風鈴+

ホームページトップへ メールフォームでお問い合わせ 電話でお問い合わせ
パソコンレスキュー
パソコンレスキュー完成までの流れ
パソコンレスキューのお値段
IT Support風鈴がお届けするフリー素材
フリー素材の使い方や解説
IT Support風鈴のインフォメーション
サイトマップ
リンク
ホームページ制作スタジオ 風鈴です
 
フリー素材 *使い方&解説*
コーナーgifファイルの使い方1例
使い方はHTMLエデュタを用いまして横に並んだセルを2つ作ります。
←こんな感じです
作った1番目のセルの中にコーナーgifファイルを入れます、後ろのセルは文字を入れて背景に色を指定します
ここに文字を入れます
←こんな感じです
後は枠線のサイズ"0"セルの余白"0"罫線を"0"に指定しますと
ここに文字を入れます 
←こんな感じです
文字の色に白、そして文字を太くし中央に配置すれば出来上がりです。
リンクを設定するのであれば文字にリンクをお張り下さい。
メニューバーの使い方1例
こちらのメニューバーの使い方も基本的には上のコーナーgifファイルの使い方と同じです
使い方はHTMLエデュタを用いまして横に並んだセルを2つ作ります。
←こんな感じです
作った1番目のセルの中にメニューバーファイルを入れます、
後ろのセルは文字を入れて背景に残りのメニューバーファイルを指定しますが、その際にセルの大きさを、
幅:200、高さ:32 にサイズを行程します。
ここに文字を入れます
←こんな感じです
枠線のサイズ"0"セルの余白"0"罫線を"0"に指定します、
背景に指定してあるファイルは当然のように繰り返しますのでこれをスタイルシートなどを使って
繰り返さないようにします。
ここに文字を入れます
←こんな感じです
文字を太くして、お好みの文字色に、後は中央に配置すれば出来上がりです。
リンクを設定するのであれば文字にリンクをお張り下さい。

参考までに上のファイルの(右)ソースの一部を文字にしておきます。
<TD・・ style="background-repeat : no-repeat;" width="200" height="32" background="imgs/kim_1x2.jpg">
closeボタンの使い方1例
まず、目的のページにJavaScript等で別ウインドーを開くように設定します(別ウィンドーを開くには・・・)
<HEAD>
<SCRIPT Language="JavaScript">
<!--
function openwin(url) {
w = window.open(url, 'win','width=600,height=380,status=no,scrollbars=yes,
directories=no,menubar=no,resizable=yes,toolbar=no');
}

function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</SCRIPT>
<TITLE></TITLE>
</HEAD>
scrollbars=yes,directories=noの間はここではページスペースの関係上改行を入れてますが
 実際に追記する場合は改行は入れないで下さい。JavaScriptエラーになります。


<HEAD>から</HEAD>の間に上のJavaScriptを追記します。
この際には必ず!半角英数モードでしかもメモ帳などで開いて下さい決してホームページエデュタなどで
開いて編集しないで下さい。



次に別ウィンドーを開くためのトリガー(テキストでも画像でも可)に
<A href="JavaScript:openwin('別ウィンドーの中身.html');">テキスト・画像指定<A>
と言う書式でリンクを追加します。この中身にcloseボタンを使う訳です。



ここからが本題です!・・・
別ウィンドー内コンテンツのお好きな所に開いたページを閉じるJavaScriptを追記します。書式は・・・
<A href="javascript:window.close()">
<IMG src="Closeボタンが有る場所.gif" width="136" height="24" border="0"></A>

<A href="javascript:window.close()"><IMG src=・の間はここではページスペースの関係上改行を入れてますが
 実際に追記する場合は改行は入れないで下さい。JavaScriptエラーになります。


これで終了です。
なかなか使う機会が無いかもしれませんが使えると何かと便利だったりします。

※サンプルはこちら サンプル

丸に矢印/丸アイコンの使い方1例
基本的には使い方次第なのですが、今回はスタイルシート(css)での使い方をご紹介いたします。

※リンクの先頭に(丸矢印の例)
ホームページ制作スタジオ WEBスタジオ風鈴
リンクをかけると先頭に指定したアイコンが現れて、リンクを探している人には目印になります。
また、下線だけだった味気ないリンクにデザイン的にも自由度が広がります。
※リンクの先頭に(丸アイコンの例)
ホームページ制作スタジオ WEBスタジオ風鈴
上との違いはテキストの位置3pxと画像の指定だけです。

※スタイルシート
/* リンクの設定のクラス名 */
A.sanpuru_link{
display:block;
height : 20px;
color : #3333FF;
text-decoration : underline;
margin : 0px 0px 0px 5px;
padding : 3px 0px 0px 18px;
border-left-style : none;
background-image : url(../imgs/yazirusi_b.gif);
background-repeat : no-repeat;
font-weight : bold;
}
/* カーソルが上にある時の設定 */
A:HOVER.sanpuru_link{
background-image : url(../imgs/yazirusi_r.gif);
color : #ff0066;
text-decoration : none;
}

スタイルシートの追記に関しまして、今回はA(リンク)タグの中にクラス指定ありますので
ホームページ(WEBサイト)全体に反映させたい場合は「.sanpuru_link」のクラス名を消して下さい。
また、今回ご紹介のスタイルシートは外部ファイル用です、
内部追記使用には下記の宣言を追加して下さい
----追加宣言部分ここから-------------------
<style type="text/css">
<!--
上のスタイルシートを貼り付けして下さい
-->
</style>
----ここまで-------------------------------

※各スタイルシートの説明
/* リンクの設定のクラス名 */
A.sanpuru_link{ //Aタグの中にあるsanpuru_linkと言うクラス名のみ有効にする
display:block;  //リンク要素を解除する宣言
height : 20px;  //高さは20pxにする宣言
color : #3333FF; //フォントの色指定
text-decoration : underline; //文字に下線を付ける
margin : 0px 0px 0px 5px; //外側余白の指定
padding : 3px 0px 0px 18px; //内側の余白設定
border-left-style : none; //枠線は表示しない
background-image : url(../imgs/yazirusi_b.gif); //アイコンのパス
background-repeat : no-repeat; //画像をくりかえさない
font-weight : bold; //文字を太くする設定
}
/* カーソルが上にある時の設定 */
A:HOVER.sanpuru_link{ //Aタグの中にあるsanpuru_linkと言うクラス名のみ有効にする
background-image : url(../imgs/yazirusi_r.gif); //アイコンのパス
color : #ff0066; //フォントの色指定
text-decoration : none; //文字の下線を消す(付けない)
}
※上の表記は説明のため余分な文字が入っています、このままWEB用には使わないで下さい。


PCレスキュー PC完成までの流れ PCレスキューお値段 フリー素材 フリー素材解説 インフォメーション サイトマップ リンク

お客様のパソコンをがっちり!守る! IT Support風鈴