ホームページ作成事例 本日=1　昨日=6　all=3339 †

↑

グーグル携帯マップ

↑

グーグル地図JPG作成サイト

↑

携帯電話グーグルマップAPI

今回提供が開始された「Google Static Maps API」では、JavaScript?を使用せずにGoogle マップをWebサイトに表示させることが可能。＜img＞タグ内に緯度・経度や表示サイズ、ズームレベルなどを指定し、APIキーを記述することで、指定されたエリアのGoogle マップが画像として動的に生成される。表示タイプとして、通常のブラウザ向け表示のほか、携帯電話向けに見やすくした表示タイプも用意されている。

　グーグルでは、「Google マップ API」と比べ、「Google Static Maps API」ではJavaScript?を使用しない分、表示速度の向上が図れるとしているほか、＜img＞タグのみで利用でき、携帯電話向けのWebサイトにも使用できるのが特徴としている。

↑

パノラマ360°回転

!-- saved from url=(0022)http://internet.e-mail -->

HTML>

HEAD>

TITLE></TITLE>

/HEAD>

BODY onload="pwset()">

NOBR><IMG id="pic1" src="kesiki.jpg" width="3035" height="249"><IMG id="pic2"></NOBR>

SCRIPT language="JavaScript?" src="360sc.js"></SCRIPT>

/BODY>

/HTML>

↑

ez-HTMLv7.61

 市販の「ウェブサイト制作ツール」（以下WYSIWYGと省略）は画像なども簡単に挿入でき、レイアウトなども簡単にできますが、
 その反面font要素を乱用したり何度も編集している間ゴミのようにタグが残ってしまうという問題点があります。 
 当ソフトウェアは主に手打ちでHTMLソースを記述する人向けのために開発されています。 また、WYSIWYGで制作した
 HTML文書のちょっとした編集などにも使う事ができます。

http://www.w-frontier.com/software/ezhtml.html#first seo（けんさくエンジンさいてきか）とは、ある特定の検索エンジンを対象として検索結果でより上位に現れるようにウェブページを書き換えること。ハワイアンジュエリーの定番、プルメリア、ハイビスカス。可愛らしさと気品を兼ね備えたハワイの花モチーフ。キャッシング?おまとめローンの情報を集めたキャッシング比較Deskでは、カードローン一覧からカードローン会社の比較まで、キャッシング?おまとめローンの利用に不安を持つ方も安心してご利用頂ける優良情報を厳選し、皆様へお届けします。ウォーター　サーバーを選ぶなら家庭用も法人用も宅配水シェアNo.1のアクアクララ。独自製法のRO膜ろ過水にミネラルをバランスよく配合したおいしい水を日本全国へ宅配いたします。江東区　不動産神奈川　不動産ならシティネットへどうぞ。お探しの物件を城東支店からご案内します。横浜市　不動産,磯子区　不動産,中区など、横浜の仲介物件,不動産はお任せ下さい！

↑

背景素材集（フリー）

 「篆刻素材AOI」は、個人のホームページに無料で使える「背景」「イラスト」「印」「スタンプ」「アイコン」
 「千社札」「ボタン」「ライン」「ボーダー」「カウンター用数字」 「バナー」「セット素材」「季節の素材」
 「著作権フリー素材」「グリーティングカード」「Yahoo!メッセンジャーのスキン」等、軽く、個性的な和風素材
 を中心に配布しています。
 あなたのホームページを、個性的で素敵に彩るために「篆刻素材AOI」が少しでもお役にたつことができれば幸いです。
↑

スタイルシートをすっきりと見やすくしてくれる『styleneat』

 シンプルで素敵なツールだったのでご紹介。

styleneatはCSSファイルを見やすく整形してくれるツールだ。

 これを使えばセレクタの親子関係がインデントされて見やすくなる。複雑な階層構造もこれならわかりやすい。
 またそれぞれのスタイルの属性をアルファベット順に並べたり、一行でまとめたり、といったオプションもある。
 スタイルシートがごちゃごちゃしてきたなぁ、というときに試してみるのはいかがだろうか。
↑

