手順の確認
今回の手順は以下の通りです。
このようなロゴなしのヘッダーを作ります。
スクロールしたらロゴが表示されるように設定します。
メインビジュアルの上にロゴを重ねる
メインビジュアルにロゴを配置するには、まずブログパーツを設定する必要があります。
ブログパーツはダッシュボードの左側メニューにあります。ブログパーツから新規追加を選択しましょう。
タイトルを設定し、ロゴを配置します。
今回はロゴのカラーが白のため、何も表示されていないように見えますが、実際はありますのでご安心ください。
「公開」を押し、一覧に表示されている「呼び出しコード」の「id=〇〇」の数字をメモします。
「カスタマイズ」→「トップページ」→「メインビジュアル」の順に開きます。
ロゴを載せたいスライドの「ブログパーツID」に先ほどメモした数値を入力します。
ショートコードをそのままコピペするわけではなく、数値のみの入力なので注意！
yumeこれでロゴをメインビジュアルに重ねて配置することができました！
ヘッダーのロゴを非表示にする
yume続いて、ヘッダーのロゴを非表示にしていきましょう！
今回はメインビジュアルにロゴを設置したため、トップページのヘッダーのみ、ロゴを非表示にしていきます。
カスタムCSSを使用しますが、CSSがわからない方も、コピペで実装できますので試してみてくださいね！
先ほどの「カスタマイズ」から「追加CSS」を開きましょう。
CSSを記入していきましょう！下記CSSをコピーして、ペーストしてください。
トップページ以外のすべてのページのロゴを非表示にしたい場合は、「.top」の部分を削除すればOKです。
.top .l-header__logo {
display: none;
}必ずすべて半角で入力してください！
yumeこれでトップページのロゴを非表示にできました！
スクロールしたらロゴが表示されるよう設定する
yume最後に、スクロールしたらヘッダーが追従し、ロゴが表示されるよう設定しましょう。
先ほどと同様、「カスタマイズ」→「ヘッダー」と進みます。
「ヘッダーの追従設定」の「ヘッダーを追従させる」にチェックを入れます。
yumeこれでスクロールしたらロゴが出てくるように設定できました！
とっても簡単にサイト型のメインビジュアルとヘッダーを作ることができました！
おしゃれなホームページ制作にぜひ役立ててみてくださいね！
