ホームページを編集しよう

Transcription

1

2 1 ホームページは無料で作れます 2 自分の作品や調べたものを発表する 3 公開できるデータをメモ帳として保存できる 4 お気に入りの動画を保存する 5 売りたい商品を通信販売する

3 Jimdo( ジンドゥ ) の編集 大宮中央校協議会 IT 専修科のホームページには動画等便利に勉強できるようにしてあります 家で分からないことがあったら見てください このスライドも見ることができます 今日の勉強内容 1 URL パスワード メールアドレスについて 2 ログイン ログアウト 編集 プレビューの切り替え 3 編集の入口 (1 レイアウト 設定等 2 ヘッダー 3 ナビゲーション 4 コンテンツ ) 4 画面の構成を見てみる 5 保存 終了方法

4 ホームページに必要なもの ホームページ登録する場合は次の三つが必要です 希望するホームページアドレス (URL) を決める 文字以上 希望する英数字.jimdo.com/ 12 期 HP 連絡用メールアドレス問い合わせのページからメールが届く 12 期メールは ログイン用のパスワードを決める 5 文字以上 12 期 HP パスワードは fureai2014 今日は HP の作成はしません 練習用に作成してある HP 使い勉強します 自分の HP を jimdo で作成する場合は jimdo で検索します

5 ホームページを開こう それでは皆さんグーグルでもヤフーでも 7 期 IT で検索してください 一番上? さいたま市 IT 専修科をクリックしてください 左のような IT 専修科のトップページが表示されます パソコン教室 をクリックしてください その中の ホームページ作成 をクリックしてください そして 一番下の方にスクロールしてください 左のような PC01~PC05 迄 練習用のホームページが作ってあります 最初に名前の右の方に薄い青色でパスワードがあります PC01~03 は nobinobi2014 伊藤さんは fureai2014 コピーしてから名前が書いてある HP をクリックしてください これは旧バージョンです 昨年 8 月以後 新規に作成する場合は新バージョンのレイアクトなります

6 ログインする ログインのボタンはどのページでも一番下の右側にあります ログインをクリックしてみよう 左記のパスワード入力のダイアログボックスが表示されますのでパスワード入力画面にカーソルを持っていき先ほどコピーしたパスワードを貼り付けをします 又は入力してください ログインをクリックしてみよう

7 ログインした画面 ログインした画面です 有料コースの案内が出ます 無料で行いますので をクリックしてください 編集 ログアウト プレビュー プレビュー 編集 ログアウト ログインの練習をしてみよう 12 期 HP もやってみよう パスワードは???

8 編集 設定の入口の説明 ヘッダーの編集この写真 ( イラスト ) の変更 タイトルの編集 ナビゲーションの編集 コンテンツ編集 右側の列のコンテンツ編集 各種設定 各種設定の出し入れボタン

9 各種設定 ヘッダー ナビゲーション コンテンツの中を見てみよう 各種設定 レイアウトスタイルブログ設定 SEO アクセス解析ヘルプアップグレード = 背景 旧レイアウト 独自レイアウトの変更 = 文書 見出し リンク等の文字色サイズの変更 = ブログの編集がここでできる ( 日記等の投稿 ) = パスワード メルアド その他詳細設定 = 検索エンジン ( グーグル ) 用 題名 説明 単語 = アップグレードが必要 ( 無料では不可 ) = 各種説明 = アップグレード入口 この各種設定はスタイルとブログそれにヘルプだけ利用しましょう

10 レイアウトの変更 新レイアウト 旧レイアウトの変更 現在のレイアウト番号 HP の横幅 背景 フォントの調整 ナビゲーションの表示 ヘッダーの高さ等が変更できる 基本的に最初の内は変更もあり得るが 決めた後は絶対に触らない方が良い 新しく HP を作成する場合は新レイアウトになります 旧レイアウトは使えません 今回 12 期のホームページは旧レイアウトですので今回の説明は旧レイアウトで行いうます

11 スタイルの変更 スタイルをクリックすると左記の画面が表示される フォントの設定背景の設定色彩テンプレートカスタマイズ色ジョブスタイルブログスタイルの変更ができます ここで使うとすれば最初のうちに フォントの設定 をするぐらいで他は使用しないと思われます 全てのページの設定をする Style1 から style4 で変更するか個別に変更する 見出しのフォントのサイズと色文章のフォントのサイズと色の設定 文字列をリンクの設定にした時のフォントの色の設定 水平線の線の種類と線の色が設定できる

