【第18回】メインビジュアルを変更

連載講座:WordPressで作る簡単Webサイト

メインビジュアルは幅1024px で表示されていますが、ウィンドウ幅一杯までバナーイメージで表示するように変更します。この機能を使うにはプラグインが必要になります。

  1. [プラグイン]-[新規追加] をクリックします。
  2. [ultimate addons] と検索ボックスに入力して検索します。
  3. 「Ultimate Addons for Gutenberg」をインストールし有効化します。
  4. [固定ページ一覧] から「ホーム」を選択して、[セクションを停止] にある「アイキャッチ画像を表示しない」にチェックを付けます。また、[コンテンツのレイアウト:全幅/ストレッチ] にします。
  5. [ブロックの追加(+マーク)] をクリックし、Ultimate Addons で追加された Sectionブロックを選択します。
  6. 先頭のカラムブロックを選択し、追加した Sectionブロックの中にドラッグして移動します。
  7. Sectionブロックを選択し、[Layout]-[幅] を [1064] にします。
  8. Sectionブロックの詳細設定ボタンをクリックし、[前に挿入] で新しい Sectionブロックを挿入します。
    Layoutは [Content Width:全幅(Full Width)] とし、[Inherit Inner Width from Theme] を有効にします。
    [Background]-[Background Type:画像] にします。
    [Select Background Image] をクリックし、メディアライブラリから「main_visual.jpg」を選択します。
    下記の設定をします。
     [Image Position:Top Center(上部中央)]
     [Size:Contain]
    [Spacing(間隔)] をクリックし、単位を [%] にして Padding の上下左右をそれぞれ、[36 0 0 0] とします。
  9. 更新ボタンをクリックし、ブラウザでトップページの表示を確認しましょう。

«次の連載記事»
«前の連載記事»

スポンサーリンク

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥28,000

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥28,000

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