【Cocoon】カスタマイズ|モバイル表示編

wordpress
この記事は約11分で読めます。
Sponsor Link
Sponsor Link

今回の個別記事はモバイル表示のカスタマイズ記事になります
カスタマイズというよりは、調整っていう感じですけどね
特に難しいことはしてないので、コピペで使えると思います

Cocoonの設定

Cocoonの設定はこんな感じです、スライドインメニューにしてるだけですね

style.css

サイドメニューや広告表示が崩れるのを防ぐために
ブレークポイントを変更?追加?して少し細分化してあります

Sponsor Link

1025~1280px

@media screen and (min-width: 1024px) and (max-width: 1280px){
    /***** cocoon 目次スタイル *****/
    span[id^="toc"] {
        padding-top: 1.7em;
    }
    /* ad link 2 */
    .my_ad_banner2 {
        text-align: center;
        font-family: "Raleway", sans-serif;
    }
}

961~1024px

ソースコードを開く
@media screen and (min-width: 961px) and (max-width: 1024px){
    /*サイドバー */
    .no-mobile-sidebar #sidebar {
        display: block;
    }
    main.main {
        width: 68%;
    }
    .sidebar {
        padding: 10px 0;
        width: 30%;
    }
    /***** モバイルメニュー *****/
    .mobile-menu-buttons {
        display: flex;
        opacity: .9;
        width: 100%;
        font-family: "Raleway", sans-serif;
    }
    .mobile-menu-buttons .menu-caption {
        font-family: "Raleway", sans-serif;
    }
    /***** cocoon 目次スタイル *****/
    span[id^="toc"] {
        padding-top: 1.7em;
    }
    /* 関連記事スニペット */
    .rect-mini-card .related-entry-card-title {
        font: 700 1.1em/1.4 "M PLUS Rounded 1c";
    }
}

601~960px

ソースコードを開く
@media screen and (min-width: 601px) and (max-width: 960px){
    .no-mobile-sidebar #sidebar {
        display: none;
    }
    main.main {
        width: auto;
    }
    /* カルーセル */
    .carousel-entry-card-title {
        font-size: 1em;
    }
    .header div.header-in {
        min-height: 150px;
    }
    .mobile-menu-buttons {
        opacity: 0.9;
        width: 100%;
        font-family: "Raleway", sans-serif;
    }
    .mobile-menu-buttons .menu-caption {
        font-family: "Raleway", sans-serif;
    }
    .sidebar .sns-follow-buttons a {
        width: 45px;
    }
    div.gsc-control-searchbox-only,
    .gsc-control-searchbox-only-ja {
        margin: 50px 0 0;
    }
    /***** cocoon 目次スタイル *****/
    span[id^="toc"] {
        padding-top: 1.7em;
    }
    /* 関連記事スニペット */
    .rect-mini-card .related-entry-card-title {
        font: 700 1.1em/1.4 "M PLUS Rounded 1c";
    }
}

481~600px

ソースコードを開く
@media screen and (min-width: 481px) and (max-width: 600px){
    .header div.header-in {
        min-height: 100px;
    }
    .tagline {
        margin: -5px 0;
    }
    /* カルーセル */
    .carousel-entry-card-title {
        font-size: 1em;
    }
    .mobile-menu-buttons {
        opacity: 0.9;
        width: 100%;
        font-family: "Raleway", sans-serif;
    }
    .blogcard-snipet {
        font-size: 12px;
    }
    .mobile-menu-buttons .menu-caption {
        font-family: "Raleway", sans-serif;
    }
    .sidebar .sns-follow-buttons a {
        width: 45px;
    }
    div.gsc-control-searchbox-only,
    .gsc-control-searchbox-only-ja {
        margin: 50px 0 0;
    }
    /* ビデオコンテナ */
    .video-container {
        width: 100%;
    }
    .video-container .video {
        margin: 30px 0 0 0;
    }
    /***** cocoon 目次スタイル *****/
    .toc {
        margin: 0 auto 15px;
    }
    span[id^="toc"] {
        padding-top: 1.7em;
    }
    /***** ブログカード *****/
    .ib-right .blogcard-content,
    .eb-right .blogcard-content {
        margin-top: 5px;
    }
    /* アプリーチ */
    .appreach {
        margin: 25px 0 0 0;
    }
    .appreach__detail {
        width: auto;
    }
    /* 関連記事スニペット */
    .rect-mini-card .related-entry-card-title {
        font: 700 1.1em/1.3 "M PLUS Rounded 1c";
    }
}

