サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2019年8月27日 22:16
いつもお世話になっています。
自分のブログでは、1021～1023pxあたりまで表示画面を狭めると、サイドバーが消え、メインカラムのみの表示になります。
対してこちらのcocoonサイトの場合、表示画面を狭めるとメインカラム、サイドバーの幅もあわせて縮んでいき、920pxになるとメインカラムのみの表示になります。
1020px台でメインカラムのみの表示となってしまうと記事が横に伸びて読みにくくなるので、cocoonサイトと同じように画面サイズに合わせてメインカラム・サイドバー幅も縮んでいくようにしたいのですが、どのようにすればよいでしょうか？
よろしくお願いします。
2019年8月28日 19:25
現在メインカラムをデフォルトのものより狭めているようですけど、どのようにカスタマイズされたのでしょうか？
トピックスターター 2019年8月28日 22:00
cocoon設定＞カラム
の場所のことでよろしいでしょうか？
＞メインカラム設定
メインカラム設定:656px
コンテンツ余白幅:20px
コンテンツ枠幅:0px
＞サイドバー設定
サイドバー幅:286px
サイドバー余白幅：7px
サイドバー枠線幅:0px
＞カラム間余白設定
カラム間の幅:15px
とそれぞれ設定しております。
また、記事ページ以外のメインカラムとサイドバー間を狭めたいため、子テーマのスタイルシートに、
/**メインとサイドバーの間**/
@media screen and (min-width: 1020px) {
.category #main,
.home #main,
.tag #main,
.archive #main
{
padding-right:0px;}}
と記述しています。
2019年8月29日 07:29
Cocoonと同じ設定にすれば良いかと思いますけど、それではダメですか？
1020px台でメインカラムのみの表示となってしまうと記事が横に伸びて読みにくくなるので、cocoonサイトと同じように画面サイズに合わせてメインカラム・サイドバー幅も縮んでいくようにしたいのですが、どのようにすればよいでしょうか？
＞メインカラム設定
メインカラム設定:656px
コンテンツ余白幅:20px
コンテンツ枠幅:0px＞サイドバー設定
サイドバー幅:286px
サイドバー余白幅：7px
サイドバー枠線幅:0px＞カラム間余白設定
カラム間の幅:15px
余白などの数値を小さ目に変更してみるのもアリかもです。おそらく。
2019年8月29日 20:51
実際に試してはないですが、以下のような感じで元のCSSを打ち消すコードを書くしかないかも。
@media screen and (max-width: 1023px){
.content-in{
display: flex;
}
main.main,
div.sidebar{
margin: 0.5%;
}
main.main{
width: 67%;
}
div.sidebar{
display: block;
width: 30%;
}
}
@media screen and (max-width: 設定したい幅px){
.content-in{
display: block;
}
main.main,
div.sidebar{
margin: 10px;
width: auto;
}
div.sidebar{
display: none;
}
}
トピックスターター 2019年8月30日 00:32
＞かうたっくさん
ありがとうございます。
確かにcocoonと同じ設定にすればクリアになるかもしれませんが、今の大きさのほうが内容的にバランスが良いと感じるので質問させていただきました。
余白幅もいろいろ試してみたいと思います。
>わいひらさん
ありがとうございます。
@media screen and (max-width: 1023px){
.content-in{
display: flex;
}
main.main,
div.sidebar{
margin: 0.5%;
}
main.main{
width: 67%;
}
div.sidebar{
display: block;
width: 30%;
}
}
とりあえずこちらのほうをコピペさせていただいたところ、メインカラムは縮んでいく理想の形になりました。ですが、サイドバーは相変わらず1023pxあたりで消えてしまうようで、画像のような状態になってしましまいました。
ん～、自分では原因が分からないのが情けない。
もしかしたら元々の不具合「表示画面の大きさが1023pxになったとき、メインカラムが全体表示?になってしまう」は、サイドバーが消えるためかもしれません。
その原因としては、サイドバーのカスタマイズにあるのか否か...
いろいろ試してみてまたご報告させていただきます。
2019年8月30日 01:24
こんな感じになってしまってるのは見落としてました。
前私が見たとき、大画面でカラム落ちしてない状態で1カラムになってた記憶があります。←これ見落とし。
Cocoon設定で幅だけでなく余白も調整すれば、カラム落ちはしないので、子テーマの該当styleを削除して、Cocoon設定で行ってみるのが良いと思います！
この投稿は5年前ずつかうたっくに変更されました
2019年8月30日 18:27
とりあえずこちらのほうをコピペさせていただいたところ、
どっちかだけだと多分だめだと思いますよ。しっかりと両方書いて「設定したい幅」の部分を変更しないと。
@media screen and (max-width: 1023px){
.content-in{
display: flex;
}
main.main,
div.sidebar{
margin: 0.5%;
}
main.main{
width: 67%;
}
#content #sidebar{
display: block;
width: 30%;
}
}
@media screen and (max-width: 設定したい幅px){
.content-in{
display: block;
}
main.main,
div.sidebar{
margin: 10px;
width: auto;
}
#content #sidebar{
display: none;
}
}
サイドバーが消えることについては、CSSセレクタの優先度があっていませんでした。
これもうまくいかは、分からないけど試してみていただければ。
トピックスターター 2019年8月30日 21:32
>かうたっくさん
伝わりづらくてすみません。
わいひらさんに教えていただいた最初のcssコピペ後の状態が画像のようになっていた、ということです。
コピペ前、つまり最初に見ていただいた状態はかうたっくさんの言う通りで間違いないです。
＞わいひらさん
ありがとうございます。
両方を書いて希望通りの形となりました。微調整や全体のバランス調整をして理想の形にしたいと思います。
わいひら reacted
2019年8月31日 07:06
子テーマのstyleは関係ない状態でカラム落ちしてたんですかね？？
どちらにしても上手くいったようで良かったですね＾＾
トピックスターター 2019年8月31日 08:37
>かうたっくさん
いえ、関係ある状態で落ちていました。子テーマを何もいじらなければ落ちることはなかったです。
ありがとうございます！
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。