ユーザーズマニュアル 初級編 · 4 <1> はじめに サイトの特徴...

42
ユーザーズマニュアル 初級編 2017.5.1

Transcript of ユーザーズマニュアル 初級編 · 4 <1> はじめに サイトの特徴...

Page 1: ユーザーズマニュアル 初級編 · 4 <1> はじめに サイトの特徴 お客様のWEBサイトは、WordPress(ワードプレス)をベースに、当社独自のシステムカスタマイズ、デザイ

ユーザーズマニュアル 初級編

2017.5.1

Page 2: ユーザーズマニュアル 初級編 · 4 <1> はじめに サイトの特徴 お客様のWEBサイトは、WordPress(ワードプレス)をベースに、当社独自のシステムカスタマイズ、デザイ

2

目 次

<1> はじめに ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・4

1-1 このサイトの特徴

<2> 管理画面について ・・・・・・・・・・・・・・・・・・・・・・・・・・・5

2-1 管理画面にログインをしてみましょう

2-2 ログアウトをしてみましょう

<3> 固定ページの編集について ・・・・・・・・・・・・・・・・・・・・・・6

3-1 ページ内の文章や画像を編集する

3-2 「ビジュアル」モードのメニューについて

3-3 新規固定ページを追加する

<4> 画像の挿入・編集について ・・・・・・・・・・・・・・・・・・・・・・10

4-1 画像をメディアライブラリに追加しましょう

4-2 アップロードした画像一覧を見る

4-3 画像一覧から画像を削除する

4-4 「メディアを追加」で画像の簡単挿入

☆ワンポイント☆『ワードプレス内で画像サイズを変更するには?』

☆ワンポイント☆『ギャラリーを編集するには?』

<5> メニューエリアの名称について ・・・・・・・・・・・・・・・・・・・17

5-1 グローバルメニューに設定する

☆ワンポイント☆『グローバルメニューの順番を変更するには?』

5-2 サブメニューの追加方法

Page 3: ユーザーズマニュアル 初級編 · 4 <1> はじめに サイトの特徴 お客様のWEBサイトは、WordPress(ワードプレス)をベースに、当社独自のシステムカスタマイズ、デザイ

3

<6> 表、地図の作成について ・・・・・・・・・・・・・・・・・・・・・・21

6-1 表を1段増やす

6-2 表を作る

6-3 地図の作成・修正

<7> 投稿を活用しよう ・・・・・・・・・・・・・・・・・・・・・・・・・・26

7-1 カテゴリーを活用する

7-2 公開日時の予約を指定する

☆ワンポイント☆『過去の投稿の日時の編集もできるの?』

<8> ヘッダーエリアを変更する ・・・・・・・・・・・・・・・・・・・・・・28

8-1 ロゴを変更する

8-2 ヘッダーの連絡先を変更する

☆ワンポイント☆『電話番号と FAX 番号を表示させるには?』

<9> メインイメージの変更 ・・・・・・・・・・・・・・・・・・・・・・・・31

☆ワンポイント☆『スライドショーを追加するには?』

<10> サイドバナーを設定する ・・・・・・・・・・・・・・・・・・・・・・・35

☆ワンポイント☆『サイドバーをカスタマイズするには?』

<11> フロントバナーを設定する ・・・・・・・・・・・・・・・・・・・・・・40

<12> アイキャッチ画像を設定する ・・・・・・・・・・・・・・・・・・・・・42

Page 4: ユーザーズマニュアル 初級編 · 4 <1> はじめに サイトの特徴 お客様のWEBサイトは、WordPress(ワードプレス)をベースに、当社独自のシステムカスタマイズ、デザイ

4

<1> はじめに

サイトの特徴

お客様の WEBサイトは、WordPress(ワードプレス)をベースに、当社独自のシステムカスタマイズ、デザイ

ン制作を行いご提供しております。

従来、WEBサイトの編集を行うには、専門の知識、専用のソフトが必要でした。

当社がご提供する WEB サイトは、従来のホームページより比較的簡単に文章や画像の編集ができる機能(CMS)

を搭載しております。

なお、ご不明点等のサポートにつきましては、当マニュアルでご説明している機能の範囲までとさせて頂いて

おります。

当マニュアルで説明していない箇所の編集を行った場合、サポートの対象外となり、当社では責任は負いかね

ますことをご了承ください。

以上をご理解いただいた上でカスタマイズ等を行いたい場合には、WordPress 公式フォーラムをご参照くださ

い。

【WordPress 公式フォーラム】 http://ja.forums.wordpress.org/

Page 5: ユーザーズマニュアル 初級編 · 4 <1> はじめに サイトの特徴 お客様のWEBサイトは、WordPress(ワードプレス)をベースに、当社独自のシステムカスタマイズ、デザイ