480px以下

ソースコードを開く
@media screen and (max-width: 480px){
    .header div.header-in {
        min-height: 100px;
    }
    .tagline {
        margin: -8px 0;
    }
    /* カルーセル */
    .carousel-entry-card-title {
        font-size: 1em;
    }
    .mobile-menu-buttons {
        opacity: 0.9;
        width: 100%;
        font-family: "Raleway", sans-serif;
    }
    /* リードタイム */
    .read-time {
        font: 400 0.9em/2em "M PLUS Rounded 1c";
    }
    .blogcard-snipet {
        font-size: 12px;
    }
    .mobile-menu-buttons .menu-caption {
        font-family: "Raleway", sans-serif;
    }
    .sidebar .sns-follow-buttons a {
        width: 45px;
    }
    div.gsc-control-searchbox-only,
    .gsc-control-searchbox-only-ja {
        margin: 50px 0 0;
    }
    /* インデックスカード */
    .e-card-title {
        font: 700 15px/1.1 "M PLUS Rounded 1c";
    }
    /* 入力欄パディング */
    input#author, input#email,
    input#siteguard_captcha {
        height: 30px;
        padding: 5px;
    }
    textarea#comment {
        width: 100%;
        min-height: 200px;
        padding: 5px;
    }
    #respond.comment-respond {
        width: 100%;
    }
    /* ビデオコンテナ */
    .video-container {
        width: 100%;
    }
    .video-container .video {
        margin: 30px 0 0 0;
    }
    /* cocoon amazon affi */
    .item-price {
        font-size: 14px;
    }
    .product-item-content {
        text-align: left!important;
    }
    .product-item-snippet {
        padding-left: 25%;
        text-align: left;
    }
    /* profile */
    h2, h3 {
        font: 1.2rem "Raleway", sans-serif;
    }
    /***** cocoon 目次スタイル *****/
    .toc {
        margin: 0 auto 15px;
    }
    span[id^="toc"] {
        padding-top: 1.7em;
    }
    /***** ブログカード *****/
    .ib-right .blogcard-content,
    .eb-right .blogcard-content {
        margin-top: 5px;
    }
    /* アプリーチ */
    .appreach {
        margin: 25px 0 0 0;
    }
    .appreach__detail {
        width: auto;
    }
    /* 関連記事スニペット */
    .rect-mini-card .related-entry-card-title {
        font: 700 1.1em/1.3 "M PLUS Rounded 1c";
    }
}

スタイルはこんな感じです
どんな風に表示されるかはモバイルまたはデベロッパーツールで確認してみてくださいね

フッターメニュー

ウィジェット部分のスタイル

/* フッターメニュー */
@media screen and (min-width: 951px) and (max-width: 1280px){
    .footer-widgets {
        display: flex;
    }
}

モバイル(スマホ)ではプロフィール画面だけを表示させている部分を
特定のサイズ以上の時にPC同様な表示にさせるためのコード

メニュー表示をトップへ移動する

今はデフォルトの表示で問題ないですが、以前はフリーサーバを使っていて
ボトムに広告が入っていた為メニューをトップへ表示させていました

.mobile-menu-buttons {
    top: 0;
    opacity: 0.9;
}

bottom: 0;を上記のように変更することでトップへ表示させる事が出来ます
opacity: ◯◯;は透過処理です

その他

ここからは当サイトではやっていませんが、背景色などを変更するためのコードです

メニューの背景色の変更

.mobile-menu-buttons {
    background-color: お好みで;
}

メニュー表示の幅変更

#navi-menu-content {
    max-width: お好みで;
}

サイドバー表示幅の変更

#sidebar-menu-content {
    max-width: お好みで;
}

mobile-menu-buttons.php

ボタンの並び変更、表記を英語へ変更しています

子テーマ内にtmpディレクトリを作成しそこへアップロード

おわり

調整っていう感じでカスタマイズと言えるような事はほぼしてませんねw
大した変更はしていませんが、どなたかの参考になれば幸いです

[share]

タイトルとURLをコピーしました