ＣＳＳのDrawter

 CSSとHTMLの知識は必須だが、慣れている人には超絶便利そうなツールのご紹介。
 Drawterはブラウザ上でDOM要素を配置、さまざまなカスタマイズを施したあとにコードを生成してくれるツールだ。

つまるところ、CSSレイアウトに対応したサイト製作ツールといってもいいだろう。

↑

Windows Live Writer

 Windows Live Writer は、ブログの記事を簡単に編集した上で、ご利用中のブログサービスに投稿できる無料の
 デスクトップ アプリケーションです。Windows Live スペース 以外のブログサービスでもご利用いただけます。
↑

ブログやホームページにＲＳＳを貼る（FeeMo?）

 FeeMoウィジェットは、登録したRSSフィードをあなたのブログに表示する無料サービスです。

　お気に入りのブログやウェブサイトを、あなたのブログで紹介することができます。

↑

文字化けについて

 文字化けの原因はいくつかあるようだが今回はネットで調べて記載してみた。
  1. 　metaタグで、ページの文字コードを宣言することができます。このタグはheadタグに囲まれた部分へ記述します。
    1. 　文字化け防止のためにも、<head>タグの中に、この指定を行っておくことをお勧めします。 
       <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
    2. 　フォントがない機種とかMACだとかは文字化けする場合があります。 
       Windowsと、Macintoshでは、使っているフォントが違います。そのため、Windows専用のフォントで、フォント指定
 をしてしまうと、文字化けを起こすことがあります。
    3. 　半角カタカナを、使っている 
       半角カタカナは、ファイル名はもちろん、文章中にも、絶対に使わないでください。自分のパソコンでは読めても、
 訪ねてきたお客さんには、文字化けして見えます。カタカナは、全角で書くようにしましょう。
    4. ホームページ作成者は、極力、使用言語を、指定しましょう。

HTML>

HEAD>

META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset= x-sjis">

TITLE>タイトル</TITLE>

/HEAD>

BODY>本文</BODY>

/HTML>

META HTTP-EQUIV="Content-Type" Content="text/html; charset=Shift_JIS"> ← シフトＪＩＳ

META HTTP-EQUIV="Content-Type" Content="text/html; charset=ISO-2022-JP"> ← ＪＩＳ

META HTTP-EQUIV="Content-Type" Content="text/html; charset=EUC-JP"> ← ＥＵＣ

META HTTP-EQUIV="Content-Type" Content="text/html; charset=us-ascii"> ← US ASCII

META HTTP-EQUIV="Content-Type" Content="text/html; charset=iso-8859-1"> ← Western

META HTTP-EQUIV="Content-Type" Content="text/html; charset=iso-8859-2"> ← Central European

使用言語を指定すれば、半角カタカナも、使用することができます。 但し、CGI を使用している掲示板 (BBS) やチャット (Web,IRC)などは、文字化けします

↑

無くなったホームページを探す

http://www.archive.org/web/web.php

↑

XHTMLとＣＳＳ

 奥村さんのページはわかりやすく掲載されている。
↑

Web creatorの雑誌に執筆中の筆者のページ

↑

無料アクセスカウンター

↑

Tableで段組を作る時代は終わり

 従来、「段組（マルチカラム）を作る」といえば、table要素を駆使して行うテクニックでした。
 しかし、最近ではブラウザのスタイルシート対応度が向上してきたため、スタイルシートのみで段組を作っても
 問題なくなってきました。
↑

掲示板をPHPで作る

↑

動画をストリーミングで掲載する方法（WindowsMedia?）(2006/1/20)

 今までWindowsMediaのファイル（WMV）は、ASXファイルを使ってサーバに2つのファイルをアップしてストリーミングしていました。
 1つのHTMLファイルでストリーミングが出来ることがわかりました。

EMBED src="xxxxxx.wmv" type="video/x-ms-wmv" width="320" height="240">
と記載すればストリーミングになります

↑

プロバイダーがトラブルで、個人のホームページが消えましたが、カウンターを現状復帰する方法（2005/7/30土曜塾より）

 先日、或るプロバイダーが、サーバーのトラブルでホームページが2002年に戻ってしました。勿論アクセスカウンターも
 2002年の時に戻ってしまいました。ホームページは復旧できましたが、カウンターがＣＧＩなので復旧の仕方がわからない。