5

<2> 管理画面について

2-1 管理画面にログインをしてみましょう。

①WEB ブラウザにて以下 URL へアクセスします。

http://《お客様のドメイン名》/struct/wp-login.php

例)お客様のドメイン名が、test-domain.com であれば、

http://test-domain.com/struct/wp-login.php となります。

②ログイン画面が表示されましたら、ユーザー名、パスワードを入力して、

「ログイン」ボタンをクリックして下さい。

※ご注意ください※

3回間違えると、1 時間アクセスできなくなります。

その際は、時間を空けて再度お試し下さい。

パスワードをお忘れの際はお問い合わせ頂ければ、

ご登録メールアドレス、もしくは FAXにてご案内いたします。

セキュリティの都合上、お電話でのご案内は致しておりません。

ユーザー名、パスワードにつきましては、「納品のご案内」メールに記載しております。

2-2 ログアウトをしてみましょう。

①管理画面にログイン中は、最上部に黒い帯が出ています。

右上に表示されているアカウント名(この画像では「こんにちは、MORPH さん」の部分)にマウスを合わせ

るとメニューが表示されます。

②メニューの「ログアウト」を選択して下さい。

管理ツールを終了することができます。

※ページの編集等を行った後、最後に行って下さい。

Page 6: ユーザーズマニュアル 初級編 · 4 <1> はじめに サイトの特徴 お客様のWEBサイトは、WordPress(ワードプレス)をベースに、当社独自のシステムカスタマイズ、デザイ

6

<3> 固定ページの編集について

固定ページでは、会社概要やお問い合わせなどサイトに必要なページを作成します。

作成したページはグローバルメニューに設定しましょう。

※新規固定ページの作成方法は<3>固定ページの編集について(P.6)の 3-3を参照

※グローバルメニューの設定方法は<5>メニューエリアの名称について(P.17)の 5-1を参照

管理画面は「ダッシュボード」と呼ばれており、作業メニューが常に左に出ています。

3-1 ページ内の文章や画像を編集する

①「固定ページ」にマウスを合わせると、サブメニューが表示されます。

②サブメニューの「固定ページ一覧」をクリックして下さい。

各ページ名の一覧表が表示されます。

Page 7: ユーザーズマニュアル 初級編 · 4 <1> はじめに サイトの特徴 お客様のWEBサイトは、WordPress(ワードプレス)をベースに、当社独自のシステムカスタマイズ、デザイ

7

③編集したいページのタイトルをクリックします。

※お客様毎にメニュー数やタイトル名が異なります。

・「ビジュアル編集モード(ビジュアルエディタ)」

⇒インターネットでホームページを見ているようなイメージで編集が出来ます。

・「テキスト編集モード(テキストエディタ)」

⇒HTMLタグが分かる方向けです。

※当マニュアルでは「ビジュアル編集モード」を基本とした編集方法をご案内いたします。

※画像の挿入方法に関しては<4>画像の挿入・編集について(P.10)を参照

編集をした後は、必ず右の ボタンをクリックして保存をしてください。

Page 8: ユーザーズマニュアル 初級編 · 4 <1> はじめに サイトの特徴 お客様のWEBサイトは、WordPress(ワードプレス)をベースに、当社独自のシステムカスタマイズ、デザイ

8

3-2 「ビジュアル」モードのメニューについて

①メディアを追加:PC、スマートフォン内にある画像を直接アップロードして画像挿入ができます。

詳しくは<4>画像の挿入・編集について(P.10)は 4-4「メディアを追加」で画像の簡単挿入にて説明します。

②ファイル:新規作成・印刷ができます。

※新規作成をクリックすると、それまでに入力していたデータが消えてしまいます。

ページを してから、新規作成ボタンをクリックするようにしてください。

③編集:切り取り・コピー・貼り付け・やり直しなどができます。

④挿入:画像・動画・リンクなどを挿入できます。

⑤表示:表示方法を変更できます。

⑥フォーマット:太字・イタリック・打消し線などを設定できます。

⑦テーブル:表を挿入したり、表の 1段を削除・追加したりできます。

⑧ツール:ソースコードを表示できます。

⑨太字:選択した文字を太字にします。

⑩イタリック:選択した文字を斜体にします。

⑪引用:前後左右にスペースが空きます。※注意書きや引用時等に使用します。

⑫番号なしリスト:箇条書きの先頭に「・」など、番号でない記号を付与します。

⑬番号付きリスト:箇条書きの先頭に順番を付与します。

⑭左寄せ:選択した文字を左揃えにします。

⑮中央揃え:選択した文字をセンタリングします。

⑯右寄せ:選択した文字を右揃えにします。

