WordPressCocoon

【Cocoon】メニュー/サイドバーのCLOSEボタンのカスタマイズ

アイキャッチ画像 Cocoon
この記事は約3分で読めます。
スポンサーリンク

WordPressテーマ Cocoon

このMASAa.netは、WordPressテーマ Cocoonを使って構築しています。

MASAa.net | WordPressのカスタマイズとPCのある生活を楽しむ情報発信サイト
このMASAa.netは、WordPressテーマのカスタマイズ、自作PC、ソフトウェア、ハードウェア、Windows、パソコンなどのあらゆるPC関連に関する情報を掲載しています。

今回は、WordPressテーマ Cocoonでの「メニュー/サイドバーのCLOSEボタン」のカスタマイズについてまとめてみました。

WordPressテーマ Cocoon メニュー/サイドバーのCLOSEボタン

スマートフォンなどの横幅が狭い画面でサイドバーが表示されていない場合、メニュー/サイドバー表示ボタンを押してメニュー/サイドバーを表示させます。

この場合WordPressテーマ Cocoonでは、メニュー/サイドバーを下にスクロールした際にCLOSEボタンが隠れてしまってクリックすることができません。

その理由としては、メニュー/サイドバーのCLOSEボタンが先頭に固定されているためによるものです。

現在のWordPressテーマ Cocoonでのメニュー/サイドバーを表示したときのスタイルは、次の様になっています。

メニュー(スマートフォンでの表示)

【Cocoon】メニュー/サイドバーのCLOSEボタンのカスタマイズ

サイドバー(スマートフォンでの表示)

【Cocoon】メニュー/サイドバーのCLOSEボタンのカスタマイズ

メニューについてはほとんどの場合長さが短いので問題無いでしょう。

サイドバーの場合は下にスクロールすると、このようにCLOSEボタンが表示されなくなります。

【Cocoon】メニュー/サイドバーのCLOSEボタンのカスタマイズ

今回、メニュー/サイドバーのCLOSEボタンが常に表示されるように「メニュー/サイドバーのCLOSEボタン」のカスタマイズについてまとめてみました。

メニュー/サイドバーのCLOSEボタンのカスタマイズ

WordPressテーマ Cocoonでの「メニュー/サイドバーのCLOSEボタン」のカスタマイズを行います。

カスタマイズ内容

「メニュー/サイドバーのCLOSEボタン」のカスタマイズの内容は下記の通りです。

「スタイルシート(style.css)」を開き、今回のカスタマイズ内容を追記します。

/************************************
** ■メニュー/サイドバーのCLOSEボタンのカスタマイズ(常時表示対応)
************************************/
.menu-close-button { /*サイドバー*/
  overflow: visible!important; /*ボックス範囲内指定*/
  position: sticky!important; /*スクロール追従*/
  z-index: 99999!important; /*最前面に指定*/
  top: 20px; /*表示位置*/
  background: rgba(255,238,247,0.8); /*背景色*/
  width: 91%; /*横幅*/
  transform: scale(1.2); /*拡大表示*/
}
.menu-content .menu-drawer { /*メニュー*/
  padding:30px 1em 30px; /*上マージン調整*/
}
.menu-content .fas.fa-times { /*×アイコン*/
  padding-left: 30px; /*左側間隔調整*/
}

カスタマイズ後のメニュー/サイドバーのCLOSEボタン

今回のカスタマイズによって、「メニュー/サイドバーのCLOSEボタン」のスタイルは次の様になりました。

メニュー(スマートフォンでの表示)

【Cocoon】メニュー/サイドバーのCLOSEボタンのカスタマイズ

サイドバー(スマートフォンでの表示)

【Cocoon】メニュー/サイドバーのCLOSEボタンのカスタマイズ

サイドバーを一番下にスクロールしてもCLOSEボタンが常時表示されるスタイルとなりました。

【Cocoon】メニュー/サイドバーのCLOSEボタンのカスタマイズ

今回のカスタマイズでは、メニュー/サイドバーをスクロールしてもCLOSEボタンを追従して常に表示するようにしました。

CLOSEボタンは邪魔にならず、且つ分かりやすいデザインを採用しました。

最後に

PCやタブレットを横にして見る場合には常にサイドバーが表示されているので、今回のカスタマイズの効果は特に無いでしょう。

今回のカスタマイズはスマートフォンなどのサイドバーが表示されない端末に対して有効です。

MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

……… THE THOR(ザ・トール)購入について ………
下記バナーからTHE THOR(ザ・トール)をご購入の方には、
当掲載のカスタマイズについて優先的にサポートさせて頂きます。

下記バナー経由でTHE THOR(ザ・トール)を購入した日付と時刻
を合わせてお問い合わせフォームからご連絡下さい。



気軽にプレイできるPC向けウェブブラウザ対応ゲーム!
邪神ちゃんドロップキック
精霊幻想記アナザーテイル
空島クロニクル
ラストラグナロク
ビビッドアーミー
城姫クエスト 極
下記バナーからスマホゲームのインストールお願いします!
パズルガールズ
イース6オンライン
幻獣レジェンド -百妖志-
リネージュ2M
ドラゴンとガールズ交響曲
魔剣伝説
パズにゃん
龍が如くONLINE
ロードモバイル

おすすめWordPressテーマ!
WordPressテーマ WING(AFFINGER6)
WordPressテーマ THE THOR(ザ・トール)
WordPressテーマ Diver

MASAa.net

コメント