WCK2014[ハンズオン] 体験して学ぶはじめてのブログ・サイト制作〜WordPress.comでサイトを作ってみよう〜

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/)
にアクセスして[登録開始]をクリック

4
WordPress.com(https://ja.wordpress.com/)
にアクセスしてログイン
[Create Another Blog]をクリック

5
1.ブログのアドレスとタイトルを入力
2.ページ下部の[ブログを作成]
をクリック
a-z の半角英数字の小文字と数字のみ
が使えます。(ハイフン等はNG)

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

7
ブログのさまざまな設定
やブログの投稿はこの
[ダッシュボード]または
[管理画面]と呼ばれる画
面から行います。
[テーマ]とは
ブログの見た目などを決
めるテンプレートのこと
です。
さまざまなデザインが用
意されています。

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

9
サイト名をクリックすると表の画面(他人から
見た画面)を確認できます。
サイト名の上にマウスを乗せて[ダッシュボー
ド]をクリックすると管理画面に入れます。
【管理画面】【表の画面】

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

31.投稿と固定ページ
・管理画面にある「投稿」と「固定ページ」
この2つがサイトのページを作る時に使うメニューです。
!
・「投稿」と「固定ページ」の違い
投稿：ブログのように日付順に並べたい記事を書く時に使います。
カテゴリー分けやタグ付けすることができます。(カテゴリーについては後述)
固定ページ：「投稿」は新しい記事を書くと古い記事は後ろに行ってしまいます
が、固定ページは常にサイト内の決まった場所に表示することができます。
例えば「ABOUT ME」というページは固定ページで作った方がよさそうですね。
11

32.カテゴリー
12
・投稿はカテゴリー分け
することができます。
・カテゴリーごとに投稿
を表示することもできま
す。
・カテゴリーは親子関係
を持つことができます。
音楽
└ジャズ
├ピアノ
├ボーカル
└ビッグバンド
└クラシック
└J-POP
・・・というように。
カテゴリー名
を入れる
親を選ぶ。
(「音楽」の下に入
れたいので「音楽」
を選ぶ。)
一番上のカテゴリー
を作る時は「なし」
のまま
カテゴリーを削除したい場合：
カテゴリー名の上にマウスを乗せ
ると「削除」という文字が出るの
でクリックします。
クリック

33.投稿する(つづく)
13
タイトル外部の人からは見えません。
管理画面からのみ見られます。
表画面からどう見えるか試しに
見てみることができます。
外部の人からは見えません。
一覧表示の時にはこのマークよ
り上までしか表示されず、「続
きを読む」というリンクが配置
されます。
(後で確かめてみましょう)
公開すると外部の人からも見え
るようになります。
画像挿入(後述)
投稿の本文

33.投稿する
14
ここからカテゴリーを追加する
こともできます。
一覧表示した時に表示される画
像です。(投稿の本文には表示
されません。)
画像の追加の仕方は投稿本文と
同じです。
タグはカテゴリーとよく似てい
ますが親子関係を持つことがで
きません。

33.投稿する - 画像の挿入(つづく)
15
投稿の本文の上にある[メディアを追加]というボタンをクリックします。
① [ファイルをアップロード]タブ
をクリックします。
①
②
② [ファイルを選択]ボタンをク
リックし、画像ファイルを選択し
ます。
(つづく)

33.投稿する - 画像の挿入(つづく)
16
① 画面が切り替わり、今選んだ
ファイルにチェックマークが入っ
ています。
② 設定項目のうち、画
像の表示に関係あるの
はこの部分です。
次のページで確認して
みましょう。

33.投稿する - 画像の挿入
17
添付ファイルの表示設定
 
【配置】画像を表示する位置を決定します。
「左」「中央」「右」「なし」が選べます。 
「なし」を選ぶと基本的に左寄せになります。
!
【リンク先】画像にリンクを張るかどうかが選べます。
[メディアファイル] --- 画像だけが元のサイズで表示されます。
[添付ファイルのページ] --- 画像が貼られた状態のWordPress
が作ったページにリンクされます。(元のサイズではない)
[カスタムURL] --- 好きなページにリンクできます。
[なし] --- リンクを張りません。
!
【サイズ】画像の表示する大きさを選べます。
「サムネイル」「中」「大」「フルサイズ」が選べます。
設定を確認したらクリック。
投稿の画面に戻ります。

33.投稿一覧
18
「公開」や「下書き保存」した投稿は[投稿一覧]に入ります。
タイトルをクリックすると投稿画面が
開いて、編集できます。
日付やカテゴリーで
絞り込めます。
タイトルと本文から投稿
を検索することができま
す。

34.固定ページ
19
固定ページの編
集の仕方も基本
的に「投稿」と
同じです。
ページ属性は今日
は使いません。

!
[ハンズオン] !
体験して学ぶはじめてのブログ・サイト制作
例えばこんなサイトを作ることができます。 
一緒に挑戦してみましょう。
20

サンプルサイト
http://wck2014sample.wordpress.com/
21
みなさんと同じ
テーマ「Twenty
Fourteen」を使っ
て無料で作ってい
ます。
写真などの素材は
お送りしたメール
のURLよりダウン
ロードできます。

注目ポイント①
22
ヘッダーに好きな
画像
サイトの最初のペー
ジにブログではな
く[TOP]ページを表
示。
サイト名とキャッチ
フレーズ↓
ブログのページに
はメニューバーから
ジャンプしたい！
全体の配色を変え
たい！
メニューは自分の
好きな順番に並べ
たい

注目ポイント②
23
固定ページには
[コメント欄]を表
示したくない
いらない項目は消し
たい
Twitterも表示した
い！
カテゴリーは親子関
係がわかるように表
示したい

注目ポイント③
24
こんなお問い合わせ
フォーム、作るの難し
い！？
ブログにSNSのボタンを
つけたり投稿と同時に
SNSに共有したりしたい

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

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

27
画面左上のサイト名
の上にマウスを持っ
ていくといろいろな
メニューが現れます。
[カスタマイズ]をク
リックしてください。
画面の右に青い
バーが現れます。
ここからいろい
ろな設定ができ
ます。
!
まず
・色
・ヘッダー
・サイト名
を変更してみま
しょう。
(ヘッダーの変更
の仕方は次のペー
ジ)
変更を加えたら[保存]
[閉じる]をクリックすると元の画面
(上に黒いバーがある画面)に戻ります。

ヘッダー画像の設定
28
①
③ファイルがアップできたら
[選択して切り抜く] つづく
②

ヘッダー画像の設定
29
切り抜く場
所を移動で
きます。
切り抜く範囲
を拡大縮小で
きます。
画像の明るい部
分が切り抜かれ
る場所です。

TOP サイトの一番最初に表示させる固定ページ
ABOUT 普通の固定ページ
CONTACT お問い合わせフォーム用のページ
(ひとまずタイトルだけのページでOKです。詳しくは後述)
BLOG ブログを表示するためのページ
(タイトルだけのページでOKです。)
30

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

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

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

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

35
①メニューに表示
したいページを
チェック
②
③ ②[メニューに追加]したものが
ここに表示されます。
各ページをドラッグ＆ドロップす
ると順番が入れ替わります。
⑤
投稿のカテゴリーも
メニューに追加できます。
右にドラッグすると一個上のページの
下層にメニューが表示されます。
④メニューを
表示させる位
置を指定

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/
フォーラム: http://ja.forums.wordpress.com
お問い合わせ: http://ja.support.wordpress.com/contact/
サポートで調べてみたり、フォーラムで聞いてみる
ことができます('∀`)

WCK2014[ハンズオン] 体験して学ぶ はじめてのブログ・サイト制作 〜WordPress.comでサイトを作ってみよう〜

More Related Content

What's hot