All in one HPCopyright © freelize Inc. All rights reserved. 14 STRICTLYCONFIDENTIAL...

1 Copyright © freelize Inc. All rights reserved.

STRICTLYCONFIDENTIAL AllinoneHPホームページ更新マニュアル Ver,3.1

Copyright © freelize Inc. All rights reserved.


All in one HP ホームページ更新マニュアル

2018.10.10改定

Ver 3.1



もくじ

※ホームページと管理画面を同時に閲覧する方法 …P.3 ※管理画面で更新したことを確認する方法 …P.5 1 管理画面の使用方法 …P.6 1-1 ログイン方法 1-2 管理画面使用方法 2 ページの編集・作成方法 …P.12 2-1 文章(テキスト)作成方法 2-2 その他の編集方法 3 ブログの投稿方法 …P.20 4 メルマガ（メールマガジン）のつかいかた …P.23 5 守って頂きたい事 …P.29 6 用語集 …P.33



ホームページと管理画面を同時に閲覧する方法

ホームページの更新・修正・追加をしやすくするため、お客様のホームページと管理画面を同時に閲覧をしながら作業を行って下さい。

Firefoxなどのブラウザで、

お客様のホームページを開いて下さい。

タブの右の「+」をクリックして下さい。

2 1



ブラウザ上部のURL入力欄に管理画面のURLをご入力下さい。

その後「Enterキー」もしくは、URL入力後右横に表示される

「→（矢印）」ボタンをクリックして下さい。

新しく管理画面が表示されます。

それぞれの「タブ」をクリックする事で見たい画面に切り替える事が出来ます。

作業を行う際は、同時閲覧をしながら行うと便利です。

ホームページと管理画面を同時に閲覧する方法

① ②

4 3



管理画面上でページを編集後、実際にホームページに反映されているか確認を行って下さい。

管理画面で更新を行ってください。

※管理画面の操作方法はP.8以降をご確認ください。

お客様のホームページのタブをクリックして表示して下さい。

管理画面で更新したことを確認する方法

1 2

キーボードの「F5」、もしくは画面上部の「更新ボタン（丸い

矢印）」を押すと、そのページの表示が更新されます。

情報が更新され管理画面で編集された内容が

お客様のホームページに反映されると確認完了です。 4 3


STRICTLYCONFIDENTIAL AllinoneHPホームページ更新マニュアル Ver,3.1 STRICTLYCONFIDENTIAL AllinoneHPホームページ更新マニュアル Ver,2.0

1 管理画面の使用方法



納品時にお送りした、「納品完了メール」に、管理画面のURLが記載されておりますので、FirefoxなどのブラウザにURLを入力し管理画面を開いて下さい。

「管理画面のご連絡」に記載されている「ユーザー名」・「パスワード」を入

力してログインしてください。

1-1 ログイン方法

①

②

③

管理画面にログインすると「ダッシュボード」画面が表示されます。

ページの修正と変更、ページの追加、ブログ投稿、

メルマガの配信は全てこの管理画面からおこなえます。

1 2



管理画面からアップロードした画像の一覧が見られます。

「トップページの更新」「新着情報の更新」はこちらから行います。

ブログに投稿された「コメント」の管理はこちらから行います。

「メルマガ」登録メールアドレスの管理はこちらから行います。

管理画面の左側に下のようなメニューが表示されています。

こちらのメニューから、ページの修正と変更、ページの追加、ブログ投稿、メルマガの配信のページへと移動できます。

「管理画面トップ」にもどります。

使用しません

1-2 管理画面の使用方法 ① ダッシュボード使用方法

「ページの更新」「ページの追加」「ブログ投稿」「メルマガ送信」はこちらから行います。



トップページと情報（News）の更新は、管理画面の「固定ページ」から行います。

管理画面の「固定ページ」

をクリックして下さい。

「固定ページ」の編集画面が表示されます。

「トップページコンテンツ」をクリックするとトップページのコンテンツの編集画面に移動します。

「トップページ更新情報」をクリックすると更新情報（News）の編集画面に移動します。

1-2 管理画面の使用方法 ② トップページと情報（News）更新画面の開き方

1

ページの編集方法について、詳細はP.12～をご覧ください。

2



その他のページの更新は、管理画面の「投稿」より行います。

「投稿」編集画面が表示されます。

「投稿」欄に記載されている情報が更新可能なその他のページです。

各タイトルをクリックし、編集や削除を行って下さい。

更新を行いたいページのタイトルをクリックします。

1-2 管理画面の使用方法 ③ その他のページ更新画面の開き方

投稿を絞り込んで探したい場合

「カテゴリ指定なし」横の「▼」をクリックし、

カテゴリーを選択します。

その後、「絞り込み検索」をクリックすると、

