学科 CMS構築基礎③
投稿日: 2022-06-11 作成者: master
本日のアジェンダ-
1限目
学科 CMS構築基礎③
投稿ページと固定ページについて
2限目
学科 CMS構築基礎③
ブロックエディタについて
3限目
学科 CMS構築基礎③
WordPressでポートフォリオを作りましょう
4限目
学科 CMS構築基礎③
WordPressでポートフォリオを作りましょう
5限目
学科 CMS構築基礎③
WordPressでポートフォリオを作りましょう
本日のテーマ
WordPressを使いこなしましょう
投稿ページと固定ページ
使いやすい（見やすい）ポートフォリオサイトにするためには、投稿ページと固定ページの使い分けや適切なメニュー設定が必要です。
投稿ページ
カテゴリ・タグを活用して訪問者が必要なページにアクセスしやすいよう工夫する。
固定ページ
メニューページを作成しリンクを作成する必要がある。
参考サイト
ブロックエディタ
ブロックエディタの機能を理解して思い通りのページを作成できるようになりましょう。
ブロックエディタの主要機能
- テキスト→「段落、見出し、リスト」（改行入力、リンク設定）
- 【見出し】H1、H2、…の階層構造。検索性に関わる。
- 【リスト】親・子・孫の階層をつけることもできる。
- テキスト→「コード、整形済テキスト、詩」（複数の空白や改行をそのまま表示）
- HTMLでは空白をたくさん入力しても1文字分しか表示されない。これはテキストブロックに適用される。【引用】【クラシック】【コード】【成型済みテキスト】機能を使用することで入力したままのテキストを表示することができる。
- テキスト→「テーブル」：表組型式を作成
- 行・列を指定した表を設置することができる。
- 各ブロックの表示はテーマに沿う。
- メディア→「画像、ギャラリー」：写真掲載の基本
- 【画像】画像を設置できる。
- 【ギャラリー】画像を複数選択して配置することができる。横に並ぶ枚数を指定する。横並びに端数が発生すると端数はブロック横幅に均等に配置される（拡大される）。
- メディア→「カバー」：テキストをオーバレイした画像を配置
- メディア→「メディアとテキスト」：写真と文章を並べる
- メディア→「ファイル」：PDFファイルなどのダウンロードを配置
- デザイン→「ボタン」：リンクを作成するのに便利
- ブロックプロパティでボタンのデザインを変更することができる。
- デザイン→「カラム」：横方向に複数欄を作成し、それぞれのメディアを指定可
- テキストをカラム内容に指定することもできる。
- デザイン→「続き」：抜粋に表示する範囲を指定
- 表示には影響しない。
- デザイン→「ページ区切り」：別ページにする時に指定
- 1つの投稿を複数ページに分割する。【1ページ目】【2ページ目】…となり各ページ区切りへのリンクが配置される。
- デザイン→「区切り」：文章と文章の間に水平線を表示
- デザイン→「スペーサー」：空間を作成
- ウィジェット→「ウィジェット」：色々な表示部品を指定
- ウィジェット→「ソーシャルアイコン」：SNSへのリンクを作成
- 埋め込み→「埋め込み」：代表的なサイトへのリンクを作成
- YouTube動画埋め込み：URLをコピー→【YouTube URL】欄にペースト
- WordPressページ埋め込み：ページへの埋め込みリンクが作成される
- ウィジェット→「カテゴリー」：カテゴリーごとの投稿一覧リンクが作成される。
- ウィジェット→「アーカイブ」：期間ごとの投稿一覧リンクが作成される。
- ウィジェット→「カレンダー」：投稿日での投稿リンクが作成される。
- ウィジェット→カスタムHTML：自分でHTMLを書くことができる。
固定ページで自由なレイアウトを作成する
【設定】→【表示設定】→【ホームページの表示】→【固定ページ】でページを指定
自由な場所にリンクを作成
リンクを作成したい場所を指定→URLを入力
URL入力時に【新しいタブで開く】を指定することができる。
WordPress各編集ページに表示される【パーマリンク】を活用するとよい。
ページ内への移動リンクを作成する
リンク先となるブロックを選択→ブロックプロパティ【高度な設定】→【HTMLアンカー】アンカー（リンク先を指定するための単語）設定
リンク元を指定→HTMLアンカーを選択
定型文・テンプレートの設定（再利用ブロック）
ブロックを選択→【再利用ブロックに追加】→任意の名前を入力して保存
【＋】アイコン→【再利用可能】タブ→再利用ブロックを選択→**【通常のブロックへ変換】**
参考サイト
本日の課題
Web版ポートフォリオにプロフィールを作成しメニュー設定をしましょう。
【About Me】固定ページの作成
メインメニューの設定
