【cocoon】続・トップページをフルスクリーンにする方法【カスタマイズ】

以前書いた記事から記載場所や記載内容を変更したので、変更内容を記載します。

こちらの記事のCSSを使う場合は、下記記事の記載場所(カスタムCSS)から内容を削除してください。

※念のため、カスタムCSSの内容はどこかにコピペしておくことをおすすめします。

【cocoon】トップページをフルスクリーンにする方法【カスタマイズ】

cocoonのトップページをヘッダー部分まで使い、フルスクリーンにするカスタマイズを紹介します。ブロックエディタ(Gutenberg・グーテンベルク)を使っています。トップページのみのカスタマイズです。

上記記事を書いていた当時からhtmlやCSSの勉強を継続してこなかったので、今現在自分のstyle.cssを見てもわからない部分が多いです。

解説はもはやできかねるレベルなのです。

「このCSS、重複しているのではないか？」

とか

「ここは意味がないのでは？」

と思う行もチラホラあります|дﾟ)

また、キーボードの「F12」キーを押すとデベロッパーツールなるものが出てきます。

ここを見ると、どんなCSS設定にしているのかなどの情報が割とわかりますよ。

何かの参考になれば幸いです。

CSS書き込み場所
フルスクリーンにする為のCSSコード

CSS書き込み場所

「外観」→「テーマファイルエディター」をクリック

「編集するテーマを選択」を「 Cocoon Child 」にする
「テーマファイル」の「style.css」をクリック

注意点

「 カスタムCSS 」に元々書いてあるコードがあれば、貼り付ける前にメモなどにコピーしておくことををおススメします

フルスクリーンにする為のCSSコード

コードを見る

.container {
    padding:0;
}


/*ヘッダー*/
#header-container {
    align-items: center;
    background-color: transparent;
    display: flex;
    justify-content: center;
    height: 7.5em;
}

/*グローバル(ナビゲーション)メニュー*/
#navi {
    background-color: transparent;
}



.front-top-page .header-container, .front-top-page .navi {
    background-color: transparent;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.front-top-page #navi .navi-in a {
    color: #ededed;
    font-size: 13px;
}

.front-top-page .logo {
    background: url("ロゴ画像URL") no-repeat;
    background-size: contain;
    background-position: center;
}

.front-top-page .site-logo-image {
    visibility: hidden;
}


/*z-indexが負の数値でもscrollボタンを押せるようにするための処置*/
.front-top-page .container {
    position: relative;
    z-index: 0;
}

.front-top-page .content {
    margin-top: 0;
}

.front-top-page .article-header {
    display: none;
}



/*アピールエリア*/
.appeal {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: -1;
    position: relative;
}

.appeal-content {
    background-color: transparent;
    padding: 0;
}

.appeal-message {
    color: #ededed;
    margin: 0;
}

/*アピールエリアボタン*/
.appeal-button {
    background-color: transparent!important;
    color: #ededed;
    font-weight: normal;
    font-size: 0.75em;
    position: absolute;
    bottom: 2em;
    left: 50%;
    transform: translateX(-50%);
}

/*アピールエリア矢印*/
.appeal-button:before {
    animation: move 2s infinite alternate ease-in-out;
    content: url("矢印の画像URL");
    display: block;
}
@keyframes move {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(10px);
  }
}

/*スムーズにスクロール*/
html {scroll-behavior: smooth;}



/*////////////////////
////モバイル用の設定////
////////////////////*/
.mobile-header-menu-buttons {
    height: 86px;
}

.mobile-menu-buttons {
    align-items: center;
}

.mobile-menu-buttons>li {
    padding: 0;
}

.mobile-menu-buttons .menu-icon {
    line-height: 0;
}

.mobile-menu-buttons .menu-caption {
    display: none;
}

.front-top-page .mblt-header-mobile-buttons {
    margin-top: 0;
}

.front-top-page .mobile-header-menu-buttons {
    background-color: transparent;
    box-shadow: none;
}

.front-top-page .menu-button {
    color: #ededed;
}

.front-top-page .logo-menu-button {
    background: url("ロゴ画像URL") no-repeat;
    background-position: center;
    background-size: auto 44px;
}



/*///////////////////////////
////レスポンシブデザイン設定////
///////////////////////////*/
/*1023px以下*/
@media screen and (max-width: 1023px){
  #header-container {
      height: 40px;
  }
  .mblt-header-mobile-buttons {
      margin-top: 0;
  }
  .appeal {
      height: 100vh;
      background-image: url("モバイル用にサイズを小さくした画像URL");
  }
}

/*480px以下*/
@media screen and (max-width: 480px){
    .appeal-content {
        margin-top: -3em!important;/*下の.appeal-buttonは効いているの　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　  　　になぜこちらは効かない…*/
    }
    .appeal-button {
        bottom:  10em;
    }
}
@media screen and (max-width: 480px){/*なのにこちらでは効く謎*/
    .appeal-content {
        margin-top: -3em;
    }
}