選択したカテゴリのページのみが表示されます。

2

管理画面の「投稿」

をクリックして下さい。

1




新規ページの追加は、管理画面の「投稿」内の「新規追加」より行います。

1-2 管理画面の使用方法 ④ 新規ページの作成画面の開き方

「投稿」にマウスをあわせると

「新規追加」が表示されます。

「新規追加」をクリックすると、「新規投稿を追加」画面が表示されます。


2

気をつけていただきたいこと ①新規ページ作成の際は、右のカテゴリーのチェックを忘れないでください。

新規追加ページは公開しているページの左メニューの下に自動的に

追加されていきますので、チェックをつけないとページ上に

公開されません。

②新規ページ作成の際は、上部の「タイトルを入力してください」

の箇所にも、忘れずにページタイトルを入れてください。

1



2 ページの編集・作成方法



2-1 文章(テキスト)の作成方法 ① 文字の入力方法

トップページの更新や修正、新規・その他のページのコンテンツ部分を更新する時の文字の入力方法です。

文字を入力したいページの編集画面（新規追加の場合

は新規投稿を追加の画面）を開いて下さい。

≪編集画面の開き方はp.9～11を参照して下さい≫

上記の赤枠内が、ページの入力可能箇所です。

クリックしてカーソルを合わせ、文字の入力、削除等

編集を行ってください。

文字を入力・編集したり、

画像を追加・編集するなどしたら、

画面右にある「更新（公開）」

ボタンをクリックします。

気を付けていただきたいこと

ページを編集したら、その内容を保存してページに反映するため、必ず「更新（公開）」

ボタンをクリックしてください。クリックしないと、ページに反映されません。

2 1

3



新規画面や投稿画面では文字の装飾などをボタンで簡単に行える「ビジュアルモード」と、

html文で記載する「テキストモード」の2種類で編集・投稿ができます。

基本的に「ビジュアルモード」で編集・投稿を行ってください。（テキストモードではhtml文を記述する知識が必要になります。）

こちらのページでは装飾ボタンの上段を掲載について説明致します。

2-1 文章(テキスト)の作成方法 ② 文字の装飾方法（上段）

文字のレイアウトを左寄せ、真ん中寄せ、右寄せ

から選べます。

選択した文字を太字にします。文字サンプル

選択した文字を斜体にします。

選択した文字に取り消し線をつけます。

文字サンプル

選択した文字に下線をつけます。

文字サンプル

リンクを貼ります。詳細は16ページを

ご覧下さい。

「ビジュアル」「テキスト」の切り替えができます。

※「ビジュアル」をご利用下さい。

ページ内容から文字の検索・置換が

おこなえます。

投稿画面を大きく表示できます。

装飾ボタンの下段については、次のページをご覧下さい →



こちらのページでは装飾ボタンの上段を掲載について説明致します。

2-1 文章(テキスト)の作成方法 ③ 文字の装飾方法（下段）

「▼」をクリックすると文字サイズの変更が

行えます。

ワード等からコピー&ペーストする場合に

お使いください。

「▼」をクリックすると

文字の色が変更できます。

蛍光ペンで引いたような文字の背景色が変更できます。

絵文字が入力できます。

※絵文字を入力する際には、

入力する直前の文字から

「半角スペース」を

空けてご入力ください。

文字化けを防げます。

会社概要ページ等で使用しているような

表を作成することができます。装飾を削除できます。文字を範囲選択し、

「▼」をクリックすると見出しのデザインを変更できます。『見出し2』『見出し3』が使えます。

「やり直し」と「元に戻す」が行えます。



他のホームページや次のページなど、設定したリンク先にジャンプする機能です。

リンクを張りたい文字をマウスでなぞって反転させます。その後、をクリックし現れ

るウィンドウにリンクさせたいURLを入力するか、

をクリックして詳細ウィンドウを開きます

1

「リンクの挿入/編集」画面が表示されます。

リンクURLとチェックを入力後、「リンク追加」ボタンをクリックします。

リンクさせたいURLを

こちらに入力してください。

2

①

②

③

元の「編集画面」に戻り、

リンクさせた文字がグレーになりにアンダーバーがついているか確認しま

す。確認後、画面右にある「更新（公開）」ボタンをクリックします。

2-1 文章(テキスト)の作成方法 ④ リンクの張り方

リンクを新しいウィンドウで開かせたい場合

は「リンクを新ウィンドウまたはタブで開く」に

チェックを入れてください。

3



設定したリンク先を解除する方法です。

リンクを解除したいページを開きます。

リンクのある該当テキストを反転し、をクリックします。

該当テキストのアンダーバーがなくなり、色が黒文字に変わったのを確認