12 ヘッダー ヘッダーは巻頭の写真の変更やタイトルの編集ができます 出来合いのフォトギャラリーです この写真から選んでも OK ですが? 物足りないかも 自分で撮影した写真やネットの写真等をアップするときはオリジナル画像から ファイルを選択 をクリックしてアップしたい写真を選択します ヘッダーの高さを変更ヘッダーの画像の高低と大きさ 位置の変更 パターンは省略します

13 ヘッダー続き タイトルタイトルの編集 位置 色 サイズの変更をする ヘッダーを変更してみよう 1 ヘッダーの編集 をクリックします = カーソルをヘッダーの画像の下側あたりになるとヘッダーの編集バーが出ますのでクリックします 2 最初は フォトギャラリー を選びましょう 気に入った画像を選んでら 閉じる をクリックします 1 今度は オリジナル画像 を選択して ファイル選択 を選び ピクチャー などから自分のお気に入りの写真をアップしてみましょう 2 ヘッダーの高さを変更 で画像の高低 大きさや位置を変更してみよう 3 変更内容を保存 をクリックします 忘れることが多いです ( 注意 = 解像度の低い写真の場はそれ以上の大きさにはなりません )

14 タイトルを変更してみよう タイトル をクリックします = 下記の画像になります フォントの種類の変更 太字 斜字の設定 さいたま市ユニバーシティ大宮中央校 12 期にようこそ フォントの色を選ぶ タイトルの横位置の選択 タイトルの縦位置の選択 編集が終わったら下側にある閉じるをクリックします

15 出来上がり タイトルが入る場所のある写真を探そう タイトルは大きな文字にしない タイトルの色は目立つ色にする

16 ナビゲーションの編集 < > <>+ 下に移動 上に移動 左に移動 右に移動 下に新規のページ このページを削除 このページを非表示 注意 削除すると復帰は不可です

17 コンテンツ編集

18 見出し コンテンツの見出しをクリックすると下記の画像がでます 白い 見出しの設定 の場所に見出しの文章を入力します 下の大 中 小からフォントの大きさを選択します この見出しを上下に移動する この見出しを削除する この見出しをコピーする この見出しを保存して閉じる この見出しを閉じる 記事の見出し フォントサイズは 3 種類色は各種設定のスタイルで全体を設定する 個別の変更はできない

19 文章 コンテンツの 文章 をクリックすると下記の画像がでます 白い 見出しの設定 の場所に見出しの文章を入力します 下の大 中 小からフォントの大きさを選択します お困りボタン B= 太字 I= 斜字 番号付きリスト 番号ばしリスト リンク やり直す ( 戻る 進む ) 左寄せ 中央 右寄せ 両端 サイズ インデント テキストカラー選択 設定解除 HTML を編集 原稿は直接入力する場合や 寄稿者からメール内に原稿がある場合と メールにワードやエクセルに添付せれたものはダウンロードしてワードを開いて文章をコピーして文章欄に貼り付ける 複数の写真入りの原稿は一度印刷してスキャナーで原稿を画像にして写真としてアップする方法もある また PDF に変更して画像に変換 Jpeg にする方法もある ( 鮮明です )

20 文章 色々操作してみよう 直接入力してみよう 新年あけましておめでとう 今年からホームページを作成しようと思います DVD の Word の 文章 開いてコピーして貼り付けてみよう 文字を修飾してみよう サイズ 太字 斜字 色等 文字列を選択してリンクしてみよう 初志貫徹を選択してをクリックします 内部リンクの場合はした からページを選択してリンクを設定をクリックして保存します 外部リンクの場合はリンクしたいホームページのURLをコピーします 外部リンクを選択して白枠に貼り付けしてリンクを設定して保存をクリックします 今年の新年の抱負は 初志貫徹 に決めました これは 初めに思い立った志を変えず 最後まで貫き通す という意味です どうして初志貫徹にしたかというと 去年の自分を振り返ってみると いろいろなことが中途半端で終わってしまっていたからです 去年も新年の抱負を立てたんですが 達成することが出来ませんでした ですので 今年は気持ちを強く持って これをやるぞ! と決めたことはなにがあっても最後までやり通したいと思います 具体的に言えば 毎日 2 時間は勉強し テストで 90 点以上を取る サッカー部でレギュラーに選ばれる 家で両親の手伝いをする です 難しい目標だと思いますが 少しでも近づけるように日々頑張っていきたいです 途中で挫折しないように 紙に書いて壁に貼っておこうと思います

