SHIFT 中 級 マニュアル 1. 画 面 の 構 成 を 考 えましょう (1) 基 本 的 な 構 成 壱 岐 市 商 工 会 基 本 情 報 代 表 者 名 郵 便 番 号 住 所 TEL FAX メールアドレスを 登 録 します 代 表 者 名 郵 便 番 号 住 所 TEL は 必 須 です メールアドレスを 登 録 すると メール で 問 い 合 わせがあります 不 要 なDMを 誘 引 することにもなりますので ご 注 意 ください PR 情 報 画 面 上 部 に 掲 載 するPR 情 報 を20 項 目 まで 登 録 できます 項 目 名 内 容 とも に 自 由 に 編 集 できます 登 録 しなくても 構 いません 詳 細 情 報 ページ 上 部 のメイン 情 報 下 部 の4 記 事 を 登 録 できます キーワードは 10 個 まで 登 録 でき Yahoo! Google などにヒットする 可 能 性 が 高 ま ります トップページの 新 着 情 報 20 個 まで 登 録 できます この 情 報 の 説 明 文 写 真 が 雲 仙 まるごとネットのト ップページなどに 自 動 掲 載 されます 商 品 販 売 元 情 報 通 信 販 売 のため 商 品 情 報 を 登 録 する 前 に 必 ず 入 力 してください 正 しく 登 録 すれば 特 定 商 取 引 法 上 の 問 題 はクリア します 商 品 情 報 宿 泊 施 設 用 テンプレートに 変 更 する パスワードを 変 更 する 1
(2) 構 成 を 考 えましょう SHIFTシステムのHPは1 枚 なので サイト 下 部 の 商 品 情 報 詳 細 情 報 までたど り 着 くまえに 別 のサイトへ 移 動 してしまう 可 能 性 があります 情 報 量 にも 左 右 されますが 情 報 を 絞 るか 古 い 新 着 情 報 は 削 除 するなどの 工 夫 が 効 果 的 であると 考 えられます パターン 別 のレイアウトを 例 示 します 基 本 的 な SHIFT のページ 新 着 情 報 を 省 いたページ 2
商 品 情 報 のページ1 商 品 情 報 のページ2 新 着 情 報 のページ1 新 着 情 報 のページ2 (3) 活 用 例 3
2. 画 像 データ (1) 画 像 の 形 式 画 像 ( 写 真 など)の 形 式 には jpg(ジェイペグ) gif(ジフ) png(ピング) bmp (ビットマップ)などがありますが SHIFTに 登 録 できる 画 像 の 形 式 は jpg gifpng のみとなっていますのでご 注 意 下 さい それ 以 外 の 形 式 の 画 像 は jpg gif png のいずれかに 変 換 してから 登 録 をお 願 い します 変 換 が 難 しい 場 合 変 換 方 法 が 分 からない 場 合 は 商 工 会 各 支 所 へお 問 い 合 わ せ 下 さい なお doc(ワード) xls(エクセル)なども 掲 載 可 能 なので 企 業 解 説 の 文 章 やテキ スト 地 図 などを 掲 載 できます (2) 登 録 された 画 像 の 表 示 サイズ 幅 220pixel 幅 150pixel 幅 120pixel 幅 150pixel 幅 120pixel 4
(3) 登 録 する 画 像 のサイズ 1 推 奨 サイズ SHIFTは 登 録 する 画 像 サイズは 50kb 未 満 を 推 奨 しています きれいな 写 真 を 掲 載 しようとして 大 容 量 の 画 像 を 登 録 しても 50kb 以 上 の 画 像 は 自 動 縮 小 され るためです 殆 どの 写 真 は ダブルクリックすると 別 ウィンドウが 開 き 写 真 が 表 示 されます 50kb 以 上 の 写 真 を 登 録 すると この 別 ウィンドウでは 幅 300pixel で 表 示 されます が 50kb 未 満 の 写 真 では 原 寸 通 りの 写 真 が 表 示 されます 画 質 にも 左 右 されます が 登 録 時 の 写 真 サイズが 50kb 未 満 であれば 幅 600~700pixel くらいまで 表 示 できるようです 一 方 登 録 前 の 画 像 が 幅 300pixel 未 満 の 場 合 300pixel に 引 き 伸 ばされることか ら 粗 い 写 真 になってしまいます 携 帯 電 話 のカメラなどで 撮 影 した 写 真 を 使 用 する 場 合 はご 注 意 下 さい 2 大 きい 写 真 大 きすぎる 画 像 を 登 録 しようとすると 送 信 エラーとなることがあります 概 ね 500kb 以 上 の 画 像 を 登 録 する 際 にエラーが 多 発 しますので これ 以 上 のサイズ の 画 像 は 登 録 前 にいったんサイズを 縮 小 してください 3 小 さい 写 真 登 録 前 の 画 像 が 幅 300pixel 未 満 の 場 合 300pixel に 引 き 伸 ばされることから 粗 い 写 真 になってしまいます 携 帯 電 話 のカメラなどで 撮 影 した 写 真 を 使 用 する 場 合 はご 注 意 下 さい デジカメの 解 像 度 は 万 画 素 子 という 言 葉 で 表 現 されます 画 素 はデジカメが 記 録 できる 最 少 の 点 なので 同 じレンズを 用 いた 場 合 は 画 素 が 大 きいほど 精 巧 な 写 真 が 撮 影 できます この 点 (ドット)のことを pixcel(ピクセル)といいます 例 えば 幅 1200 縦 800 の 点 を 記 録 できるデジカメは 1200 800=96 万 pixcel なので 約 100 万 画 素 となります 色 は3つの 基 本 原 色 ( 赤 青 黄 )からなり 1つの 原 色 に 256 通 りの 濃 淡 がある ため フルカラーとは 256 256 256=1678 万 色 となります 色 はコンピュータ 内 部 では8 桁 の 数 字 で 表 現 されているので 8 ビット 必 要 で 8 ビ ット 3 原 色 =24 ビットです 8 ビット=1bite(バイト)なので 24 ビット=3bite です 96 万 pixcel をフルカラー 表 示 させると 96 万 3=288 万 bite=2812.5kb(キロハ イト)=2.75mb(メカ ハ イト)となります 100 万 画 素 のテ シ カメでは 2.75mb の 写 真 が 撮 れることになります 実 際 のテ シ カメは 圧 縮 技 術 があるため これよりも 小 さいサイス となります 5
3. 超 簡 単 なタグの 使 い 方 (1) 参 考 になるHP みんなのタグ 辞 書 http://www.heo.jp/tag/ TAG index http://www.tagindex.com/ タグの 絵 本 http://www.site-html.com (2)SHIFTシステムで 使 用 できる 主 なタグ 一 覧 フォント 系 内 容 表 示 例 タグの 使 用 例 1 太 字 ここが 太 字 です ここが<b> 太 字 </B>です 2サイズ サイズを 工 夫 します サイズを<font size=6> 工 夫 </font> します 3 色 字 を 色 付 き 文 字 にします 字 を<font color=red> 色 付 き 文 字 </font>にします 4 斜 体 字 を 斜 め にします 字 を<i> 斜 め</i>にします 5 下 線 字 に 下 線 をつけます 字 に<u> 下 線 </u>をつけます 6 組 み 合 わせ いろいろ 工 夫 して! いろいろ<b><i><u><font color=red size=5> 工 夫 </font></b></i></u>して! 注 )2: 通 常 の font size は3です 1~6の 整 数 で 設 定 することが 多 い 3: 色 は 英 語 表 記 のほか 記 号 でも 表 現 できます 色 見 本 は 下 記 HP 参 照 TAG index http://www.tagindex.com/color/safe_color.html みんなの TAG 事 典 http://www.heo.jp/tag/color/ リンク 系 内 容 1 新 しいウィンドウでリンク 先 が 開 く 使 用 例 <A href="http://www.xxxx.xx" target="_blank">リンク</a> 2 同 一 ウィンドウでリンク 先 が 開 く <A href="http://www.xxxx.xx" target="_self">リンク</a> 3 親 ウィンドウでリンク 先 が 開 く <A href="http://www.xxxx.xx" target="_parent">リンク</a> 4トップウィンドウでリンク 先 が 開 く <A href="http://www.xxxx.xx" target="_top">リンク</a> 注 )1: 外 部 へのリンクは 1を 使 用 します 2: 同 一 サイト 内 へのリンクは 2を 使 います 3 4はあまり 使 用 しません 6
画 像 系 内 容 1 画 像 を 引 用 する 使 用 例 <img src="http://www.xxxx.xx.gif"> 2 画 像 を 引 用 する( 右 クリック 禁 止 ) <img src="http://www.xxxx.xx.gif" oncontextmenu="return false"> 3 画 像 を 引 用 する( 幅 指 定 ) <img src="http://www.xxxx.xx/aojiru.gif" width="100"> 4 画 像 を 引 用 する(サイズ 指 定 ) <img src="http://www.xxxx.xx/aojiru.gif" width="100" height="50"> 5 画 像 をクリックしたらリンク 先 が 開 く <a href="http://www.xxxx.xx "><img src="http://www.xxxx.xx/aojiru.gif "></a> 注 ) 外 部 サイトなどの 写 真 引 用 は 著 作 権 にご 注 意 下 さい プロバイダの 無 料 HPスペース 等 に 写 真 をおいておくと カタログを 作 ること が 出 来 ます 2:ブラウザの 種 類 によっては ダウンロード 可 能 です スクロール 系 内 容 1 右 から 左 へ 2 範 囲 設 定 3 左 から 右 へ 4 左 右 へ 反 復 使 用 例 <marquee>スクロール</marquee> <marquee width="200"> 横 幅 </marquee> <marquee direction="right"> 右 へ</marquee> <marquee behavior="alternate"> 左 右 へ 動 く</marquee> 5 範 囲 設 定 <marquee behavior="alternate" width="200"> 決 まった 幅 で 左 右 へ</marquee> 6 背 景 に 色 を 付 ける <marquee bgcolor=" 色 コード"> 背 景 に 色 を 付 ける</marquee> 7
4.SHIFT システムにおける 表 の 活 用 (1)つくりかた 例 1ホームページビルダー 等 で htm を 新 規 に 作 成 し 表 を 作 成 2htm ソースの 内 <table>と</table>の 間 をコピーして ワードに 貼 り 付 け 3ワードで 改 行 を 整 理 4SHIFT へそのままコピー (2) 注 意 表 を 作 るには ホームページビルダーなどの 専 用 ソフトがあると 便 利 です ワードやエクセルにもhtml 作 成 機 能 はありますが 画 面 通 り 表 示 させるためには 慣 れが 必 要 です ワード エクセルで html を 作 り html ソースを 表 示 させる 方 法 1 作 ったデータを ファイル-web ページとして 保 存 をクリック 2 ファイル-ブラウザでプレビュー をクリック 3Internet Explorer が 開 く 4 表 示 -ソース をクリック 5. 参 考 になるHP IT 用 語 事 典 e-words http://e-words.jp WebPage 工 房 http://www.rohdea.com とほほの WWW 入 門 http://www.tohoho-web.com/www.htm 超 初 心 者 のためのホームページ 作 成 講 座 http://park16.wakwak.com/~html-css/ みんなのタグ 辞 書 http://www.heo.jp/tag/ TAG index http://www.tagindex.com/ タグの 絵 本 http://www.site-html.com/ 8