WordPressテーマ ▶︎ AFFINGER6 関連の記事 はこちらから!AFFINGER6

SWELL カバーブロックの使い方!トップページ・ランディングページの全幅表示(フルワイド)に対応

SWELL カバーブロックに使い方!トップページ・ランディングページの全幅表示(フルワイド)に対応

こんにちは "osaboo"osabooです。"@osaboo_Bot"

SWELLの「カバーブロックの使い方」を初心者さん向けに解説します。

  • メディア:カバー

WordPress標準のブロックエディター機能です。
カバーブロックを使用すると、背景として設定した画像や色の上に テキストやボタンなどのコンテンツが配置できます。

こんな方におすすめ
  • 画像にテキストやボタンを配置したい。
  • 記事やサイトの幅全体に画像を表示したい。
  • 画像に配置したコンテンツにリンクを貼りたい。
  • 画像をオシャレに演出したい。
この記事でわかること
  1. カバーブロックとは…
  2. カバーブロックの使い方
    1. カバーブロックの挿入手順
    2. カバーの設定
  3. カバーブロックを強化したSWELL専用ブロックとは…
    1. SWELLブロック:フルワイド
    2. SWELLブロック:バナーリンク
  4. まとめ!

それではご覧ください。

目次 "Contents"

カバーブロックとは…

カバーブロックは、背景として設定した画像や色の上に テキストやボタンなどのコンテンツが配置できます。

柔軟なレイアウトを可能にし、異なるコンテンツ要素を組み合わせて魅力的なセクションヒーローエリアを構築できます。

「ヘッダーエリア・フッターエリア・メインビジュアル」等の構築に適しています。投稿ページでは、h2タグの見出しイメージ画像としても有効に使えます。

また、カバーブロックは レスポンシブデザインに対応しているので、異なるデバイスや画面サイズに適した表示を可能にします。

カバーブロックを活用して魅力的なセクションを作成することで、サイトのSEO向上に寄与することが期待されます。

背景画像や色のカスタマイズだけでなく、テキストやボタンの「スタイル・配置・デザイン・リンク」等さまざまなオプションを調整できます。

ランディングページのサンプルです。「ヘッダーエリア・メインビジュアル・・コンテンツエリア・フッターエリア」のイメージが掴めるかと…

8182_LP-Sample-1

上の動画で「カバーブロック」で構築している場所は以下の2箇所です。

メインビジュアルの動画を全幅表示しています。

メインビジュアル(カバーブロック):LP

バナーに使えます。

メインビジュアル:LP

カバーブロックの使い方

この章では、カバーブロックの使い方をご紹介します。

カバーブロックの使い方(操作手順)
  • カバーブロックの挿入手順
  • カバーの設定

それでは順番に見ていきましょう。

カバーブロックの挿入手順

※ 作業は投稿画面(記事編集画面)での作業になります。

この章では、基本的なカバーブロックの挿入手順をご紹介します。

STEP
投稿(記事編集)画面を準備

Menu『WordPress管理>ダッシュボード>投稿>新規投稿を追加』をクリックします。

投稿画面が表示されます。
(編集する場合は、投稿一覧から対象記事を選択してください。)

カバーブロックを挿入する箇所をクリックします。

ブロック挿入ツール『+』を切り替えてブロックメニューを開きます。

STEP
ブロック挿入ツールを切り替え

『+』をクリックします。

投稿画面:ブロック挿入ツールを切り替え
STEP
ブロックタブメニューから『カバー』を選択

ブロック挿入ツールが切り替わり 以下の画面が表示されます。

メディアから『カバー』を選択して投稿画面に挿入します。

『カバー』をクリックします。

メディア:カバーブロック挿入
STEP
カバー用の画像を選択

投稿(記事編集)画面に『カバーブロック』(画像選択前)が表示されます。

カバー用の画像をアップロードまたはメディアライブラリから選択します。
※ この解説では『メディアライブラリ』から呼び出します。
※ 背景色のみの選択もできます。(破線枠部のカラーマカーをクリックします)

メディア:カバーブロックを挿入-2

「メディアの選択またはアップロード」の画面に切り替わります。

カバー用の「画像or動画」を選んで『選択』をクリックします。

メディア:カバーブロックを挿入-3
STEP
カバーブロック挿入完了

投稿(記事編集)画面に『カバーブロック』(画像or動画の選択後)が表示されます。

メディア:カバーブロックを挿入-4|画像or動画挿入完了

カバーブロックは、レスポンシブデザインに対応しているので 1カラムで使用する場合は特に全幅表示がおすすめです。「追従する綺麗な表示が可能です」

設定はツールバーで以下のように『全幅』をクリックするだけです。

メディア:カバーブロックを挿入-5|ツールバー
STEP
カバーにコンテンツを設定

