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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

4,056
views

Published on

WordPress.comを初めて使う方向けの操作マニュアル等

WordPress.comを初めて使う方向けの操作マニュアル等

Published in: Internet

0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,056
On Slideshare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
29
Comments
0
Likes
10
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. WordCamp Kansai 2014 [ハンズオン] ! 体験して学ぶ はじめてのブログ・サイト制作 ∼【基本編】ブログを作って投稿するまで∼ 1
  • 2. WordCamp Kansai 2014WordCamp Kansai 2014 目次 1.ブログを作る 2.テーマを決める 3.管理画面を使ってみる 3-1.投稿と固定ページ 3-2.カテゴリー 3-3.投稿する 3-4.固定ページ 2
  • 3. WordCamp Kansai 2014WordCamp Kansai 2014 1.ブログを作る (アカウントがない方) 3 WordPress.com(https://ja.wordpress.com/) にアクセスして[登録開始]をクリック
  • 4. WordCamp Kansai 2014WordCamp Kansai 2014 1.ブログを作る 4 WordPress.com(https://ja.wordpress.com/) にアクセスしてログイン [Create Another Blog]をクリック
  • 5. WordCamp Kansai 2014WordCamp Kansai 2014 1.ブログを作る 5 1.ブログのアドレスとタイトルを入力 2.ページ下部の[ブログを作成]  をクリック a-z の半角英数字の小文字と数字のみ が使えます。(ハイフン等はNG)
  • 6. WordCamp Kansai 2014WordCamp Kansai 2014 1.ブログを作る 6 ブログが作られました。 さまざまな設定やブログの投稿 は次の[ダッシュボード]から行 います。
  • 7. WordCamp Kansai 2014WordCamp Kansai 2014 2.テーマを決める 7 ブログのさまざまな設定 やブログの投稿はこの [ダッシュボード]または [管理画面]と呼ばれる画 面から行います。 [テーマ]とは ブログの見た目などを決 めるテンプレートのこと です。 さまざまなデザインが用 意されています。
  • 8. WordCamp Kansai 2014WordCamp Kansai 2014 2.テーマを決める 8 気になるテーマをク リックすると詳細を 確認できます。 ! [有効化]をクリック するとそのテーマが 適用されます。 ! テーマは後から何度 でも変更できます。 *今日はTwenty Fourteenを使って みましょう。
  • 9. WordCamp Kansai 2014WordCamp Kansai 2014 2.テーマを決める 9 サイト名をクリックすると表の画面(他人から 見た画面)を確認できます。 サイト名の上にマウスを乗せて[ダッシュボー ド]をクリックすると管理画面に入れます。 【管理画面】 【表の画面】
  • 10. WordCamp Kansai 2014WordCamp Kansai 2014 3.管理画面を使ってみる 10 [ブログのアドレス/wp-admin](このブログの場合:http:// wck2014.wordpress.com/wp-admin/)にアクセスすると 管理画面が開きます。 (ログインしていない場合はログイン画面が開きます。) ! この画面からブログを投稿したり、さまざまな設定を行っ たりします。 自分の名前をクリック して[サインアウト]をク リックするとログアウ トすることができます。
  • 11. WordCamp Kansai 2014WordCamp Kansai 2014 3.管理画面を使ってみる 3­1.投稿と固定ページ ・管理画面にある「投稿」と「固定ページ」 この2つがサイトのページを作る時に使うメニューです。 ! ・「投稿」と「固定ページ」の違い 投稿:ブログのように日付順に並べたい記事を書く時に使います。 カテゴリー分けやタグ付けすることができます。(カテゴリーについては後述) 固定ページ:「投稿」は新しい記事を書くと古い記事は後ろに行ってしまいます が、固定ページは常にサイト内の決まった場所に表示することができます。 例えば「ABOUT ME」というページは固定ページで作った方がよさそうですね。 11
  • 12. WordCamp Kansai 2014WordCamp Kansai 2014 3.管理画面を使ってみる 3­2.カテゴリー 12 ・投稿はカテゴリー分け することができます。 ・カテゴリーごとに投稿 を表示することもできま す。 ・カテゴリーは親子関係 を持つことができます。 音楽 └ジャズ   ├ピアノ   ├ボーカル   └ビッグバンド └クラシック └J-POP ・・・というように。 カテゴリー名 を入れる 親を選ぶ。 (「音楽」の下に入 れたいので「音楽」 を選ぶ。) 一番上のカテゴリー を作る時は「なし」 のまま カテゴリーを削除したい場合: カテゴリー名の上にマウスを乗せ ると「削除」という文字が出るの でクリックします。 クリック
  • 13. WordCamp Kansai 2014WordCamp Kansai 2014 3.管理画面を使ってみる 3­3.投稿する(つづく) 13 タイトル 外部の人からは見えません。 管理画面からのみ見られます。 表画面からどう見えるか試しに 見てみることができます。 外部の人からは見えません。 一覧表示の時にはこのマークよ り上までしか表示されず、「続 きを読む」というリンクが配置 されます。 (後で確かめてみましょう) 公開すると外部の人からも見え るようになります。 画像挿入(後述) 投稿の本文
  • 14. WordCamp Kansai 2014WordCamp Kansai 2014 3.管理画面を使ってみる 3­3.投稿する 14 ここからカテゴリーを追加する こともできます。 一覧表示した時に表示される画 像です。(投稿の本文には表示 されません。) 画像の追加の仕方は投稿本文と 同じです。 タグはカテゴリーとよく似てい ますが親子関係を持つことがで きません。
  • 15. WordCamp Kansai 2014WordCamp Kansai 2014 3.管理画面を使ってみる 3­3.投稿する - 画像の挿入(つづく) 15 投稿の本文の上にある[メディアを追加]というボタンをクリックします。 ① [ファイルをアップロード]タブ をクリックします。 ① ② ② [ファイルを選択]ボタンをク リックし、画像ファイルを選択し ます。 (つづく)
  • 16. WordCamp Kansai 2014WordCamp Kansai 2014 3.管理画面を使ってみる 3­3.投稿する - 画像の挿入(つづく) 16 ① 画面が切り替わり、今選んだ ファイルにチェックマークが入っ ています。 ② 設定項目のうち、画 像の表示に関係あるの はこの部分です。 次のページで確認して みましょう。
  • 17. WordCamp Kansai 2014WordCamp Kansai 2014 3.管理画面を使ってみる 3­3.投稿する - 画像の挿入 17 添付ファイルの表示設定 
 【配置】 画像を表示する位置を決定します。 「左」「中央」「右」「なし」が選べます。
 「なし」を選ぶと基本的に左寄せになります。 ! 【リンク先】画像にリンクを張るかどうかが選べます。 [メディアファイル] --- 画像だけが元のサイズで表示されます。 [添付ファイルのページ] --- 画像が貼られた状態のWordPress  が作ったページにリンクされます。(元のサイズではない) [カスタムURL] --- 好きなページにリンクできます。 [なし] --- リンクを張りません。 ! 【サイズ】 画像の表示する大きさを選べます。 「サムネイル」「中」「大」「フルサイズ」が選べます。 設定を確認したらクリック。 投稿の画面に戻ります。
  • 18. WordCamp Kansai 2014WordCamp Kansai 2014 3.管理画面を使ってみる 3­3.投稿一覧 18 「公開」や「下書き保存」した投稿は[投稿一覧]に入ります。 タイトルをクリックすると投稿画面が 開いて、編集できます。 日付やカテゴリーで 絞り込めます。 タイトルと本文から投稿 を検索することができま す。
  • 19. WordCamp Kansai 2014WordCamp Kansai 2014 3.管理画面を使ってみる 3­4.固定ページ 19 固定ページの編 集の仕方も基本 的に「投稿」と 同じです。 ページ属性は今日 は使いません。
  • 20. WordCamp Kansai 2014 ! [ハンズオン] ! 体験して学ぶ はじめてのブログ・サイト制作 例えばこんなサイトを作ることができます。
 一緒に挑戦してみましょう。 20
  • 21. WordCamp Kansai 2014 サンプルサイト http://wck2014sample.wordpress.com/ 21 みなさんと同じ テーマ「Twenty Fourteen」を使っ て無料で作ってい ます。 写真などの素材は お送りしたメール のURLよりダウン ロードできます。
  • 22. WordCamp Kansai 2014 注目ポイント① 22 ヘッダーに好きな 画像 サイトの最初のペー ジにブログではな く[TOP]ページを表 示。 サイト名とキャッチ フレーズ↓ ブログのページに はメニューバーから ジャンプしたい! 全体の配色を変え たい! メニューは自分の 好きな順番に並べ たい
  • 23. WordCamp Kansai 2014 注目ポイント② 23 固定ページには [コメント欄]を表 示したくない いらない項目は消し たい Twitterも表示した い! カテゴリーは親子関 係がわかるように表 示したい
  • 24. WordCamp Kansai 2014 注目ポイント③ 24 こんなお問い合わせ フォーム、作るの難し い!? ブログにSNSのボタンを つけたり投稿と同時に SNSに共有したりしたい
  • 25. WordCamp Kansai 2014WordCamp Kansai 2014 目次 1. 外観を整える 全体の色を変更する ヘッダー画像を設定する サイト名とキャッチフレーズを設定する 2. 必要な固定ページを作る コメント欄を非表示にするには 3. フロントページと投稿ページの設定 4. メニューを自分の思い通りの順番に並べる 5. ウィジェット 25
  • 26. WordCamp Kansai 2014WordCamp Kansai 2014 目次 6. SNS共有 7. お問い合わせフォーム 8. その他 26
  • 27. WordCamp Kansai 2014WordCamp Kansai 2014 1. 外観を整える 27 画面左上のサイト名 の上にマウスを持っ ていくといろいろな メニューが現れます。 [カスタマイズ]をク リックしてください。 画面の右に青い バーが現れます。 ここからいろい ろな設定ができ ます。 ! まず ・色 ・ヘッダー ・サイト名 を変更してみま しょう。 (ヘッダーの変更 の仕方は次のペー ジ) 変更を加えたら[保存] [閉じる]をクリックすると元の画面 (上に黒いバーがある画面)に戻ります。
  • 28. WordCamp Kansai 2014WordCamp Kansai 2014 1. 外観を整える ヘッダー画像の設定 28 ① ③ファイルがアップできたら [選択して切り抜く] つづく ②
  • 29. WordCamp Kansai 2014WordCamp Kansai 2014 1. 外観を整える ヘッダー画像の設定 29 切り抜く場 所を移動で きます。 切り抜く範囲 を拡大縮小で きます。 画像の明るい部 分が切り抜かれ る場所です。
  • 30. WordCamp Kansai 2014WordCamp Kansai 2014 2. 必要な固定ページを作る TOP サイトの一番最初に表示させる固定ページ ABOUT 普通の固定ページ CONTACT お問い合わせフォーム用のページ (ひとまずタイトルだけのページでOKです。詳しくは後述) BLOG ブログを表示するためのページ (タイトルだけのページでOKです。) 30
  • 31. WordCamp Kansai 2014 2. 必要な固定ページを作る コメント欄を非表示にするには 31 ① ② ③ 投稿の場合も同じ手順 でコメント欄を非表示 にできます。 ! コメントに関するもっ と詳細な設定は管理画 面の右の[設定]∼[ディ スカッション]へ。
  • 32. WordCamp Kansai 2014 3. フロントページと投稿ページの設定 32 フロントページとは サイトのURL(http://xxx.wordpress.com)にアクセスした時に最初に表示 されるページのことです。 自分が作った固定ページにすることもブログの投稿一覧にすることも可 能です。 ! 投稿ページとは フロントページを自分で作った固定ページに設定した時に、ブログの投 稿一覧を表示するページのことです。 ! ! ここでは先ほど作ったページを使って、フロントページを「TOP」、投 稿ページを「BLOG」に設定しました。
  • 33. WordCamp Kansai 2014 4. メニューを自分の思い通りの順番に並べる 33 メニューとはこの部分のことです。 自分の思い通りの順番に並んでいますか? 並んでいなければ次のページへ。
  • 34. WordCamp Kansai 2014 4. メニューを自分の思い通りの順番に並べる 34 [メニューの名前]は表の画面には表示されないので 自分でわかる名前なら何でもいいです。 [メニューを作成]をクリック(つづく) [外観]∼[メニュー]
  • 35. WordCamp Kansai 2014 4. メニューを自分の思い通りの順番に並べる 35 ①メニューに表示 したいページを チェック ② ③ ②[メニューに追加]したものが ここに表示されます。 各ページをドラッグ&ドロップす ると順番が入れ替わります。 ⑤ 投稿のカテゴリーも メニューに追加できます。 右にドラッグすると一個上のページの 下層にメニューが表示されます。 ④メニューを 表示させる位 置を指定
  • 36. WordCamp Kansai 2014 5. ウィジェット 36 ←これがサンプルサイ トの左サイドバーです。 ! 最初の状態より ・項目数が少ない ・並び順が違う ・カテゴリーの親子関 係がわかりやすくなっ ている という違いがあります。 これがサンプルサイト の右サイドバーです。 → ! ・Twitterが表示 されています! 両方とも、「ウィジェット」で実現できます! ウィジェットとは「便利な部品」くらいに捉えてください。
  • 37. WordCamp Kansai 2014 5. ウィジェット 37 利用できる部品 一覧が左の列に 並んでいます。 このテーマには 部品を配置でき るエリアが3つ あります。 (今回はフッ ターには何も設 定していませ ん) 左のサイドバー 右のサイドバー サイトの下部
  • 38. WordCamp Kansai 2014 5. ウィジェット 38 左のサイドバー 右のサイドバー サイトの下部 使いたいウィジェッ トは右の配置したい エリアにドラッグ& ドロップします。 不要なウィジェット は右から左にドラッ グ&ドロップします。
  • 39. WordCamp Kansai 2014 5. ウィジェット 39 ウィジェットの詳細設定 は右の▼をクリックして 行います。 カテゴリーの親子関係を 表示
  • 40. 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>
  • 41. WordCamp Kansai 2014 6. SNS共有 ∼SNSへの自動投稿∼ 41 [設定]∼[共有] WordPressに投稿したら、自動 的にSNSに投稿されます。 !※この例ではFacebookとTwitterに連携 します。 つづく
  • 42. WordCamp Kansai 2014 6. SNS共有 ∼SNSへの自動投稿∼ 42 [パブリサイズ共有]∼ [編集] 共有したいSNSにだけチェックを 入れる。
  • 43. WordCamp Kansai 2014 6. SNS共有 ∼投稿した記事のSNS共有∼ 43
  • 44. WordCamp Kansai 2014 7. お問い合わせフォーム① 44 投稿や固定ページに簡単にお問い合わせフォームを追加できます。
  • 45. WordCamp Kansai 2014 7. お問い合わせフォーム② 45 削除 マウスを乗せて ドラッグ&ドロップで 順番を変えられます。 新しい項目を追加 できます。 ① ② お問い合わせが あった時のメール 通知の設定 ③ ④
  • 46. WordCamp Kansai 2014WordCamp Kansai 2014 8. その他の豆 【投稿】 1. 一度公開した投稿を下書き状態 に戻したい。 ! 2. 特定の投稿をいつも先頭に表示 したい。 ! 3. 予約投稿したい。(明日の10:00 に公開したい…など) 46 1 2 3 投稿画面右上の[公開]の中の「編集」 をクリックすると設定できます。
  • 47. WordCamp Kansai 2014WordCamp Kansai 2014 8. その他の豆 投稿や固定ページにYoutubeの動画を貼りたい。 47 Youtubeのアドレスをコピー&ペース トすると自動で [embed] [/embed] と いう文字が入ります。 サイト上で動画を 再生できます。 詳細は http://ja.support.wordpress.com/videos/youtube/ 参照
  • 48. WordCamp Kansai 201448 もしも使い方などで困ったら? ドキュメンテーション: http://ja.support.wordpress.com/ フォーラム: http://ja.forums.wordpress.com お問い合わせ: http://ja.support.wordpress.com/contact/ サポートで調べてみたり、フォーラムで聞いてみる ことができます('∀`)