Cocoonでは設定ページに置いてメインコンテンツに関する余白を調整することはできる（カラム設定ページ）が、パンくずリストの余白についてはCSSを編集しなければなりません。
CSS構造のメモ。外観>テーマエディタにおいて編集する。
パンくずリスト
パンくずリストのクラス名は、.breadcrumb.sbp-main-before
正確な構造は container > .breadcrumb.sbp-main-before となる。初期設定では以下のようになっている。
margin:12px auto 0px; padding:0.6em 1em;
パンくずリストを上に詰めたい場合は、margin-topを変更すればよい。
対して、パンくずリストの下を詰める場合は、パンくずリストではなく、
content側で調整を行う。
content側についても以下のようにとなっている。
クラス名は .breadcrumb.sbp-main-before+.content
margin-top:12px;
余白を5pxに指定する
例えば、間隔を5pxとしたい場合は、以下のようにすればよい。
.breadcrumb.sbp-main-before{
margin-top:5px;
/*パンくずリストの文字について編集したい場合は、ここに書く*/
}
.readcrumb.sbp-main-before+.content{
margin-top:5px;
}
余白のみであれば、次のように書いてもよい。
.breadcrumb.sbp-main-before, .breadcrumb.sbp-main-before+.content{
margin:5px auto;
}