~スマートフォン 用 サイト デザイン 設 定 方 法 ~ ver1.0 1
はじめに 本 マニュアルでは オールインワンを 使 用 し スマートフォン 用 サイトのデザイン 設 定 方 法 をご 説 明 します まずはスマートフォンサイト 用 にサイトデザインを 整 えます ホームページ 情 報 の 登 録 と 基 本 的 な 機 能 を 実 装 していくために 管 理 画 面 についてご 説 明 します 管 理 画 面 TOP A B F A. 管 理 メニュー ページの 各 種 編 集 登 録 やその 他 の 機 能 を 使 うためのメニューです E B. 言 語 設 定 管 理 画 面 の 言 語 を 日 本 語 と 英 語 から 選 択 できます C.TOP 画 面 管 理 メニュー C D ページの 各 種 編 集 登 録 やその 他 の 機 能 を 使 うためのメニューです D. NEWS TOPICS 本 CMSを 使 用 している 他 サイトの 新 着 情 報 が 表 示 されます E. お 知 らせ 本 CMSのアップデート 情 報 や 運 営 からの お 知 らせが 表 示 されます F. パスワード 変 更 管 理 画 面 にログインするパスワードを 変 更 できます 2
1 スマートフォン 用 サイトの 作 成 方 法 すでにPC 用 サイトが 出 来 上 がっている 場 合 スマートフォンでアクセスして 表 示 されるのは PC 用 サイトです スマートフォンからアクセスした 場 合 に スマートフォン 用 サイトを 表 示 させる 方 法 をご 説 明 します 設 定 手 順 1 管 理 画 面 TOP A. 管 理 メニュー デザイン テンプレート 設 定 (iphone/android 用 ) デザイン アイコンにマウスポイ ンタを 重 ねると 吹 き 出 しが 表 示 され ます 吹 き 出 し 内 から テンプレート 設 定 (iphone/android 用 ) をクリック します 2 テンプレート 設 定 (iphone/android 用 ) 内 最 上 部 iphone/android 用 テンプレートを 有 効 にする にチェックを 入 れる 3
3 スマートフォンで 表 示 を 確 認 してください スマートフォン 用 サイトにアクセス 出 来 ています 次 ページ 以 降 では 右 図 のようにサイトにデザインを 設 置 するための 設 定 方 法 を 説 明 していきます 何 も 設 定 していない 状 態 の 画 面 画 像 を 設 定 した 状 態 の 画 面 4
2 スマートフォン 用 サイトのトップデザインを 整 える スマート 用 サイトは 大 きく 下 記 エリアで 構 成 されております 各 エリアへの 画 像 の 入 力 方 法 は 該 当 する 設 定 ページをご 参 照 ください A C D E G B A.ロゴ 画 像 : テンプレート 設 定 (iphone/android 用 ) B-1 (6ページ) B.ヘッダバナー : 7ページ C.ヘッダの 背 景 画 像 : テンプレート 設 定 (iphone/android 用 ) B-2(6ページ) C.ヘッダの 背 景 色 : テンプレート 設 定 (iphone/android 用 ) C-2(6ページ) D.Flash 代 替 画 像 : 9ページ E.メニュー 画 像 (iphone/android 用 ): 10ページ F.トップページバナー : 12ページ G.ページの 背 景 画 像 : テンプレート 設 定 (iphone/android 用 ) B-3(6ページ) G.ページの 背 景 色 : テンプレート 設 定 (iphone/android 用 ) C-3(6ページ) F H.トップページニュースの 見 出 し 画 像 : テンプレート 設 定 (iphone/android 用 ) B-8 (6ページ) I.メイン 部 分 の 背 景 画 像 : テンプレート 設 定 (iphone/android 用 ) B-4 (6ページ) J H I L K M M. フッタの 背 景 画 像 : テンプレート 設 定 (iphone/android 用 ) B-3 (6ページ) M. フッタの 背 景 色 : テンプレート 設 定 (iphone/android 用 ) C-5(6ページ) I.メイン 部 分 の 背 景 色 : テンプレート 設 定 (iphone/android 用 ) C-4 (6ページ) J.メインの 文 字 色 : テンプレート 設 定 (iphone/android 用 ) C-6 (6ページ) K.メインのリンク 色 : テンプレート 設 定 (iphone/android 用 ) C-7 (6ペー ジ) K.メインのマウスオーバー 時 のリンク 色 : テンプレート 設 定 (iphone/android 用 ) C-8 (6ペー ジ) K.メインの 訪 問 済 みリンク 色 : テンプレート 設 定 (iphone/android 用 ) C-9 (6ペー ジ) L.フッタのコピーライト 画 像 : テンプレート 設 定 (iphone/android 用 ) B-6(6ページ) L.フッタの 文 字 色 : テンプレート 設 定 (iphone/android 用 ) C-10(6ページ) 5
1 テンプレート 設 定 (iphone/android 用 ) 画 面 の 説 明 管 理 画 面 TOP A. 管 理 メニュー デザイン テンプレート 設 定 (iphone/android 用 ) A A. テンプレート スマートフォンからアクセスすると スマートフォン 用 サ イトを 表 示 させます B. 各 種 画 像 の 指 定 B-1 ロゴ 画 像 : ヘッダのロゴ 画 像 を 表 示 させます B-2 ヘッダの 背 景 画 像 :ヘッダ 背 景 画 像 を 表 示 させます B-3 ページの 背 景 画 像 :ページの 背 景 に 画 像 を 表 示 させま す B-4 メイン 部 分 の 背 景 画 像 :TOPのニュース 各 記 事 の 背 景 に 画 像 を 表 示 させます B B-5 フッタの 背 景 画 像 :フッタの 背 景 に 画 像 を 表 示 させま す B-6 フッタのコピーライト 画 像 :コピーライトをテキスト でなく 画 像 にしたい 場 合 はここで 設 定 します B-7 iphoneのホーム 画 面 用 アイコン 画 像 : 画 面 上 に ショートカットを 表 示 させる 際 のアイコンを 設 定 できます B-8 トップページニュースの 見 出 し 画 像 :TOPのニュース 表 示 部 分 の 見 出 し 画 像 を 表 示 できます C. 各 種 カラー 指 定 C-1 サイトの 基 調 色 :サイトの 基 調 色 各 ページ 内 の 見 出 し の 色 を 指 定 できます C-2 ヘッダの 背 景 色 :ヘッダの 背 景 色 を 指 定 できます C-3 ページの 背 景 色 :ページの 背 景 色 を 指 定 できます C-4 メイン 部 分 の 背 景 色 : 記 事 部 分 の 背 景 色 を 指 定 できま す C-5 フッタの 背 景 色 :フッタの 背 景 色 を 指 定 できます C-6 メインの 文 字 色 :ニュース 記 事 内 の 文 字 色 を 指 定 で きます C C-7 メインのリンク 色 :ニュース 記 事 内 リンクを 貼 った 際 の 文 字 色 を 指 定 できます C-8 メインのマウスオーバー 時 のリンク 色 :ニュース 記 事 内 リンクを 貼 った 部 分 にカーソルを 合 わせた 際 の 文 字 色 を 指 定 できます C-9 メインの 訪 問 済 みリンク 色 :ニュース 記 事 内 に 貼 ら れたリンク 部 分 を 一 度 クリックした 後 の 文 字 色 を 指 定 でき ます C-10 フッタの 文 字 色 :フッタの 文 字 色 を 指 定 できます C-11 フッタのリンク 色 :フッタにリンクを 貼 った 際 の 文 字 色 を 指 定 できます の 文 字 色 を 指 定 できます C-12 フッタのマウスオーバー 時 のリンク 色 :フッタにリ ンクを 貼 った 部 分 にカーソルを 合 わせた 際 の 文 字 色 を 指 定 できます C-13 フッタの 訪 問 済 みリンク 色 :フッタに 貼 られたリン ク 部 分 を 一 度 クリックした 後 の 文 字 色 を 指 定 できます 6
2 ヘッダバナーの 設 定 方 法 設 定 手 順 1 管 理 画 面 TOP A. 管 理 メニュー その 他 の 機 能 バナー 管 理 (iphone/android 用 ) その 他 の 機 能 アイコンにマウスポ インタを 重 ねると 吹 き 出 しが 表 示 され ます 吹 き 出 し 内 から バナー 管 理 (iphone/android 用 ) をクリック します 2 バナー 管 理 (iphone/android 用 ) が 画 面 が 表 示 されます ヘッダバナー 管 理 をクリックします 3 新 規 バナーの 追 加 をクリックします 4 新 規 バナーの 追 加 が 表 示 されます 画 像 参 照 をクリックし アップロードしたい 画 像 を 選 択 します 最 大 サイズは320 85pxです 画 像 にリンクを 貼 りたい 場 合 URL/ 電 話 番 号 欄 にURLを 記 入 してください 画 像 をクリックしたら 電 話 がすぐかけられるようにしたい 場 合 URL/ 電 話 番 号 欄 に 電 話 番 号 を 記 入 してください 7
5 バナーをアップロードすると バナー 管 理 (iphone/android 用 ) 画 面 に 戻 ります 画 像 が 追 加 されていることを 確 認 してください! ポイント ヘッダバナー の 横 幅 サイズは 最 長 320pxです ロゴ をアップする 場 合 は 合 計 で 横 幅 320pxになるように 作 成 すると ロゴ ヘッダバーナー の 双 方 を 設 定 できます ヘッダバナー 最 大 幅 :320px 設 定 例 ロゴ: 幅 156px 設 定 例 ヘッダバナー: 幅 164px 8
3 Flash 代 替 画 像 の 設 定 方 法 こちらはPCサイト スマートフォンサイト 共 通 設 定 画 像 です Flashが 表 示 できない 際 に 表 示 される 画 像 です 設 定 手 順 1 管 理 画 面 TOP A. 管 理 メニュー デザイン トップページFlash 管 理 デザイン アイコンにマウスポインタを 重 ねると 吹 き 出 しが 表 示 されます 吹 き 出 し 内 から トップページFlash 管 理 をクリックします 2 トップページFlash 設 定 画 面 が 表 示 されます Flash 代 替 画 像 項 目 内 画 像 ファイルを 選 択 をクリックし アップロードしたい 画 像 を 選 択 します 3 アップロードしたあとは 画 像 が 追 加 されていることを 確 認 してください 9
4 メニュー 画 像 の 設 定 方 法 設 定 手 順 1 管 理 画 面 TOP A. 管 理 メニュー ページ 編 集 各 ページ 管 理 ページ 編 集 アイコンにマウス ポインタを 重 ねると 吹 き 出 しが 表 示 されます 吹 き 出 し 内 から 各 ページ 管 理 をクリックします 2 ページ 一 覧 画 面 が 表 示 されます メニュー 画 像 を 設 定 したいページの タイトル をクリックします 10
3 個 別 ページの ページ 編 集 画 面 が 表 示 されます メニュー 画 像 (iphone/android 用 ) 内 の 参 照 をクリックし 掲 載 画 像 を 選 びます ボタンテキスト 表 示 (iphone/android 用 ) にチェックが 入 っている 場 合 チェツクを 外 してください メニューボタンの 背 景 画 像 ( 文 字 の 入 って いない 画 像 )をアップする 際 は ボタンテ キスト 表 示 (iphone/android 用 ) にチェック を 入 れたままにしておくと 背 景 画 像 の 上 に 文 字 が 表 示 されます 4 アップロード 後 はこのように 表 示 されます 11
5 トップページバナーの 設 定 方 法 設 定 手 順 1 管 理 画 面 TOP A. 管 理 メニュー その 他 の 機 能 バナー 管 理 (iphone/android 用 ) その 他 の 機 能 アイコンにマウス ポインタを 重 ねると 吹 き 出 しが 表 示 されます 吹 き 出 し 内 から バナー 管 理 (iphone/android 用 ) をクリック します 2 バナー 管 理 (iphone/android 用 ) 画 面 が 表 示 されます トップページバナー 管 理 をクリックします 3 新 規 バナーの 追 加 をクリックします 4 新 規 バナーの 追 加 が 表 示 されます ファイルを 選 択 をクリックし アップロードしたい 画 像 を 選 択 します 画 像 からリンクを 貼 りたい 場 合 URL/ 電 話 番 号 欄 にURLを 記 入 してください 画 像 をクリックしたら 電 話 がすぐかけられるようにし たい 場 合 URL/ 電 話 番 号 欄 に 電 話 番 号 を 記 入 してください 12
5 アップロードしたあとは バナー 管 理 (iphone/android 用 ) 画 面 に 戻 ります 画 像 が 追 加 されていることを 確 認 してください!! ポイント スマートフォンでの 表 示 チェック 方 法 ブラウザの FireFox のプラグイン FireMobileSimulator をインストールして 設 定 すると PC 画 面 上 にてスマートフォンでの 表 示 状 況 がチェックできます( 携 帯 電 話 での 表 示 もチェックできます) FireFoxのバージョンによって 使 えない 場 合 もありますのでご 注 意 ください FireMobileSimulator 配 布 サイト : http://firemobilesimulator.org/ 13