グーテンベルク時代の
WordPressノート
テーマの作り方 2
(ランディングページ&ワンカラムサイト編)

ver5.2
対応

グーテンベルク時代のWordPressノート テーマの作り方 2(ランディングページ&ワンカラムサイト編)

書籍のページサンプル

グーテンベルク時代のWordPressノート テーマの作り方 2(ランディングページ&ワンカラムサイト編): ページサンプル 1
グーテンベルク時代のWordPressノート テーマの作り方 2(ランディングページ&ワンカラムサイト編): ページサンプル 2
グーテンベルク時代のWordPressノート テーマの作り方 2(ランディングページ&ワンカラムサイト編): ページサンプル 3
グーテンベルク時代のWordPressノート テーマの作り方 2(ランディングページ&ワンカラムサイト編): ページサンプル 4

はじめに

これまでのWordPressでは、テンプレートタグとPHPをベースとして、さまざまな機能を実現してきました。その結果、WordPressらしいスタイルが作られてきたと言えます。

しかし、グーテンベルク(Gutenberg)の登場により、それが大きく変わろうとしています。ブロックで実現するのか、グーテンベルクで実現するのか、それとも… さまざまな方法を選択できるようになったのです。

そのため、テーマを使うユーザーや目的などに合わせて、これまでとは比較にならないほど自由に作り込めるようになっています。しかし、作り込まなければそのポテンシャルを感じることもできません。テーマを育てていくことが本当に重要になっているのです。

今回、テーマの成長を実感していただくため、本書では入門編で作成したグーテンベルク対応のオリジナルテーマをベースに、ワンカラムサイト&ランディングページを作成していきます。その過程で、こうした数々の選択肢を確認していただけるように構成しました。

特にランディングページの作成ではグーテンベルクを使わない従来のスタイルと、グーテンベルクのブロックを活用したスタイルの両方で作成していますので、その違いをじっくりと体験していただけると思います。

何を使って機能を実現していくのか…
テーマを育てるヒントにしていただければ幸いです。

HOW TO USE

本書について

1カラムレイアウトのサイト & ランディングページを構築

本書では、入門編で作成したオリジナルの2カラムレイアウトのテーマをベースに、1カラムレイアウトのサイトを構築します。さらに、1カラムレイアウトを活かし、ランディングページを構築していきます。入門編で解説したWordPress、グーテンベルク、テーマについての基本的な設定・機能・使い方などについては、本書では解説していませんので詳しくは入門編を参照してください。

グーテンベルクの「全幅」「幅広」の設定に対応

1カラムではグーテンベルクの「全幅」「幅広」の設定を有効化し、広い画面全体を活かしたレイアウトを作れるようにします。

ランディングページはグーテンベルクを使う方法と使わない方法で構築

ランディングページは、従来のスタイルでカスタムフィールド(Advanced Custom Filedプラグイン)を使用する方法と、グーテンベルクのブロックを活用する方法の、2つの方法で構築していきます。今後はブロックを活用する方法が主流になると考えられますが、同じページを構築する場合でも、サイトの目的や用途などに応じて構築方法の選択肢が増えたということを実感していただけるのではないかと思います。

ブロックスタイルを活用

ブロックのカスタマイズにはグーテンベルクの「ブロックスタイル」の機能を活用し、「このブロックをもう少しこうできたらいいのに…」に対応します。

ONE COLUMN SITE

構築する1カラムレイアウトのサイト

ワンカラムのサイト
LANDING PAGE

構築するランディングページ

ランディングページ

本書で作成するサンプルは主要ブラウザでの表示に対応しています。ただし、IEはサポート対象外です。

作成するテーマのソースコードや、インポート用の記事データについては、ダウンロード&サポートサイトに用意しています。

CONTENTS

