how to use€¦ · how to use wordpress ... text: welsnet corporation - 1 -...

26
How To Use ? ? ? ? ? ? ? ? ワードプレスの使い方 Menu ・ログインのしかた ・・・1 P ・ログアウトのしかた ・・・2 P ・編集画面の説明  ・・・3 P ・記事の投稿のしかた ・・・4 P ・文字を工夫したいときは・・・ ・・・6 P ・カテゴリーの設定のしかた ・・・8 P ・記事に写真を入れたい時は・・・ ・・・13 P ・複数の画像の表示のしかた                   ・・・16 P ・Youtube などを入れたい時は・・・ ・・・20 P ・縮小専用のダウンロードのしかた                ・・・23P ・縮小専用の使い方                       ・・・25P Welsnet Corporation

Upload: others

Post on 04-Jun-2020

0 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: How To Use€¦ · How To Use WordPress ... Text: Welsnet Corporation - 1 - 最初に、すでに開設しているホームページを開きます。 画面上の【管理者メニュー】の中にある【ログイン】をクリックすると、下記の画面(図

How To Use? ???? ?

? ?

ワードプレスの使い方

Menu・ログインのしかた                 ・・・1 P・ログアウトのしかた                 ・・・2 P・編集画面の説明                    ・・・3 P・記事の投稿のしかた                 ・・・4 P・文字を工夫したいときは・・・             ・・・6 P・カテゴリーの設定のしかた              ・・・8 P・記事に写真を入れたい時は・・・            ・・・13 P・複数の画像の表示のしかた                   ・・・16 P・Youtube などを入れたい時は・・・           ・・・20 P・縮小専用のダウンロードのしかた                ・・・23P・縮小専用の使い方                       ・・・25P

Welsnet Corporation

Page 2: How To Use€¦ · How To Use WordPress ... Text: Welsnet Corporation - 1 - 最初に、すでに開設しているホームページを開きます。 画面上の【管理者メニュー】の中にある【ログイン】をクリックすると、下記の画面(図

How To Use WordPress ... Text: Welsnet Corporation

- 1 -

最初に、すでに開設しているホームページを開きます。

画面上の【管理者メニュー】の中にある【ログイン】をクリックすると、下記の画面(図

1)が表示されます。(※トップページに【管理者メニュー】がない場合は、「ブログ」の

ページ内などにあります。)

(図1)

「ユーザー名」と「パスワード」を入力し、「ログイン」をクリックすると、管理画面のト

ップページである「ダッシュボード」(図2)が開きます。

(図2)

Page 3: How To Use€¦ · How To Use WordPress ... Text: Welsnet Corporation - 1 - 最初に、すでに開設しているホームページを開きます。 画面上の【管理者メニュー】の中にある【ログイン】をクリックすると、下記の画面(図

How To Use WordPress ... Text: Welsnet Corporation

- 2 -

(図3)

①「こんにちは、○○さん!」のところ(図3)へカーソルをもっていくと、下記の画面

(図4)が出てきます。

(図4)

② ログアウトというボタンをクリックすると、ログアウトできます。

※※※※サイトをサイトをサイトをサイトを閉閉閉閉じるじるじるじる時時時時はははは、、、、必必必必ずログアウトするようずログアウトするようずログアウトするようずログアウトするよう心心心心がけましょうがけましょうがけましょうがけましょう!!!!

Page 4: How To Use€¦ · How To Use WordPress ... Text: Welsnet Corporation - 1 - 最初に、すでに開設しているホームページを開きます。 画面上の【管理者メニュー】の中にある【ログイン】をクリックすると、下記の画面(図

How To Use WordPress ... Text: Welsnet Corporation

- 3 -

再度ログインをしてみましょう。

管理画面(図5)の各ボタンについて簡単に説明をします。

(図5……※ここでは「投稿者」用の管理画面を表示しています。)

①【サイト名】

ここをクリックすると、自身のサイトを見ることができます。

②【○W

WordPress についての一般的な説明を見ることができます。

③【ダッシュボード】

ここをクリックすると、管理画面のトップページ(上記図のページ)が表示されます。

④【投稿】

ここをクリックすると、記事の投稿・編集・削除などが行えます。

⑤【メディア】

ここをクリックすると、写真などのアップロードや、その編集・削除などが行えます。

⑥【コメント】

ここをクリックすると、記事のコメントの編集・削除などができます。

⑦【プロフィール】

ここをクリックすると、プロフィールの編集が行えます。

【プロフィール】欄では、ブログ上の表示名や、メールアドレス、パスワー

ドの変更などが行えます。このマニュアルでは解説していませんが、必要に

応じて登録や変更を行ってください。

Page 5: How To Use€¦ · How To Use WordPress ... Text: Welsnet Corporation - 1 - 最初に、すでに開設しているホームページを開きます。 画面上の【管理者メニュー】の中にある【ログイン】をクリックすると、下記の画面(図

How To Use WordPress ... Text: Welsnet Corporation

- 4 -

それでは、WordPress(ワードプレス)を実際に使って練習してみましょう。

(図6)

管理画面で【投稿】の「新規追加」(図6)をクリックすると、下記の画面(図7)が出て

きます。

(図7)

Page 6: How To Use€¦ · How To Use WordPress ... Text: Welsnet Corporation - 1 - 最初に、すでに開設しているホームページを開きます。 画面上の【管理者メニュー】の中にある【ログイン】をクリックすると、下記の画面(図

How To Use WordPress ... Text: Welsnet Corporation

- 5 -

①記事のタイトルを入力します(例えば、「テスト」と入力してみましょう)。

②記事の内容を入力します(例えば、「これは最初の投稿記事です」と入力してみましょう)。

③最後に、画面右上の「公開」ボタンをクリックします。

(図8)

投稿がうまくいくと「投稿を公開しました」と表示された画面(図8)が出てくるので、

「投稿を表示する」をクリックし、サイトでの表示(図9)を確認してみましょう。

(図9)

≪タイトルを書き、本文を書き、公開ボタンをクリックする≫

わずか3つのステップだけで簡単にサイト更新ができる。それが WordPress の大きな魅力

の一つです。

立派なサイトをつくっても、目新しい情報がなければ訪問者は離れてしまいます。親しま

れるサイトにするため、新しい情報をどんどんアップしていきましょう。

Page 7: How To Use€¦ · How To Use WordPress ... Text: Welsnet Corporation - 1 - 最初に、すでに開設しているホームページを開きます。 画面上の【管理者メニュー】の中にある【ログイン】をクリックすると、下記の画面(図

How To Use WordPress ... Text: Welsnet Corporation

- 6 -

普通に文字を書くだけでは単調になりがちです。

そこで、文字に一工夫をしてみましょう。

(図 10)

ログインした状態で投稿記事のページを見ると、記事の上部(もしくは下部)に「編集」

というボタンが表示(図 10)されるので、それをクリックすると「投稿の編集」画面(図

11)が出てきます。

(図 11)

Page 8: How To Use€¦ · How To Use WordPress ... Text: Welsnet Corporation - 1 - 最初に、すでに開設しているホームページを開きます。 画面上の【管理者メニュー】の中にある【ログイン】をクリックすると、下記の画面(図

How To Use WordPress ... Text: Welsnet Corporation

- 7 -

(図 12)

文字を太太太太くしたりくしたりくしたりくしたり、斜めにしたり、色をつけたりしたいときは、ここを使います(図 12)。

下記(図 13)のような楽しい文章にすることもできますので、いろいろ試してみてくださ

い。

(図 13)

★裏技!一言アドバイス★

WordPress では、通常 Enter キーを押すだけでは「段落」となり、上下に大きなスペース

ができてしまいます。しかし、Shift キーを押しながら Enter キーを押すことで、上下

のスペースが狭い「改行」にすることができます。

Page 9: How To Use€¦ · How To Use WordPress ... Text: Welsnet Corporation - 1 - 最初に、すでに開設しているホームページを開きます。 画面上の【管理者メニュー】の中にある【ログイン】をクリックすると、下記の画面(図

How To Use WordPress ... Text: Welsnet Corporation

- 8 -

「投稿の編集」画面を開くには先に述べた方法でも行えますが、ここでは別の方法で編集

画面を開いてみましょう。

(図 14)

ログインした状態でサイトを見ると、画面最上部に「サイト名」が表示されています。サ

イト名にカーソルを合わせた時に表示される「ダッシュボード」をクリック(図 14)しま

す。

(図 15)

「投稿」にカーソルを合わせた時に表示される「投稿一覧」をクリック(図 15)します。

Page 10: How To Use€¦ · How To Use WordPress ... Text: Welsnet Corporation - 1 - 最初に、すでに開設しているホームページを開きます。 画面上の【管理者メニュー】の中にある【ログイン】をクリックすると、下記の画面(図

How To Use WordPress ... Text: Welsnet Corporation

- 9 -

(図 16)

投稿した記事の一覧が表示されます。

編集したい記事のタイトルにカーソルを合わせた時に表示される「編集」をクリック(図

16)すると「投稿の編集」画面(図 17)が開きます。

(図 17)

記事の数が増えてくると、整理をする必要が出てきます。

そこで、記事の内容によってカテゴリー分けをしてみましょう。

Page 11: How To Use€¦ · How To Use WordPress ... Text: Welsnet Corporation - 1 - 最初に、すでに開設しているホームページを開きます。 画面上の【管理者メニュー】の中にある【ログイン】をクリックすると、下記の画面(図

How To Use WordPress ... Text: Welsnet Corporation

- 10 -

該当するカテゴリーにチェック(図 18)を入れます(複数選択可)。この時、もし「未分

類」にチェックがついているなら、そのチェックを外しておきます。

(図 18)

(図 19)

画面右上の「更新ボタン」をクリックすると、投稿した記事がカテゴリーごとに分けられ

ます。(※カテゴリーの追加、編集、削除に関しては「管理者」だけの特権となっているた

め、「投稿者」が行えるのは記事のカテゴリー分類のみとなっています。)

Page 12: How To Use€¦ · How To Use WordPress ... Text: Welsnet Corporation - 1 - 最初に、すでに開設しているホームページを開きます。 画面上の【管理者メニュー】の中にある【ログイン】をクリックすると、下記の画面(図

How To Use WordPress ... Text: Welsnet Corporation

- 11 -

更新に成功すると「投稿を更新しました」と表示されます。その横にある「投稿を表示す

る」をクリックすると更新したページ(図 20)を見ることができます。

(図 20)

記事の下の「カテゴリー」に先ほど分類したカテゴリー名が表示されています。

このカテゴリー分けをどのように役立てるか実際に見てみましょう(※カテゴリー分けの

利用方法はサイトによって異なります)。

ここでは「トップページ」をクリックしてみます。

(図 21)

Page 13: How To Use€¦ · How To Use WordPress ... Text: Welsnet Corporation - 1 - 最初に、すでに開設しているホームページを開きます。 画面上の【管理者メニュー】の中にある【ログイン】をクリックすると、下記の画面(図

How To Use WordPress ... Text: Welsnet Corporation

- 12 -

サイドバーの「カテゴリー」のところに「トピックス(3)」と表示されています(図 21)。こ

れは「トピックス」に分類された記事が3つあることを示しています。「トピックス」をクリ

ックしてみると「トピックス」に分類された記事だけを閲覧することができます(図 22)。

(図 22)

Page 14: How To Use€¦ · How To Use WordPress ... Text: Welsnet Corporation - 1 - 最初に、すでに開設しているホームページを開きます。 画面上の【管理者メニュー】の中にある【ログイン】をクリックすると、下記の画面(図

How To Use WordPress ... Text: Welsnet Corporation

- 13 -

投稿記事には文字だけではなく、写真などの画像を加えることもできます。

管理画面の「投稿」→「投稿一覧」から、先ほどアップした「テスト」の編集画面を開い

てみましょう。

(図 23)

投稿記事を入力するエリアの上部にある「アップロード/挿入」をクリック(図 23)する

と下記の画面(図 24)が出てくるので、「ファイルを選択」をクリックします。

(図 24)

Page 15: How To Use€¦ · How To Use WordPress ... Text: Welsnet Corporation - 1 - 最初に、すでに開設しているホームページを開きます。 画面上の【管理者メニュー】の中にある【ログイン】をクリックすると、下記の画面(図

How To Use WordPress ... Text: Welsnet Corporation

- 14 -

(図 25)

挿入したい画像をクリックし、選択した画像が「ファイル名」のところの表示されている

のを確認してから「開く」をクリックすると画像が自動的にアップロードされます。表示

された画面を下へスクロールすると下記のような入力欄(図 26)が出てきます。

(図 26)

Page 16: How To Use€¦ · How To Use WordPress ... Text: Welsnet Corporation - 1 - 最初に、すでに開設しているホームページを開きます。 画面上の【管理者メニュー】の中にある【ログイン】をクリックすると、下記の画面(図

How To Use WordPress ... Text: Welsnet Corporation

- 15 -

タイトル、代替テキスト(画像が正しく表示されなかった時に代わりに表示される文字)

を入力し、「リンクURL」で「ファイルのURL」をクリックし、配置でいずれかを選択

し、サイズで画像の大きさを決めてから「投稿に挿入」をクリックします。

(図 27)

画像が本文に挿入されたのを確認してから、右上の「更新」ボタンをクリック(図 27)し

ます。

更新したページを確認(図 28)してみます。

(図 28)

Page 17: How To Use€¦ · How To Use WordPress ... Text: Welsnet Corporation - 1 - 最初に、すでに開設しているホームページを開きます。 画面上の【管理者メニュー】の中にある【ログイン】をクリックすると、下記の画面(図

How To Use WordPress ... Text: Welsnet Corporation

- 16 -

次に、大量の画像を一度にアップロードする方法について述べます。

「投稿の編集」画面に戻り、アップした画像を削除します。画像の削除の仕方はいくつか

ありますが、ここでは画像をクリックし、青の網掛けがかかった左側に表示される「画像

を削除」するためのマークをクリックして削除(図 29)してみます。

(図 29)

続いて、「アップロード/挿入」をクリック(図 30)します。

(図 30)

Page 18: How To Use€¦ · How To Use WordPress ... Text: Welsnet Corporation - 1 - 最初に、すでに開設しているホームページを開きます。 画面上の【管理者メニュー】の中にある【ログイン】をクリックすると、下記の画面(図

How To Use WordPress ... Text: Welsnet Corporation

- 17 -

複数枚の画像を選択(図 31)してから、「開く」ボタンをクリックします。

(図 31)

下記のような画面(図 32)になるので、必要に応じて各画像の横の「表示する」をクリッ

クし、タイトルや代替テキスト名などを入力します。なお、画像の下に説明文(「これは道

端で見かけた花です」など)を入れたい時は「キャプション」に入力します。

(図 32)

Page 19: How To Use€¦ · How To Use WordPress ... Text: Welsnet Corporation - 1 - 最初に、すでに開設しているホームページを開きます。 画面上の【管理者メニュー】の中にある【ログイン】をクリックすると、下記の画面(図

How To Use WordPress ... Text: Welsnet Corporation

- 18 -

「すべての変更を保存」ボタンをクリックすると、画面の下にさらに次のような項目が出

てくるので、「サムネイルのリンク先」で「画像ファイル」を選択し、「ギャラリーを挿入」

をクリック(図 33)します。

(図 33)

本文に下記のカメラ画像が表示されたのを確認してから、「更新」ボタンをクリック(図

34)します。

(図 34)

Page 20: How To Use€¦ · How To Use WordPress ... Text: Welsnet Corporation - 1 - 最初に、すでに開設しているホームページを開きます。 画面上の【管理者メニュー】の中にある【ログイン】をクリックすると、下記の画面(図

How To Use WordPress ... Text: Welsnet Corporation

- 19 -

サイトで確認してみると、アップロードした画像が下記のように表示(図 35)されていま

す。

(図 35)

このように一度に大量の画像を簡単にアップできるのも WordPress の魅力の一つです。

続いて、その中の画像の一枚をクリックしてみましょう。

(図 36)

カーソルを画像の右側にもってきた時に表示される矢印をクリックすると次の画像を、カ

ーソルを画像の左側にもってきた時に表示される矢印をクリックすると前の画像を見るこ

とができます(図 36)。

Page 21: How To Use€¦ · How To Use WordPress ... Text: Welsnet Corporation - 1 - 最初に、すでに開設しているホームページを開きます。 画面上の【管理者メニュー】の中にある【ログイン】をクリックすると、下記の画面(図

How To Use WordPress ... Text: Welsnet Corporation

- 20 -

(図 37)

写真と同様、「アップロード/挿入」をクリックします。

(図 38)

①「URL から」タブをクリックします(図 38)。

② 挿入したい Youtube の URL を貼り付けます。

③ タイトルを入力します。

④「投稿に挿入」をクリックします。

Page 22: How To Use€¦ · How To Use WordPress ... Text: Welsnet Corporation - 1 - 最初に、すでに開設しているホームページを開きます。 画面上の【管理者メニュー】の中にある【ログイン】をクリックすると、下記の画面(図

How To Use WordPress ... Text: Welsnet Corporation

- 21 -

(図 39)

写真と同様にタイトルや内容を入力し、「公開ボタン」をクリックすれば、本文にリンクが

貼り付けられた状態になっています(図 39)。このリンクから動画を見ることもできます

が、本文にそのまま動画を埋め込むこともできます。

最初に記事を入力するエリア上部の「埋め込みメディアの挿入/編集」をクリックします

(図 40)。

(図 40)

Page 23: How To Use€¦ · How To Use WordPress ... Text: Welsnet Corporation - 1 - 最初に、すでに開設しているホームページを開きます。 画面上の【管理者メニュー】の中にある【ログイン】をクリックすると、下記の画面(図

How To Use WordPress ... Text: Welsnet Corporation

- 22 -

すると、下記の画面が表示されるので、「Type」を選択してから「URL」を貼り付け、「挿

入」ボタンをクリックします(図 41)。サイトのページでは図 42 のように表示されます。

(図 41)

(図 42)

最後に、投稿した記事の削除の方法について説明します。(※なお、投稿者の場合は他の人

がアップした記事を削除することはできません。)

管理画面で「投稿」→「投稿一覧」をクリック(図 43)し、タイトルにカーソルを合わせ

た時に出てくる「ゴミ箱」をクリック(図 44)すると記事を削除することができます。

(図 43)

(図 44)

Page 24: How To Use€¦ · How To Use WordPress ... Text: Welsnet Corporation - 1 - 最初に、すでに開設しているホームページを開きます。 画面上の【管理者メニュー】の中にある【ログイン】をクリックすると、下記の画面(図

How To Use WordPress ... Text: Welsnet Corporation

- 23 -

≪≪≪≪番外編番外編番外編番外編≫≫≫≫

ホームページに載せる画像のデータが重いと、容量オーバーになったり、ページを開い

た時の画像が大きすぎて逆に見にくくなったりしてしまいます。そのため、見やすくすっ

きりしたサイトをつくるためには、あらかじめ画像データの容量を軽くしてからアップロ

ードする必要があります。

「縮小専用」は、大量の画像を簡単に縮小できる便利なフリーソフトです。ま

た、画像の彩度を上げたり、モノクロにしたりすることもできる優れものです。

①最初にインターネットの検索画面で「縮小専用(しゅくしょうせんよう)」と入力し、縮

小専用のサイトを開きます。

縮小専用縮小専用縮小専用縮小専用のホームページののホームページののホームページののホームページの URLURLURLURL::::【 http://i-section.net/software/shukusen/ 】

②画面下の方にある「最新版 ver1.5 ダウンロードはこちらから(無料)。」をクリックします。

Page 25: How To Use€¦ · How To Use WordPress ... Text: Welsnet Corporation - 1 - 最初に、すでに開設しているホームページを開きます。 画面上の【管理者メニュー】の中にある【ログイン】をクリックすると、下記の画面(図

How To Use WordPress ... Text: Welsnet Corporation

- 24 -

③ オレンジ色でマークしたところにある、

「ダウンロードページへ」をクリックしま

す。

④前のステップと同様、「このソフトを今す「このソフトを今す「このソフトを今す「このソフトを今す

ぐダウンロード」ぐダウンロード」ぐダウンロード」ぐダウンロード」をクリックすると、ダウン

ロードが始まります。

⑤オレンジ○印の「ファイルを保存」のボタ

ン を ク リ ッ ク す る と 、 フ ァ イ ル

(「Shukusen150」)を保存できます。

通常は下記の場所にダウンロードされます。

マイコンピューター → ローカルディスク(C:) →

ユーザー → 「○○(自分の PC のユーザーネーム)

→ ダウンロード → 「ShukuSen150」

⑥ 「ShukuSen150」をクリックします。

ユーザーアカウント制御が表示されたら、「はい」をクリックします。

⑦ このような画面がでてくるので、「OK」

をクリックします。

⑧ ダウンロードが完了すると、デスクトッ

プに縮小専用のアイコンが現れます。

Page 26: How To Use€¦ · How To Use WordPress ... Text: Welsnet Corporation - 1 - 最初に、すでに開設しているホームページを開きます。 画面上の【管理者メニュー】の中にある【ログイン】をクリックすると、下記の画面(図

How To Use WordPress ... Text: Welsnet Corporation

- 25 -

実際に縮小専用を使ってみましょう。

① 一つのフォルダー内に、ホームページで使用したい画像をまとめておきます。

※ここでは例として、デスクトップにフォ

ルダーを作ってみましょう。

まず、デスクトップで右クリックし、「新規作成」→「フォルダー」をクリックします。 新しいフォルダーが作成されるので、そ

の中に画像を入れておきます。

②デスクトップにある「縮小専用」のアイコンをクリックし、「フォルダーを作ってその中

に保存」が選択されていることを確認してから、上記の画像すべてをドラッグ&ドロップ

します。

③上記のフォルダー内に「Resized」というフォルダーが自動的に作られ、縮小された画像

すべてがその中に収められます。なお、WordPress へアップロードする際には、「Resized」

内の画像を使ってください。