「Twenty Seventeen」でHPを制作する

Presentation on theme: "「Twenty Seventeen」でHPを制作する"— Presentation transcript:

1 「Twenty Seventeen」でHPを制作する
WordPress研究会2019 「Twenty Seventeen」でHPを制作する 第4回 2019年6月26日 比留間

2 内容 ホームページの作成手順 ホームページのデザインを決定する 「Twenty Seventeen」によるHPの制作 固定ページの作成・公開
　ホームページの作成手順 　ホームページのデザインを決定する 　 「Twenty Seventeen」によるHPの制作 固定ページの作成・公開 　投稿の作成・公開 　メニューの調整 　ウィジェットの調整 サンプルの削除 外観の調整 マイ　ホームページ作成の準備 テーマの選定

3 1. ホームページの作成手順 HPのデザインが決まらない時の方法 HPのデザインを考える テーマを選択する HPのデザインを決定する

4 2. ホームページのデザインを決定する メニュー構造 フロントページの構造 ヘッダー ホーム ホーム 楽しむ研究室 情報共有 研究テーマ
＊固定ページの名称は 「ホームページ」 ＊ブログの名称を 「情報共有」に変更 WordPress フロントページの構造 ヘッダー ヘッダー画像・キャッチフレーズは適当に設定する ホームページ 研究テーマ 情報共有 楽しむ研究室

5 2.1. 固定ページの内容（１） 固定ページ:ホームページ アイキャッチ画像を設定する 固定ページ:楽しむ研究室 アイキャッチ画像を設定する
固定ページ:ホームページ　　アイキャッチ画像を設定する 楽しむ研究室は、室員どおしの情報共有の場として使用します。 楽しむ研究室の研究活動の発表と情報交換の場です。 時々このサイトを訪問してください 固定ページ:楽しむ研究室　　アイキャッチ画像を設定する パソコン楽しみ隊楽しむ研究室では、「ＩＴを知りより豊かに人生を楽しもう」をスローガンに、ＩＴに関する研究を有志 で実施してます。　 一人よりもみんなで研究することにより、より積極的に新しいことにチャレンジできます。　 皆さんも、楽しむ研究室に参画しませんか。

6 2.1. 固定ページの内容（２） 固定ページ:研究テーマ アイキャッチ画像を設定する 研究テーマ一覧 研究テーマと研究会の内容
固定ページ:研究テーマ　　アイキャッチ画像を設定する 研究テーマ一覧 WordPress WordPressによるホームページ制作技術 PowerPoint PowerPointの活用 研究テーマと研究会の内容 WordPress研究会 第1回　WordPressでHPを制作する 第2回　WordPressを導入する 第3回　「Twenty Seventeen」でHPを制作する

7 2.1. 固定ページの内容（３） 固定ページ: WordPress
研究テーマ「WordPress」は、WordPress研究会が担当します。WordPressでホームページを作 成するための知識と技術とは何かを探求します。 WordPress研究会の主旨と目標 主旨　WordPressでホームページ作成ができるようになるための研究を行う 目標　WordPressで簡単なホームページが作成できるようになること 研究員が達成したいこと WordPressで簡単なホームページが作成できるようになること より複雑なホームページを作成するためにインターネット上の情報を検索し、ホームページ作成に生かせるようになるこ と

8 2.2. 投稿の内容（１） 動画の圧縮 カテゴリー:コンテンツの編集
動画の圧縮　　カテゴリー:コンテンツの編集 WordPressでは、アップロードできる動画のサイズが５ＭＢという制限がある。動画はサイズが 大きくなってしまい、アップデートできないことが多い。 動画を圧縮するために、オンラインの圧縮サイトをを利用する。 動画のファイルサイズをオンラインで小さくする 圧縮された動画を繰り返し圧縮することにより、制限以内のサイズになるようにする。 動画のサイズが大きければ大きいほど、繰り返し回数が多くなる。 最大500MBの動画ファイルをアップロードでき、MP4、AVI、MPEG、MOVの動画フォーマットに 対応している。 なお、ＭＰ4動画は、PowerPointのアニメーションとエクスポート機能を使用して、簡単に作成 できる。チャレンジしてみては如何ですか。

9 2.2. 投稿の内容（２） 「All-in-One WP Migration」 カテゴリー:プラグイン
WordPressのＨＰを移設したいときに利用できる。移設するサイトが５１２ＭＢ以下であれば、 無料版でも移設できる。有料版は、無制限である。 ＨＰをエクスポートし、別のサイトにWordPressを導入し、プラグイン「All-in-One WP Migration」を導入、有効化し、エクスポートしたファイルをインポートする。