↑

WORDのWeb形式保存をクリーンする

 ワードで文章を作成し、Web形式で保存するといろんな装飾タグが付属され、HTML構造が複雑になります。それをクリーンに
 してくれるホームページがあります。それはマクロメディアドゥリームウィーバです。
  1. ワードで文書を作成⇒Web形式で保存
  2. マクロメディア・ドゥリームウィーバを起動⇒ワードで作成したHTMLファイルを開く
  3. メニューバーから「コマンド」⇒「WORDをクリーン」
↑

ＰＨＰ

 ＰＨＰ言語入門

ｰ http://php-web.net/introduction/

↑

カスケードスタイルシートの作成

  CSS Maker CSS Makerは、スタイルシートをブラウザ上で簡単に作成できるスタイルシート作成ツールです。
 サービスは全て無料で提供していますからお気軽にご利用ください

　●http://www.cssmaker.com/

↑

富士通アクセシビリティ・アシスタンス by DENTUKU

インターネットなどの技術を基盤としたコミュニケーションや、
公共サービス等がますます快適に便利になってきています。
誰にも分かりやすく使いやすい、 そして親しみやすいサイトづくり・・・
このユニバーサルデザインの思想を基本にデザイン活動のひとつとして、
視覚障害者や色覚障害者のアクセシビリティを高めるための診断ソフトウェアツール群
「Fujitsu Accessibility Assistance 」
をホームページ作成担当者やデザイナーに向けて無償ダウンロードにて提供いたします。
Fujitsu Accessibility Assistanceは
Webinspector、 Colorselector、 Colordoctorの3つのツール群で構成されています。
Java 2 Platform, Standard Edition, version 1.4以上が動作する以下の環境で動作します。
（readmeファイルにインストール手順はわかりやすく書かれています）

↑

既存のホームページをｉモード用ホームページに変換する。

 かなりの制限がありますが、簡単にＨＰをホームページビルダーで作っておき、下記の要領で変換すると、簡単に
 ｉ−モード用のホームページが作れます。
  1. ホームページビルダを起動します。
  2. 既存のホームページを開きます。
    imode1.gif
  3. 「ファイル」⇒「携帯ページへ変換」⇒「ターゲットブラウザ」を「ｉモード」にし⇒「変換」
    imode2.gif
  4. ビルダーのプレビューを選択すると下図のようになり、携帯画像の上下ボタンをクリックするとスクロールします。
    imode3.gif
  5. 形を整えて保存しますが、フォルダーはくれぐれも別のところへ保存しないと、既存のホームページが壊れます。 
     ※参考ですが、画像はすべて幅が96pxになり、JPG形式はすべてＧＩＦとなります。
↑

iモード用のホームページの作成

  1. ホームページビルダーを起動
  2. 「サイト」⇒「サイト新規作成」⇒サイト名に適当な名前を入力し⇒「次へ」⇒「新規トップページ作成」を選択し「次」。
  3. トップページのファイル名を「index.html」に修正し⇒自宅サーバのフォルダを選択する。
  4. 「完了」を押すと、「ページの作成ウィザード」ダイアログボックス」が開く。
  5. 表示環境で「iモード」選択⇒「サンプル」もしくは「白紙」を選択
  6. 後は文字を入力するのみです。
↑

ＩＢＭホームページビルダーＶ９ 2004-12-20 (月) 23:39:43　⇒Sigejii

 新機能、スタイリッシュエフェクト、表組み（テーブル）、バリアフリーWeb作成、マルチリンガル などの機能が追加され
 たようです。
 「スタイリッシュエフェクト」の“TAKUMI”ボタンから、まるでデザイナーが作ったようなホームページができあがるそうです。
 小生はまだ使ったことはありませんが！！
↑

