デモサイト1のメインビジュアル設定

2018.05.21 カスタマイズ
デモサイト1のメインビジュアル設定

ここでは、このサイトのメインビジュアルの設定方法についてご紹介します。

以下の手順で進めて頂ければ、このサイトのメインビジュアルと同じ挙動のものを導入できます。

「メインビジュアル」ウィジェットの設定

「メインビジュアル」ウィジェットエリアに「カスタムHTML」ウィジェットをドラッグ&ドロップします。

「カスタムHTML」ウィジェットを設置できたら、以下のソースコードを貼り付けます。

<div class="hero_logo animated fadeInDown">
  <img src="ロゴ画像URL" alt="WordPressテーマ『HIGHLAND』">
</div>
<p class="hero_catch animated fadeInUp">個人のビジネスをさらなる高みに押し上げる<br>高性能WordPressテーマ『HIGHLAND』</p>
<div class="animated fadeInUp">[btn url="リンク先URL" text="今すぐダウンロード" width="500px"]</div>

貼り付けたら、画像・リンク先URLを差し替えます。

そのほかのテキストについては、各自でお好きに変更してください。

子テーマCSSの編集

次に、子テーマのCSSにメインビジュアル用スタイルを追記していきます。

子テーマのstyle.cssに、以下のソースコードを貼り付けます。

/*------------------------------------------------------------

   メインビジュアル

------------------------------------------------------------*/

#hero {
  text-align: center;
  background: #f8f8f8 url(メインビジュアル背景画像のURLを記入してください) center center;
}

#hero .hero_widget {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#hero .textwidget {
  font-size: 100%;
}

#hero .textwidget p {
  font-weight: bold;
  text-shadow: 0px 0px 5px #fff;
}

@media (min-width: 769px) {

  #hero {
    padding-top: 41.6666%;
    background-size: 100%;
  }
	
  .hero_logo {
    width: 450px;
    margin: 0 auto 30px;
  }

  #hero .textwidget .hero_catch {
    font-size: 112.5%;
    margin-bottom: 30px;
  }

}

@media (min-width: 481px) and (max-width: 768px) {

  #hero {
    padding-top: 50%;
    background-size: 100%;
  }

  .hero_logo {
    width: 350px;
    margin: 0 auto 30px;
  }

  #hero .textwidget .hero_catch {
    font-size: 112.5%;
    margin-bottom: 30px;
  }

}

@media (max-width: 480px) {

  #hero {
    padding-top: 100%;
    background-size: cover;
  }

  .hero_logo {
    width: 240px;
    margin: 0 auto 30px;
  }

  #hero .textwidget .hero_catch {
    margin-bottom: 30px;
  }

}

ソースコード冒頭のメインビジュアル背景画像URLを差し替えれば、設定完了です。

HIGHLANDをダウンロード

柴田竹思

柴田竹思

WordPress案件を得意とするWebクリエイター。ベトナム在住。大手企業や教育機関などの大規模制作案件、フリーランス・個人事業主のスタートアップから売上を伸ばしていくお手伝いなど、わりと幅広くWeb関連の仕事をしています。