10 2.3. ウィジェットの設定 ブログサイドバー フッター1 フッター2 カテゴリー 検索 テキスト 表題「このサイトについて」
カテゴリー　　検索 フッター1 テキスト　表題「このサイトについて」 楽しむ研究室の情報を限定メンバーと共有しています。 カテゴリー　一覧 フッター2 画像　　なんでも

11 3. 「Twenty Seventeen」によるHPの制作
「外観-カスタマイズ」で公開をクリック 固定ページの作成・公開 投稿の作成・公開 メニューの調整 ウイジェットの調整 サンプルの削除（固定ページ・投稿） 外観の調整

12 4. 固定ページの作成・公開 新規固定ページを追加の画面を開く
固定ページ　ホームページ・楽しむ研究室・研究テーマ・WordPress　を作成・公開する 研究テーマとWordPressに親子関係を設定する

13 4.1．固定ページの新規作成 固定ページ新規作成 ２つ目の固定ページを作成する 固定ページ一覧からの選択 固定ページ一覧からのクイック編集
タイトルの入力 本文の入力 プルダウンによる文字の属性の選択 段落、見出し等、文字色の設定 メディアの追加 プレビュー 下書き保存 ２つ目の固定ページを作成する 親子関係の設定 パーマリンクの確認 固定ページ一覧からの選択 パーマリンクの編集 本文の修正 アイキャッチ画像の追加 プレビュー 下書き保存 固定ページ一覧からのクイック編集 コメント欄の挿入 パスワードの設定 固定ページの表示 固定ページ一覧からのゴミ箱へ移動

14 4.2. 固定ページ一覧

15 4.3. 固定ページ　クイック編集

16 5. 投稿の作成・公開 新規投稿を追加の画面を開く 投稿 動画の圧縮・「All-in-One WP Migration」を作成・公開する
カテゴリー・アイキャッチ画像を設定する

17 5.1. 投稿の新規作成 表示オプション カテゴリー 下書き保存 公開 アイキャッチ画像 フォーマット フォーマット カテゴリー
テーマが投稿表示をカスタマイズする際に 使えるメタ情報である。 すべての投稿に「標準」を設定しても構わ ない カテゴリー 投稿の分類に使用する 指定しないと「未分類」となる

18 5.2. 投稿の表示オプション

19 5.3. フォーマット 標準 「フォーマット」 テーマが投稿表示をカスタマイズする際に使えるメタ情報である
「フォーマット」　　テーマが投稿表示をカスタマイズする際に使えるメタ情報である 標準 aside（アサイド）通常タイトルなしで表示。Facebook の Notes のようなもの。 gallery（ギャラリー） 画像ギャラリー。ギャラリーショートコードと添付画像を含む投稿など image（画像） 単独の画像。投稿本文内の最初の <img /> タグが画像と見なされる。もし投稿本文が URL のみの場合はそれが動画 URL となり、投稿タイトル (post_title) が画像の title 属性となる。 link（リンク） 他サイトへのリンク。投稿本文内の一つ目の <a href=””> タグがその投稿の外部リンクと見なされ る。もし投稿本文が URL のみの場合はその URL が外部リンクとなり、投稿タイトル (post_title) が名前となる。 quote（引用） 引用文。引用文と引用元のテキストエリアを設けるのが望ましい。引用文は <blockquote>$quote_wrapped_with_paragraphs<p><cite>$citation</cite></p></blockq uote> として post_content に保存すること。 status（ステータス） 通常140程度の短い近況アップデート。Twitter のツイートのようなもの。 video（動画） 単独の動画、または動画のプレイリスト。投稿本文内の最初の <video /> タグまたは object/embed が動画と見なされる。もし投稿本文が URL のみの場合は、それが動画 URL となる audio（音声） 音声ファイル、またはプレイリスト。ポッドキャストにも使える。 chat（チャット） チャット履歴。

20 5.4. カテゴリー カテゴリー 投稿の分類に使用 する 指定しないと「未分 類」となる 事前にカテゴリーを設 定できる

21 5.5. 投稿一覧と表示オプション

22 5.6. 投稿一覧 クイック編集

