こんにちは、あきらです。
２月下旬にこのブログを立ち上げたのですが、今回はcocoonを使ってみようと思いダウンロード。がしかし、モバイル表示にするとなぜがヘッダー部分が様子がおかしく直すまでに結構苦労したのでそのことを備忘録として記載しときます。
いやぁ～直ってよかった
cocoon：モバイルヘッダーが二重になる
私は最初こんな感じの見た目にしたかったんです。
モバイルは画面が小さいので、ヘッダーの部分はシンプルにロゴだけがベストかなと。
それがなぜだかこんな風にずーっとなってたんです。
ロゴがなんでか２重( ﾟДﾟ)！そしてやけに邪魔なこの黄色い箇所。
２日間ほど色々と検索してやっと求めていたシンプルな見た目になったんですよね。
気づいて直した箇所は２か所のみなんで画像でやり方をを記載しときます！ついでにモバイルタブのやったカスタマイズも書いておくね。
Cocoon：修正した箇所は２か所のみ！
まずは【cocoon設定】の【モバイル】タブを選択。
そして【モバイル設定】のモバイルボタン。サイトヘッダーロゴを表示するのチェックを外します。
そうすると、黄色の箇所に出ていたロゴが消えます。
Cocoon：変な余白はこの箇所で解消！
そしていらない黄色のスペースの余白部分ですが、【cocoon設定】の【ヘッダー】のタブを選択。
【ヘッダー】タブの中にある、高さ（モバイル）の値を０にします。
そうすると最初のシンプルなヘッダーになります(^-^)
Cocoonのモバイル表示 ヘッダーの設定
まず私は【ホワイトラーメン】というスキンを使用してます。
（スキンは【cocoon設定】のスキンのタブから選択して下さい）
【cocoon設定】のモバイルタブを選択します。
モバイルメニュー
ヘッダーモバイルボタン
モバイルボタン時コンテンツ下のサイドバー表示
そうするとヘッダー部分が二重にならず、スッキリとしたヘッダーの見た目に。
あとがき
２日間くらい変な余白をどうやっても消すことができなくて、調べるのに苦労しました
cocoonフォーラムでもまったく同じ現象の質問があったのですが、肝心のどうやって解決したのかが記載されてなかったんです。
ワードプレスは自由度が高い分、こういった問題が多々起きるのでその時は今回の様に記事として残しておこうと思います。
ワードプレスのカスタマイズ、これからも楽しんでいきましょう♪
コメント