Javascriptを使って、文字をブリンクさせる。2004-11-17 (水) 11:17:43　⇒　Sigejii　 †

  1. ホームページの「head」タグの中に、次のJavascriptを記述する。 
     <script type="text/javascript">
 <!--
 function blink() {
  if (!document.all) { return; }
  for (i = 0; i < document.all.length; i++) {
    obj = document.all(i);
    if (obj.className == "blink") {
      if (obj.style.visibility == "visible") {
        obj.style.visibility = "hidden";
      } else {
        obj.style.visibility = "visible";
      }
    }
  }
  setTimeout("blink()", 1200);
 }
 // -->
 </script>
    　※「1200」の数字を変えるとブリンクの様子が変わります。
  2. 次に「body」タグを下記のように追加します。 
     <body onload="blink()">
  3. 次に、ブリンクさせる文字に「class」を下記のように付け加えます。 
     <h2 class = "blink"><a href="http://sigesan.no-ip.com/festa/">玉野みなと芸術フェスタ開催のお知らせ</a></h2>
    これで出来上がりです。
↑

２００ＭＢの無料ホームページが作れるページ 2004-10-20 (水) 11:26:10 ⇒Sigejii

  • ＡＡＡ！Ｃａｆｅがそれです。
  1. いまお使いの無料ページと比べてください。プロバイダーのホームページサービスより快適です。
  2. 高速回線でストレスなく見ることができます。（夜の11時でもつながりやすい。）
  3. データ圧縮配信により、ダイアルアップ接続などの細い回線の方でもスイスイ接続できます.
  4. 無料でホームページスペースを200MB使えます。（上部にスポンサー様より広告を掲載することより、無料でご提供しております。）
  5. 初心者でも簡単！
  6. FTPによる更新に対応しています。
  7. CGI(Perl、PHP、ruby、C、C++、python)を使って、掲示板、カウンター、チャット、アクセス解析などできます（CGIの設置の方法は、こちら）。初心者でも簡単に設置できます。
  8. 初心者でも簡単に数分でCGIを設置できるます。こちらをご利用ください。
  9. 設置画面はこちらへ （http://cgi.aaacafe.ne.jp/）
  10. .htaccessが利用できます。（アクセス制限のみ使用可能です。また一部使用できないコマンドがあります。） データベース（MySQL）も無料で利用できます。こちらをご利用ください。 コンテンツマネジメントシステム（CMS）もワンクリックで設置できます。こちらをご利用ください。 バナーレスサービスを開始しました。こちらで申し込みできます。 商用利用（アフィリエイト）が可能です。　（詳しくはこちら）
↑

マーキーを使ってみる・・・2004-10-20 (水) 10:10:52　⇒ Sigejii

  • 他のホームページで発見しましたがインターネットエクスプローラでもマーキーがつかえることがわかりました。
    　　マーキー　http://tohoho.wakusei.ne.jp/html/marquee.htm
  • このマーキーは、文中でＵＲＬのリンクが張ることが出来ます。
  • 「しげ爺のホームページにマーキーをインライフレームで貼り付けてみました。下記はそのサンプルです。
    • http://www.tamano.or.jp/usr/okabe/ 
       <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
 <meta name="GENERATOR" content="Microsoft FrontPage 4.0">
 <meta name="ProgId" content="FrontPage.Editor.Document">
 <title>しげ爺マーキー</title>
 </head>
 <body topmargin="0" leftmargin="0">
   <table border="0" width="220" cellspacing="0" cellpadding="0" height="20">
        <tr>
          <td width="100%" bgcolor="#FFFFFF">
          <marquee SCROLLDELAY=200>
          <font size="2">
 ●○････　　玉野のローカルなニュースやマルチメディアの実験などを掲載しています。
 ････　ボランティアの<a href="http://www.tamano.or.jp/usr/okabe/shtml/doyo.htm" target="_blank">パソコン塾</a>も開催しています。     
 ････　画面左のメニューは私の活動状況をリンクしています。                    
 ････　画面右は新着情報をリンクしています。　中央では、『私の独り言』として、技術や世 相なども掲載しています。　                    
    ････　RealPlayerやFlashなどやブログやズープスを利用して【<a  href="http://sigesan.no-ip.com/pukiwiki/pukiwiki.php" target="_blank">土曜塾フォーラム</a>】や【<a href="http://sigesan.no-ip.com/xoops/" target="_blank">しげ爺のＸＯＯＰＳ自宅サーバー</a>】など楽しいページ造りに励んでいます。　････　ごゆっくりご覧下さい。　　                    
    ･････　玉野市田井　岡部成行…★《お問い合わせは<a href="http://www.tamano.or.jp.usr/okabe/enquete/form/html" target="_blank">こちら！</a>です。》○●</font></marquee>   
          </td>
        </tr>
      </table>
 
 </body>
 
 </html>