23 6. メニューの調整 メニューへの追加 メニューから削除 該当箇所に設定
固定ページ名称と異な る名称をメニューに設定 したいときはナビゲーショ ンラベルに入力 メニューを保存をクリック メニューから削除 削除をクリック 公開されている固定ページは固定ページの一覧に表示されている。該当ページを選択し、メニューに追加をクリック。ドラッグ&ドロップで位置を調整する。

24 6.1. 表示オプションの表示

25 6.2. リンクターゲット 表示オプションでリンクターゲットを設定すると、ページを新しいタブで開くかどうか選択できるようになる

26 7. ウィジェットの調整 ウィジェットの設定 ウィジェットの削除 ドラッグ&ドロップでウィジェットを該当箇所に設定 該当箇所に設定 編集
保存をクリック ウィジェットの削除 削除をクリック ドラッグ&ドロップでウィジェットを該当箇所に設定

27 8. サンプルの削除 サンプルで提供されているものは削除 メニュー 投稿 固定ページ ウィジェット ウィジェットの調整で実施
ウィジェット　　ウィジェットの調整で実施 メニュー 必要なものは残し、不要なものは削除 フロントページを固定ページにするか投稿にするかによりブログの扱いがことなる フロントページ=固定ページ ブログはメニューに必要。名称は変更可。 フロントページ=投稿　ブログはメニューに不要。名称は変更可。

28 8.1. 投稿の削除 ごみ箱へ移動をクリックする

29 8.2. 固定ページの削除 削除 再利用 ごみ箱へ移動をクリックする お問い合わせ サンプルページ ホームページセクション 会社概要
ブログ ごみ箱へ移動をクリックする

30 9. 外観の調整 サイト基本情報 色 ヘッダーメディア ホームページ設定 テーマオプション

31 10. マイ　ホームページ作成の準備 HPのデザインの決定 メニュー構成図の作成 固定ページの準備 投稿の準備 テーマの選定

32 11. テーマの選定 選定したテーマを有効化する。テーマの新規追加で好みのテーマを選択する フロントページの基本構造を知る

33 11.1. フロントページの基本構造とは 標準テーマ Twenty Fourteen ヘッダー画像 メインメニュー セカンド メニュー
フィーチャードエリア 投稿エリア コンテンツサイドバー 投稿1 アイキャッチ画像 メインサイドバー 投稿N ページネーション フッターウィジェットエリア 標準テーマ Twenty Fourteen

34 11.2. フロントページの基本構造の設定 フロントページの基本構成の変更は、管理画面の『外観』から実施する
テーマ テーマの選択。インストールされていない時は追加する。 カスタマイズ サイトの基本情報の変更ができる ウィジェット サイドバー、フッターウィジェットエリアに配置するウィジットを選択する メニュー メニューを作成する ヘッダー ヘッダー画像を指定する 背景 背景画像を指定する テーマの編集 ソースコードの改変ができる。改変が正しくないと起動しなくなる。 フロントページの基本構成の変更は、必要最小限の変更から始める

35 11.3. Twenty Seventeen 標準テーマ Twenty Seventeen ヘッダー画像 メインメニュー 固定ページ
サイドバー 投稿エリア 投稿1 アイキャッチ画像 投稿N 固定ページ フッターウィジェット 標準テーマ Twenty Seventeen

36 11.4. Twenty Sixteen 標準テーマ Twenty Sixteen TOPページに固定ページの代わりに、
ロゴ メインメニュー ヘッダー画像(例では無し) 固定ページ サイドバー TOPページに固定ページの代わりに、 投稿を設定した場合は、フッター1、 フッター2は設定できない フッター1 フッター2 標準テーマ Twenty Sixteen

37 11.5. Twenty Fifteen 標準テーマ Twenty Fifteen
サイドバー 投稿エリア 投稿1 アイキャッチ画像 投稿N ページネーション 標準テーマ Twenty Fifteen

38 11.6. Twenty Fourteen 標準テーマ Twenty Fourteen ヘッダー画像 メインメニュー セカンド メニュー
フィーチャードエリア 投稿エリア コンテンツサイドバー 投稿1 アイキャッチ画像 メインサイドバー 投稿N ページネーション フッターウィジェットエリア 標準テーマ Twenty Fourteen 38

39 11.7. Twenty Thirteen 標準テーマ Twenty Thirteen
ヘッダー画像 メインメニュー 投稿エリア 投稿1 アイキャッチ画像 サイドバー（例は無し） 投稿N ページネーション フッターウィジェット 標準テーマ Twenty Thirteen