カバーブロックは、中央に段落ブロック(テキスト)がが埋め込まれている構造になっています。
つまり、「タイトルを入力」と表示されている部分をクリックすると段落ブロックに切り替わります。ブロック挿入ツールから自由にブロックを挿入できます。

以下の画像は「タイトルを入力」をクリックしたときに各メニューが切り替わった状態です。

メディア:カバーブロックを挿入-6|段落ブロック選択

メインビジュアルやヒーローエリア等の目を引くところに設置いた場合「タイトル(見出し)・キャッチコピー・リンク・ボタンリンク」等をカバーに埋め込むことで誘導やガイドがスムーズにできるのでおすすめです。

こんな感じです。

メディア:カバーブロックを挿入-7|段落ブロック選択後コンテンツ挿入

カバーに設置するブロックの使い方に迷ったら以下をご覧ください。

STEP
「ブロックタブ」メニューで詳細設定をする

右側に表示される「ブロックタブ」メニューで ボタンの詳細設定をします。

カバーブロック:エディター画面の設定メニューの場所

「ブロックタブ」メニューの詳細設定は、次の章で詳しくご紹介します。

カバーの設定

この章では、投稿画面右側に表示される「ブロックタブ」メニューの概略をご紹介します。

設定メニューの場所は、投稿(記事編集)画面の右側に表示される『設定>ブロック』タブメニューです。

表示されていない場合は、以下の画面を参考に設定アイコンをクリックしてください。

投稿画面:設定

「ブロックタブ」メニュー詳細:設定タブ

カバーブロック:エディター画面の設定メニュー|設定タブ
メディア設定

焦点ピッカー

 左:0〜100 %(左右設定)

 上:0〜100 %(上下設定)

 『メディアをクリア』(背景のみにできます)

デバイス制御

表示するデバイス 『SP/PC』選択/切替『クリア』

ブロック下の余白量
ドロップダウンメニュー:ブロック下の余白

  ※ ドロップダウンメニューより選択できます。

高度な設定

「ブロックタブ」メニュー詳細:スタイルタブ

カバーブロック:エディター画面の設定メニュー|スタイルタブ
  • テキスト
  • 見出し
  • オーバーレイ

それぞれの色設定ができます。

オーバーレイの不透明度

0〜100

フィルター

デュオトーン

デュオトーン|ドロップダウンメニュー

  ※ ドロップダウンメニューより選択できます。

タイポグラフィ

表示イメージの拡大縮小が簡単にできます。

タイポグラフィ|ドロップダウンメニュー

  ※ ドロップダウンメニューより選択できます。

サイズ

※ 割愛します

サイズ

カバー画像の最小高さ

カバー画像の最小高さ|単位|ドロップダウンメニュー

  ※ ドロップダウンメニューより選択できます。 

カバーブロックを強化したSWELL専用ブロックとは…

SWELLには、カバーブロックを強化したようなテーマ専用ブロックが2つあります。

カバーブロックで「思うようなコンテンツが作れない」と感じたときに 是非、使っていただきたい専用ブロックです。

カバーブロック同様、メインビジュアルやランディングページ等、1カラムで表示するページやサイドバーにおすすめです。

カバーブロックを強化したSWELL専用ブロック
  • SWELLブロック:フルワイド
  • SWELLブロック:バナーリンク

SWELLブロック:フルワイド

「SWELLブロック:フルワイド」は、特にトップページとランディングページのメインビジュアルや注視させたいエリアに設置すると効果的です。ただし、動画を背景にすることはできません。

SWELLブロック:フルワイド

SWELLブロック:フルワイド

レスポンシブに対応、全幅表示が追従します。余白は付きません。

※ SWELL公式マニュアルはこちらからご覧いただけます。

SWELLブロック:バナーリンク

「SWELLブロック:バナーリンク」は、投稿ページやサイドバーのような幅に制限がある場所やカラムで分割して表示する場所に適しています。

カバーブロックでは 画像にリンク付けはできません。また、画像ブロックでは テキストを埋め込めません。この2つの弱点を網羅した形のブロックです。

「SWELLブロック:バナーリンク」は、画像とテキストに個別のリンク付けが可能です。ただし、余白無しの全幅表示ができません。

※ SWELL公式マニュアルはこちらからご覧いただけます。

実行できる機能表

機能カバーフルワイドバナーリンク
動画背景
画像背景
サイト幅全体表示
画像リンク
テキストリンク

まとめSWELL カバーブロックに使い方!トップページ・ランディングページの全幅表示(フルワイド)に対応

SWELL カバーブロックに使い方をご紹介しました。

サイト・ページを「リッチに!オシャレに!」するためにとでも有効な、カバーブロックを上手に使ってかっこいいサイト・ページを作ってください。この記事がお役に立てば嬉しいです。^^

「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。\^^/

  • URLをコピーしました!
  • URLをコピーしました!
目次 "Contents"