↑

最近ＢＬＯＧのトラックバックとかの言葉を聞きますが・・・2004-10-15 (金) 06:55:27⇒Sigejii

 トラックバックの使い方が良く分かりません。ＮＰＯが忙しくて勉強するひまがありません。
 三宅智子さんのページを見ると、トラックバックのＵＲＬを書いてありますが、どのようにすればよい
 のでしょうか？誰か教え教えてください。
↑

yasfさんお世話になりました。またゆっくり土曜塾で説明をお願いします。2004-10-20 (水) 10:07:14⇒Sigejii

  1. トラックバックはブログなどで参照した記事の出所に参照したことを通知します。
  2. そこで出所ではその通知を受けて参照された先のアドレスを表示します。
  3. 要するに参照された側に通知が戻るところに特徴があるのです。
  4. 使用方法はブログのソフトにより多少変わりますが参照先にurlを知らせるのと参照元のurlを入れる場所があるはずです。
  5. このサイトで使うにはpukiwiki.ini.phpの// TrackBack?機能を使用する $trackback = 1;としておかねばなりません。
  6. 自サバではトラックバックアドレスに127.0.0.1とかlocalhostを返すことがあるので要注意です。
  • ここまでで分かると思いますが相互通信なので両方にトラックバックの仕組みがなければなりません。
    ＜レンタルブログ＞で
    三宅智子さんの記事のトラックバックアドレスを使用して記事を書きましたが、
    参照元2004.10.11またまたうれしいご訪問です。のトラックバックが(1)と表示され
    そこをクリックすれば参照した上記のブログサイトのアドレスが表示されてるのが
    わかると思います。このレンタルブログでは参照元のアドレス表示が無いように思えます。
    またこの機能を使いえげつない記事、写真とうに導かれてはかないませんのでトラックバックは
    削除できるようになっています。（文責 YASF）
↑

アクセスアップの小技2004-10-14 (木) 06:44:05 ⇒Sigejii

 lycosやgoo、googleなどのサーチエンジンは自動巡回ロボットを使ってサイトを登録して
 いますが、このロボットは、『メタタグ』を頼りにあなたのサイトの情報を集めています。
 このメタタグを入れないと、ロボットはあなたのサイトを無視してしまい、せっかく検索して
 もらうように依頼しても、いつまでたっても登録されません。
 また、メタタグにはロボットに情報を与える以外にも様々な役割や便利な機能があります。
 ぜひあなたのサイトにもメタタグを取り入れて見ましょう！
↑

玉野みなと芸術フェスタ2004のページを作りつつあります。2004-10-11 (月) 20:07:21

http://sigesan.no-ip.com/festa/

↑

アート工房「るんるん島」とんぼ玉体験教室のＨＰを立ち上げました。2004-10-10 (日) 22:20:05

まだ、途中ですが、これから充実します。 １回2000円1時間です。世界に１つしかないガラス玉を作ってみませんか？
体験希望者は早めにお申し込みください。 ホームページは下記です。
http://sigesan.no-ip.com/festa/html/

申し込みは
sokabe@mx1.kct.ne.jp

↑

htmlにrssを貼り付ける ⇒dentuku

javaを使って表示させるためのコードを作れるサイトを見つけました。

土曜塾WIKIのRSS表示コードを作ってみました。 HTML用なので、文字コードはShift_JISにしています。

 
 <script language="JavaScript" src="http://cgi.f43.aaacafe.ne.jp/~jazzcafe/feed/generate.php?src=http%3A%2F%2Fsigesan.no-ip.com%2Fpukiwiki%2Fpukiwiki.php%3Fcmd%3Drss10&chan=y&num=5&tit=20&desc=400&date=y&targ=y&oe=Shift_JIS" type="text/javascript">
 </script>
 
 <noscript>
 <a href="http://cgi.f43.aaacafe.ne.jp/~jazzcafe/feed/generate.php?src=http%3A%2F%2Fsigesan.no-ip.com%2Fpukiwiki%2Fpukiwiki.php%3Fcmd%3Drss10&chan=y&num=5&tit=20&desc=400&date=y&targ=y&oe=Shift_JIS&html=y">RSS Feedを見る</a>
 </noscript>
