ユーザーズマニュアル 初 級 編 Ver2.2 2014.08.04
目 次 <1> はじめに 1-1 このサイトの 特 徴 4 1-2 MORPH(モーフ)とは? 4 <2> 管 理 画 面 について 2-1. 管 理 画 面 へログインする 5 2-2.ログアウトする 5 <3> ページの 編 集 について 3-1 各 ページの 文 章 や 画 像 を 編 集 する 6 よくある 質 問 ~ 改 行 の 仕 方 は? 8 3-2 テキスト モード 時 のメニューについて 9 3-3 ビジュアル モード 時 のメニューについて 10 3-4 アドバンス ツールバーのメニューについて 11 3-5 新 着 情 報 を 書 く 12 3-6 ページを 追 加 する 13 <4> 画 像 の 挿 入 編 集 について 4-1 画 像 をアップロードする 15 よくある 質 問 ~ 画 像 のサイズを 変 更 するには? 16 4-2 アップロードした 画 像 一 覧 を 見 る 18 4-3 画 像 一 覧 から 画 像 を 削 除 する 18 4-4 メディアを 追 加 で 画 像 の 簡 単 挿 入 19 よくある 質 問 ~ギャラリーって 何? 20 2
4-5 トップイメージ 画 像 を 編 集 する 20 <5> メニューについて 5-1 サブメニューとサイドメニューの 違 い 22 5-2 サブメニューの 追 加 方 法 23 5-3 サイドメニューの 追 加 方 法 25 5-4 サブメニュー/サイドメニューの 項 目 の 削 除 方 法 26 5-5 サイドメニュー 全 体 の 削 除 方 法 27 <6> その 他 6-1 表 を1 段 増 やす 28 6-2 表 をイチから 作 る 30 6-3 地 図 の 作 成 修 正 32 3
<1> はじめに 1-1 このサイトの 特 徴 お 客 様 の WEB サイトは WordPress というシステムをベースにして 当 社 独 自 のシステムカスタ マイズを 加 え デザイン 制 作 を 行 い 納 品 しております 従 来 は WEB サイトの 編 集 を 行 うには 専 門 の 知 識 専 用 のソフトが 必 要 でしたが 当 社 がご 提 供 する WEB サイトは お 客 様 でも 簡 単 に 文 章 や 画 像 の 編 集 ができる 機 能 (CMS)を 搭 載 しており ます このマニュアルでは その CMS を 使 ってページ 編 集 を 行 うための 説 明 を 行 っております 尚 ご 不 明 点 等 のサポートにつきましては 当 マニュアルでご 説 明 している 機 能 の 範 囲 までと させて 頂 いております WordPress のカスタマイズやテーマ 変 更 個 別 プラグインの 追 加 変 更 等 高 度 な 知 識 をお 持 ち の 方 は 全 ての 編 集 が 可 能 ですが 当 マニュアルで 説 明 していない 箇 所 の 編 集 を 行 った 場 合 サ ポートの 対 象 外 となり 弊 社 での 責 任 は 負 いかねますことをご 了 承 ください ご 理 解 の 上 でカスタマイズ 等 を 行 いたい 場 合 ですが WordPress 公 式 フォーラムがございます 問 題 解 決 へのヒントを 見 つけることができますので こちらをご 活 用 ください WordPress 公 式 フォーラム http://ja.forums.wordpress.org/ 1-2 MORPH(モーフ)とは? MORPH には 変 形 という 意 味 が 含 まれております 従 来 は PC 版 とスマートフォン 版 それぞれ2つのホームページを 作 成 しなくてはなりませんで したが このシステムではその 必 要 はなく 1つのホームページが iphone Android 等 のスマ ートフォン ipad 等 のタブレット そして PC 等 アクセスされたデバイスに 対 して 最 適 な 表 示 へと 変 化 (=Morph)する 機 能 を 持 っています この 機 能 は 1 度 の 修 正 でどのデバイスにも 対 応 できるので 効 率 よく 更 新 でき また 専 用 知 識 や 専 用 ソフトを 使 わずとも ページ 内 容 を 編 集 できる 機 能 も 搭 載 しております あまり 知 識 のない 方 は 文 字 入 力 だけを 中 心 に ちょっと HTML がわかる 方 は HTML タグを 使 い スキルに 合 わせて 編 集 が 可 能 です また この 編 集 機 能 は PC だけでなく ipad 等 のタブレットからも 操 作 できるので いつでもど こからでもインターネットに 接 続 された 環 境 であれば 編 集 が 可 能 なのも 魅 力 の1つです 4
<2> 管 理 画 面 について 2-1 管 理 画 面 へログインする 1)WEB ブラウザにて 以 下 URL へアクセスします http:// お 客 様 のドメイン 名 /struct/wp-login.php 例 )お 客 様 のドメイン 名 が test-domain.com であれば http://test-domain.com/struct/wp-login.php となります 2) 上 記 ログイン 画 面 が 表 示 されましたら ユーザー 名 パスワードを 入 力 して ログイン ボタンをクリックして 下 さい 3 回 間 違 えると 1 時 間 アクセスできなくなります その 際 は 時 間 を 空 けて 再 度 お 試 し 下 さい パスワードをお 忘 れの 際 はお 問 い 合 わせ 頂 ければ ご 登 録 メールアドレス もしくは FAX にてご 案 内 いたします セキュリティの 都 合 上 お 電 話 でのご 案 内 は 致 しておりません ユーザー 名 パスワードにつきましては お 送 り 致 しました 納 品 のご 案 内 メールに 記 載 しておりますので こちらをご 確 認 ください 2-2 ログアウトする 1) 管 理 画 面 にログイン 中 は 最 上 部 に 黒 い 帯 が 出 ています 右 上 に 表 示 されているアカウント 名 をクリックすると メニューが 表 示 されます 2)メニューの ログアウト を 選 択 して 下 さい 以 上 で 管 理 ツールを 終 了 することができます この 作 業 は ページの 編 集 等 を 行 った 後 最 後 に 行 って 下 さい 5
<3> ページの 編 集 について 3-1 各 ページの 文 章 や 画 像 を 編 集 する 管 理 画 面 は ダッシュボードと 呼 ばれており 各 種 作 業 メニューが 常 に 左 に 出 ています ここでは 各 ページの 文 章 や 文 章 中 に 混 在 する 画 像 を 編 集 する 方 法 をご 説 明 します 1)メニュー/ 固 定 ページにマウスをドラッグすると サブメニューが 表 示 されます 2)サブメニューの 固 定 ページ 一 覧 をクリックして 下 さい 各 ページ 名 の 一 覧 表 が 表 示 されます 6
3) 編 集 したいページのタイトルをクリックします この 一 覧 はお 客 様 毎 にメニュー 数 やタイトル 名 が 異 なります 以 降 該 当 ページの 編 集 モードになります 初 期 の 段 階 では テキスト 編 集 モード( 赤 枠 の 部 分 )になっており HTML タグがわかる 人 向 けのモードになっています HTML がよくわからないという 方 は 青 枠 で 囲 われた ビジュアル タブをクリック してください ワープロ 感 覚 で 文 章 を 入 力 したり レイアウトを 整 えたりすることができます 上 部 のメニューは テキスト ビジュアル それぞれのモードで 異 なりますので 次 ページにて 説 明 します 画 像 については p.19 メディアを 追 加 で 画 像 の 簡 単 挿 入 のページをご 覧 ください 画 像 のサイズや 明 るさの 調 整 は 画 像 加 工 ソフト Pixlr Editor(ピクセラエディタ)で 行 えま す このマニュアルがアップされている お 客 様 サポートサイト customer.vim01.com で ソフトの 入 手 方 法 や 使 用 方 法 を 説 明 しておりますので 必 要 な 方 はご 確 認 ください 編 集 をした 後 は 必 ず 右 の ボタンをクリックして 保 存 をしてください 7
よくある 質 問 ~ 改 行 の 仕 方 は? ビジュアルモードでは ワードと 同 じ 感 覚 で 入 力 ができますが 同 じようで 少 し 違 う 結 果 にな ることもあります (1)ワードで Enter を 押 すと 改 行 されますが WordPress 上 で Enter を 押 すと < 画 像 A>のように 余 計 な 行 が 空 いてしまいます (2) 一 方 Shift+Enter では< 画 像 B>のような 状 態 になり 通 常 のワードで Enter を 押 した ときと 同 じような 結 果 が 得 られます (1)の 作 業 をしたあと ビジュアルモード テキストモードに 切 替 えて 確 認 すると <p><p/> というタグでくくられています< 画 像 A-2> 一 方 (2)の 作 業 をすると <br/>というタグが 入 っているのが 確 認 できます< 画 像 B-2> ひとつの 文 章 の 塊 の 中 での 改 行 をしたい 場 合 は shift+enter 別 のかたまりの 文 章 としたい 場 合 は Enter のみで 改 行 すると 良 いでしょう < 画 像 A> < 画 像 A-2> < 画 像 B> < 画 像 B-2> 8
3-2 テキスト モード 時 のメニューについて 1メディアを 追 加 :8に 似 ていますが PC 内 にある 画 像 を 直 接 アップロードして 画 像 を 挿 入 できるので 直 感 的 に 作 業 ができます 詳 しくは メディアを 追 加 で 画 像 の 簡 単 挿 入 ページ (19 ページ)にて 説 明 します 2 太 字 : 選 択 した 文 字 を 太 字 にします 3イタリック: 選 択 した 文 字 を 斜 体 にします 4リンクの 挿 入 : 選 択 した 文 字 にリンクを 挿 入 することができます 5 引 用 : 前 後 左 右 にスペースが 空 きます 注 意 書 きや 引 用 時 等 に 使 用 します 6 打 ち 消 し: 選 択 した 文 字 に 打 ち 消 し 線 を 引 きます 7 挿 入 : 選 択 した 文 字 を 後 から 入 れたことを 示 すために 使 用 します 8 画 像 の 挿 入 : 事 前 にアップロードしておいた 画 像 を クリックした 箇 所 に 挿 入 します 9 11リスト 作 成 : 箇 条 書 きの 先 頭 に 番 号 や マーク 等 の 付 与 を 行 います ul ol li ボタンの 使 い 方 1.リスト 化 したい 文 章 を 編 集 画 面 に 入 力 し 改 行 しておきます 2. 各 行 毎 に 選 択 して li ボタンをクリック 3. 上 記 文 章 を 全 て 選 択 してから ul または ol ボタンをクリックします ul と ol の 違 いについては 前 者 が 番 号 なし 後 者 が 番 号 ありとなります 12コード:これは 実 際 に 使 うことはありませんので 説 明 を 省 略 します 13More タグを 挿 入 : 長 文 になるようなところで 記 事 の 抜 粋 部 分 だけを 見 せたい 時 に 使 います このタグ 以 降 は 表 示 が 省 略 され 続 きを 読 む という 表 示 のみになります 今 回 のデザインではご 利 用 になれません 14タグを 閉 じる: 文 字 を 入 力 後 にクリックすると 最 後 に 使 った 機 能 (2 3 5 6 7 9 10 11 12 等 )において その 終 了 タグを 追 加 する 15フルスクリーン: 最 初 のクリックで 入 力 エリアが 拡 大 され もう 一 度 クリックすると 元 の 大 きさに 戻 ります 9
3-3 ビジュアル モード 時 のメニューについて 1メディアを 追 加 :テキストモードの8 img に 似 ていますが PC 内 にある 画 像 を 直 接 アッ プロードして 画 像 を 挿 入 できるので 直 感 的 に 作 業 ができます 詳 しくは メディアを 追 加 で 画 像 の 簡 単 挿 入 ページ (19 ページ)にて 説 明 します 2ファイル: 新 規 作 成 印 刷 ができます 新 規 作 成 をクリックすると それまでに 入 力 していたデータが 消 えます ページを 下 書 きとし て 保 存 してから 新 規 作 成 ボタンをクリックするようにしてください すぐに 公 開 したくない 場 合 は データをどこかに 保 存 しておいてください 3 編 集 : 切 り 取 り コピー 貼 り 付 け やり 直 しなどができます 4 挿 入 : 画 像 動 画 リンクなどを 挿 入 できます 5 表 示 : 表 示 方 法 を 変 更 できます 6フォーマット: 太 字 イタリック 打 消 し 線 などを 設 定 できます 7テーブル: 表 を 挿 入 したり 表 の 1 段 を 削 除 追 加 したりできます 8ツール:ソースコードを 表 示 できます 9 太 字 : 選 択 した 文 字 を 太 字 にします 10イタリック: 選 択 した 文 字 を 斜 体 にします 11 引 用 : 前 後 左 右 にスペースが 空 きます 注 意 書 きや 引 用 時 等 に 使 用 します 12 番 号 なしリスト: 箇 条 書 きの 先 頭 に など 番 号 でない 記 号 を 付 与 します 13 番 号 付 きリスト: 箇 条 書 きの 先 頭 に 順 番 を 付 与 します 14 左 寄 せ: 選 択 した 文 字 を 左 揃 えにします 15 中 央 揃 え: 選 択 した 文 字 をセンタリングします 16 右 寄 せ: 選 択 した 文 字 を 右 揃 えにします 17リンクの 挿 入 : 選 択 した 文 字 にリンクを 挿 入 することができます 18リンクの 削 除 :リンクを 削 除 することができます 19テーブルの 挿 入 : 表 を 挿 入 したり 表 の 1 段 を 削 除 追 加 したりできます 20ひとつ 前 ひとつ 後 の 作 業 に 進 む: 左 矢 印 で 一 つ 前 の 作 業 に 戻 し 右 矢 印 でひとつ 後 の 作 業 に 進 みます 21 アドバンスツールバーの 表 示 / 非 表 示 :クリックで 上 記 以 外 のツールを 追 加 できます 10
3-4 アドバンスツールバー のメニューについて 上 記 21 番 をクリックすると 下 記 のようにツールバーが 増 えます これをアドバンスツールバ ーと 呼 びます 1フォーマットの 選 択 :デフォルト( 初 期 状 態 )のフォーマットは 段 落 になっていますが ここでは 下 記 の 項 目 から 選 択 できます 段 落 自 動 挿 入 される HTML タグ:<p>~</p> <p>~</p>で 1 つの 段 落 を 表 します Address 自 動 挿 入 される HTML タグ:<address>~</address> <address>~</address>には そのページに 関 する 問 い 合 わせ 先 を 書 きます Pre 自 動 挿 入 される HTML タグ:<pre>~</pre> <pre>~</pre>に 書 かれた 改 行 やスペースがそのままページに 表 示 されます 見 出 し(h1~h6) 自 動 挿 入 される HTML タグ:<hn>~</hn> <hn>~</hn>で 囲 まれた 部 分 は 見 出 しになります nの 部 分 には 1~6 の 数 字 が 入 ります h1 が 最 も 大 きい 見 出 しです 例 )<h1> 大 感 謝 祭 </h1> 2 両 端 揃 え: 選 択 した 文 字 の 配 置 を 均 等 割 付 ( 両 端 揃 え)することができます ただし この 機 能 はブラウザによって 表 示 内 容 が 異 なる 場 合 があるので 注 意 してください 自 動 挿 入 される HTML タグ:<p style="text-align: justify;">~</p> 3 取 り 消 し 線 : 選 択 した 文 字 の 上 に 取 り 消 しの 線 を 引 くことができます 3インデントを 減 らす:インデントは 行 の 先 頭 部 分 に 空 白 を 挿 入 したい 時 に 使 います 3インデントを 増 やす: 取 り 消 しは 入 力 した 内 容 を 元 に 戻 す 時 に 使 います やり 直 しは 取 り 消 しを 適 用 する 前 の 状 態 に 戻 す 機 能 です 4テキストとしてペースト:WORD 書 類 等 に 書 かれたテキスト( 文 字 ) html ソースを その まま テキストとして 貼 り 付 けることができます 7フォーマットの 解 除 : 選 択 した 部 分 のフォーマットが 解 除 されます 11
8 特 殊 文 字 : 先 程 もご 紹 介 した 特 殊 文 字 を 一 覧 の 中 から 選 択 して 表 示 させることができます 9 続 きを 読 む タグを 挿 入 する: 長 い 文 章 の 一 部 だけを 表 示 させて 続 きを 読 むをクリック すると 続 きが 読 めるようにする 機 能 です 10 顔 文 字 : 顔 文 字 を 一 覧 から 選 択 して 入 力 することができます 10テキスト 色 :テキストの 色 を 一 覧 から 選 んで 変 更 することができます 12キーボード/ショートカット:よく 使 うショートカットキー 一 覧 を 見 ることができます 3-5 新 着 情 報 を 書 く 休 日 の 案 内 やキャンペーンの 案 内 新 商 品 の 案 内 など 急 いでお 客 様 にお 知 らせしたい 内 容 は トップページの インフォメーション 新 着 情 報 に 投 稿 しましょう 投 稿 については ブログ 管 理 マニュアル に 詳 細 をご 案 内 しています http://customer.vim01.com/ お 客 様 サポートサイト よりダウンロードしてください 12
3-6 ページを 追 加 する お 客 様 にて 追 加 した 場 合 は 当 社 サポート 範 囲 外 となります お 客 様 自 身 にてページを 追 加 することが 可 能 になっております 1)メニュー/ 固 定 ページにマウスをドラッグすると サブメニューが 表 示 されます 2)サブメニューの 新 規 追 加 をクリックして 下 さい ページを 新 規 作 成 する 画 面 が 表 示 されます 3)タイトル(1の 部 分 )を 入 力 します 日 本 語 でも 英 語 でも OK 例 ) 価 格 表 店 舗 案 内 INFORMATION 等 4) 表 示 オプション(2の 部 分 )をクリックします 表 示 する 項 目 一 覧 が 表 示 されます その 中 の スラッグ にチェックを 付 けます 下 方 に 以 下 のようなフィールドが 表 示 されるので 英 語 によるタイトル 名 商 品 番 号 等 を 入 力 してください URL の 一 部 として 表 示 されます 例 )price_list shop_info dress_001_red 等 13
何 故 この 作 業 が 必 要 なのか? この4)の 作 業 を 行 わなくてもページの 追 加 は 可 能 です ただ タイトルを 日 本 語 で 入 力 してしまった 場 合 このページの URL にもタイトルが 日 本 語 で 入 ってしまいます これが 時 にはどこかでリンクとして 表 示 されている 時 に 正 常 にリン ク 先 へ 飛 んでくれない といったトラブルが 発 生 する 場 合 もあります ですので なるべく 英 語 表 示 にした 方 が 無 難 であるため スラッグはアルファベットでの 入 力 をおすすめいたします 5) 掲 載 内 容 を3の 中 に 打 ち 込 んでいきます 編 集 方 法 は 前 述 各 ページの 文 章 や 画 像 を 編 集 する をご 確 認 下 さい 容 の 編 集 が 終 わりましたら 最 後 に 公 開 ボタン4をクリック 以 上 で ページの 追 加 は 終 了 です 14
<4> 画 像 の 編 集 挿 入 について 4-1 画 像 をアップロードする ページで 使 用 する 画 像 は 事 前 にライブラリにアップロードしておくのが 便 利 です ここではその 手 順 を 説 明 します 1)ダッシュボードメニューから メディア をクリック 後 すぐ 下 に 表 示 される 新 規 追 加 をクリックします 2) メディアのアップロード 画 面 内 の ここにファイルをドロップ と 書 かれたエリア 内 に アップロードしたい 画 像 ファイルをドラッグ&ドロップもしくは ファイルを 選 択 ボタ ンをクリックして 画 像 ファイルを 選 択 し 登 録 を 完 了 させます もし 大 量 の 画 像 を 同 時 にアップロードしたい 場 合 は PC 側 で 複 数 の 画 像 を 選 択 し この エリアにドラッグ&ドロップすることもできます ドラッグしても 正 常 に 動 かない 場 合 は ファイルを 選 択 ボタンをクリックして ファイル 選 択 画 面 から 選 んで 指 定 してください 以 上 で 画 像 ファイルのアップロードは 完 了 です 画 像 ファイルの 1 枚 の 最 大 容 量 は2MBまでです それより 大 きな 画 像 は あらかじめ ある 程 度 小 さくしてからアップロードしてください 15
画 像 サイズの 変 更 については 以 下 の よくある 質 問 をお 読 みください よくある 質 問 画 像 のサイズを 変 更 するには? <ピクセラエディタを 使 って 画 像 のサイズ 変 更 > フリーソフト ピクセラエディタ http://pixlr.com/editor/にアクセスしてください 1 コンピューターから 画 像 を 開 く を 選 ぶ 2 画 像 画 像 サイズ を 選 ぶ 3. 任 意 の 幅 を 入 れます 例 えばページ 内 でフルサイズで 表 示 したければ 900~1200 ピクセル くらいにします ここでは 仮 に 600 とします 縦 横 比 を 固 定 にはチェックを 入 れておきます 補 足 本 来 は フルサイズならば 620px 程 度 で 良 いのですが 最 近 のスマートフォンやタブレットの 解 像 度 が 高 くなってきているため それらの 端 末 で 見 たときに 粗 さが 目 立 ちやすいためです 1.5~2 倍 のサイズで 作 成 しておけば 密 度 が 高 まり 綺 麗 に 見 えます 4.OK をクリックすると サイズが 小 さく 変 更 されます 16
<ワードプレス 内 で 画 像 のサイズ 変 更 > ページ 内 に 入 れた 画 像 の 上 をクリックすると 赤 丸 で 示 したように 白 い 四 角 のハンドルが 出 てきます このハンドル 上 でクリックし ドラッグすると お 好 みの 大 きさに 変 更 できます 縦 横 比 を 変 えたくない 場 合 は 四 隅 のハンドルで 大 きさを 変 更 してください 17
4-2 アップロードした 画 像 一 覧 を 見 る 1)ダッシュボードメニューの メディア もしくはサブメニューの ライブラリー を クリックします 上 記 のような 小 さな 画 像 アイコンの 一 覧 が 表 示 されます 実 際 の 大 きさの 画 像 をみたければ 該 当 画 像 が 表 示 されているメニュー 上 にマウスを 移 動 します この 時 に 表 示 される 表 示 をクリックします 4-3 画 像 一 覧 から 画 像 を 削 除 する 1) 画 像 一 覧 上 の 該 当 画 像 の 上 にマウスを 移 動 すると 完 全 に 削 除 する が 表 示 されるので ここをクリックします 確 認 画 面 が 表 示 されるので よく 確 認 の 上 間 違 いがなければ OK ボタンをクリック して 下 さい これで 削 除 が 完 了 します 18
4-4 メディアを 追 加 で 画 像 の 簡 単 挿 入 メディアを 追 加 (p9 参 照 )ボタンをクリックすると 非 常 に 簡 単 に 文 中 に 画 像 を 挿 入 でき ます 1) 文 章 の 中 の 挿 入 したい 場 所 で クリックしておきます 2)1の メディアを 追 加 ボタンをクリック 以 下 のような 画 像 が 表 示 されます 3)もし 既 にアップロード している 画 像 があれば その 画 像 を 選 択 して 右 下 の 固 定 ページ に 挿 入 ボタンをクリック アップロード:PC 側 に 置 いてあるファイルを サーバーへ 転 送 することです PC 内 にある 画 像 をアップロードしたいなら 上 記 エリアのどこでもいいので ドラッグ &ドロップします ドラッグすると 背 景 がブルーになり ファイルをドロップしてアップロード と 表 示 されるのでこのタイミングでドロップ(マウスから 指 を 離 す)します アップロードが 完 了 すると 上 図 の 左 上 の 画 像 のように 青 枠 の 画 像 が 表 示 されます そして 右 下 の 固 定 ページに 挿 入 ボタンをクリック これで 文 章 内 への 画 像 の 挿 入 は 完 了 です 19
よくある 質 問 ギャラリーって 何? ギャラリーを 使 用 した 例 メディアを 挿 入 するときに 左 上 に ギャラリーを 作 成 という 項 目 があります ギャラリーを 作 成 すると 複 数 の 写 真 をきれいに 並 べて 表 示 することができます 写 真 をギャラリーで 設 定 しておくと パソコン タブレット スマートフォンなど インター フェースが 変 わっても 画 像 の 見 た 目 が 変 わらずに 表 示 できます 4-5 トップイメージ 画 像 を 編 集 する トップページ 専 用 の 画 像 は サイトの 印 象 を 左 右 する 場 所 です 季 節 感 を 出 したい キャンペーンを 実 施 する 更 新 感 を 出 したい 等 様 々な 目 的 で 変 更 するの は 効 果 的 です ここではトップイメージの 変 更 方 法 について 説 明 をします この 機 能 は 全 てのお 客 様 に 実 装 されてはおりません 実 装 されていない 場 合 はお 問 い 合 わせください 20
1)ダッシュボードメニュー/ 外 観 /ヘッダーを 選 択 以 下 カスタムヘッダーページが 表 示 されます 2)カスタムヘッダーページにて ファイルを 選 択 をクリックして 下 さい ファイル 選 択 画 面 が 表 示 されますので 変 更 したい 画 像 ファイルを 選 択 し アップロード ボタンをクリックしてください もしくは 先 にメディアにてアップロードをしておき 画 像 の 選 択 にて 表 示 したい 画 像 を 選 択 して 下 さい 以 上 で トップイメージの 変 更 は 完 了 です 21
<5> メニューについて サブメニュー グローバルメニュー サイドメニュー フッターメニュー 5-1 サブメニューとサイドメニューの 違 い グローバルメニューと 呼 ばれる 上 位 に 横 に 並 んで 表 示 されるメニューエリアについては 増 やせる 数 は 決 まっており デザインや 文 言 によりますが 最 大 5 7 個 までとなっております これ 以 上 増 やすと メニューが2 段 になって 崩 れてしまいます その 場 合 ですが メニューに 階 層 を 持 たせ トップメニューの 数 を 減 らすことで 回 避 できます 具 体 的 には サブメニュー や サイドメニュー といった 下 階 層 メニューを 追 加 することで 対 処 することができます ここでは ページを 追 加 し サブメニューやサイドメニューを 設 定 する 方 法 をご 説 明 します サブメニューは 右 図 の 赤 枠 のように グローバルメニューにぶら 下 が る 形 式 で 表 示 されるメニューです 22
これに 対 して サイドメニューは 以 下 図 の 赤 枠 のように 右 側 か 左 側 のサイドバーに 表 示 さ れるものです 5-2 サブメニューの 追 加 方 法 1) ダッシュボードメニュー/ 固 定 ページ/ 新 規 追 加 を 選 択 2) データを 入 力 して ページを 完 成 しておきます 3) ダッシュボードメニュー/ 外 観 /メニューを 選 択 4) 上 部 編 集 するメニューを 選 択 : にて GLOBAL MENU を 選 択 し 選 択 ボ タンをクリック 5) 左 側 の 固 定 ページ エリアにて サブメニューとして 追 加 するページにチェックをし メニューに 追 加 ボタンをクリック これでまずグローバルメニューへの 追 加 が 完 了 しました 6) 次 にこれをサブメニュー(プルダウンメニュー) 化 するために その 上 層 メニューとなる 23
項 目 の 下 に 移 動 させます 例 えば ここでは 例 として 当 店 について の 下 に サブメニュー1とサブメニュー2 が 表 示 されるようにしたい 場 合 当 店 についての 真 下 に2つのメニューをドラッグして 移 動 させます その 後 やや 右 へドラッグして 右 へずらします 最 後 に 必 ず メニューを 保 存 ボタンをクリック このような 感 じに 設 定 されていれば 設 定 完 了 です 以 後 サブメニューを 追 加 する 場 合 は 1) 6)の 繰 り 返 しとなります 24
5-3 サイドメニューの 追 加 方 法 お 客 様 にて 追 加 した 場 合 は 当 社 サポート 範 囲 外 となります 1) ダッシュボードメニュー/ 固 定 ページ/ 新 規 追 加 を 選 択 2) データを 入 力 して ページを 完 成 しておきます 3) ダッシュボードメニュー/ 外 観 /メニューを 選 択 4) 上 部 の 新 規 メニューを 作 成 のリンク 部 分 をクリック 5)メニューの 名 前 に SIDE MENU と 入 力 して メニューを 作 成 ボタンをクリック 6) 作 成 した SIDE MENU を 選 択 し 選 択 ボタンをクリック 7) 固 定 ページ からサブメニューとして 追 加 するページにチェックをし メニューに 追 加 ボタンをクリック サブメニューの 追 加 方 法 の5)と 同 じ 作 業 です 8) 階 層 メニューとしたい 場 合 は その 上 層 メニューとなる 項 目 の 下 に 移 動 させます サブメニューの 追 加 方 法 の6)と 同 じ 作 業 です ご 利 用 のデザインによっては この 階 層 表 現 はできないケースがございます 9) 最 後 に 必 ず メニューを 保 存 ボタンをクリック 10)ダッシュボードメニュー/ 外 観 /ウィジェットを 選 択 11) 左 側 の 利 用 できるウィジェット エリアにある カスタムメニュー を 右 側 の sidebar エリアにドラッグ&ドロップ 順 番 については ドラッグ&ドロップで 変 更 できるので 好 き 位 置 へ 移 動 して 下 さい この 作 業 だけは 保 存 ボタンを 押 すという 行 為 がありません 12) 右 に 移 動 したカスタムメニューをクリックし タイトルに MENU と 入 力 し メニューを 選 択 にて SIDE MENU を 選 択 タイトルは 好 きな 表 現 にしても 構 いません 13) 最 後 に 保 存 ボタンをクリック 以 上 でサイドバーへのメニュー 登 録 が 完 了 です 以 後 このメニューに 項 目 を 追 加 する 場 合 は 1) 13)の 繰 り 返 しとなりますが 途 中 の4) 5)は 最 初 の 一 回 だけとなります 25
5-4 サブメニュー/サイドメニュー 項 目 の 削 除 方 法 1)ダッシュボードメニュー/ 外 観 /メニューを 選 択 2) 削 除 したいメニューを 選 択 する 3) 削 除 したい 項 目 の 右 端 にある マークをクリック 3) 左 下 の 削 除 をクリック 以 上 で 該 当 メニューの 削 除 が 完 了 です 26
5-5 サイドメニュー 全 体 の 削 除 方 法 1)ダッシュボードメニュー/ 外 観 /ウィジェットを 選 択 2)sidebar の カスタムメニュー を 左 側 の 利 用 できるウィジェット エリアへ ドラッグ&ドロップ 27
<6> その 他 6-1 表 を1 段 増 やす 会 社 案 内 店 舗 案 内 などの 表 を1 段 増 やします サンプルサイトでは 当 店 について という ページです 試 しに 店 長 の 名 前 を 加 えてみましょう 1) まずダッシュボードから 固 定 ページの 当 店 について を 開 きます 2) 店 舗 名 (カナ)のセルにカーソルを 置 き 下 の 赤 枠 で 囲 まれた テーブル ツールをクリ ック 行 行 を 下 に 挿 入 をクリックします 28
3) 以 下 のように 1 行 増 えました ここに 店 長 の 名 前 を 入 力 します 4) 店 長 の 名 前 が 入 りました これで ボタンをクリックし 完 成 です 5) 項 目 を 行 ごと 消 したい 場 合 も 同 様 に 青 枠 で 囲 まれた 行 を 削 除 をクリックすることで 消 すことができます 29
6-2 表 をイチから 作 る もとからある 表 に 手 を 加 えるのではなく はじめから 表 を 作 る 方 法 を 紹 介 します 例 として ペットホテルの 料 金 表 を 作 ってみましょう 1) 3 列 2 行 の 表 の 枠 を 作 ります テーブル ツールの テーブルを 挿 入 から 3 列 2 行 の 交 点 をクリックする 右 のような 表 ができます 2) 表 のプロパティで サイズを 変 更 します テーブル ツールの 表 のプロパティ を 選 び 幅 を 100%として OK をクリック 以 下 のような 表 ができあがります 30
3) 下 の2つの 画 像 は ウィンドウの 幅 を 広 げたり 狭 めたりした 時 の 画 像 です 幅 を 100%で 指 定 すると 以 下 のように 画 面 の 幅 に 対 して 表 の 幅 が 100%という 表 示 が 可 能 に なり PC やスマートフォンでも 綺 麗 に 表 示 されます 例 : 同 じページを PC とスマートフォンで 見 た 場 合 31
6-3 地 図 の 作 成 修 正 A) 名 前 を 変 更 する 1) A をクリックすると 以 下 のようなウィンドウが 現 れます 32
2) 赤 枠 の 日 本 の 部 分 を 書 き 換 え 保 存 をクリック ここでは 店 名 とします 3)このように 変 更 されました B)ピンの 位 置 を 変 更 する 33
1) 丸 印 をつけたピンを 希 望 の 位 置 までドラッグ&ドロップします 2) 保 存 ボタンをクリックする 3) ボタンをクリックする C) 地 図 を 増 やす 1)MAP PRESS と 書 いてある 下 の 新 規 マップ ボタンをクリックする 34
2)1の POI を 追 加 の 枠 内 に 入 れたい 地 図 の 住 所 を 入 力 し 虫 眼 鏡 マークをクリックし て 検 索 します 3)2にマップのタイトルを 入 れ 3の 保 存 ボタンをクリックして 3) 地 図 のタイトルにマウスオーバーすると 編 集 記 事 へ 挿 入 削 除 のメニューが 現 れます ここで マップのタイトル 変 更 や 削 除 などをすることができます ピン 上 にマウスを 置 いたときに 表 示 される 名 前 の 変 更 方 法 については p29 でご 説 明 し ています 35