して下さい。確認後「更新（公開）」ボタンをクリックします。

2-1 文章(テキスト)の作成方法 ⑤ リンクの解除の方法

1 2



テキスト作成画面で画像を入れたい箇所にカーソルを合わせて、

をクリックすると画像アップロード画面が開きます。

コンテンツ内に画像を挿入出来る機能です。

2-2 その他の編集方法 ① 画像のアップロード方法

「メディアを挿入」画面が表示されます。

「ファイルを選択」ボタンをクリックします。

3

「ファイルのアップロード」画面が表示されます。

挿入したいファイルをクリックし、「ファイル名」のところに正しく表示されたか

確認して下さい。その後「開く」をクリックして下さい。 ①

③ ②

気をつけていただきたいことアップロードする画像のファイル名は、極力半角英数字のみにしておいて下さい。

日本語のファイル名はエラーになる場合があります。

1 2



2-2 その他の編集方法 ① 画像のアップロード方法

再び「メディアを挿入」画面が表示されます。

追加したい画像をクリックすると選択できるので、

その状態で「投稿に挿入」ボタンをクリックして下さい。テキスト作成画面に戻り、画像が挿入されます。

問題なければ「更新（公開）」ボタンをクリックして下さい。

4

5



3 ブログの投稿方法

ブログは一般的に日記のように活用されています。

自社の様子を載せていくことで、見に来たユーザーに親しみを感じてもらったり、

自社サービスの情報や専門的情報を発信したり、

自社からのメッセージを発信するのに適した機能です。



「投稿」にカーソルを合わせると、右に「新規投稿」が

表示されますので、クリックしてください。

3 ブログの投稿方法 ①

ブログの投稿方法の手順です。

1

2

編集画面が表示されます。

≪記事の書き方は、p.12～p.19を参照して下さい。≫

ブログ記事のタイトルを入力

ブログ記事の本文を入力



3 ブログの投稿方法 ②

右側にある「カテゴリー」の「ブログ」

にチェックを入れてください。 3

投稿画面右側にある「公開」を

クリックすると実際のページに反映されます。 5

ブログのタイトルと、ブログの本文を書いてください。 4

ブログ一覧ページに掲載されます。 6



7 メルマガ（メールマガジン）のつかいかた

メルマガはホームページを見たユーザーに登録をしていただき、

自社のサービスの情報や、新商品の紹介などの通知などに使用します。



ユーザーが購読する仕組みです。

公開しているホームページの「メルマガ登録ページ」から

ユーザーがメールアドレスを入力して

「登録する」をクリックします。

（※この時点では仮登録になります。）

図：メルマガ登録ページ画面

入力されたメールアドレス宛に、確認メールが届きます。

メール内に記載のURLをクリックすると本登録になります。

図：仮登録メール

1

2

7 メルマガのつかいかた ① メールマガジンの仕組み



図：ログイン後の画面左メニュー

次のページの上部分から

メールアドレスの

登録と解除がおこなえます。

図：メール読者画面上

「メールアドレス」を入力します。複数のメールアドレスを入力する場合には「,」（半角カンマ）で区切るか、改行して入力してください。

メルマガへ登録の場合には「登録する」をクリックしてください。メルマガからの削除の場合には「登録解除する」をクリックしてください。

左メニューSubscibe2をクリックすると

開くメニューから

「メルマガ読者」をクリックします。

気をつけていただきたいこと

管理画面から登録したメールアドレスは本登録の状態になります。

購入したメールアドレスリストの登録、

不特定多数のホームページから取得したメールアドレスの登録は

禁止行為となります。ご注意ください。

管理画面上にて、アドレス登録や、購読している読者の削除等が行えます。

7 メルマガのつかいかた ② メールアドレスの登録と削除 (管理画面から)

2

3



図：ログイン後の画面左メニュー図：メール読者画面中

左メニュー「Subscibe2」をクリックすると

開くメニューから

「メルマガ読者」をクリックします。

次のページの真ん中部分から登録メールアドレス一覧の

確認と変更がおこなえます。

赤文字のメールアドレスは、ホームページからメルマガの仮登録はされていますが、その後の確認メールから本登録がされていないアドレスです。黒文字のメールアドレスは、確認メールから本登録がされているアドレスです。

ここではメールアドレスの絞込みがおこなえます。

※選択後に「フィルター」をクリックしてください。

Subscirbe2登録者（全てのアドレス表示）

確認済み（本登録のみ表示）

未確認（仮登録のみ表示）

登録されているメールアドレスをCSV形式で

保存することができます。

7 メルマガのつかいかた ③ メールアドレスのリスト確認と変更

2

1



図：メール読者画面中

7 メルマガのつかいかた ④ メールアドレスのリスト確認と変更

1

