Ｃｏｃｏａのホームページ ☆ 小技とリンク集

 

ホームページを作ってみよう ��

　ＨＴＭＬを覚えたい

　スタイルシート（ＣＳＳ）を覚えたい

 

ホームページ作成初心者のＣｏｃｏａが、ＨＰを作るのにＷｅｂ上で調べて参考にさせていただいたり

基本ソースを使わせていただき、いろいろ試しながら実際に使ってる、便利な小技の記録です

そのまま使わせていただいてる場合は、そのサイト様やページをご紹介します♪

 

お 願 い  ：  このサイトで実際にページに記述してるもので試験済みですが、コピペのソースをそのままではなく

自分なりに変えてる部分もあるし、まだまだお勉強中で正しく詳細に理解できてるわけではありませんので

もし、万一このページに記載されているソースをコピペで利用される場合は、個人の責任でお使いください m(__)m

 

　　◆　小 技 の 項 目　◆
 ☆　2010/01/10　Ｇｏｏｇｌｅ公式ロゴの使用は、「Googleブランド使用規約にしたがって申請頂いた方にのみ Googleロゴ使用の許諾」に変更されていました
 ☆　08/10/13　ヤフー検索窓設置の提供ページのＵＲＬが変更になっていたので訂正し、さらにもう一つ追加
 ☆　08/06/26　インラインフレームの中に表示するファイルを変更する方法 （ Ｊａｖａ Ｓｃｒｉｐｔ ）
 ☆　08/02/10　ページ更新日の自動表示 （ Ｊａｖａ Ｓｃｒｉｐｔ ）
 ☆　08/02/10　Ｙａｈｏｏ！検索窓の設置
 ☆　08/02/10　Ｇｏｏｇｌｅ（グーグル）検索窓の設置

 

小　　技

記　述　＆　リ ン ク

　◆　ページ更新日

自動表示

 

　☆　≪ ページ更新日の自動表示 ≫（ Ｊａｖａ Ｓｃｒｉｐｔ ）の設置ソース

 

<script type="text/javascript">

<!--

(function() {

var update = new Date(document.lastModified);

var theMonth = update.getMonth() + 1;

var theDate = update.getDate();

var theYear = update.getFullYear();

document.writeln("Last Updated ： " + theYear + " 年 " + theMonth + " 月 " + theDate + " 日 ");

})();

// -->

</script>

 

表　　示

Last Updated ： 2008 年 2 月 9 日　← こんなふうに表示されます

 

　ＨＴＭＬファイルの設置したい場所に記述します。

