こんにちは、ikuzo(いくぞう)です。
今回は、Cocoonのグローバルナビメニューやサイトの幅を調整する方法を説明します。
Cocoonのグローバルナビメニューは自分で作らないと表示されません。
グローバルナビメニューの作り方についてはこちらの記事をご覧ください。
ヘッダー＆グローバルナビメニューとサイト幅を揃える方法
デフォルトのグローバルナビメニューは、このように画面いっぱいに広がっています。
ヘッダーおよびグローバルナビメニューの幅とサイト幅を揃えるには「Cocoon設定」の「全体」タブで設定します。
サイト幅の均一化の「サイト幅を揃える」に チェックを入れます。
「変更をまとめて保存」を押します。
これでヘッダーおよびグローバルナビメニューの幅とサイト幅が同じになりました（グローバルナビメニューの幅だけを変える方法は後ほど紹介します）。
Cocoonでサイト全体の幅を調整する方法
=コンテンツ、サイドバーの余白
サイト全体の幅も、コンテンツ幅やサイドバー幅などを変更することにより調整可能です。
こちらは「Cocoon設定」の「カラム」タブで変更します。
コンテンツ幅の調整方法
コンテンツ幅は、600pxから1600pxの間の任意の値で設定できます。
コンテンツ幅の下にあるコンテンツ余白幅というのは、コンテンツの左右にある余白の幅です。
サイドバー幅の調整方法
サイドバー幅も200pxから500pxの間で調整可能です。
カラム間の幅の調整方法
コンテンツとサイドバーの中間にある隙間は、カラム間といいます。
カラム間の幅も0から60pxの間で調整可能です。
いずれも数値を変更したら「変更をまとめて保存」を忘れずに押してください。
サイト全体幅の調整方法
上の3つの幅を調整することによって「サイト全体の幅」が決まります。
つまり「コンテンツ幅+（コンテンツ余白幅×2）」と「カラム間の幅」と「サイドバー幅+（サイドバー余白幅×2）」を足したものが「サイト全体の幅」になります。
Cocoonでグローバルナビメニューの幅だけを調整する方法
最後はサイトの幅に関係なく、グローバルナビメニューの幅だけを調整する方法を紹介します（ヘッダーの幅は変わりません）。
「Cocoon設定」の「全体」タブにある「サイト幅の均一化」の「サイト幅を揃える」のチェックは外しておきます。
「外観」→「テーマファイルエディター」を押します。
すると「スタイルシート」というものが出てきます。テーマは「Cocoon Child」を選択します。
そのスタイルシートへ、次のCSSをコピーして貼り付けます。
.navi, .navi-in{
width: 1256px;
margin: 0 auto
}
貼り付けたら下にある「ファイルを更新」を押します。
「1256px」という数値は、Cocoonのサイト全体幅のデフォルトです。
このCSSによってサイト全体の幅とグローバルナビメニューの幅が同じになります（ヘッダーの幅は変わりません）。
このコードを使えばCocoonのグローバルナビメニューだけを任意の幅に調整可能です。
最後に
いかがだったでしょうか。
私が多少でもCSSが使えるようになったのは、サルワカさんのサイトのおかげなんです。
サルワカさんのサイトはCSSやHTML初心者でも理解しやすように解説されています。
これからCSSやHTMLを勉強しようと思われている方は、ぜひ覗いてみてください。
コメント