ここではメールアドレスの絞込みがおこなえます。

※選択後に「フィルター」をクリックしてください。

Subscirbe2登録者（全てのアドレス表示）

確認済み（本登録のみ表示）

未確認（仮登録のみ表示）

操作したいメールアドレスの

左側にあるチェックボックスにチェックを入れてください

2 1でチェックしたメールアドレスに対する操作を選び

「適用」をクリックします。

Delete:メールアドレスを削除します

Toggle:メールアドレスの確認・未確認を操作します。

選択したメールアドレスが

登録済み→未登録

未登録→登録済み

となります。



図：メルマガ発行画面

気をつけていただきたいこと

図：ログイン後の画面左メニュー

メールの件名と本文、

添付ファイルを入力します。

短期間での複数回のメルマガ送信は迷惑メールになる可能性が高いため、

禁止とさせていただきます。

一度送信したメルマガは、キャンセルできませんので予めご了承ください。「送信」をクリックするとメルマガが

送信されます。

「プレビュー」をクリックすると

プレビューとして管理者メールアドレスに送信されます

図：メルマガ発行画面

7 メルマガのつかいかた ⑤ メルマガの送信方法

4

左メニュー「Subscibe2」を

クリックすると開くメニューから

「メール送信」をクリックします。

宛先を選択します

基本的には「確認済」を選択してください

（WPユーザー＝管理者メールアドレスです）

3

2

1



5 守っていただきたいこと



・お客様が更新した内容は「復元」で元に戻すことが可能ですが、変更したい箇所がすべて戻ってしまいますので、ページを更新する際には、

あらかじめお客様ご自身でメモ帳などに元の内容をコピーして保存し、後から必要な個所を戻せるようにしていただくことをお勧めします。

メルマガについて

・メルマガご利用の際には、配信先のユーザーにメルマガ配信の確認を取った上で配信してください。

・不特定多数の方へのメール配信、短時間での連続したメール配信、利用規約で禁止されている行為は禁止となります。

・メルマガ配信の際の送信遅延、未送信など、送信トラブルに関しての保障は致しかねますのでご了承ください。

・メルマガをご利用した際のお客様とユーザー間のトラブルに関しては、お客様側のご責任となります。

バックアップ（更新前の情報）について

マニュアル記載以外の情報について

・管理画面はWordPressという世界的に使われているシステムを使用しているため、本マニュアルに記載以外の様々な機能があります。

本マニュアル以外の機能についてのお問い合わせ・サポートは致しかねますのでご了承ください。

・htmlやCSSの書き方などの技術的なお問い合わせ・サポートは対象外とさせて頂きます。

4 守っていただきたいこと



6 用語集



5 用語集 ①

アップロード

・自分のPCから、インターネットを利用してサーバーPCにファイルを送信すること。

All in one HPでは、管理画面からファイルをアップロードすることで、ホームページに画像などを入れ込むことができます。

インターネットエクスプローラー

・windowsに標準で搭載されている、インターネットに接続してホームページを閲覧するためのソフトの名称。

下層ページ

・トップページを頂点として、それ以外のページを下層ページと呼んでいます。

スタイルシート

・文書の装飾、レイアウトなどの表示の制御を行う言語、ファイルです。

ダッシュボード

・管理画面（wordpress）のトップページの名称です。

タブ

・ブラウザのウィンドウで、複数の画面を1つのウィンドウ内で切り替えて使用するための物。



5 用語集 ②

電子すかし

・画像などのデジタルデータに著作権情報を埋め込む技術です。

画像編集画面で使用できますが、一般的に普及していないのが実情ですので特に使う必要はありません。

トリミング

・画像の一部を切り抜くことをトリミングといいます。

パーマリンク

・各ページのアドレス（URL）

ブラウザ

・インターネットを表示させるためのツール。

リサイズ

・画像の縦、横の大きさを変更することをリサイズといいます。・一般的にデジカメなどで撮影した画像はサイズが大きいので、ホームページ用に小さくリサイズして使用します。



リビジョン

・管理画面のページ編集画面で、自動的に取得している過去の更新データです。リビジョンの復元をすれば、過去のデータに戻すことができます。

5 用語集 ③

リンク

・文字や画像にリンクとしてアドレスを指定することで、クリックすると指定したアドレスへ移動することができます。・自分のホームページ内の別ページへのリンクを内部リンク。外部ホームページへのリンクを外部リンクと呼んだりもします。

URL

・ウェブホームページのアドレス(住所)のこと。

All in one HPCopyright © freelize Inc. All rights reserved. 14 STRICTLYCONFIDENTIAL...

Documents

Transcript of All in one HPCopyright © freelize Inc. All rights reserved. 14 STRICTLYCONFIDENTIAL...