　上記のソースで、自分で変えた部分は、年月日の前後に半角スペースを入れた・・・だけ (^_^ゞ

　設置してみて気付いた事は、自分のＰＣでアクセスすると、ページの更新作業でなくても日にちが変わってしまうという事です。この点なんとかならないん？？？って、悩んでるところです ^_^;

この小技を使ってるページ　：　 Ｃｏｃｏａ ☆ サイトのご案内

時刻も表示の場合のソース

右記の３行だけでいいそうです

<script type="text/javascript"><!--

   document.write('最終更新日:' + document.lastModified);

// --></script>

表　　示

最終更新日:02/09/2008 20:39:08　← こんなふうに表示されます

 

検　索　窓　の　設　置

　◆　Ｙａｈｏｏ！検索窓の設置

　１．　≪ Ｙａｈｏｏ！検索窓 ≫の設置方法

　「 Yahoo!JAPAN 」 （TOPページ）→ 「 ヘルプ 」 （ページ右上）→ 「 Yahoo! Ｈｏｗ−Ｔｏ 」 の順にアクセスし

　項目の「 検索窓を付けよう 」をクリック。　利用方法とソースが提供されています。

　※ 08/10/13 ・・・ ヤフー検索窓設置の提供ページのＵＲＬが変更になっていたので訂正しました。　　　　　　　　　　　2008/09/10にもう一つ追加されていたので、そのページもご紹介します ｏ(＾−＾)ｏ

　

　●　検索窓ソースページ

 

　　前から提供されていた検索窓の設置方法ページですが、下記ＵＲＬに変更されてました。

　　提供されてるＨＴＭＬソースを貼り付ける、カスタマイズできない検索窓です。

　　下記ＵＲＬが、そのページです。説明どおりに作業をすれば、ＯＫだよ♪

 

http://custom.search.yahoo.co.jp/statics/

 

　※　ＨＴＭＬをある程度理解されてる方は、背景色などを変えることはできます。

　　　　ＣｏｃｏａのＨＰに設置されている検索窓は、このページのソースを使っているけど背景色は変えています。

 

　●　サイト内検索の検索窓設置を目的とするページ

 

　　※　サイト内検索は、Yahoo!検索の検索エンジンに登録されているサイトのみ検索できます。

　　　08/02/07にジオシティーズのお知らせ欄に、「サイト内検索をリリースしました」とあったので、アクセスしてみました。

　　ＨＴＭＬが分からなくても、検索窓の背景や文字の色、枠線の色などをカスタマイズして作る事ができるよ〜

 

../../../geocities.yahoo.co.jp/site_search

 

　●　サイトごとに検索窓や検索結果ページをカスタマイズできるツール・検索窓ソースページ

 

　2008/09/10にリリースされたページで、サイトのデザインに合わせて検索窓や検索結果ページをカスタマイズできるツール。　最大5つ保存できるそうです。　興味のある方は挑戦してみてね。

 

http://custom.search.yahoo.co.jp/

 

　２．　ＹＡＨＯＯ！ＪＡＰＡＮのロゴの配布に関するページ

　上記「１．」で説明してるページの一番下に「 関連リンク 」 という項目があり、その中に 「 Yahoo! JAPANが配布している検索窓のHTMLソースやロゴは変更できますか 」 にアクセスしてください。

　下記ＵＲＬが、そのページです。　

http://help.yahoo.co.jp/help/jp/search/indexing/indexing-28.html

　　※　利用にあたっての禁止事項も書いてるので、ちゃんと読んで守りましょう♪ 

 

　上記のＵＲＬをクリックすれば目的のページに行けるんだけど、一応行き方を書いておきました。

　今回リリースされたコンテンツを利用すると、レイアウトなんかも変えて簡単に作れるようになったみたいなので、興味のある方は挑戦してみてね♪

　管理人のサイトの検索窓は、昨年の１０月に設置してからでずっと同じなので、このコンテンツを利用して張り替えてみようかなって考えてます♪

　この小技を使ってるページ ： ホームページを作ってみよう �掘Γ硲圍唯未魍个┐燭ぁΕ好織ぅ襯掘璽函複達咤咫砲魍个┐燭�

　◆　Ｇｏｏｇｌｅ （グーグル）

検索窓の設置

　★　≪ Ｇｏｏｇｌｅ 検索窓 ≫の設置方法

　下記のページで、Ｗｅｂ全体だけの検索窓と、Ｗｅｂ全体と特定のサイト内のページ両方を検索できる

　検索窓のソースと設置方法が書いてあります。

　説明どおりに作業をすれば、ＯＫで〜す♪

　http://www.google.co.jp/intl/ja/searchcode.html　（ 設置方法やソースのページ ）

  

　上記ＵＲＬへのアクセスですが、ＧｏｏｇｌｅのTOPページの検索窓の下にある「 Ｇｏｏｇｌｅについて 」から入ります

　設置方法やソースのページ ： 「 サイトオーナーの方へ 」という項目の、「 リンク、検索機能を追加 」をクリック

 

　※ お知らせ ・・・　Ｇｏｏｇｌｅ ロゴは、「Google ブランド使用規約にしたがって申請頂いた方にのみ Google ロゴ使用の許諾」ということになっているのを確認しました （ サイト管理人Ｃｏｃｏａの確認日 ： 2010/01/10 ）

　 詳しくは、Google 公式ロゴ　http://www.google.co.jp/logos/official.html  で！

 

　設置作業の時、配布ページから小さいロゴを選んで変えてみました。

　ソースの中のロゴ部分を、ロゴの名前ＵＲＬ変えるだけなんです。

この小技を使ってるページ　：　 ホームページを作ってみよう ��

 

インラインフレームの中に表示するファイルを変更する方法

　◆　インラインフレームの

表示内容の変更

 

　この方法は、Ａｌｌ Ａｂｏｕｔ様のカテゴリ『ＪａｖａＳｃｒｉｐｔ』に外部リンクとしてあった

  パズルネット 智慧（ソフィア）様のページで勉強させていただきました。

　ＪａｖａＳｃｒｉｐｔの初心者向けの講座があるので、興味のある方はアクセスしてみてください♪

　ソースはそのまま利用させていただきながら、いろいろ試してみました。

 

　　※　注意！

　　　『パズルネット 智慧』様のページにも書いてありましたが、インラインフレームの中に表示するファイルは

　　　自分のものだけにしてください。他人が作成したファイルや画像はダメだよ （＾−＾）b

　

 ★　HTMLファイルのヘッダーに記入するソース

 

<script type="text/javascript">

<!--

function ifr(jpURL)

{

  設置するインラインフレームの任意の名前.location = jpURL;

}

// -->

</script>

 

 

 ★　＜ｂｏｄｙ＞と＜／ｂｏｄｙ＞の中の

　　　　インラインフレームの設置場所に記入するソースース

 

<a href="JavaScript:ifr('表示（変更）する内容ファイルのＵＲＬ')"> 

表示（変更）する内容ファイルのＵＲＬのリンクテキスト

</a>

 

<iframe src="アクセスした時に最初に表示されるファイルのＵＲＬ" name="設置するインラインフレームの任意の名前" width="インラインフレームの横幅（ピクセルor％）" height="インラインフレームの縦幅（ピクセルor％）">

</iframe> 

 

 

 ●　記 述 例

 

　例えば、ＣｏｃｏａのＨＰやブログを利用して、次のように設定する場合

 

　　◎　インラインフレームを設置するファイル

　　　　　　↓　このページの下にサンプルを設置してみたので、見てね (*^_^*)

　　◎　アクセスした時に最初にインラインフレームに表示されるファイル

　　　　　　「Ｃｏｃｏａのホームページ作成ブログ」

　　◎　インラインフレームに表示する別（変更）のファイル

　　　　　　実践ページの「リンクの設定の方法」と「段落と水平線」の２つ

　　◎　設置するインラインフレームに付ける任意の名前

　　　　　　cocoa

　　◎　インラインフレームのサイズ

　　　　　　横幅 ： 画面の幅の８０％　　　縦幅（高さ） ： ４００ピクセル

　　　

　★　記述したソースは、以下のようになります

　

　≪ ヘッダー部分 ≫

 

<script type="text/javascript">

<!--

function ifr(jpURL)

{

  cocoa.location = jpURL;

}

// -->

</script>

 

 

　≪ ｂｏｄｙの中のインラインフレーム設置部分 ≫

 

<a href="JavaScript:ifr('http://www.geocities.jp/cocoa_py/html-study1/jissen-link.html')"> 

実践ページ☆リンクの設定

</a>

 <br>

<a href="JavaScript:ifr('http://www.geocities.jp/cocoa_py/html-study1/jissen-paragraph')"> 

実践ページ☆段落・水平線

</a>

<br>

<br>

<iframe src="http://blogs.yahoo.co.jp/cocoa_blog07" name="cocoa" width="80％" height="400">

</iframe>

 

 

　下のリンクをクリックすると、インラインフレーム内にそのページが表示されるよ♪　

 

 

実践ページ ☆ リンクの設定　　 実践ページ ☆ 段落・水平線

 

★　主に参考にさせていただいているサイト様で、そのサイトにリンクされているページ（他のサイト）を参考にする事もあります　★

 

 

 なまらホームページ　様

キャラクターを使わせて頂いてます

 

 

ＴＡＧ ≪ ｉｎｄｅｘ ≫　様

 参考にさせて頂いてます

 

Ａ ｌ ｌ  Ａ ｂ ｏ ｕ ｔ　様

 参考にさせて頂いてます

 

ｅ - Ｗ ｏ ｒ ｄ ｓ　様

 参考にさせて頂いてます