(2010年後期)ホームページ講座

2010年後期の 【つくろう!じぶんのホームページ】講座は12月7日をもって終了しました。

A-11クラス

受講生さんの作品 アドレス&ケータイでピッと!
とよた蒼の森クラブ メディカルアロマblue.frue サンフラワー ぽやんのteatime My 紅窯陶園 海釣クラブ チャイニーズキッチン フォト研究一人会 アトリエ・いとのわ

【つくろう!じぶんのホームページ】講座を受講している皆さんへ。

12/7,講座最終回をもって、質問連絡板メールサポートも終了しました。
この後、3通のメールをお届けして、本当の講座終了となります。
 
テキストPDF版 
ホームページをより見やすくする便利な機能 
ホームページ制作をもっと勉強したい方へ… 
 
というメールが順次届きます。よろしくご確認ください。
 

みんなのヘッダー画像

2010/12/02 19:34 に 田口相 が投稿   [ 2011/06/25 5:16 に更新しました ]


とよた蒼の森クラブ 
メディカルアロマBlue.frue 
サンフラワー 
ぽやんのteatime 
My Travel Memories 
紅窯陶園 
海釣クラブ 
チャイニーズキッチン 
フォト研究一人会 
アトリエ・いとのわ
ほんとうは、画像加工までマスター出来てこそのホームページ制作だと思うのですが、全18時間の講座でそこまで学習するのはとても難しいので、「ヘッダー画像」はコチラで加工してしまいました。
 
 
 
送っていただいた元画像のサイズやイメージによって、太いヘッダー(高さ140px)だったり、細いヘッダー(高さ100px)だったりします。
 
ヘッダー画像は何枚か作りましたので、その中からお好みのものを選んでいただけたら…と思います。
 
←一部、ここに並べてみました。
(タグチセレクション。教室の席順で。)
 
 
 
