【Cocoon】メインカラムの幅や丸みを設定・カスタマイズしよう

ヒビラボでは、Cocoonをカスタマイズする方法やCSSコード（コピペ可）をまとめています。

WordPressのCocoonテーマで、メインカラムをカスタマイズする方法を紹介します。

メインカラムの幅や角の丸みを調整することで、サイトを個性的にカスタマイズしましょう。

この記事でわかること

メインカラムとは？

メインカラムとは、記事の本文が表示される最も大きな表示部分です。

カスタマイズでCSSコードを使用するときは、以下の場所にコードをコピペしてください。

数値などは自由に変えてみてね！

CSSを追加する場所

【外観】→【カスタマイズ】→【追加CSS】に以下のコードを記述する。

メインカラムの幅は、以下の方法で変えることができます。

【Cocoon設定】→【Cocoon設定】→【カラム】

【メインカラム設定】の【コンテンツ幅】で数値を変更します。

コンテンツ幅、コンテンツ枠線幅、コンテンツ枠線色の変更部分は以下になります。

メインカラムとサイドバーの間の幅を変える方法は以下の通りです。

【Cocoon設定】→【Cocoon設定】→【カラム】→【カラム間余白設定】の【カラム間の幅】の数値を変更します。

数値を0にすれば、メインカラムとサイドバーがぴったりくっつきます。

メインカラムの背景色を変えるコードは以下の通りです。

/* メインカラムの角を丸くする */
#main{
  border-radius: 20px;　/* 数値を変えたら丸みが変わる */
}

サイドバーの角を丸くするコードは以下の通りです。

/* サイドバーの角を丸くする */
#sidebar{
	border-radius: 20px; /* 数値を変えたら丸みが変わる */
}

メインカラムとサイドバーのどちらも角を丸くするときは、下のコードのようにまとめることができるよ！

/* メインカラムとサイドバー角を丸くする */
#main ,#sidebar{
  border-radius: 20px;
}

メインカラムの背景色を変えるコードは以下の通りです。

/* メインカラムの背景色を変える */
#main{
  background-color: #○○○; 
}

メインカラムの背景色を透明にする方法は、Cocoonフォーラムに解決策がありました。

背景色を透明にすると、メインカラム部分も背景画像を見せることができます。

/* メインカラムの背景色を透明にする */
#main{
  background: transparent;
}

メインカラムだけでも色々なカスタマイズが可能です。

思った通りのブログになるようにカスタマイズしてみましょう。