【Cocoon】グローバルナビメニューやサイトの幅を調整・変更する

メニューサイト幅調整 ブログ

こんにちは、ikuzo(いくぞう)です。

今回はグローバルナビメニューやサイトの幅の調整方法です。

…と偉そうに言ってますが私自身、WordPressもCocoonも超初心者です。

※この記事を作成しているのは2019年7月です。早く初心者を抜け出せるよう、がんばります。

 

日夜、先輩方のサイトを参考にしたり、自分でも試行錯誤しながらブログ作りに励んでおります。

いわば、自分が忘れないための備忘録とでもいいましょうか…

それと私が悩んだことを、これからCocoonでブログを始める方の少しでもお役に立てたら…

そんな気持ちで書いていきたいと思います。

スポンサーリンク

グローバルナビメニューの幅を変更

グローバルナビメニューのデフォルトは、こんな感じです。

グローバルナビメニュー

画面の横幅いっぱいにメニューが広がってますね。

メニュー幅をサイト幅と揃えるには「Cocoon設定」の「全体」タブで変更できます。

Cocoon設定全体タブ

サイト幅の均一化の「サイト幅を揃える」に チェックを入れて下さい。

サイト幅の均一化

一番下の「変更をまとめて保存」を押します。

変更をまとめて保存

これでグローバルナビメニューとサイトの幅が同じになりました。

グローバルナビメニュー

サイト全体の幅を調整する

サイト全体の幅 =コンテンツ、サイドバーの余白部分

サイト全体の幅も調整できます。

こちらは「Cocoon設定」の「カラム」タブで変更が可能です。

Cocoon設定カラムタブ

コンテンツ幅を変更

600pxから1600pxの間の任意の値で設定できます。

コンテンツ幅

コンテンツ余白幅」というのは、コンテンツの左右にある一番端の余白部分のことです。

サイドバー幅を変更

こちらも200pxから500pxの間で設定できます。

サイドバー幅

カラム間の幅を変更

「コンテンツ幅」と「サイドバー幅」の中間にある細い隙間は「カラム間の幅」で調整します。

0から60pxの間で設定できます。

カラム間の幅

いずれも数値を変更したら最後に「変更をまとめて保存」を押してください。

サイト全体の幅

上の3つの幅を調整することにより「サイト全体の幅」が決まります。

すなわち、「コンテンツ幅+(コンテンツ余白×2)」+「カラム間の幅」+「サイドバー幅+(サイドバー余白×2)」=「サイト全体の幅」になるわけです。

試しに「サイドバー幅」と「カラム間の幅」はそのままで、「コンテンツ幅のみ変更してみました。

「コンテンツ幅」が1200px

コンテンツ幅1200px

「コンテンツ幅」が600px

コンテンツ幅600px

600pxだと、メニューが2段になってるのが分かりますね。

「サイト幅の均一化」の「サイト幅を揃える」にチェックを入れた状態でサイト全体の幅が変わると、グローバルメニューの幅も一緒に変わるということです。

グローバルナビメニューを任意の幅に調整する

最後はサイトの幅に関係なく、独自にメニューの幅だけを調整する方法です。

まず、先ほどの「Cocoon設定」の「全体タブ」から、

サイト幅の均一化」の「サイト幅を揃える」のチェックを外します。

サイト幅を揃えない

次に「外観」の「テーマエディター」へと進みます。

テーマエディター

開いたら、次のCSSをコピーして貼り付けて下さい。

.navi, .navi-in{
   width: 1200px;
   margin: 0 auto
}
CSSの変更には、何か不具合が生じた際はすぐに元に戻せるよう、バックアップは必ず取っておきましょう。

CSSファイル貼り付け

“width: 1200px”の「1200」はお好みの値にして下さい。

最後に一番下の「ファイルを更新」を押します。

ファイルを更新

メニュー幅が1200px

メニュー1200px

メニュー幅が600px

メニュー600px

まとめ

いかがだったでしょうか。

「サイト幅を揃える」にチェックを入れているのにメニューの左右が出っ張っていたのが、今回色々と調べてみるきっかけになりました。

(一覧リストのカードの背景とサイトの背景を同色で設定していたので、コンテンツ幅とメニュー幅がずれて見えたのが原因でした。)

「任意の幅の調整方法」はサルワカさんのサイトで勉強させてもらいました。

初心者にも、かなり分かりやすく解説してあるので、とても役に立ってます。

私もまだ始めたばかりですが、これからHTMLとCSSの勉強を始める方にはとても参考になると思うので、ぜひ覗いてみて下さい。

コメント