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

WordCamp Kansai 2014

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

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

1

WordCamp Kansai 2014WordCamp Kansai 2014

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


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

3

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

https://ja.wordpress.com/


1.ブログを作る

4

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

[Create Another Blog]をクリック

https://ja.wordpress.com/



5

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

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

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



6

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


2.テーマを決める

7

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

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



8

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



9

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

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

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


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

10

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

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

http://wck2014.wordpress.com/wp-admin/



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

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

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

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

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

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

11



3-2.カテゴリー

12

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

カテゴリー名を入れる

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

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

クリック



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

13

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

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

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

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

画像挿入(後述)

投稿の本文



3-3.投稿する

14

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

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

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

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



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

15

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

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

①

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



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

16

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

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



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

17

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

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

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



3-3.投稿一覧

18

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

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

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

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



3-4.固定ページ

19

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

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


![ハンズオン] !

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

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

20


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

21

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

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

http://wck2014sample.wordpress.com/


注目ポイント①

22

ヘッダーに好きな画像

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

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

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

全体の配色を変えたい！

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


注目ポイント②

23

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

いらない項目は消したい

Twitterも表示したい！

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


注目ポイント③

24

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

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


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

25


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

26


1. 外観を整える

27

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

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

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

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



ヘッダー画像の設定

28

①

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

②



ヘッダー画像の設定

29

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

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

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


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

ABOUT 普通の固定ページ

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

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

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

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

30


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

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

31

①②

③

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


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

32

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

http://xxx.wordpress.com


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

33

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



34

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

[外観]～[メニュー]



35

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

②

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

⑤

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

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

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


5. ウィジェット

36

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

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

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



37

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

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

左のサイドバー

右のサイドバー

サイトの下部



38

左のサイドバー

右のサイドバー

サイトの下部

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

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



39

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

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


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>


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

41

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

つづく


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

42

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

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


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

43


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

44

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


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

45

削除

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

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

① ②

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

③

④


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

46

1

2

3

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


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

47

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

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

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

http://ja.support.wordpress.com/videos/youtube/


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

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

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

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

http://ja.support.wordpress.com/

http://ja.forums.wordpress.com/

http://ja.support.wordpress.com/contact/

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

Internet

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