⑰リンクの挿入/編集:選択した文字にリンクを挿入することができます。

⑱リンクの削除:リンクを削除することができます。

⑲テーブル:表を挿入したり、表の 1段を削除・追加したりできます。

⑳フルスクリーン:全画面表示になります。

㉑取り消し・やり直し:左矢印で一つ前の作業に戻し、右矢印でひとつ後の作業に進みます。

㉒ツールバー切り替え:クリックで、上記以外のツールを追加できます。

② ③ ④ ⑤ ⑥ ⑦ ⑧

⑨ ⑩ ⑪ ⑫ ⑬ ⑭ ⑮ ⑰ ⑯ ⑲ ⑱ ⑳ ㉒

Page 9: ユーザーズマニュアル 初級編 · 4 <1> はじめに サイトの特徴 お客様のWEBサイトは、WordPress(ワードプレス)をベースに、当社独自のシステムカスタマイズ、デザイ

9

3-3 新規固定ページを追加する ※お客様が新しく追加されたページは、当社サポート範囲外となります。

①「固定ページ」にマウスを合わせると、サブメニューが表示されます。

②サブメニューの「新規追加」をクリックしてください。新規作成の画面が表示されます。

③タイトル(【1】の部分)を入力します。

※日本語でも英語でも OK。 例)価格表、店舗案内、INFORMATION 等

④掲載内容(【2】の部分)を打ち込みます。

※編集メニューに関しては<3>固定ページの編集について(P.6)の 3-2 を参照。

⑤作成が完了したら「公開」(【3】の部分)を押して終了です。

【1】

【2】

【3】

Page 10: ユーザーズマニュアル 初級編 · 4 <1> はじめに サイトの特徴 お客様のWEBサイトは、WordPress(ワードプレス)をベースに、当社独自のシステムカスタマイズ、デザイ

10

<4> 画像の編集・挿入について

4-1 画像をメディアライブラリに追加しましょう。

※HPで使用する画像は、事前にライブラリにアップロードしておくと便利です。

①「メディア」にマウスを合わせると、サブメニューが表示されます。

②サブメニューの「新規追加」をクリックしてください。

③画像をアップロードしましょう。

方法①:点線で囲まれたエリア内に画像ファイルをドラッグ&ドロップします。

(複数の画像を選択してドラッグ&ドロップをすることも可能です。)

方法②:「ファイルを選択」ボタンで画像ファイルを選択してアップロードすることもできます。

※ドラッグ&ドロップしても正常にアップロードされない場合は、「ファイルを選択」ボタンをクリックして、

ファイル選択画面から選んで指定してください。

画像ファイルの 1枚の最大容量は2MBまでです。

大きな画像はあらかじめ小さく編集してからアップロードしてください。

☆ワンポイント☆ 『ドラッグ&ドロップとは?』

マウスの左側を押したままマウスを移動(ドラッグ)させ、目的の場所でマウスの左側のボタンを離して落と

す(ドロップ)ことです。

Page 11: ユーザーズマニュアル 初級編 · 4 <1> はじめに サイトの特徴 お客様のWEBサイトは、WordPress(ワードプレス)をベースに、当社独自のシステムカスタマイズ、デザイ

11

4-2 アップロードした画像一覧を見る

①「メディア」もしくはサブメニューの「ライブラリ」をクリックします。

画像の一覧が表示されます。

※画像をクリックすると「添付ファイルの詳細」が表示され、画像の詳細が確認できます。

Page 12: ユーザーズマニュアル 初級編 · 4 <1> はじめに サイトの特徴 お客様のWEBサイトは、WordPress(ワードプレス)をベースに、当社独自のシステムカスタマイズ、デザイ

12

4-3 画像一覧から画像を削除する

①削除したい画像をクリックしてください。

②「添付ファイルの詳細」が表示されます。

③「完全に削除する」をクリックすると該当の写真が「ライブラリ」から削除されます。

※「ライブラリ」からの削除ですので、PC やスマートフォンに残してある画像は消えません。

Page 13: ユーザーズマニュアル 初級編 · 4 <1> はじめに サイトの特徴 お客様のWEBサイトは、WordPress(ワードプレス)をベースに、当社独自のシステムカスタマイズ、デザイ

13

4-4 「メディアを追加」で画像の簡単挿入

「メディアを追加」ボタンをクリックすると、簡単に文中に画像挿入ができます。

①文章の中の挿入したい場所でクリックをして、「メディアを追加」ボタンを押します。

②「メディアを追加」ボタンをクリックすると、下のような画像になります。

「メディアライブラリ」に入っている画像の一覧が表示されます。

Page 14: ユーザーズマニュアル 初級編 · 4 <1> はじめに サイトの特徴 お客様のWEBサイトは、WordPress(ワードプレス)をベースに、当社独自のシステムカスタマイズ、デザイ

