WordPress には、おしゃれなデザインを作ることができる「カバーブロック」機能があります。
画像の上に文字やコンテンツを表示したり、固定背景(切り抜きイメージ)などでオシャレにデザインしたり、特にトップページのデザインで大活躍するカバーブロックの、できること、使い方を簡単に紹介します。
目次
カバーブロックでできること(サンプル)
■ 画像の上に文字などのコンテンツを表示することができる
パリの街並み
7区のおしゃれ街歩きカフェ巡りと言えば「クレ通り」
パリの写真を不透明度(25%)で設定して白文字を配置しています。
- 画像の上に「段落」オブジェクトで白文字を配置
- (文字が映えるように)画像の不透明度を調整して暗くする
■ サイト内の表示エリア横いっぱいに広げて表示
画像をコンテンツ幅を超えて、表示できる横幅いっぱいに表示します。(どこまで表示できるかは利用しているテーマによっても変わります)
- 「全幅」表示を指定
■ 画像を固定して、窓枠効果を出す
記事を上下にスクロールさせてみてください。背景の画像位置が固定されたままスクロールが動きます。
- 「固定背景」表示を指定
■ カバーブロックを多重に利用して、よりオシャレなデザインにする
パリのおしゃれ
カフェを楽しむ
たまたま見つけたカフェに入って一休み
今日の一日素敵に過ごす
優雅な一日、パリジェンヌ
カバーブロックの上に、さらにカバーブロックを重ねてみました。
左側にテキスト、右側にカバーブロック(固定背景)とするため、カラムブロックを利用しています。
- (文字が映えるように)ベースとなるカバーブロックの画像の不透明°を調整して暗くする
- カバーブロックの上にカラムブロックを配置する
- 左側に白文字テキストを配置する
- 右側にはカバーブロックを配置して「固定背景」を設定する
カバーブロックの使い方
■ カバーブロックの用意と背景画像の設定
WordPress の記事作成画面で「カバー」を選択します。
カバーブロックで「アップロード」または「メディアライブラリ」から画像を指定します。
■ カバーブロックへの文字やコンテンツの重ね方
カバーブロックを配置し背景画像を設定すると初期状態で「タイトルを入力」ブロックが表示されています。
ここから文章を書いたり、(通常の記事を書く場合と同様に)画像やボタンなどを配置していくことができます。
自由にブロックを配置できますので、トップページの画像や、レコメンド(おすすめ)などに利用できますね。
■ オーバーレイ配色と透過率の設定
カバーブロックの設定でオーバーレイ(背景色)と透過率を設定します。
■ 全幅設定
幅設定のアイコンに「全幅」が追加されています。設定することで全幅設定となります。(プレビュー画面で確認してください)
※ テーマごとに全幅の幅が異なります。
■ 固定背景の設定
カバーブロックの設定で「固定背景」をONにすることで、画像が固定されます。
まとめ
WordPress には、おしゃれなデザインを作ることができる「カバーブロック」機能があります。
画像の上に文字やコンテンツを表示したり、固定背景(切り抜きイメージ)などでオシャレにデザインしたり、特にトップページのデザインで大活躍する機能です。
- 画像の上に、文字(タイトル)や、画像、各ブロックを重ねる
- 全幅表示
- 背景画像を固定して表示する
- 「カバーブロック」の上に「カバーブロック」を重ねる
サイトデザインの可能性が広がりますね。かっこいいクールなサイトをぜひ作ってくださいね。
WordPress のおすすめテーマ
- SEO に強く【集客力強化】が望める
- かっこいい(かわいい)ホームページを作りやすい
- 初心者でも使えて、上級者になっても満足できる
本気でブログアフィリエイトを戦うなら、使うテーマは「AFFINGER」!
WordPress ブログの最上級おすすめテーマ「AFFINGER」をお試しください。
-
-
AFFINGER(アフィンガー)テーマは「ここ」がすごい!【WordPress 初心者必見!】
AFFINGER テーマを使うと「オシャレなサイト」を作りやすくなります。オシャレなサイトは、ユーザーの滞在時間が増え、サイト評価があがり、サイトの露出が増えて、さらにユーザ(読者)を呼び込む好循環を実現します。WordPressのテーマ「AFFINGER」を徹底紹介します。
続きを見る
WordPress の情報、テクニック一覧はこちらをクリック!