↑

トップページにフレームを使う。(9月25日の土曜塾から）⇒sigejii

frame1.jpg
  1. 上の図のように左右にフレームを切るページをホームページビルダーで作成する。
  2. ファイル名を「index.html」として保存する。
  3. 左を「menu.htm」右を「Body.htm」として保存する。
  • 3つのファイルで2つのフレームが動作します。この3つをアップロードします。
↑

パーミッション（permission）について(9月25日の土曜塾から）⇒sigejii

 ＣＧＩをホームページに掲載するとき、必ずパーミッション（許可）を設定しなければなりませんね。パーミッションとは「許可」のことで、ここでは、
 「読み込み」「書き込み」「実行」の3種類のパーミッションが、 ファイル の所有者」「グループユーザー」「その他」のユーザーのそれぞれに対して設定される
 権限をいいます。IBMホームページビルだの転送機能にはついていません。
 通常は、ＦＦＦＴＰソフト（フリーウェア）を使用します。

　　　☆FFFTPのダウンロード・サイト 「FFFTP」を起動する。⇒「プロバイダー」に接続⇒

ffftp1.jpg

右のウィンドウのパーミッションを設定するファイルを右クリック⇒「属性を変更：

ffftp2.jpg

赤四角の番号を変更する。

↑

インラインフレームについて⇒sigejii

  • iframe は Inline FRAME の略です。<frame>タグ によるフレームは画面を分割することしかできませんでしたが、<iframe> タグは、画面の中央にフレームを表示することができます。 新着情報など、どんどん増える項目は、画面が長くなって見にくくなりますね。そんなときはこの<iframe>タグは便利です。

　　heart記述例です。

 <iframe src="xx.html" height=300 width=300>
 この部分は iframe 対応のブラウザで見てください。
 </iframe>
  • もちろんxx.htmlのファイルは作る必要があります。
  • heightとwidthは、それぞれ表示する高さと幅のサイズです。
  • サンプルは「しげ爺のほーむぺーじ」の新着情報や独り言をご覧ください。 　　http://www.tamano.or.jp/usr/okabe/
↑

インラインフレームと似た機能　⇒Yasf

 添付ファイルの disp_new.swf を使うと同じディレクトリにある
 new.txtを取り込みスクロール表示します。new.txtはタグ対応で
 たとえば
   2004/09/06 →[<font color='#009900'><A href="../pukiwiki/pukiwiki.php" 
               t rget="_blank">ＰＵＫＩＷＩＫＩ</A></font>]
   2004/09/05 →[<font color='#009900'><A href="../computer/
               flash/action2/04/load_symbl.swf">ライブラリよりムービーの
               ロード</A></font>]
   2004/09/05 →[<font color='#009900'><A href="../computer/
               flash/action2/03/sound_test.swf">ボタンにサウンドを
               付ける</A></font>]
 のように記述します。サンプルは

私のサイト

 のゲストブックの上の点滅する★をクリックしてみてください。
 ページに埋め込みアイフレームのようにもできます。便利なのは自サバの人だけかな？
 ソースも付けておきますのでフラッシュ・アクションスクリプトの勉強も兼ねて
 いかがでしょうか。
 文責 藤目
添付ファイル: fileimode2.gif 216件 [詳細] fileimode3.gif 227件 [詳細] fileimode1.gif 208件 [詳細] fileframe1.jpg 277件 [詳細] fileffftp1.jpg 159件 [詳細] fileffftp2.jpg 283件 [詳細] filedisp_new.fla 138件 [詳細] filedisp_new.swf 133件 [詳細]
リロード   新規 編集 凍結解除 差分 添付 複製 改名   トップ 一覧 検索 最終更新 バックアップ   ヘルプ   最終更新のRSS
Last-modified: Mon, 12 Jul 2010 14:30:30 JST (54d)