WordCamp Kansai 2014

[ハンズオン] !体験して学ぶ はじめてのブログ・サイト制作

～【基本編】ブログを作って投稿するまで～

1

WordCamp Kansai 2014WordCamp Kansai 2014

目次1.ブログを作る 2.テーマを決める 3.管理画面を使ってみる 3-1.投稿と固定ページ 3-2.カテゴリー 3-3.投稿する 3-4.固定ページ2

WordCamp Kansai 2014WordCamp Kansai 2014

1.ブログを作る (アカウントがない方)

3

WordPress.com(https://ja.wordpress.com/) にアクセスして[登録開始]をクリック

WordCamp Kansai 2014WordCamp Kansai 2014

1.ブログを作る

4

WordPress.com(https://ja.wordpress.com/) にアクセスしてログイン

[Create Another Blog]をクリック

WordCamp Kansai 2014WordCamp Kansai 2014

1.ブログを作る

5

1.ブログのアドレスとタイトルを入力

2.ページ下部の[ブログを作成]　をクリック

a-z の半角英数字の小文字と数字のみが使えます。(ハイフン等はNG)

WordCamp Kansai 2014WordCamp Kansai 2014

1.ブログを作る

6

ブログが作られました。 さまざまな設定やブログの投稿は次の[ダッシュボード]から行います。

WordCamp Kansai 2014WordCamp Kansai 2014

2.テーマを決める

7

ブログのさまざまな設定やブログの投稿はこの[ダッシュボード]または[管理画面]と呼ばれる画面から行います。

[テーマ]とは ブログの見た目などを決めるテンプレートのことです。 さまざまなデザインが用意されています。

WordCamp Kansai 2014WordCamp Kansai 2014

2.テーマを決める

8

気になるテーマをクリックすると詳細を確認できます。 ![有効化]をクリックするとそのテーマが適用されます。 !テーマは後から何度でも変更できます。 ＊今日はTwenty Fourteenを使ってみましょう。

WordCamp Kansai 2014WordCamp Kansai 2014

2.テーマを決める

9

サイト名をクリックすると表の画面(他人から見た画面)を確認できます。

サイト名の上にマウスを乗せて[ダッシュボード]をクリックすると管理画面に入れます。

【管理画面】 【表の画面】

WordCamp Kansai 2014WordCamp Kansai 2014

3.管理画面を使ってみる

10

[ブログのアドレス/wp-admin](このブログの場合：http://wck2014.wordpress.com/wp-admin/)にアクセスすると管理画面が開きます。 (ログインしていない場合はログイン画面が開きます。) !この画面からブログを投稿したり、さまざまな設定を行ったりします。

自分の名前をクリックして[サインアウト]をクリックするとログアウトすることができます。

WordCamp Kansai 2014WordCamp Kansai 2014

3.管理画面を使ってみる

3-1.投稿と固定ページ・管理画面にある「投稿」と「固定ページ」 ⇒この2つがサイトのページを作る時に使うメニューです。

!・「投稿」と「固定ページ」の違い 投稿：ブログのように日付順に並べたい記事を書く時に使います。

カテゴリー分けやタグ付けすることができます。(カテゴリーについては後述)

固定ページ：「投稿」は新しい記事を書くと古い記事は後ろに行ってしまいます

が、固定ページは常にサイト内の決まった場所に表示することができます。

例えば「ABOUT ME」というページは固定ページで作った方がよさそうですね。

11

WordCamp Kansai 2014WordCamp Kansai 2014

3.管理画面を使ってみる

3-2.カテゴリー

12

・投稿はカテゴリー分けすることができます。 ・カテゴリーごとに投稿を表示することもできます。 ・カテゴリーは親子関係を持つことができます。 音楽 └ジャズ 　　├ピアノ 　　├ボーカル 　　└ビッグバンド └クラシック └J-POP ・・・というように。

カテゴリー名を入れる

親を選ぶ。 (「音楽」の下に入れたいので「音楽」を選ぶ。) 一番上のカテゴリーを作る時は「なし」のまま

カテゴリーを削除したい場合： カテゴリー名の上にマウスを乗せると「削除」という文字が出るのでクリックします。

クリック

WordCamp Kansai 2014WordCamp Kansai 2014

3.管理画面を使ってみる

3-3.投稿する(つづく)

13

タイトル 外部の人からは見えません。 管理画面からのみ見られます。

表画面からどう見えるか試しに見てみることができます。 外部の人からは見えません。

一覧表示の時にはこのマークより上までしか表示されず、「続きを読む」というリンクが配置されます。 (後で確かめてみましょう)

公開すると外部の人からも見えるようになります。

画像挿入(後述)

投稿の本文

WordCamp Kansai 2014WordCamp Kansai 2014

3.管理画面を使ってみる

3-3.投稿する

14

ここからカテゴリーを追加することもできます。

一覧表示した時に表示される画像です。(投稿の本文には表示されません。)

画像の追加の仕方は投稿本文と同じです。

タグはカテゴリーとよく似ていますが親子関係を持つことができません。

WordCamp Kansai 2014WordCamp Kansai 2014

3.管理画面を使ってみる

3-3.投稿する - 画像の挿入(つづく)

15

投稿の本文の上にある[メディアを追加]というボタンをクリックします。

① [ファイルをアップロード]タブをクリックします。

①

②② [ファイルを選択]ボタンをクリックし、画像ファイルを選択します。 (つづく)

WordCamp Kansai 2014WordCamp Kansai 2014

3.管理画面を使ってみる

3-3.投稿する - 画像の挿入(つづく)

16

① 画面が切り替わり、今選んだファイルにチェックマークが入っています。

② 設定項目のうち、画像の表示に関係あるのはこの部分です。 次のページで確認してみましょう。

WordCamp Kansai 2014WordCamp Kansai 2014

3.管理画面を使ってみる

3-3.投稿する - 画像の挿入

17

添付ファイルの表示設定 【配置】 画像を表示する位置を決定します。 「左」「中央」「右」「なし」が選べます。 「なし」を選ぶと基本的に左寄せになります。 !【リンク先】画像にリンクを張るかどうかが選べます。 [メディアファイル] --- 画像だけが元のサイズで表示されます。 [添付ファイルのページ] --- 画像が貼られた状態のWordPress

　が作ったページにリンクされます。(元のサイズではない) [カスタムURL] --- 好きなページにリンクできます。 [なし] --- リンクを張りません。 !【サイズ】 画像の表示する大きさを選べます。 「サムネイル」「中」「大」「フルサイズ」が選べます。

設定を確認したらクリック。 投稿の画面に戻ります。

WordCamp Kansai 2014WordCamp Kansai 2014

3.管理画面を使ってみる

3-3.投稿一覧

18

「公開」や「下書き保存」した投稿は[投稿一覧]に入ります。

タイトルをクリックすると投稿画面が開いて、編集できます。

日付やカテゴリーで 絞り込めます。

タイトルと本文から投稿を検索することができます。

WordCamp Kansai 2014WordCamp Kansai 2014

3.管理画面を使ってみる

3-4.固定ページ

19

固定ページの編集の仕方も基本的に「投稿」と同じです。

ページ属性は今日は使いません。

WordCamp Kansai 2014

![ハンズオン] !

体験して学ぶ はじめてのブログ・サイト制作例えばこんなサイトを作ることができます。

一緒に挑戦してみましょう。

20

WordCamp Kansai 2014

サンプルサイト http://wck2014sample.wordpress.com/

21

みなさんと同じテーマ「Twenty Fourteen」を使って無料で作っています。

写真などの素材は お送りしたメールのURLよりダウンロードできます。

WordCamp Kansai 2014

注目ポイント①

22

ヘッダーに好きな画像

サイトの最初のページにブログではなく[TOP]ページを表示。

サイト名とキャッチフレーズ↓

ブログのページにはメニューバーからジャンプしたい！

全体の配色を変えたい！

メニューは自分の好きな順番に並べたい

WordCamp Kansai 2014

注目ポイント②

23

固定ページには[コメント欄]を表示したくない

いらない項目は消したい

Twitterも表示したい！

カテゴリーは親子関係がわかるように表示したい

WordCamp Kansai 2014

注目ポイント③

24

こんなお問い合わせフォーム、作るの難しい！？

ブログにSNSのボタンをつけたり投稿と同時にSNSに共有したりしたい

WordCamp Kansai 2014WordCamp Kansai 2014

目次1. 外観を整える 全体の色を変更する ヘッダー画像を設定する サイト名とキャッチフレーズを設定する 2. 必要な固定ページを作る コメント欄を非表示にするには 3. フロントページと投稿ページの設定 4. メニューを自分の思い通りの順番に並べる 5. ウィジェット

25

WordCamp Kansai 2014WordCamp Kansai 2014

目次6. SNS共有 7. お問い合わせフォーム 8. その他

26

WordCamp Kansai 2014WordCamp Kansai 2014

1. 外観を整える

27

画面左上のサイト名の上にマウスを持っていくといろいろな メニューが現れます。 [カスタマイズ]をクリックしてください。

画面の右に青いバーが現れます。

ここからいろいろな設定ができます。 !まず ・色 ・ヘッダー ・サイト名 を変更してみましょう。 (ヘッダーの変更の仕方は次のページ)

変更を加えたら[保存][閉じる]をクリックすると元の画面 (上に黒いバーがある画面)に戻ります。

WordCamp Kansai 2014WordCamp Kansai 2014

1. 外観を整える

ヘッダー画像の設定

28

①

③ファイルがアップできたら[選択して切り抜く] ⇒つづく

②

WordCamp Kansai 2014WordCamp Kansai 2014

1. 外観を整える

ヘッダー画像の設定

29

切り抜く場所を移動できます。

切り抜く範囲を拡大縮小できます。画像の明るい部

分が切り抜かれる場所です。

WordCamp Kansai 2014WordCamp Kansai 2014

2. 必要な固定ページを作るTOP サイトの一番最初に表示させる固定ページ

ABOUT 普通の固定ページ

CONTACT お問い合わせフォーム用のページ

(ひとまずタイトルだけのページでOKです。詳しくは後述)

BLOG ブログを表示するためのページ

(タイトルだけのページでOKです。)

30

WordCamp Kansai 2014

2. 必要な固定ページを作る

コメント欄を非表示にするには

31

①②

③

投稿の場合も同じ手順でコメント欄を非表示にできます。 !コメントに関するもっと詳細な設定は管理画面の右の[設定]～[ディスカッション]へ。

WordCamp Kansai 2014

3. フロントページと投稿ページの設定

32

フロントページとは サイトのURL(http://xxx.wordpress.com)にアクセスした時に最初に表示されるページのことです。 自分が作った固定ページにすることもブログの投稿一覧にすることも可能です。 !投稿ページとは フロントページを自分で作った固定ページに設定した時に、ブログの投稿一覧を表示するページのことです。 !!ここでは先ほど作ったページを使って、フロントページを「TOP」、投稿ページを「BLOG」に設定しました。

WordCamp Kansai 2014

4. メニューを自分の思い通りの順番に並べる

33

メニューとはこの部分のことです。 自分の思い通りの順番に並んでいますか？ 並んでいなければ次のページへ。

WordCamp Kansai 2014

4. メニューを自分の思い通りの順番に並べる

34

[メニューの名前]は表の画面には表示されないので自分でわかる名前なら何でもいいです。 ⇒[メニューを作成]をクリック(つづく)

[外観]～[メニュー]

WordCamp Kansai 2014

4. メニューを自分の思い通りの順番に並べる

35

①メニューに表示したいページをチェック

②

③ ②[メニューに追加]したものがここに表示されます。 各ページをドラッグ＆ドロップすると順番が入れ替わります。

⑤

投稿のカテゴリーも メニューに追加できます。

右にドラッグすると一個上のページの下層にメニューが表示されます。

④メニューを 表示させる位置を指定

WordCamp Kansai 2014

5. ウィジェット

36

←これがサンプルサイトの左サイドバーです。!最初の状態より ・項目数が少ない ・並び順が違う ・カテゴリーの親子関係がわかりやすくなっている という違いがあります。

これがサンプルサイトの右サイドバーです。→ !・Twitterが表示 されています！

両方とも、「ウィジェット」で実現できます！ウィジェットとは「便利な部品」くらいに捉えてください。

WordCamp Kansai 2014

5. ウィジェット

37

利用できる部品一覧が左の列に並んでいます。

このテーマには部品を配置できるエリアが3つあります。 (今回はフッターには何も設定していません)

左のサイドバー

右のサイドバー

サイトの下部

WordCamp Kansai 2014

5. ウィジェット

38

左のサイドバー

右のサイドバー

サイトの下部

使いたいウィジェットは右の配置したいエリアにドラッグ＆ドロップします。

不要なウィジェットは右から左にドラッグ＆ドロップします。

WordCamp Kansai 2014

5. ウィジェット

39

ウィジェットの詳細設定は右の▼をクリックして行います。

カテゴリーの親子関係を表示

WordCamp Kansai 2014

5. ウィジェットーTwitter

40

<a class="twitter-timeline" href="https://twitter.com/search?q=%23flower" data-widget-id="123456789012345678">#flower に関するツイート</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

WordCamp Kansai 2014

6. SNS共有 ～SNSへの自動投稿～

41

[設定]～[共有] WordPressに投稿したら、自動的にSNSに投稿されます。 !※この例ではFacebookとTwitterに連携します。

つづく

WordCamp Kansai 2014

6. SNS共有 ～SNSへの自動投稿～

42

[パブリサイズ共有]～[編集]

共有したいSNSにだけチェックを 入れる。

WordCamp Kansai 2014

6. SNS共有 ～投稿した記事のSNS共有～

43

WordCamp Kansai 2014

7. お問い合わせフォーム①

44

投稿や固定ページに簡単にお問い合わせフォームを追加できます。

WordCamp Kansai 2014

7. お問い合わせフォーム②

45

削除

マウスを乗せて ドラッグ＆ドロップで 順番を変えられます。

新しい項目を追加できます。

① ②

お問い合わせがあった時のメール通知の設定

③

④

WordCamp Kansai 2014WordCamp Kansai 2014

8. その他の豆【投稿】 1. 一度公開した投稿を下書き状態 に戻したい。 !2. 特定の投稿をいつも先頭に表示 したい。 !3. 予約投稿したい。(明日の10:00 に公開したい…など)

46

1

2

3

投稿画面右上の[公開]の中の「編集」 をクリックすると設定できます。

WordCamp Kansai 2014WordCamp Kansai 2014

8. その他の豆投稿や固定ページにYoutubeの動画を貼りたい。

47

Youtubeのアドレスをコピー＆ペーストすると自動で [embed] [/embed] という文字が入ります。

サイト上で動画を 再生できます。

詳細は http://ja.support.wordpress.com/videos/youtube/ 参照

WordCamp Kansai 201448

もしも使い方などで困ったら？ドキュメンテーション: http://ja.support.wordpress.com/

フォーラム: http://ja.forums.wordpress.com

お問い合わせ: http://ja.support.wordpress.com/contact/

サポートで調べてみたり、フォーラムで聞いてみることができます('∀`)