14

③挿入したい画像をクリックすると青い枠で選択されます。

④最後に右下の ボタンをクリックすれば、画像の挿入は完了です。

Page 15: ユーザーズマニュアル 初級編 · 4 <1> はじめに サイトの特徴 お客様のWEBサイトは、WordPress(ワードプレス)をベースに、当社独自のシステムカスタマイズ、デザイ

15

☆ワンポイント☆ 『ワードプレス内で画像サイズを変更するには?』

挿入した画像をクリックすると、四隅に白い四角のハンドルが出

てきます。

四隅のハンドルの上でドラッグ(マウスの左ボタンを押す)して

大きさを変更できます。

☆ワンポイント☆ 『ギャラリーとは?』

※ギャラリーの作成例

ギャラリーを使用すれば、簡単に複数の写真を並べる

ことができます。

※「メディアを追加」ボタンの画像挿入と基本的な操作は同じです。

左上の「ギャラリーを作成」に切り替えて画像を選択します。 を押して完了です。

Page 16: ユーザーズマニュアル 初級編 · 4 <1> はじめに サイトの特徴 お客様のWEBサイトは、WordPress(ワードプレス)をベースに、当社独自のシステムカスタマイズ、デザイ

16

☆ワンポイント☆ 『ギャラリーを編集するには?』

ギャラリーを編集するには、ギャラリー(写真)の上で左クリックをします。

左の画像のような編集メニューが表示され

ます。

「編集」マーク

押すと「ギャラリーを編集」画面に切り替

わります。

「削除」マーク

ギャラリー全体が削除できます。

①ギャラリーに追加:メディアライブラリが開き、写真の追加ができます。

②写真の右上の×:不要な写真を削除できます。

③カラム:PCで見た際の写真の配列を指定できます。(例)カラムが「3」→横 3 列

① ② ③

Page 17: ユーザーズマニュアル 初級編 · 4 <1> はじめに サイトの特徴 お客様のWEBサイトは、WordPress(ワードプレス)をベースに、当社独自のシステムカスタマイズ、デザイ

17

<5> メニューエリアの名称について

0102030405060708090

1 月 2 月 3 月 4 月

東京

名古屋

大阪

グローバルメニュー

サイドメニュー

フッターメニュー

サブメニュー

Page 18: ユーザーズマニュアル 初級編 · 4 <1> はじめに サイトの特徴 お客様のWEBサイトは、WordPress(ワードプレス)をベースに、当社独自のシステムカスタマイズ、デザイ

18

5-1 グローバルメニューに設定する

「グローバルメニュー」と呼ばれる部分には、会社概要やお問い合わせなどの HP の基本となるページを表示

させます。

①「外観」にマウスを合わせると、サブメニューが表示されます。

②サブメニューの「メニュー」をクリックしてください。

③「編集するメニューを選択」(【1】の部分)で「GLOBALMENU(Main Navigation)」を選択します。

④「固定ページ」(【2】の部分)の欄から、グローバルメニューに追加したい項目にをいれます。

※投稿、カスタムリンク、カテゴリーもグローバルメニューに追加できます。

※カスタムリンクについては<10>サイドバナーを設定する(P.35)の☆ワンポイント☆『サイドバーをカス

タマイズするには?』を参照。

⑤「メニューに追加」(【3】の部分)ボタンを押すと、右側の「メニュー構造」の一番下に追加されます。

【1】

【2】

【3】

Page 19: ユーザーズマニュアル 初級編 · 4 <1> はじめに サイトの特徴 お客様のWEBサイトは、WordPress(ワードプレス)をベースに、当社独自のシステムカスタマイズ、デザイ

19

⑥メニューの追加が完了したら「メニューを保存」(【4】の部分)を押して終了です。

☆ワンポイント☆ 『グルーバルメニューの順番を変更するには?』

移動させたいメニューはドラッグ&ドロップで順番を入れ替えることができます。

【3】

【4】

Page 20: ユーザーズマニュアル 初級編 · 4 <1> はじめに サイトの特徴 お客様のWEBサイトは、WordPress(ワードプレス)をベースに、当社独自のシステムカスタマイズ、デザイ

20

5-1 サブメニューの追加方法

グローバルメニューには(会社概要、アクセス、店舗情報、お問い合わせなど)いくつでも追加可能ですが、

ある程度の数を追加すると下の画像のようにメニューが 2段となってしまいます。

※2段となるメニューの数は、HPのデザインや追加するページタイトルの長さによって異なります。

このような場合には、「サブメニュー」にすることで、グローバルメニューをすっきりさせることができます。

①「外観」にマウスを合わせると、サブメニューが表示されます。

