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

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

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

Cocoonの設定

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

style.css

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

Sponsor Link

1025~1280px

ソースコードを開く
@media screen and (min-width: 1025px) and (max-width: 1280px){
    /***** cocoon 目次スタイル *****/
    span[id^="toc"] {
        padding-top: 1.7em;
    }
    /* ad link */
    .my_ad_banner {
        display: block;
        padding: 0;
    }
}

961~1024px

ソースコードを開く
@media screen and (min-width: 961px) and (max-width: 1024px){
    .no-mobile-sidebar #sidebar {
        display: none;
    }
    main.main {
        width: auto;
    }
    /***** モバイルメニュー *****/
    .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;
    }
}

601~960px

ソースコードを開く
@media screen and (min-width: 601px) and (max-width: 960px){
    .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;
    }
    /* カスタムフッター非表示 */
    .ft-column-wrap.column-3 {
        display: none;
    }
}

481~600px

ソースコードを開く
@media screen and (min-width: 481px) and (max-width: 600px){
    .header div.header-in {
        min-height: 100px;
    }
    .tagline {
        margin: -5px 0;
    }
    .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;
    }
    / カスタムフッター非表示 */
    .ft-column-wrap.column-3 {
        display: none;
    }
    /***** cocoon 目次スタイル *****/
    .toc {
        margin: 0 auto 15px;
    }
    span[id^="toc"] {
        padding-top: 1.7em;
    }
}

480px以下

ソースコードを開く
@media screen and (max-width: 480px){
    .header div.header-in {
        min-height: 100px;
    }
    .tagline {
        margin: -8px 0;
    }
    .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;
    }
    /* 入力欄パディング /
    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;
    }
    / カスタムフッター非表示 */
    .ft-column-wrap.column-3 {
        display: none;
    }
    /***** cocoon 目次スタイル *****/
    .toc {
        margin: 0 auto 15px;
    }
    span[id^="toc"] {
        padding-top: 1.7em;
    }
}

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

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

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

.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をコピーしました