【cocoon】モバイルのトップボタンをヘッダーにいれる方法

mobileWordPress

WordPressの無料テーマであるcocoonにはモバイルでトップボタンを表示させることができますが、デフォルトではトップボタンがヘッダーの上に表示されるためCSSだけでトップボタンをヘッダー内に表示させる方法を紹介します。

スポンサーリンク

トップボタンをヘッダー内に表示させる方法

デフォルトのトップボタンは上の写真のようにヘッダーと別に分かれてるためCSSをいじって下の写真のようにします。

早速ですがcocoonの子テーマ内のstyle.cssに以下コードを追加します。

その他トップボタンのカスタマイズ

上のコードでトップボタンがヘッダー内に置かれたと思います。その他トップボタンのカスタマイズをいくつか下に紹介するので自分好みのトップボタンを作ってみてください!

アイコンの大きさを変える

アイコンの色を変更

サブカテゴリー選択時の背景色