WordPressに挑戦！ WordPress（ワードプレス）は、ブログを 作成するためのWEBアプリケーションです。

Presentation on theme: "WordPressに挑戦！ WordPress（ワードプレス）は、ブログを 作成するためのWEBアプリケーションです。"— Presentation transcript:

1 WordPressに挑戦！ WordPress（ワードプレス）は、ブログを 作成するためのWEBアプリケーションです。
個人の日記から企業のホームページまで 世界中で幅広く使われています。 ※一般人のブログをサンプルとして挙げるのは妥当ではないかと思い、タレントのウェブサイトにしています 板野友美 公式ページ 株式会社松屋フーズ

2 WordPressとは（もう少し詳しく）
このようなシステムをCMS（Contents Management System）と言います。 個人や企業のブログ、ホームページの他にも、ネットショップ（ECサイト）や会員専用サイト、予約サイトを作ることができます。 ビジネスでも使える技術を覚えよう！

3 WordPress入門 日経大WordPressサイトにアクセス ログイン・ログアウト ダッシュボード（管理画面）について
ブログを書いてみよう（記事を投稿する） 記事に画像を追加しよう コンピューターから画像を追加 書いた記事を見てみよう 文字の装飾 編集モードの切り替え テキストモードのHTMLについて

4 日経大WordPressサイトにアクセス
インターネット・エクスプローラ― (IE)で に アクセスします。 右下の「ログイン」を クリックします。

5 ログイン(1) ユーザー名に学籍番号、パスワードに生年月日を入力して「ログイン」をクリックします。

6 ログイン(2) 画面下にこのメッセージが表示された場合は「このサイトではしない」をクリックします。
画面上にこのメッセージが表示された場合は「Dismiss this notice」をクリックします。

7 ログアウト 画面右上の「こんにちは、～さん！」をクリックし、次に「ログアウト」をクリックします。

8 ダッシュボードについて(1) WordPressではログイン直後の画面を 「ダッシュボード」と呼んでいます。
ダッシュボードとは、現在の状況が簡単にわかるように作られた画面のことです。 ヘッダ メイン ナビゲーション （メニュー） 作業領域

9 ダッシュボードについて(2) ヘッダには以下の項目があります。 WordPress公式サイト関連へのリンク ブログ名（ブログへのリンク）
新着コメント情報 記事投稿クイックリンク ユーザー名 表示オプション ヘルプ ① ② ③ ④ ⑤ ⑥ ⑦ ① Wのアイコンをクリックすると、バージョン表示、公式サイト、ヘルプドキュメント、サポートフォーラムへのリンクが表示されます。 ③ コメントが付くと数字が増えます。コメントが付いている状態でクリックすると、そのコメントを見ることができます。 ④ ＋のアイコンをクリックすると、記事の投稿かファイルのアップロードをするリンクが表示されます。 ⑤ ユーザ名をクリックすると、プロフィール編集とログアウトのリンクが表示されます。 ⑥ 作業領域に表示する項目を選択できます。 ⑦ 使い方に関するドキュメントを表示します。

10 ダッシュボードについて(3) メインナビゲーションには以下の項目があります。 それぞれクリックしてみて 何が表示されるか試して みましょう。
投稿 メディア コメント プロフィール ツール それぞれクリックしてみて 何が表示されるか試して みましょう。 ① ② ③ ④ ⑤ ⑥ 一番下のアイコンをクリック すると、メニュが―開いたり 閉じたりします。

11 ダッシュボードについて(4) 作業領域 記事の投稿や編集など、メインナビゲーションの 各作業を行うスペースです。
ヘッダの「表示オプション」で何を表示するかを 決めることができます。

12 ブログを書いてみよう(1) メインナビゲーションの「投稿」をクリックし、「新規追加」をクリックします。
作業領域が「新規投稿を追加」に変わります。

13 ブログを書いてみよう(2) 小さな枠の中をクリック してタイトルを入力します。 大きな枠の中をクリック して文章を入力します。
カテゴリー一覧から、 自分の授業を選んで チェックします。 「プレビュー」ボタンを クリックします。 別のタブでブログの画面が 表示されます。 ① ④ ② ③

14 ブログを書いてみよう(3) 「下書きとして保存」ボタンをクリックすると、自分だけが見られる状態で保存されます。
「公開」ボタンを クリックすると 世界中からこの記事を 読むことができるよう になります。 ⑤ ⑥

15 記事に画像を追加しよう(1) 公開した記事を編集します。記事を編集するには、 プレビューの「Edit Post」ボタンをクリックするか
メインナビゲーションの「投稿」⇒「投稿一覧」と クリックし、編集したい記事のタイトルをクリック します。

