WordPress

【WordPress】カバーブロックの使い方(固定背景、画像をサイト幅いっぱいに表示する)

広告:ページ内にてアフィリエイト広告を利用しています。

横幅一杯に表示「カバーブロック」

WordPress には、おしゃれなデザインを作ることができる「カバーブロック」機能があります。

画像の上に文字やコンテンツを表示したり、固定背景(切り抜きイメージ)などでオシャレにデザインしたり、特にトップページのデザインで大活躍するカバーブロックです。魅力的なサイトデザインのためには要な機能ですね。

ポイント

本記事では、

「カバーブロック」でできること、使い方を簡単に紹介します。

素敵なデザインのサイトを作りましょう!

おすすめ副業

\ココナラ成功パターンを詳しく見たい方は こちら をクリックしてください/

PR

カバーブロックでできること(サンプル)

■ 画像の上に文字などのコンテンツを表示することができる

パリの街並み

パリの街並み

7区のおしゃれ街歩きカフェ巡りと言えば「クレ通り」

パリの写真を不透明度(25%)で設定して白文字を配置しています。

  • 画像の上に「段落」オブジェクトで白文字を配置
  • (文字が映えるように)画像の不透明度を調整して暗くする

■ サイト内の表示エリア横いっぱいに広げて表示

ドイツの路面電車(トラム)

画像をコンテンツ幅を超えて、表示できる横幅いっぱいに表示します。(どこまで表示できるかは利用しているテーマによっても変わります)

  • 「全幅」表示を指定

■ 画像を固定して、窓枠効果を出す

記事を上下にスクロールさせてみてください。背景の画像位置が固定されたままスクロールが動きます。

  • 「固定背景」表示を指定

■ カバーブロックを多重に利用して、よりオシャレなデザインにする

パリのカフェ

パリのおしゃれ

カフェを楽しむ

たまたま見つけたカフェに入って一休み

今日の一日素敵に過ごす

優雅な一日、パリジェンヌ

カバーブロックの上に、さらにカバーブロックを重ねてみました。

左側にテキスト、右側にカバーブロック(固定背景)とするため、カラムブロックを利用しています。

  • (文字が映えるように)ベースとなるカバーブロックの画像の不透明°を調整して暗くする
  • カバーブロックの上にカラムブロックを配置する
  • 左側に白文字テキストを配置する
  • 右側にはカバーブロックを配置して「固定背景」を設定する

カバーブロックの使い方

■ カバーブロックの用意と背景画像の設定

カバーブロックを指定する方法

WordPress の記事作成画面で「カバー」を選択します。

カバーブロックへの背景画像の設定

カバーブロックで「アップロード」または「メディアライブラリ」から画像を指定します。

■ カバーブロックへの文字やコンテンツの重ね方

カバーブロックに文字を入力する画面

カバーブロックを配置し背景画像を設定すると初期状態で「タイトルを入力」ブロックが表示されています。

ここから文章を書いたり、(通常の記事を書く場合と同様に)画像やボタンなどを配置していくことができます。

カバーブロックの上にブロックを重ねた例

自由にブロックを配置できますので、トップページの画像や、レコメンド(おすすめ)などに利用できますね。

■ オーバーレイ配色と透過率の設定

オーバーレイ配色と透過率の設定画面

カバーブロックの設定でオーバーレイ(背景色)と透過率を設定します。

■ 全幅設定

全幅設定の方法

幅設定のアイコンに「全幅」が追加されています。設定することで全幅設定となります。(プレビュー画面で確認してください)

※ テーマごとに全幅の幅が異なります。

■ 固定背景の設定

固定背景の設定

カバーブロックの設定で「固定背景」をONにすることで、画像が固定されます。

WordPress もっと!お役立ちテクニック

WordPress のお役立ちテクニックはこちら

まとめ

WordPress には、おしゃれなデザインを作ることができる「カバーブロック」機能があります。

画像の上に文字やコンテンツを表示したり、固定背景(切り抜きイメージ)などでオシャレにデザインしたり、特にトップページのデザインで大活躍する機能です。

ポイント

  • 画像の上に、文字(タイトル)や、画像、各ブロックを重ねる
  • 全幅表示
  • 背景画像を固定して表示する
  • 「カバーブロック」の上に「カバーブロック」を重ねる

サイトデザインの可能性が広がりますね。かっこいいクールなサイトをぜひ作ってくださいね。

40代・50代「会社員におすすめ」の在宅でできる副業5選

40代・50代「会社員におすすめ」の在宅でできる副業5選(初心者でもできる)

40代、50代だからこそ気が付く、不安に思う将来設計、しかし今から大きなチャレンジは難しい。投資もリスクが多い。いまこそやってみたいのが「副業」です。本記事では40代、50代におすすめの副業5選を紹介します。

続きを見る

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業3選

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業3選(初心者でもできる)

20代、30代の主婦にとって、これからの人生設計、お金の心配は少なからずありますね。20代、30代の主婦が不安に思うお金の問題を少しでも解決するべく、初期投資が無い(または少ない)主婦におすすめの副業ができれば安心ですね。記事では、20代、30代専業主婦におすすめの副業3選を紹介します。

続きを見る

地方がチャンスのおすすめ副業を紹介!

地方で快適に暮らす!地方がチャンスのおすすめ副業を紹介!在宅でパソコンがあれば「できる」副業

都会は住みにくい!地方の方が自然もあり、ちょうど規模の街で素敵に暮らすのは人生設計として最高ですね。しかし地方は本業の給料が低いのがネック、そこで是非お勧めしたいのがインターネットでできる副業です。本記事では、地方で快適に暮らす!おすすめ副業を紹介します。ゆるーくまったり人生過ごしたいですね。

続きを見る

この副業
アフィリエイトスクール
ノートパソコン
もっと WordPress のノウハウを知りたいときは

WordPress の情報、テクニック一覧はこちらをクリック!

クリックアイコン

WordPress のおすすめテーマ

あなたのブログを強力にアピールし、読者を惹きつける、

魅力的なウェブサイトを手軽に作りたいですか?

そんな方に オススメのテーマが「AFFINGER」 です。

「AFFINGER」テーマを使えば、SEOに強く、集客力がアップし、

上級者でも満足できる、魅力的なウェブサイトが作れます。

ブログアフィリエイトを本気で戦うなら、「AFFINGER」の威力を体感してください。

\ WordPress のおすすめテーマ「アフィンガー」を詳しく見る /

AFFINGER の紹介(メリット・デメリットを紹介)

PR
―― 今日のおみくじ ――

第 65 番

”末吉"


今日のメッセージ

「時間」は全ての人間に平等に与えられたチャンスです。
ブログの始め方
レンタルサーバー
WordPress
AFFINGER

ブログランキング・にほんブログ村へ  

Presented By Boon Boon Blog .Com

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記