当ブログでは、Cocoonを初期状態からカスタマイズする方法(コピペ可)をまとめています。
WordPressのCocoonテーマで、メインカラムをカスタマイズする方法を紹介します。
メインカラムの幅や角の丸みを調整することで、サイトを個性的にカスタマイズしましょう。
メインカラムとは?
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/maincolumn-1.png)
メインカラムとは、記事の本文が表示される最も大きな表示部分です。
カスタマイズのCSSを追加する場所
カスタマイズでCSSコードを使用するときは、以下の場所にコードをコピペしてください。
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/Icon-Clownfish.png)
数値などは自由に変えてみてね!
【外観】→【カスタマイズ】→【追加CSS】に以下のコードを記述する。
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/add-css.png)
メインカラムの幅を変える
メインカラムの幅は、以下の方法で変えることができます。
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/maincolumn-6-1024x441.png)
【Cocoon設定】→【Cocoon設定】→【カラム】
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/maincolumn-7-1024x441.png)
【メインカラム設定】の【コンテンツ幅】で数値を変更します。
コンテンツ幅、コンテンツ枠線幅、コンテンツ枠線色の変更部分は以下になります。
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/maincolumn-10.png)
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/maincolumn-9.png)
メインカラムとサイドバーの間の幅を変える
メインカラムとサイドバーの間の幅を変える方法は以下の通りです。
【Cocoon設定】→【Cocoon設定】→【カラム】→【カラム間余白設定】の【カラム間の幅】の数値を変更します。
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/maincolumn-8.png)
数値を0にすれば、メインカラムとサイドバーがぴったりくっつきます。
メインカラムの角を丸くする
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/maincolumn-2.png)
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/maincolumn-5.png)
メインカラムの背景色を変えるコードは以下の通りです。
/* メインカラムの角を丸くする */
#main{
border-radius: 20px; /* 数値を変えたら丸みが変わる */
}
サイドバーの角を丸くする
![画像に alt 属性が指定されていません。ファイル名: maincolumn-3.png](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/image.png)
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/maincolumn-4.png)
サイドバーの角を丸くするコードは以下の通りです。
/* サイドバーの角を丸くする */
#sidebar{
border-radius: 20px; /* 数値を変えたら丸みが変わる */
}
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/Icon-Clownfish.png)
メインカラムとサイドバーのどちらも角を丸くするときは、下のコードのようにまとめることができるよ!
/* メインカラムとサイドバー角を丸くする */
#main ,#sidebar{
border-radius: 20px;
}
メインカラムの背景色を変える
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/maincolumn-11.png)
メインカラムの背景色を変えるコードは以下の通りです。
/* メインカラムの背景色を変える */
#main{
background-color: #○○○;
}
メインカラムの背景色を透明にする
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/maincolumn-12.png)
メインカラムの背景色を透明にする方法は、Cocoonフォーラムに解決策がありました。
背景色を透明にすると、メインカラム部分も背景画像を見せることができます。
/* メインカラムの背景色を透明にする */
#main{
background: transparent;
}
まとめ:メインカラムだけでも色々なカスタマイズが可能!
メインカラムだけでも色々なカスタマイズが可能です。
思った通りのブログになるようにカスタマイズしてみましょう。