cocoon カスタマイズ ヘッダーロゴが二重表示

WordPress構築

こんにちは、あきらです。
2月下旬にこのブログを立ち上げたのですが、今回はcocoonを使ってみようと思いダウンロード。がしかし、モバイル表示にするとなぜがヘッダー部分が様子がおかしく直すまでに結構苦労したのでそのことを備忘録として記載しときます。

いやぁ~直ってよかった

cocoon:モバイルヘッダーが二重になる

私は最初こんな感じの見た目にしたかったんです。

モバイルは画面が小さいので、ヘッダーの部分はシンプルにロゴだけがベストかなと。
それがなぜだかこんな風にずーっとなってたんです。

ロゴがなんでか2重( ゚Д゚)!そしてやけに邪魔なこの黄色い箇所。
2日間ほど色々と検索してやっと求めていたシンプルな見た目になったんですよね。

気づいて直した箇所は2か所のみなんで画像でやり方をを記載しときます!ついでにモバイルタブのやったカスタマイズも書いておくね。

Cocoon:修正した箇所は2か所のみ!

まずは【cocoon設定】【モバイル】タブを選択。

そして【モバイル設定】のモバイルボタン。サイトヘッダーロゴを表示するのチェックを外します。

そうすると、黄色の箇所に出ていたロゴが消えます。

Cocoon:変な余白はこの箇所で解消!

そしていらない黄色のスペースの余白部分ですが、【cocoon設定】の【ヘッダー】のタブを選択。

【ヘッダー】タブの中にある、高さ(モバイル)の値を0にします。

そうすると最初のシンプルなヘッダーになります(^-^)

Cocoonのモバイル表示 ヘッダーの設定

まず私は【ホワイトラーメン】というスキンを使用してます。
(スキンは【cocoon設定】のスキンのタブから選択して下さい)

【cocoon設定】のモバイルタブを選択します。

モバイル設定
モバイルメニュー
ヘッダーモバイルボタン
モバイルボタン時コンテンツ下のサイドバー表示

そうするとヘッダー部分が二重にならず、スッキリとしたヘッダーの見た目に。

 

あとがき

2日間くらい変な余白をどうやっても消すことができなくて、調べるのに苦労しました
cocoonフォーラムでもまったく同じ現象の質問があったのですが、肝心のどうやって解決したのかが記載されてなかったんです。

ワードプレスは自由度が高い分、こういった問題が多々起きるのでその時は今回の様に記事として残しておこうと思います。

ワードプレスのカスタマイズ、これからも楽しんでいきましょう♪

 

コメント

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