21 画像 写真 イラスト スキャン画像 PDF 等の画像変換があります 1 コンテンツ をクリックして 画像をクリックします 2 画像をアップロード をクリック 3 ピクチャー等のファイルからアップする画像を選択します 4 開く をクリックします X 又は写真の右下で写真の大きさを設定します 6 右寄せ 中央 左寄せを設定します 7 リンクの設定 キャプチャーを入力する

22 画像 1 コンテンツ をクリックして 画像 をクリックします 2 画像をアップロード をクリック 3 ピクチャー等のファイルからアップする画像を選択します 4 開く をクリックします X 又は写真の右下で写真の大きさを設定します 6 右寄せ 中央 左寄せを設定します 7 リンクの設定 キャプチャーを入力する 8 キャプチャー ( サブタイトル ) を入力する 画像の大きさを設定 画像の横位置の設定 画像の回転 90 度 リ画ン像クの プ画チ像ャのーキャ

23 画像 撮影した画像 スキャンした画像

24 画像付き文章 画像付き文章は先ほどの画像と文章と操作は同じです カラム (2 列 )+ 画像 フォトギャラリー 但し 一つの文章に対して一つの写真です 複数の写真がある場合はフォトギャラリーを使うか? キャプチャーを付けたいのであれば画像とカラムを使う方法があります プリントの場合はスキャナーで画像にするか ファイルの場合は PDF 保存にして画像に変換してアップする方法もあります

25 画像付き文章を使ってみよう

26 フォトギャラリー 1 コンテンツ をクリックして フォトギャラリー をクリックします 2 左のダイアログが表示されます 3 選択 をクリックします 4 ピクチャー等のファイルを開きアップしたい画像を選択して 開く をクリックします 5 ( 削除したい場合は右上の 削除 をクリックしてください ) 6 ファイル欄 に選択した画像のファイル名が表示されます 7 アップロード をクリックすれば OK です 8 ファイル 5 枚一度にアップできます しかし 解像度の高いとアップに時間がかかります

27 フォトギャラリー 1 再度画像をアップロードする場合は左の 画像をアップロード をクリックすると先程の画面になります 2 横並び 縦並び タイル スライダー 等の表示が変更可能です 3 表示サイズ 余白の調整と拡大表示 の有無ボタンがあります グリッド表示 グリッド表示もリスト表示でも削除 回転 順番の変更の設定ができます リスト表示 リスト表示ではキャプチャーが入力でき写真を拡大した時に表示される また リンクの設定ができる

28 フォトギャラリーを使ってみよう 写真によって取り込む時間が違うことに気が付いてほしいカメラで高解像度で撮影すると取り込みに時間が非常にかかります 写真を 4 ツ切りや 6 ツ切りにするのでなければ 1M 程度の写真が良いと思います カメラの高解像は = (A3 プリント用 ) = (A4 プリント用 ) メールにお勧めの解像は = (A3 高解像の 1/33 A4 の 1/10) ホームページの巻頭写真の解像は がお勧め

29 水平線と余白 記事と記事の境界を作るために余白を入れたり水平線を挿入する 記事余白余白記事 水平線 余白 水平線 コンテンツをクリックして余白をクリックします 左記の画像が表示されます で余白を調整します コンテンツをクリックして水平線をクリックすると左図の様に水平線が引かれます 線の色や種類はスタイルより選択する

30 カラム 1 コンテンツから カラム をクリックすると 2 列になりコンテンツも 2 列になります 2 更に編集する場合はカーソルを下に移動すると左図の カラム編集 をクリックします 3 左図の編集画面になります + をクリックすると列が増えます ゴミ箱をクリックすると列が削除されます 列を削除 + 列を追加 列幅調整 列幅を均等化 30