講座では、
・「画像の配置」は「横:左」,「縦:上」
・「サイトのレイアウト変更」は「100~140ピクセル」
に設定しましたが、じぶんのホームページの雰囲気と相談して、あるいは、テーマに合わせていろいろ変えてみると楽しいと思います。(参照:テキストp147_別1-2

フォームでショッピングカート

2010/11/26 10:19 に 田口相 が投稿   [ 2014/01/26 23:06 に更新しました ]

 
 
第7回目の講座で、Google ドキュメントを使った「メールフォーム」を作成をしました。
メールフォームは、ホームページ訪問者の感想を聞いたり,アンケートを取ったり,イベントの参加者を募ったり…、コミュニケーションツールとして使うのに便利です。
 
ここではさらに一工夫!
メールフォームをショッピングカートとして使う例を紹介します。
 
実際に、商品販売ページを作ってみました。
商品は、「つくろう!じぶんのホームページ」の講座テキストです!
 
 
※ただし、インターネット通販を行う場合には、「特定商取引法に基づく表記」を記載する必要があります。詳しくは、消費者庁のウェブサイトをご参考ください。
※これは簡易式のオーダーフォーム例です。本格的なインターネットショップを経営する場合は、MakeShopEストアーなどのショッピングカートをレンタルしましょう。
 
 

 
 
Googleドキュメントでフォームを新規作成。
・スプレッドシートフォームで使った機能は、「テキスト」「ラジオボタン」「リストから選択」「段落テキスト」のみです。
・フォームのプロパティで、「フォームの周囲に枠線を付ける」にチェックを入れ、配置を右寄せにしました。
・ページのレイアウトを「2列」にして、左側に商品の説明と画像,右側に注文フォームを置いてみました。
 
※実際に注文フォームが載っているページはコチラ  商品販売ページ
 
 
 
 
 
 
フォーム送信後に表示される確認画面です。
 
 
 
 
商品は、代金前払いダウンロード販売物なので、お客さんからの入金が確認できたら、メールにファイル(商品)を添付して送ります。
通常の物販の場合は、フォームに、商品の「届け先住所」,「電話番号」,「配達希望日時」などの欄が必要になりますね。また、宅配便を手配した後、「商品を発送しました」といった通知メールを送信するなど、オンラインショップ管理人として、お客さんに対する細やかなフォローが必要になってくると思います。
 
 
 

Excel文書を掲載する方法

2010/11/25 3:48 に 田口相 が投稿   [ 2010/11/25 8:50 に更新しました ]

 
 
第7回目の講座で、Google ドキュメントを使った「フォーム」を作成をしました。その応用で、Googleサイトに「スプレッドシート」や「プレゼンテーション」も埋め込むことができます。
 
ここでは、エクセルで作成した文書をGoogleDocsのスプレッドシートに変換して、それをホームページに掲載する方法を紹介します。
 
 
※GoogleDocs文書に変換できるサイズの上限は、エクセルは1MB,ワードやプレーンテキストは500KB,パワーポイントは10MBまでです。
※ホームページ上で文書を見せる必要がない場合は、エクセルファイルを添付ファイルとしてそのままアップロードする方が簡単です!
 
 

【設置方法】
 
■まずは、Googleドキュメント側の操作をします。
 
Googleドキュメントを開いて、自分のアカウントパスワードでログインする。
※既に、Googleサイトを開いている場合は、「ドキュメント」をクリックするだけでO.K.。
 
 
 
Googleドキュメントのページが開くので、「アップロード」をクリックする。
 
 
 
③「アップロードするファイルを選択」をクリックして、任意のエクセルファイルを選び、「開く」をクリックする。
④「PDF や画像ファイルからテキストを Google ドキュメントのドキュメントに変換する」にチェックを入れ、「アップロードを開始」をクリックする。
 
 
 
⑤任意のエクセルファイル名が表示されていれば、アップロードされたということです。
 
 
 
⑥再び、Googleドキュメントの最初のページに戻ります。
アップロードしたファイル名にチェックを入れ、「その他の操作」→「Googleドキュメント版を作成」をクリックする。
 
 
 
⑦Googleドキュメント版がスプレッドシートの形で作成されました!
作成されたGoogleドキュメント版のファイルにチェックを入れ、「共有」→「共有設定」をクリックする。
 
 
 
⑧共有設定の「変更」をクリックする。
 
 
 
⑨「ウェブ上で一般公開」にチェックを入れ、「保存」をクリック。
 
 
 
⑩「ウェブ上で一般公開」となっていることを確認し、「閉じる」をクリックする。
 
 
 
 
■次に、Googleサイト側の操作をします。
 
⑪Googleサイトで任意のページの編集画面を開いて、文書を載せたい場所にカーソルを置く。
挿入」から「スプレッドシート」をクリックする。
 
 
 
⑫スプレッドシートで、任意の文書(①~⑩で作ったもの)を選び、「選択」をクリックする。
 
 
 
⑬ホームページに表示する文書のサイズや表示形式を決めて、「保存」をクリック。
枠線タイトルナシにしておいたほうが見た目にスッキリ!
※「高さ」は文書のサイズに合わせて。「」は空白にしておいたほうがよい。
※「表示形式」は「スプレッドシート」で。
 
 
 
⑭ページのタイトルを書き換えて、「保存」をクリック。
 
 
 
⑮完成!
※エクセル文書と全く同じ…というわけにはいかないですが、似たような感じには仕上がっていると思います。
 
 
 
 
 

地図を設置する方法

2010/11/15 7:26 に 田口相 が投稿   [ 2010/11/15 9:06 に更新しました ]

 
ショップ系ホームページに必要なアクセスマップ
 
街で見つけたかわいい雑貨屋さんや、おいしいレストランを紹介する場合でも、お店の写真と合わせて地図をつけるだけで、ホームページがカッコよく、より便利なものになります。(ただし、ホームページにお店の情報を掲載する場合は、必ず店主の許可をとりましょう。)
 
 
 
地図を設置するには、Googleマップ または Googleマイマップを利用する2通りの方法があります。ここは初心者向け講座なので、簡単なほう(Googleマップ)を設置してみます。
 
 
 
※右に表示してある地図は、Googleマイマップを使いました。
Googleマイマップでは、バルーンを好みの画像に設定できたり、バルーンをクリックすると表示されるフキダシの中を自由に編集できたりします。→
 
 

【設置方法】
 
 
①地図を掲載したいページで「ページを編集」を開いて、地図を掲載したい場所にカーソルを置く。
②「挿入」から「マップ」をクリックする
 
 
 
③「マップ」挿入画面が開くので、地図上をひたすらクリックして目的地が見えるまで拡大させる。
④目的地が見えたら、「目印を置く」をクリックする。
 
 
 
⑤地図上の目的地点をクリックすると、バルーンが立ち、フキダシが表示されるので、フキダシの中の「編集」をクリックする。
 
 
 
⑥目的地点をあらわす言葉を入力して「完了」をクリック。→「選択」をクリックする。
 
 
 
⑦マップの表示の形式サイズを設定して、「保存」をクリックする。
※「Googleマップの周囲に枠線は付ける」にチェックを入れると、境界線がはっきりします。
※「タイトルを表示する」にチェックを入れると、地図の上部に言葉がつきます。
※「高さ」と「」はページにあわせて適当に…。(あとから、「プロパティ」で何度でもやり直しができます。)
 
 
 
⑧Googleマップが入ったことを確認して、「保存」をクリックする。
 
 
 
⑨完成!
アクセスマップとして使うなら、簡単な道順を文章で付け加えることでホームページのクオリティがあがります。
 
 
 
 

カレンダーを設置する方法

2010/11/13 5:44 に 田口相 が投稿   [ 2011/07/06 19:47 に更新しました ]

 
お店や教室系ホームページに必要な営業カレンダー
メニュー項目の「表」でカレンダーを作る方法もアリですが、Googleカレンダーを利用してみましょう。
 
 

【設置方法】
 
■まずは、Googleカレンダー側の操作をします。
 
Googleカレンダーを開いて、自分のアカウントパスワードでログインする。
※既に、Googleサイトを開いている場合は、「カレンダー」をクリックするだけでO.K.。
 
 
 
Googleカレンダーへようこそのページが開いたら、内容が正しいことを確認して、「次へ進む」をクリックする。
 
 
 
③「」をクリックし、月表示にすると、見やすくなります。
 
 
 
任意の日付枠をクリック。→「タイトル」を入力。→「予定の詳細を編集」をクリックする。
 
 
 
予定の詳細をすべて入力したら、「保存」クリックする。
※「終日」のチェックを外すと、活動時間を入力できます。
※「場所」に詳しい住所を入れると、カレンダーから地図にリンクします。
※「説明」を入れると、それがカレンダー上のふきだしに表示されます。
※「通知」は必要ないので、「×」をクリックして削除します。
※「外部向け表示」は任意で。
※「プライバシー」はデフォルトまたは一般公開にチェックします。
 
 
 
⑥「設定」から「カレンダー設定」をクリックする。
 
 
 
⑦「カレンダー」をクリックして、「~@gmail.com」をクリックする。
 
 
 
カレンダー名を分りやすいもの(ホームページ用など)に変えて、「保存」をクリック。
 
 
 
⑨「このカレンダーを共有」をクリックする。
 
 
 
⑩「このカレンダーを一般公開する」にチェックを入れて、「保存」をクリック。
警告画面が表示されたら、「はい」をクリック。
 
 
 
 
■次に、Googleサイト側の操作をします
 
⑪Googleサイトを開いて、自分のアカウントパスワードでログインする。
ページを作成」から、「ウェブページ」を選択して、名前を付けて、「ページを作成」をクリックする。
 
 
 
⑫「挿入」から「カレンダー」をクリックする。
 
 
 
⑬「カレンダー」から、任意のカレンダー(⑧で名前をつけたもの)をクリックして、「選択」をクリックする。
 
 
 
⑭ホームページに表示するカレンダーのサイズや表示形式を決めて、「保存」をクリック。
※「」は空白にしておいたほうがよい。
※「表示オプション」は「~のタブを表示」と「ナビゲーションボタンを表示」のみで十分。
 
 
 
ページのタイトルを書き換えて、「保存」をクリック。
 
 
 
⑯完成!
カレンダーに記載されている文字をクリックすると、ふきだしが出ることを確認する。
 
 
 
 
 
※④と⑤をくりかえすことでカレンダーに予定を追加できます。予定の追加は、Googleカレンダー側から操作します。 
 
 

全ページに著作権表示する

2010/11/03 21:41 に 田口相 が投稿   [ 2010/11/03 23:49 に更新しました ]

 
10/26の講座でトップページを作成した際、ページの一番下に、「Copyright (C) ホームページ名 All Rights Reserved.」と著作権表示を入れました。この一行があることで、「このページにある画像や文章は私のものです。勝手に使うことを禁止します!」と主張していることになります。
 
この著作権表示、たいていのホームページではトップページのみに記載して、その他のページでは省略している場合が多いのですが、ホームページ訪問者が必ずしもトップページを見てくれるとは限りません。権利をしっかり主張したければ全ページに入れましょう。
 
 
 
…とはいえ、全ページにその都度コピーライトを入力するのは大変な作業です。
 
そこで、Googleサイトの「フッター編集機能」を使います。フッターに「Copyright~」と入れておけば、全ページに反映されます。
 
※フッター(footer)とは、ページの一番下「足」の部分です。
 
 
 

【設置方法】
 
①「その他の操作」から「サイトの管理」をクリックして、サイトの外観の「サイトのレイアウト」をクリックする。
②「サイトのレイアウトを変更」をクリックする。
③サイトのレイアウトを変更画面で「フッター」にチェックを入れ、「OK」をクリックする。
 
 
 
 
④「フッターのコンテンツを編集」をクリック。
 
 
 
 
⑤サイトのフッターを編集画面で、コピーライト文を入力し、「OK」をクリックする。
 
 
 
 
⑥「変更を保存」をクリックする。
 
 
 
 
⑦どのページを開いても、フッターにコピーライト文が入っているはずです。
※トップページのコンテンツ内にあるコピーライト文は削除しておきましょう。
 
 
 
 

Googleサイトで作られたホームページ例

2010/11/03 0:41 に 田口相 が投稿   [ 2011/08/14 0:52 に更新しました ]

 
世の中のGoogleユーザーは、GoogleSites(グーグルサイト)を利用してどんなホームページを作っているのでしょうか?
 
 
検索してみたところ、生徒募集のための教室案内…開発アプリケーションの発表の場として…インターネットショップ…書籍情報…医療系ソフトウェアの宣伝…などなど、いろいろなホームページが出てきました。GoogleSitesの導入支援や、GoogleSitesを使ったホームページ制作業者のサイトもありました。
 
 
東日本大震災後、あちこちのメディアで取り上げられた(「OLIVE」被災者に役立つデザイン・アイデア・ノウハウを共有するプロジェクトサイト)も、Googleサイトで作られています。
 
 
※私が作ったこのホームページももちろんGoogleサイトです!
 
 
 
【Googleサイトで作ったと思われるホームページ】
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
 

HTMLソースの編集

2010/11/02 10:00 に 田口相 が投稿   [ 2010/11/02 10:31 に更新しました ]

「ページを編集」画面のメニューバーにある「HTML」をクリックすると、HTMLソースコードを直接編集することができます。
 
 
 
HTMLソースが書けるようになると、通常の編集画面ではできないワザが使えます。
例えば、「<div style="background-color: #000000">~</div>」などのソースコードを使うと、文字の背景色だけでなく、ページ(コンテンツ枠)全体の背景色を設定することが可能です。
 
 
 
 
●背景に「珊瑚色(#f5b1aa)」を設定。
 
// ソースコード //
 
<div style="background-color: #f5b1aa">ここに文字</div>
 
/////////////////////
 
 

●背景に「山吹色(#f8b500)」
●枠線に「オリーブ(#72640c)」を設定。

// ソースコード //

<div style="border: 3px #72640c solid; background-color: #f8b500">ここに文字</div>

//////////////////////

 
●残念ながら・・・
background-image」は使えませんでした。
 
※「background-image」は背景に画像を設定するソースコードです。
※2010年11月現在、Googleサイトでは、コンテンツ部分に背景画像は設定できないようです。(背景画像が設定できるのは、ラッパーやヘッダーなど一部の枠に限られています。)
 
 

Googleサイトに壁紙をつける方法

2010/10/28 10:28 に 田口相 が投稿   [ 2010/10/31 5:09 に更新しました ]

 
※今回のの講座の中で「ホームページの背景画像を設定する方法」は扱いませんが、9日目(11/30)の講座「ヘッダーとサイドバーの調節」の項目で、このようなレイアウトの設定の仕方について少し触れようと思います。
 
 
ホームページに貼りつける「壁紙」とは「背景画像background)」のことです。
残念ながら、Googleサイトでは、画面全体に背景画像をつけることはできません。
しかし、以下のように、部分的に背景画像を設定することは可能です。
 
 
 
ラッパーに背景画像を設定  ※「ラッパー」とはホームページ全体を包む最背面部分のことです。
 
 
 
 
コンテンツに背景画像を設定  ※「コンテンツ」とは、文章や画像が置いてあるメイン部分のことです。
 
 
 
 
ラッパー+コンテンツに背景画像を設定
 
 
 
 
ラッパー+コンテンツ+ヘッダーに背景画像を設定
 
 
 
 

Googleサイトに掲示板を設置する方法

2010/10/28 0:05 に 田口相 が投稿   [ 2011/05/28 21:00 に更新しました ]

現在のところ、Googleサイトには掲示板(BBS)機能が付いていません。
…なので、他社の掲示板をレンタルして、組み込んでみました。
 
テストページを作りました。カキコミO.K.です。お試しください。
 
無料レンタル掲示板なのに広告が入らず、デザインがシンプルなのもいいのですが、
掲示板に参加するのに、アカウントが必要であることが難点です。
また、掲示板管理者である自分も、毎回サインインしなくてはいけないのです…。
 

 
【設置方法】

①「ページを編集」から、「挿入」→「その他のガジェット」をクリックする。



②「ガジェットを設定」画面で、「Tal.ki」と入力し、「検索」をクリックする。
 すぐに、「Tal.ki Forums」が表示されるので、そのバナーをクリックする。



③「選択」をクリックする。



④「OK」をクリックする。(ここで、表示を設定してもいい。あとで設定し直すこともできる。)



⑤これでページにTal.kiが設置されたはずです。
 ※この後、Tal.kiの指示に従ってGoogleアカウントでログインすれば、自然に掲示板をレンタルする形となります。
 

 
参考サイト: ブログやサイトに即席フォーラム式掲示板を設置できる「TaLki」(WEBマーケティング ブログ)
 
 
 
 

1-10 of 14