16 記事に画像を追加しよう(2) 画像は、記事編集画面 の作業領域の下の方に ある「メディアを追加」 を使って追加します。 コンピューターから
　の作業領域の下の方に 　ある「メディアを追加」 　を使って追加します。 コンピューターから 自分のコンピューターから画像ファイルをアップロードして 追加します。 メディアライブラリ 既にアップロードされている画像から選んで追加します。 URLから 指定したURLの画像を追加します。

17 コンピューターから画像を追加(1) メディアを挿入 の「コンピューターから」タブの「ファイルを追加」ボタンをクリックします。
追加したい画像ファイルを選択して「開く」 ボタンをクリックします。

18 コンピューターから画像を追加(2) ファイルがアップロードできたら画面下の「投稿に挿入」ボタンをクリックします。
「更新」ボタンをクリック して保存します。

19 書いた記事を見てみよう 自分が書いた記事を見るには、メインナビゲーションの「投稿」⇒「投稿一覧」とクリックし、編集したい記事のタイトルの下に表示される「表示」をクリックします。

20 文字の装飾(機能紹介)(1) Wordと同じように文字を選択してメニューをクリックすることで、 太字やテキスト色などを変えることができます。
① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ 「ツーバーの切り替え」 でメニューが変わる ⑩ ⑪ ⑫ ⑬ Wordと同じように文字を選択してメニューをクリックすることで、 太字やテキスト色などを変えることができます。

21 文字の装飾(機能紹介)(2) ⑭ ⑭をクリックすると、指定した行を見出し１～６などに変更することができます。

22 文字の装飾(準備)(1) 文字の装飾をする記事を作ります。 メインナビゲーションの「投稿」をクリックし、「新規追加」をクリックします。

23 文字の装飾(準備)(2) 小さな枠の中をクリック して「文字の装飾」と 入力します。
大きな枠の中をクリック して、サンプル文章の テキストをコピーして 貼り付けます。 ① ②

24 文字を太くする 太くしたい文字（①太字）を選択します。 [B](Bold:太字)ボタンをクリックします。

25 文字を斜体にする 斜体にしたい文字（② イタリック（斜体））を 選択します。 [I](Italic:イタリック体)ボタンをクリックします。

26 引用する 他の人の発言を引用するときに使います。 斜体にしたい文字（③ 引用）を選択します。 [“]ボタンをクリックします。

27 番号なしリストを作る(1) リストにしたい行（④ 番号なしリスト～その3）を選択します。 [ ]ボタンをクリックします。

28 番号なしリストを作る(2) [ ]ボタンの隣の▲をクリックすると、リストの行頭文字を変更できます。

29 番号ありリストを作る(1) リストにしたい行（⑤ 番号ありリスト～その3）を選択します。 [ ]ボタンをクリックします。

30 番号ありリストを作る(2) [ ]ボタンの隣の▲をクリックすると、リストの番号を変更できます。

31 左寄せ・中央揃え・右寄せ 左寄せ・中央揃え・右寄せしたい行を選択します。
[ ]ボタン・ [ ]ボタン・ [ ]ボタンをそれぞれクリックします。

32 表を挿入する 表を挿入したい場所にカーソルを移動します。
[ ]ボタン、[テーブルを挿入]の順にクリックし、マウスをドラッグして行と列の数を指定します。

33 打消し線を付ける 打消し線を付けたい文字(⑩ 打ち消し)を 選択します。 [ ]ボタンをクリックします。

34 特殊文字を挿入する ©などの特殊文字を挿入したい場所にカーソルを移動します。 [Ω]ボタンをクリックし、挿入したい文字を クリックします。

35 フェイスマークを挿入する WordPressではブログの本文中にフェイスマーク(顔のアイコン)を挿入できます。
[ ]ボタンをクリックし、挿入したいフェイスマークをクリックします。 編集画面では対応する文字が挿入されますが、ブログを表示するとフェイスマークを見ることができます。

36 文字の色を変更する 色を変更したい文字(⑬ テキスト色)を選択します。 [Ａ]ボタン、変えたい色の順にクリックします。
選択を解除すると色が変わっていることが分かります。

37 見出しを設定する 見出しにしたい行(見出し１は…)を選択します。 [段落]プルダウンをクリックし選択します。
見出し６まで設定してみましょう。

38 編集モードの切り替え 「テキスト」タブをクリックすると編集モードが切り替わります。「ビジュアル」タブを クリックすると戻ります。
ビジュアルモードはWordのように編集できます。 テキストモードはHTMLタグを直接入力できます。 ビジュアルモード テキストモード

39 テキストモードのHTMLについて テキストモードのHTMLでは<html> <body>タグは表示されません。
これはWordPressが自動的に追加するためです。 設定した装飾がHTMLでどう表されているか 確認しましょう。