今回はStudioPressというアメリカの会社が販売しているGenesisフレームワークというテーマをカスタマイズする方法について書いていきたいと思います。
Genesisフレームワークでは色々なGenesis子テーマがありますが、今回はGenesis Sampleというテーマを使って、トップページにメインビジュアルとキャッチコピーを表示します。
※ 今回はPHPファイルを編集します。管理画面に入れなくなることもあるので、PHPコードは注意して編集して下さい。
1. functions.php を編集
それでは、まずはキャッチコピーを表示させましょう。
functions.php
ファイルの一番下に以下のコードを追加します。
PHP
コピーする
add_action('genesis_after_header', function () {if (!is_front_page()) {return;}echo '<div class="main-visual"><div class="wrap">';echo '<h1>キャッチコピー</h1>';echo '</div></div>';});
これでトップページに「キャッチコピー」という文章が追加されました。
トップページ以外は表示されてないですね。
キャッチコピーのタグを変更する場合
今回はトップページのメインビジュアルなのでh1タグを使用してみましたが、お好みで変更して下さい。
例えばh1
という箇所をp
のように変更すれば、キャッチコピーはp
タグで囲まれます。
2. style.css を編集
次に、CSSコードを追加して見た目を調整します。
style.css
ファイルの一番下に、以下のコードを追加します。
以下のコードの {画像のパス}
という箇所には、表示したい画像へのパス(URL)を入力します。
CSS
コピーする
.main-visual {height: calc(25vh - 70px);background: url("{画像のパス}")no-repeat;background-size: cover;background-position: 50% 30%;color: white;}.main-visual .wrap {display: flex;justify-content: center;align-items: center;height: 100%;}.main-visual h1 {margin: 0;font-size: 1.5em;}@media (min-width: 480px) {.main-visual {height: calc(40vh - 70px);}.main-visual h1 {font-size: 3em;}}
これで指定した画像の上に、キャッチコピーが表示されました。
今回は以上になります。最後まで閲覧ありがとうございました。