②サブメニューの「メニュー」をクリックしてください。

③「編集するメニューを選択」で「GLOBALMENU(Main Navigation)」を選択します。

※ここまでは前項の「グローバルメニューに設定する」と同じ手順です。

④<5>メニューエリアの名称について

(P.17)☆ワンポイント☆『グルーバルメニュ

ーの順番を変更するには?』」を参考に順番を

入れ替えます。

⑤サブメニューに設定したいページを右側に

一段ずらします。

「サブアイテム」となりました。

⑥「メニューを保存」を押して完了です。

Page 21: ユーザーズマニュアル 初級編 · 4 <1> はじめに サイトの特徴 お客様のWEBサイトは、WordPress(ワードプレス)をベースに、当社独自のシステムカスタマイズ、デザイ

21

<6> その他

6-1 表を1段増やす

※当マニュアルでは例として「会社案内」の表を 1段増やします。

※<3>固定ページの編集について(P.6)参照

①固定ページの表を増やしたいページ(ここでは「会社案内」)をクリックします。

②一段増やしたい場所の上の欄でクリックしてカーソルを置いておきます。

③ ②のまま、テーブル/行/行を下に挿入 をクリックします。

この間に問い合わせメール

アドレスを追加します。

Page 22: ユーザーズマニュアル 初級編 · 4 <1> はじめに サイトの特徴 お客様のWEBサイトは、WordPress(ワードプレス)をベースに、当社独自のシステムカスタマイズ、デザイ

22

④表が一段増えました。

⑤追加された表に問い合わせアド

レスを打ち込みます。

⑥ ボタンを押して完了です。

☆ワンポイント☆ 『表を一段消すには?』

①消したい行の上でクリックしてカーソルを合わせておきます。

② ①のまま、テーブル/行/行を削除 をクリックします。

③カーソルを合わせた行が削除できます。

Page 23: ユーザーズマニュアル 初級編 · 4 <1> はじめに サイトの特徴 お客様のWEBサイトは、WordPress(ワードプレス)をベースに、当社独自のシステムカスタマイズ、デザイ

23

6-2 表を作る

①3列×2行の表を作ってみましょう。

テーブル/テーブルを挿入/3列×2行の表を挿入します。

② ①で表を挿入すると左の画像のように新しい表が挿入されました。

③表に文字を入力し、公開または更新ボタンを押して完了です。

☆ワンポイント☆ 『表のサイズを変更するには?』

①表を選択したまま、テーブル/表のプロパティを開きます。

②「表のプロパティ」で幅などを設定します。

③「OK」ボタンを押します。

④公開または更新ボタンを押して完了です

Page 24: ユーザーズマニュアル 初級編 · 4 <1> はじめに サイトの特徴 お客様のWEBサイトは、WordPress(ワードプレス)をベースに、当社独自のシステムカスタマイズ、デザイ

24

6-3 地図の作成・修正

「会社案内」ページに地図を追加してみましょう。

①Google マップでピンを表示させたい場所を検索し、「共有」を押します。

②「共有」を押すと右の画面が出てきます。

「地図を埋め込む」タブを開きます。

③赤枠の URLをコピーしておきます。

④ ③でコピーした URLを「会社案内」ページの「テキストモード」で表示させたい部分にペーストします。

Page 25: ユーザーズマニュアル 初級編 · 4 <1> はじめに サイトの特徴 お客様のWEBサイトは、WordPress(ワードプレス)をベースに、当社独自のシステムカスタマイズ、デザイ

25

⑤「ビジュアルモード」に戻すと、URL を追加した部分にマップが表示されました。

⑥ ボタンを押して完了です。

Page 26: ユーザーズマニュアル 初級編 · 4 <1> はじめに サイトの特徴 お客様のWEBサイトは、WordPress(ワードプレス)をベースに、当社独自のシステムカスタマイズ、デザイ

26

<7>投稿を活用しよう

※基本的な操作方法は<3>固定ページの編集について(P.6)と同じです。

「投稿」では、主に新着情報やブログなどを作成します。

カスタマイズしている場合には、物件情報や商品情報の更新に使用する場合もあります。

7-1 カテゴリーをうまく使う

投稿では「カテゴリー」を付与することができます。アイデア次第で様々な活用が可能です。

上の画像では、「ブログ」「キャンペーン情報」「新着情報」と情報の種類でカテゴリー分けがされていますが、

下の画像のようにブログ更新者ごとにカテゴリー分けをすることも可能です。

①「 」を押します。

② ①のすぐ下の空欄に追加したいカテゴリーを入力します。

③ を押して、新しいカテゴリーを追加します。

④投稿の作成・編集ができたら、最後に「更新」ボタンを押して完了です。

