(2011年前期)ホームページ講座

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

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

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

みんなのヘッダー画像

2011/06/26 20:28 に 田口相 が投稿   [ 2011/07/05 0:42 に更新しました ]


みなさんから送っていただいた画像を元に、ホームページの「ヘッダー画像」を作成しました。何枚か作りましたので、その中からお好みのものを選んでいただけたら…と思います。
 
丸一国府商店
十二窯
ミツバチの楽園
旅の想い出
isoroom
さくらすくなびこな
お犬さまに聞いてみな!
タイトル未定(Iさんのサイト)
 
←各一枚ずつをここに並べてみました。(タグチセレクション。注文順で。)
 
※まだ注文されていない方も、講座終了までに、画像1枚(ナシでもOK!)とホームページタイトルを用意していただければヘッダー画像作りますよ!
 
 
 
ヘッダーサイズは、GoogleSitesで配布されているテーマの平均サイズ100×1130ピクセルになっています。
 
 
講座では、
・「画像の配置」は「横:左」,「縦:上」
・「サイトのレイアウト変更」は「98~100ピクセル」
に設定しましたが、じぶんのホームページの雰囲気テーマに合わせていろいろ変えてみると楽しいと思います。(参照:テキストp147-148
 

動画を設置する方法

2011/06/24 0:04 に 田口相 が投稿   [ 2011/06/24 3:35 に更新しました ]

【準備】
あらかじめ、YouTubeに動画をアップロード、または、引用する動画を決めておく。
動画のアップロード方法は、YouTubeのヘルプページ参照

 

 
 

①YouTubeで任意の動画を開き、URLをコピーする。

※youtube動画のURLは「~v=***********」というように、最後が11ケタの英数字になっているはずです。
余分なものが付いている場合は、消しておきましょう。





②「ページを編集」をクリック。
動画を入れる場所にカーソルを置いて、「挿入」→「動画」→「YouTube」をクリック。





③「YouTube動画を挿入」が開いたら、①でコピーしておいたURLをペースト(貼りつけ)して、「保存」をクリック。





④動画の「配置」や「折り返し」などを調整したら、最後に、「保存」を忘れずに!


 
 

画像にツールチップをつける

2011/06/09 1:23 に 田口相 が投稿   [ 2011/06/24 4:49 に更新しました ]

ホームページの画像にマウスポインタを乗せた際、その画像の説明が表示されるのを見たことがありますよね。

代替テキストの説明画像

画像のHTMLタグに、「alt属性値」や「title属性値」を設定することで、このようなツールチップを出すことができます。

・alt属性…画像が非表示となってしまった場合の代替テキスト。
・title属性…ポインタを画像に合わせたときに表示される画像の説明テキスト。


ところが、Googleサイトにはこのような属性値を入力するツールがありません。
(Googleが画像のalt属性テキストをインデックスしないせいか…?)
…ということは、あえて設定する必要はないのかもしれませんが、一応、HTMLから設定する方法を記載しておきます。





①「ページを編集」を開いて、編集したい部分にカーソルを置き、編集バーの「HTML」をクリック。

②「HTMLを編集」で、画像を表すタグ「<IMG~~~」を探す。

③IMGの後ろに、alt="画像の代替テキスト" と title="画像の説明"を入力。※それぞれ、前後に半角あけること!


④「更新」→「保存」を忘れずに!




画像加工≪角丸≫と≪ボカシ≫

2011/06/03 1:01 に 田口相 が投稿   [ 2011/06/03 12:12 に更新しました ]

画像にちょっと手を加えるだけで、ホームページ全体の雰囲気が、やわらかい感じになったり、シャープな感じになったり…とても見やすくなります。

通常、画像を加工するには、Fireworks(ファイヤーワークス)や、Photoshop(フォトショップ)などのグラフィック系ソフトウェアを使用するのですが、ここでは、カンタンに!しかも、無料で!画像加工ができるジェネレータを2つ紹介します。

挑戦する加工は、、、

  • 画像の角をまるくする≪カドマル≫
  • 画像をやわらかいイメージにする≪ボカシ≫
 

■RoundPicでカドマル加工

RoundPicを開く。
②「参照」→「Round it!」で加工したい画像を開く。
大きさ(ImageのWidthやHeight),角丸のカーブ具合(Round)を設定して、「Round!」をクリック。
④できあがった画像に名前(~.jpg)をつけて、「Download」をクリックして画像をゲット!



 

■BlurHighlightでカドマル&ボカシ加工

BlurHighlightを開く。
②「ファイル選択」で加工したい画像を開く。





③画像が読み込まれたら、コントロールパネルでいろいろ加工する!

≪色合い≫の加工
周りの色…クリックでカラーパネルを出し、画像に色のフィルターをかけることができる。
周りの暗さ…ドラッグで調節できる。「0%」にすると「周りの色」は生きず、元画像の色合いのまま。

≪カドマル≫の加工
画像を丸める…ドラッグで調節できる。「100」に近くなるほど角丸のカーブが深くなる。





Imageの画像をクリックすると、●●●(または×)が表示されるので、マウスドラッグでぼかす範囲を広げる

≪ボカシ≫の加工
形状…「四角」か「円」をチェックで、ぼかす形を選択できる。
ぼかしの強さ…ドラッグで調節できる。「100px」に近くなるほど強いボカシになる。
四角の角…ドラッグで調節できる。「100」に近くなるほどボカシの範囲枠がまるくなる。





④小技いろいろ。


ぼかす範囲枠は、、、

」をドラッグして、タテ・ヨコ・ナナメに広げたり縮めたりできる。
」マークをドラッグして、枠を移動させることができる。




※左の例は、
 右上の「
」をひっぱり、
 ぼかす範囲を縮めて、
 左下に移動させてみました。



そのほかにも、、、

画像のクリック&ドラッグで、ぼかしを入れる範囲を決めたら、

形状で「」にチェックを入れて、
ぼかしの強さを「59%」に設定、
周りの色で「濃い緑」を選択し、
周りの暗さを「70%」に設定、

ぼかす位置を移動させ、範囲をドラッグでのばすと、、、


デジタルタワーの後ろに大きな月(?!)ができました!

 



⑤最後に、「編集結果を保存」をクリック→名前をつけて→自分のPCに「保存」することを忘れずに!
※BlurHighlightでは、保存できる画像形式は「.png」のみ。


 
 
 

画像の折り返し機能をうまく使うコツ

2011/06/01 4:51 に 田口相 が投稿   [ 2011/06/03 1:01 に更新しました ]

 

①「ページを編集」を開いて、画像を入れたい場所にカーソルを置く。





ENTERキーを数回押して、画像を入れる余白をたっぷり空ける。





③カーソルを余白の上のほう(…といっても、文章の1~2行下辺りがよい)に置き、
挿入」→「画像」をクリックして、まずは1枚目の画像を追加する。





ここがポイント! 1枚目の画像を入れたら、
折り返しをオンにしてから、画像のにカーソルを置く。(画像にピッタリではなく、少し間を空けて…!)





2枚目の画像を追加。
ちょっとズレて入るが、折り返しをオンにすると高さがそろう。





3枚目の画像も同様に、、、
2枚目の右にカーソルを置く→画像を追加→折り返しをオン
3枚全部の高さがそろったところで、余白をDELキー または BackSpaceキーでつめる。





⑦最後に、「保存」を忘れずに!

 

 

【おまけ】 HTMLタグがわかるなら、編集バーの「」をクリックして、「HTMLを編集」するほうが早いです。

  • <DIV~</DIV>に囲まれた部分が、それぞれの画像が入っている枠です。
  • この3つの枠がきちんと並んでいればO.K.です。
  • ピンク色枠=ピンクのバケツ画像,黄色枠=黄色のバケツ画像,緑色枠=緑のバケツ画像を表しています。
 
 

Picasa③ ~サイトに画像をよみこむ~

2011/05/23 7:46 に 田口相 が投稿   [ 2011/05/23 8:34 に更新しました ]

 

Googleサイトを開く。
ページを編集」をクリックしてページを開き、画像を入れたい場所にカーソルを置く
挿入」から「Picasaの写真」をクリックする。




⑭画像が入っているアルバムをクリックする。




⑮アルバムの中身が開いたら、、、
任意の画像をクリック。→「選択」をクリックする。




⑯画像が入ったら、配置やサイズなどを調節し、「保存」をクリックする。




Picasaに大量の写真を入れる場合は、アルバムを複数作成して、写真を分けて保存しましょう。
アルバムを増やすには、「⑤アルバムを作成します。」からの作業をくりかえします。

 
 
 

Picasa② ~倉庫に画像を追加する~

2011/05/23 7:15 に 田口相 が投稿   [ 2011/05/23 8:23 に更新しました ]

 

⑧「アップロード」をクリックする。




⑨「既存のアルバムを選択」をクリックする。




⑩任意のアルバム(画像倉庫)名をクリック。→「アルバムを選択」をクリックする。




⑪「アップロードする写真を選択」をクリック。→任意の画像をクリック。→「開く」をクリックする。
※複数枚の画像を一度にアップロードする場合は、CTRLキーを押しながら画像をクリックします




⑫「OK」をクリックするのを忘れずに!




Picasa①で作ったアルバム(画像倉庫)に複数の写真が入りました。続けて、、、、

 
 

Picasa① ~Picasaに画像倉庫を作る~

2011/05/23 6:20 に 田口相 が投稿   [ 2011/05/23 8:32 に更新しました ]

Picasaのスタイル変更にともない、画像アップロードの方法が少し変わりました。以前の方法をこちらのものに差し替えます。
 

Picasaウェブアルバムを開いて、自分のアカウントパスワードでログインする。

②初めてPicasaにアクセスしたときのみ、「Googleプロフィールを作成して写真を掲載」の画面が出ます。
自分のプロフィールを編集したい場合は、「プロフィールを作成」をクリックして編集します。
特に必要のない場合は、「いいえ」をクリックします。



③本当によろしいですか?の画面が出るので、
プロフィールを作成しない」をクリックする。


※プロフィールの作成は、あとから設定することが可能です。
とりあえず、今は、写真倉庫を作ることが目的です。
まずは、そちらを先に完成させましょう。




④「アップロード」をクリックする。




⑤アルバムを作成します。
任意の「タイトル」を入力。
公開設定を、「リンクを知っている全員」または「ウェブ上で一般公開」にして、「続行」をクリック。




⑥「アップロードする写真を選択」→任意の画像→「開く」の順にクリックする。




⑦画像が入ったことを確認して、「OK」をクリックする。




Picasaに画像倉庫ができました。

続けて、、、、

 
 

1-8 of 8