もくじ

  1. 多様なブロックへの対応力をつけるためのテーマ修正
    1. 多種多様なブロックへの対応力をつける
      1. サイトの準備
    2. すべての要素をクラス名で区別できる形にする
    3. 横幅が大きいブロックの表示に対応する
      1. グリッドアイテムやフレックスアイテムの横幅の最小値(min-width)
  2. 1カラムレイアウトに再構築
    1. 1カラムレイアウトの検討
      1. 完成見本
      2. 3パターンの横幅
      3. 3パターンの横幅を実現するCSSグリッド
      4. モバイル版でも3パターンの横幅を実現する
    2. 1カラムレイアウトにする
      1. 2カラムの設定を削除する
      2. 5列のグリッドにする
      3. サブグリッドの利用を検討する
      4. bodyと同じ横幅にする
      5. bodyのグリッドを継承させる(1)
      6. bodyのグリッドを継承させる(2)
      7. 記事の構成要素の配置を指定する
    3. 幅広・全幅のフロントのレイアウトを設定する
      1. 画像ブロックを追加する
      2. 本文中の画像ブロックの有無を判別する
      3. 画像ブロックの出力コードと配置を確認する
      4. 幅広・全幅の機能を有効化する
      5. 画像ブロックの「幅広」をオンにする
      6. フロントの「幅広」のレイアウトを設定する
      7. 画像ブロックの「全幅」をオンにする
      8. フロントの「全幅」のレイアウトを設定する
      9. 小さい画面での表示を確認する
    4. 幅広・全幅のエディタのレイアウトを設定する
      1. エディタの表示を確認する
      2. 「標準幅」と「幅広」の横幅を設定する
      3. 「全幅」の横幅を設定する
      4. 編集エリアの横幅を変えて表示を確認する
      5. 小さい画面での表示を確認する
      6. 小さい画面での「標準幅」の横幅を調整する
    5. 記事以外のパーツの配置やデザインを調整する
      1. サイト名とナビゲーションメニューを両端に配置する
      2. ヘッダーのバーの表示位置を調整する
      3. 前後の記事へのリンクを標準幅にする
      4. サイドメニューを全幅にする
      5. サイドメニューの中身を3列に並べる
      6. サイドメニューの内側に余白を入れる
      7. ウィジェットをシンプルなデザインにする
      8. サイドメニューの下に余白を入れないようにする
      9. フッターの色と高さを調整する
      10. 0 小さい画面での表示を確認する
    6. 記事一覧のレイアウトを調整する
      1. 記事ページ以外の表示を確認する
      2. 記事一覧を「幅広」にする
      3. 記事一覧を2列のレイアウトにする
  3. ブロックスタイルの活用
    1. 第3のCSSファイルを用意してブロックのデザインをアレンジする
      1. フロントとエディタの両方に適用するCSSファイルを用意する
      2. フロントとエディタの両方にCSSファイルが読み込まれたことを確認する
      3. 3つのCSSの適用に関する注意点
    2. CSSの設定を最適な形でブロックに適用してアレンジする
    3. ブロックに直接CSSを適用してアレンジする
      1. 画像ブロックのマークアップを確認する
      2. 画像ブロックの高さをアレンジする
      3. この方法のメリットとデメリット
    4. 高度な設定でクラス名を追加してアレンジする
      1. 画像ブロックにクラス名を追加する
      2. 画像ブロックの高さをアレンジする
      3. この方法のメリットとデメリット
    5. ブロックスタイルでアレンジする
      1. ブロックスタイルとは
      2. JavaScriptファイルを追加する
      3. JavaScriptファイルをエディタに読み込ませる
      4. ブロックスタイルを作成する
      5. 画像ブロックの高さをアレンジする
      6. スタイルの選択で表示が変わることを確認する
  4. ランディングページのデザインの検討
    1. ランディングページのデザイン
      1. 完成見本
      2. ランディングページの構成
      3. ランディングページのコンテンツ
    2. ランディングページをWordPressで作成する方法
    3. ランディングページの見出しとフォント
      1. 見出しのレベル
      2. デザインを統一する部分
      3. 欧文フォントを使用する部分
  5. ランディングページの作成 - 従来のスタイル
    1. 従来のスタイルでランディングページを作成する
      1. ランディングページ用の固定ページを作成する
      2. ランディングページ用のテンプレートを作成する
      3. テンプレート名を指定する
      4. テンプレートを選択する
      5. ページのタイトルとサイドメニューを削除する
      6. ランディングページ用のCSSを作成する
      7. フロントにCSSを読み込ませる
      8. ランディングページのみにCSSを読み込ませる
    2. ランディングページのデザインを再現する
      1. 7つのセクションを作成する
      2. 画像を用意する
      3. ヒーローヘッダーを作成する
      4. コンセプトを作成する
      5. ポイント(1)を作成する
      6. 最新記事を作成する
      7. ポイント(2)を作成する
      8. 利用者の声を作成する
      9. アクションを作成する
      10. パララックス効果をつける
    3. カスタムフィールドを使ってカスタマイズできるようにする
      1. カスタマイズ可能にする箇所を検討する
      2. Advanced Custom Fieldsをインストールする
      3. ヒーローヘッダーをカスタマイズできるようにする
      4. ポイント(2)をカスタマイズできるようにする
      5. カスタムフィールドの入力フィールドを文書設定(サイドバー)に表示する
  6. ランディングページの作成 - グーテンベルクを活用するスタイル
    1. グーテンベルクでランディングページを作成する
      1. ランディングページ用の固定ページを作成する
      2. ランディングページ用のテンプレートを作成する
      3. テンプレート名を指定する
      4. テンプレートを選択する
      5. ページのタイトルとサイドメニューを削除する
      6. ランディングページ用のCSSとJavaScriptを作成する
      7. フロントにCSSを読み込ませる
      8. フロントとエディタの両方にCSSを読み込ませる
      9. ブロックスタイルのJavaScriptを読み込ませる
      10. 最新のグーテンベルクをインストールする
    2. グーテンベルクでデザインを再現する
    3. ヒーローヘッダーを構築する
      1. 使用するブロックを検討する
      2. 「カバー」ブロックを追加する
      3. 全幅のレイアウトにする
      4. 段落を見出しに変換する
      5. サブのキャッチコピーを追加する
      6. ボタンを追加する
      7. 画像の色合いを調整する
      8. ブロックスタイルでのアレンジを検討する
      9. ブロックのマークアップを確認する
      10. 「カバー」ブロックの高さをアレンジする
      11. 「見出し」ブロックのテキストに影をつける
      12. 「段落」ブロックのテキストに影をつける
      13. Google Fontsで表示する
      14. カバーブロックのブロックスタイルにすべてのアレンジを含める
      15. 入れ子になったブロックの選択
      16. 余計な余白(空の段落ブロック)が入るケース
    4. コンセプトを構築する
      1. 使用するブロックを検討する
      2. セクションの見出しとテキストを追加する
      3. カラムを追加する
      4. 特徴の画像を追加する
      5. 特徴の見出しを追加する
      6. 特徴の文章を追加する
      7. 特徴を再利用ブロックにして増やす
      8. アレンジを検討する
      9. 見出しのフォントサイズをアレンジする
      10. セクションの上の余白サイズをアレンジする
    5. ポイント(1)を構築する
      1. 「カバー」ブロックを追加する
      2. パララックス効果をつける
    6. 最新記事を構築する
      1. 使用するブロックを検討する
      2. 最新記事を表示するサードパーティ製のブロックを探す
      3. 最新記事を表示するブロックを追加する
      4. Postsブロックのデザインをアレンジする
      5. セクションの見出しとテキストを追加する
      6. サードパーティ製のブロックのコーディング
    7. ポイント(2)を構築する
      1. 使用するブロックを検討する
      2. 「メディアと文章」ブロックを追加する
      3. メディアと文章の横幅のバランスを調整する
      4. レスポンシブの設定を行う
      5. 画像をブロックの高さに揃える
      6. 画像の高さの最小値をアレンジする
    8. 利用者の声を構築する
      1. 使用するブロックを検討する
      2. セクションの見出しとテキストを追加する
      3. 「メディアと文章」ブロックを追加する
      4. ブロックスタイルでアレンジする箇所を洗い出す
      5. ブロックスタイルでカード型のデザインにする
      6. 利用者の声を再利用ブロックにする
      7. 2列のカラムでレイアウトする
      8. 2つ目の利用者の声を編集する
      9. カラムの上下の余白サイズを大きくする
    9. アクションを構築する
      1. 「カバー」ブロックを追加する
      2. オーバーレイの色を調整する
    10. 完成したランディングページを他のページやサイトで利用する
      1. ページ全体を再利用ブロックにする
      2. 新しいランディングページを作成してカスタマイズする
      3. 他のサイトで使用する場合
      4. ランディングページをデフォルトテーマで表示した場合
  7. WordPressによるページ制作
    1. 制作スタイルの選択
    2. グーテンベルクを活用したページ制作のこれから
  8. APPENDIX
    1. ランディングページをサイトのトップページにする
    2. 「グループ」ブロックについて
      1. ブロックツールバーが隠れてしまう場合
      2. グループブロックの機能を使ってみる
      3. ブロックスタイルでアレンジするのに利用する
      4. 階層を変えるのに利用する
    3. ブロック名を確認する方法

グーテンベルク時代のWordPressノート テーマの作り方

入門編 + ランディングページ&ワンカラムサイト編