Page 27: ユーザーズマニュアル 初級編 · 4 <1> はじめに サイトの特徴 お客様のWEBサイトは、WordPress(ワードプレス)をベースに、当社独自のシステムカスタマイズ、デザイ

27

7-2 公開日時の予約を指定する

「公開日時予約」ができます。

例として「冬期休暇のご案内」を作成して公開日時予約をしてみましょう。

①「すぐに公開する」の右側の編集を押します。

②日時の編集項目が表示されますので、公開したい日時を入力しま

しょう。

③最後に ボタンを押せば予約完了となります。

☆ワンポイント☆ 『過去の投稿の日時の編集もできるの?』

過去の投稿の「公開日時」を再編集する場合、上の画像のようにすでに公開日時が入力されています。

「公開日時:○○年○月○日 ○○:○○」の右側の編集ボタンを押すと日付が編集できます。

Page 28: ユーザーズマニュアル 初級編 · 4 <1> はじめに サイトの特徴 お客様のWEBサイトは、WordPress(ワードプレス)をベースに、当社独自のシステムカスタマイズ、デザイ

28

<8>ヘッダーエリアを変更する

8-1 ロゴを変更する

【方法①】

①新しいロゴ画像を「メディアライブラリ」にアップロードしておきます。

※<4>画像の挿入・編集について(P.10)4-1を参照

②外観/テーマ設定/2.基本設定 を開きます。

③「画像選択」ボタンを押すと「メディアライブラリ」が開きます。

④新しいロゴを選択し、「画像差込」ボタンを押します。

⑤最後に「変更を保存」ボタンを押して完了です。

※【方法①】で変更できない場合には、【方法②】をお試しください。

Page 29: ユーザーズマニュアル 初級編 · 4 <1> はじめに サイトの特徴 お客様のWEBサイトは、WordPress(ワードプレス)をベースに、当社独自のシステムカスタマイズ、デザイ

29

【方法②】

①新しいロゴ画像を「メディアライブラリ」にアップロードしておきます。

※<4>画像の挿入・編集について(P.10)4-1を参照

②メディアライブラリで新しいロゴ画像をクリックして「添付ファイルの詳細」を表示させます。

③URL をコピーします。

④外観/テーマ設定/2.基本設定 を開きます。

⑤ ③でコピーした URLを貼り付けます。

⑥「変更を保存」ボタンを押して完了です。

Page 30: ユーザーズマニュアル 初級編 · 4 <1> はじめに サイトの特徴 お客様のWEBサイトは、WordPress(ワードプレス)をベースに、当社独自のシステムカスタマイズ、デザイ

30

8-2 ヘッダーの連絡先を変更する

①外観/テーマ設定/2.基本設定 を開きます。

②「連絡先の設定 -ヘッダー右上部に表示されます-」を修正します。

③「変更を保存」ボタンを押して完了です。

☆ワンポイント☆ 『電話番号と FAX番号を表示させるには?』

<br>(改行タグ)を使用することで、電話番号と FAX 番号を表示させることができます。

※注意※

スマートフォンで HPを閲覧した際に、電話番号のみ入力されている場合にはタップで電話がかけられるよう

に設定されています。

☆ワンポイント☆のように「<br>タグ」を入れてしまうとタップしても電話がかけられなくなりますので、

ご注意下さい。

Page 31: ユーザーズマニュアル 初級編 · 4 <1> はじめに サイトの特徴 お客様のWEBサイトは、WordPress(ワードプレス)をベースに、当社独自のシステムカスタマイズ、デザイ

31

<9>メインイメージの変更

※【方法①】で変更できない場合には、【方法②】をお試しください。

【方法①】

①新しいメイン画像を「メディアライブラリ」にアップロードしておきます。

※<4>画像の挿入・編集について(P.10)4-1を参照

②外観/カスタマイズ/4.TOP:メインイメージ設定 を開きます。

Page 32: ユーザーズマニュアル 初級編 · 4 <1> はじめに サイトの特徴 お客様のWEBサイトは、WordPress(ワードプレス)をベースに、当社独自のシステムカスタマイズ、デザイ

32

③「新規画像を追加」ボタンを押すと「メディアライブラリ」が表示されます。

④画像を選択して、 ボタンを押します。「画像切り抜き」画面が表示されます。

⑤「画像切り抜き」画面では、④で選択した画像を HP(使用テンプレート)のメインイメージ推奨サイズに

「切り抜く」か「切り抜かない」を指定することができます。

※メインイメージは HPの顔となる部分です。

そのため、当社ではメインイメージ推奨サイズの

設定をオススメしています。

⑥画像を切り抜く範囲を指定したら「画像切り抜き」ボタンを押します。

⑦「保存して公開」ボタンを押して完了です。

