• HOME
  • BLOG
  • WordPress
  • 【Twenty Twenty #3】超初心者向け!トップページを作る!便利な「カバー」編

【Twenty Twenty #3】超初心者向け!トップページを作る!便利な「カバー」編

今回は少々短くなりますが、WordPress無料テーマ「Twenty Twenty」で「カバー」を使用したいと思います!

前回は「見出し」「ギャラリー」を設置しました。その時の記事はこちらです。

このテーマでは下の図のようなトップページを作ることを目標として進めていきます!今回作成するのはピンク色の帯の中に「CONTENT」と書いてある箇所です!

今回作成するLP。

「カバー」を追加する

カバーを挿入したい箇所のプラスボタンをクリック。「カバー」ブロックを選択します。

ブロックメニュー

すると、下図のような表示がされると思います。

カバーブロック

お手本のとおりの設定をします。まず、色が5色提示されていると思いますので、一番左のピンクをクリックします。すると、ピンク色の四角形ができ、中にテキストを編集できるようになると思います。

その状態になったら、テキストのブロックを「見出し」ブロックに変えましょう!下図のように、一番左端のアイコンをクリックし、下に出てきた「見出し」をクリック。

カバー内のブロック選択

見出しに変更したら、文字を入力します。

文字入力後

ひとまずこれで「っぽく」なりましたね。ちょっとプレビューでどう見えるか確認します。

プレビュー時の表示

帯が画面全体に広がっておらず、途中で切れていますね。設定変更して見本と同じようにします。帯を画面全体に広げるには、ブロックの幅を「全幅」にします。下の画像のように、「カバーブロック」を選択します。(ピンクの四角の隅をクリックすると選びやすいです。)

カバーブロック選択時

この状態で、下図のように選択します。選ぶのは「全幅」です。

ブロックの配置選択

すると、帯が画面全体に広がりました!

「全幅」選択後

これでOKです!プレビューでも確認してみてください!

ちなみにカバーは、単色だけでなく画像もセットできます。

画像セット時

おわりに

いかがでしたか?今回はCONTENTSの文字だけでしたが、このカバーにはテキストだけでなくさらに画像や表なども挿入できるため、いろんなところで様々な使い方ができる優れた機能です!いろんなブロックを置いて見栄えを試してみてください!

デモサイト
Twenty Twenty Sample


みなさまのホームページやイメージがよくなるお手伝いをいたします。
ヘッダー画像、バナー画像、ロゴ、WordPressデザインなどお気軽にご相談ください!
WordPressデザインサービスは以下から承っております。

ワードプレスホームページを新規導入します テンプレート付き!!初めての導入、初心者の方にオススメ!!

関連記事