COCOONブログの横幅を変更する方法を解説します|←とても簡単

Cocoon

こんにちは、ryusukeです。

今日はこんな疑問に答えます。↓

COCOONで作ったブログの幅を変更する方法が知りたい。

リュウスケ
リュウスケ

COCOONで作ったブログの幅の変更はすぐにできるので、

やり方を紹介します。

今日はWordPressテーマCOCOONで作ったブログの横幅を変更する方法を解説していきます。

画像付きだと分かりやすいかな?
下の画像の紫の矢印の部分とサイドバーの部分の横幅を変更する方法です。↓

 

この記事では本文が表示される部分&サイドバーの幅を操作する方法の解説、余白の調整の、
やり方を書いていきます。

リュウスケ
リュウスケ

結論から言うと、これらの設定は5分ぐらいでとてもカンタンにできますよ!

1:COCOONブログの横幅を変更する方法

では、早速COCOONブログの横幅を変える方法を解説していきます。

ブログの横幅を変えるには、まずWordPressのサイドバーにある[Cocoon設定]をクリックして
COCOONの管理画面に移動してください。

 

COCOONの管理画面に移動したらこんな感じの画面に映るので、次に赤矢印の[カラム]を
クリックしてください。

 

[カラム]をクリックしたらブログの本文の部分の横幅とサイドバー(ウィジェット)部分の
横幅などを調整する画面に移動します。

画像だとこんな感じ↓

 

この画面が表示された後スクロールを進めていくと、まずは本文が表示される部分の横幅の
設定が表示されます。

画像だとこんな感じ↓

 

本文が表示される部分の横幅の設定は[コンテンツ幅]と書かれている部分のボックスの中の
数字を自分好みの横幅サイズに変更することで行います。

確かデフォルトでは800pxぐらいに設定されていると思いますが、ボクはもっと短いほうが
良いと思ったので700pxに変更しました。

まあ、この辺は好き好みで1px単位で調整できるので自分の好きな幅に調整するのが良いかと。

 

あと、本題とは少しズレますが上から2番目の[コンテンツ余白幅]を調整することで、
文章と本文が表示されるスペースの幅の調整が可能です。

ボクはデフォルトの設定から変更してないですが、一応念のため、、。

 

それ+これもボクは変更してませんがコンテンツの枠線の幅と幅の色を指定することも
可能でして、枠線を替える場合は[コンテンツ枠線幅]の中のpxの数字を変えることで、幅の色を
変える場合は[コンテンツ枠線色]のカラーコードを替えれば好みの色にすることができます。

 

以上が本文の部分の設定です。こんな感じで、本文の部分だけ調整する場合はスクロールを
進めて一番最後にある[設定を保存]をクリックして変更の設定を完了すればOKです。

 

リュウスケ
リュウスケ

本文が表示される部分の横幅の変更はこれで完了です!
割とカンタンじゃないですかね、、?

ただ、サイドバーの幅もあわせて変えたいなら、少し下にあるサイドバーの幅の設定の画面
行って変更します。(下の画像参照↓)

 

ボクはサイドバーの幅はデフォルトのまま変更しないで使っていますが、デフォルトの横幅から
変更したいなら、本文の幅を変更した時と同じように[サイドバー幅]のボックスの中の数字を
自分好みの数字に設定してください。

 

なお、サイドバーも本文が表示される部分と同じように、コンテンツが表示される部分の余白の
設定を[サイドバー余白幅]の部分でできるので、余白を変えたいならさっきと同じように中の
数字を変えれば変更ができます。

 

あと、これも本文の部分と同じく枠線の幅と色の変更もそれぞれ[サイドバー枠線幅]で枠線の
幅の中の数字を、[サイドバー枠線色]で枠線の色のカラーコードを入力すると変更が可能です。

サイドバーの設定はこんな感じです。

リュウスケ
リュウスケ

基本的には本文の部分の幅を調整する際と同じです!

最後にカラムの幅の設定のやり方です。

なお「カラムの幅の設定は必要ない」という人は一番下にある[変更をまとめて保存]を
クリックして保存すれば設定は完了です。

で、カラムの幅の設定はブログの本文の部分とサイドバーの部分の余白のことで、その間の
幅の調整を行うことができます。

ボクはデフォルトの20pxのままで変更せずに使っていますが、もし変更したいなら
[カラム間の幅]の中の数字を0px~60pxの間で変更できるので、その中で好きな数字を
入れればOKです。

 

変更したら、一番下の[変更をまとめて保存]をクリックすることで横幅の変更は完了です。

その後ブログにアクセスして横幅が変わっていれば問題なく変更ができてますよ。

リュウスケ
リュウスケ

お疲れさまでした!

ブログの横幅の変更はこんな感じで割と簡単にです。

この記事がブログの横幅を変更したかった人の参考になったら嬉しいです。

おわり。

タイトルとURLをコピーしました