Page 33: ユーザーズマニュアル 初級編 · 4 <1> はじめに サイトの特徴 お客様のWEBサイトは、WordPress(ワードプレス)をベースに、当社独自のシステムカスタマイズ、デザイ

33

【方法②】

①新しいメイン画像を「メディアライブラリ」にアップロードしておきます。

※<4>画像の挿入・編集について(P.10)4-1を参照。

②Meta Slider をひらきます。

③「スライドを追加」ボタンを押します。

④「メディアライブラリ」がひらくので、画像を選択して「スライダーに追加」ボタンを押します。

⑤画像が追加されました。

⑤不要な画像は、画像の上にマウスを合わせると表示されるゴミ箱のマークで削除できます。

⑥最後に「保存」ボタンを押して完了です。

※画像の順番はドラッグ&ドロップで入れ替えができます。

Page 34: ユーザーズマニュアル 初級編 · 4 <1> はじめに サイトの特徴 お客様のWEBサイトは、WordPress(ワードプレス)をベースに、当社独自のシステムカスタマイズ、デザイ

34

☆ワンポイント☆ 『スライドショーを追加するには?』

オプションで「スライドショー」をご契約いただいた場合も、管理画面より画像の追加、削除ができます。

※<9>メインイメージの変更(P.31)【方法②】を参照

①新しいメイン画像を「メディアライブラリ」にアップロードしておきます。

※<4>画像の挿入・編集について(P.10)4-1を参照

②Meta Slider をひらきます。

③「スライドを追加」ボタンを押します。

④「メディアライブラリ」がひらくので、画像を選択して「スライダーに追加」ボタンを押します。

⑤新しい画像が追加されました。

※ここまでは前項の「メインイメージの変更」【方法②】と同じ手順です。

⑥「効果」の右側の▼を押すと、スライドの効果を選択できます。

⑦最後に「保存」ボタンを押して完了です。

Page 35: ユーザーズマニュアル 初級編 · 4 <1> はじめに サイトの特徴 お客様のWEBサイトは、WordPress(ワードプレス)をベースに、当社独自のシステムカスタマイズ、デザイ

35

<10>サイドバナーを設定する

【方法①】

①使用したい画像を「メディアライブラリ」にアップロードしておきます。

※<4>画像の挿入・編集について(P.10)4-1を参照

②外観/テーマ設定/5.サイドバナー設定 を開きます。

③「画像選択」ボタンを押すと「メディアライブラリ」が開きます。

④新しい画像を選択し、「画像差込」ボタンを押します。

⑤最後に「変更を保存」ボタンを押して完了です。

※「2.サイドバナー設定」で設定可能数以上のバナーを設定したい場合、【方法②】で数を増やせます。

Page 36: ユーザーズマニュアル 初級編 · 4 <1> はじめに サイトの特徴 お客様のWEBサイトは、WordPress(ワードプレス)をベースに、当社独自のシステムカスタマイズ、デザイ

36

【方法②】

①使用したい画像を「メディアライブラリ」にアップロードしておきます。

※<4>画像の挿入・編集について(P.10)4-1を参照

②外観/ウィジェット を開きます。

※今回はバナーの追加ですので、「Image Widget」を追加します。

③「Image Widget」をクリックして「ウィジェットを追加」を押します。「sidebar」エリアに追加されます。

※ドラッグ&ドロップでも追加できます。

④「Image Widget」の右側の▼でメニューを広げて

「Select an Image」押します。

⑤「メディアライブラリ」が開くので、画像を選んで

「Insert Into Widget」ボタンを押すと画像が選択されます。

⑥「Link」にリンク先の URL を入力します。

⑦最後に保存ボタンを押して完了です。

Page 37: ユーザーズマニュアル 初級編 · 4 <1> はじめに サイトの特徴 お客様のWEBサイトは、WordPress(ワードプレス)をベースに、当社独自のシステムカスタマイズ、デザイ

37

☆ワンポイント☆ 『サイドバーをカスタマイズするには?』

「ウィジェット」を使用することで、サイドバーを充実させることが

できます。

ここでは使用頻度の高いと思われるウィジェットを紹介します。

■Image Widget:<10>サイドバナーを設定する(P.35)【方法②】を参照

■QR Code Tag:スマートフォンで読み取れる QRコードが表示できます。

■アーカイブ:月別に投稿した記事の一覧を表示できます。

ドロップダウン表示にしたり、投稿数を表示させることもできます。

※ドロップダウン:「▼」を押してリストが広がる形式。

左の画像はドロップダウン表示です。

■カテゴリー:投稿のカテゴリーの一覧を表示できます。

ドロップダウン表示にしたり、投稿数、階層を表示させることもできます。

※左の画像はリスト表示です。

■テキスト:任意のテキストの表示ができます。HTML タグも使用できます。

※左の画像のように HTMLタグを指定すると、

HP 上では右の画像のように表示されます。

Page 38: ユーザーズマニュアル 初級編 · 4 <1> はじめに サイトの特徴 お客様のWEBサイトは、WordPress(ワードプレス)をベースに、当社独自のシステムカスタマイズ、デザイ

38

■カスタムメニュー:サイドバーに自作メニューを表示できます。

※テンプレートによっては設定ができない場合が

あります。

※<5>メニューエリアの名称について(P.17)の

5-1を参照

①外観/メニュー を開きます。

②「新規メニューを作成」を押します。

③「メニュー名」を入力して「メニューを作成」ボタンを押します。

④「固定」「投稿」「カスタムリンク」「カテゴリー」から必要なものにチェックを入れて「メニューに追加」

ボタンを押します。

Page 39: ユーザーズマニュアル 初級編 · 4 <1> はじめに サイトの特徴 お客様のWEBサイトは、WordPress(ワードプレス)をベースに、当社独自のシステムカスタマイズ、デザイ

39

※カスタムリンクは、URL とリンク文字列を入力して「メニューに追加」ボタンを押すと、「メニュー構造」

に追加されます。カスタムリンクのみを使い、リンク集を作ることもできます。

⑤「メニュー構造」に選択した項目が追加されましたので「メニューを保存」ボタンを押して完了です。

※①~⑤の手順で自作のメニューを作成します。

⑥外観/ウィジェット をひらきます。

⑦「sidebar」エリアに「カスタムメニュー」を追加します。

※<10>サイドバナーを設定する(P.35)【方法②】を参照

⑧「タイトル」を入力して「-選択-」の右側の▼を押します。設定したいメニューを選択します。

※タイトルを入れなくても設定できます。

※①~⑤の手順で自作したメニュー以外に、

元々ある GLOBALMENU なども選択できます。

⑨最後に「保存」ボタンを押して完了です。

Page 40: ユーザーズマニュアル 初級編 · 4 <1> はじめに サイトの特徴 お客様のWEBサイトは、WordPress(ワードプレス)をベースに、当社独自のシステムカスタマイズ、デザイ

40

<11>フロントバナーを設定する

※(例)3カラム設定

※【方法①】で変更できない場合には、【方法②】をお試しください。

【方法①】

①外観/テーマ設定/4.フロントバナー設定 を開きます。

■フロントバナーが 1つだけ大きく表示される「1カラム・フロントページバナーの設定」

■フロントバナーが 2つ大きく表示される「2カラム・フロントページバナーの設定」

■フロントバナーが 3つ大きく表示される「3カラム・フロントページバナーの設定」

から表示設定を選ぶことができます。

※全てのフロントバナーを設定することも可能です。

②各種項目を設定します。

【1】

【2】

Page 41: ユーザーズマニュアル 初級編 · 4 <1> はじめに サイトの特徴 お客様のWEBサイトは、WordPress(ワードプレス)をベースに、当社独自のシステムカスタマイズ、デザイ

41

【1】画像 URL

ボタンを押して「メディアライブラリ」から画像を選択します。

【2】リンク先 URL

フロントバナーをクリックして表示させたいページの URLを入力します。

※画像のみを表示させたい場合には、リンク先を指定しなくても問題ありません。

③最後に「変更を保存」ボタンを押して完了です。

【方法②】

※①は同じです。

②各種項目を設定します。

【1】画像 URL

設定したい画像を「メディアライブラリ」から選択し、「添付ファイルの詳細」より URL をコピーして貼り付

けます。

※<8>ヘッダーエリアを変更する(P.28)8-1 の【方法②】」を参照

【2】リンク先 URL

フロントバナーをクリックして表示させたいページの URLを入力します。

※画像のみを表示させたい場合には、リンク先を指定しなくても問題ありません。

③最後に「変更を保存」ボタンを押して完了です。

【1】

【2】

Page 42: ユーザーズマニュアル 初級編 · 4 <1> はじめに サイトの特徴 お客様のWEBサイトは、WordPress(ワードプレス)をベースに、当社独自のシステムカスタマイズ、デザイ

42

<12>アイキャッチ画像を設定する

アイキャッチ画像を設定すると、イメージが伝わりやすくなります。

※編集方法は、投稿、固定ページどちらも同じです。

①アイキャッチ画像を設定したいページのタイトルをクリックします。

※<3>固定ページの編集について(P.6)の 3-1 を参照

②編集画面の右下の「アイキャッチ画像を設定」を押すと、メディアライブラリが開きます。

③設定したい画像を選択し、 ボタンを押します。

④最後に「更新」ボタンを押して完了です。