Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

タブレットでも2カラムのままサイドメニ...
 
共有:
通知
すべてクリア

[解決済] タブレットでも2カラムのままサイドメニューを常に表示させたい

21 投稿
3 ユーザー
11 Reactions
3,631 表示
(@あおこ)
Active Member
結合: 5年前
投稿: 6
Topic starter  

はじめまして、cocoonテーマを使わせていただいております。

 

レスポンシブ適用された際にタブレットでは2カラムのまま表示させたいと思っておりますが

どうにも反映させることができません。

知識不足による質問とは思いますが、どうぞお力を貸していただければと思います。

 

【確認環境】

・iPad Pro 11-inch (1st generation) ディスプレイ:2,388 x 1,668ピクセル

https://support.apple.com/kb/SP784?viewlocale=ja_JP&locale=ja_JP

縦向きに使用しています。

 

・サイト: https://aono-ie.com

 

【試したこと】

Cocoonの2・3カラムをタブレット幅(481~768px)では1カラムにはしないカスタマイズ方法

/*768px以下*/
@media screen and (max-width: 768px){
  .column-wrap{
    flex-direction: row;
  }
}

/*480px以下*/
@media screen and (max-width: 480px){
  .column-wrap{
    flex-direction: column;
  }
}

[解決済] 【スマホ表示】記事内を2カラム・3カラムに分ける方法

@media screen and (max-width:768px){

.column-wrap{
flex-direction: row !important;
}

}

・WP管理画面>cocoon設定>キャッシュ削除

・全プラグイン停止(現在も停止中のまま)

・ブラウザのキャッシュクリア

・変更が反映できないか複数のテーマで確認

 

 

どうぞよろしくお願いします。


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

間違っていたら、ごめんなさい。

「タブレットを縦にした状態でも、サイドバーを表示させたままにしたい」ということでしょうか?


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

だとしたら、あまりオススメはできないかもしれません。

 

おそらく、タブレットを横にすれば、サイドバーは表示されるような気がします。

 

Cocoonの画面幅による表示の変遷は、多くのユーザーのニーズに合わせて、何度も練り直されてきています。

 

サイトを拝見しますと、まだ、コンテンツを実際に入れてみてないような気がします。

 

も少し、実際に書くであろう、コンテンツを入れてみて、数ページ作成してみてからでも、遅くはないです。

 

何か、特別な事情があれば、話は別ですが・・


   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

もう一つの簡単な方法としては、Cocoon設定の「カラム」タブの設定でカラム幅を狭くする、という手もなくはないですが、先ずは、何しろ、実際に、コンテンツを書いて入れてみるのが一番かと思います。

 

コンテンツを入れることによって、表示されていなかった項目なども、表示されるようになってきますので、それらの体裁を確認してから、どうするか考えた方がいいような気がします。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 

Cocoonの場合、見せたいなぁサイドバーではなく、主役の本分なので本文がメインに表示されるような仕様になっています。
提示されたトピックのリンクだと、本文中の2カラム・3カラムのカスタマイズ方法なので、変更はできないかと思います。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 

変更するとしたら、以下のようなCSSを子テーマのstyle.cssに貼り付けることで対応できるのかもしれません。

 @media screen and (max-width: 1023px){
  .no-mobile-sidebar .sidebar {
    display: block;
  }
}

@media screen and (max-width: 599px){
  .no-mobile-sidebar .sidebar {
    display: none;
  }
}

※動作確認していないので、正常動作するかはわかりません。また予期せぬ不具合がある恐れがあります。


   
(@あおこ)
Active Member
結合: 5年前
投稿: 6
Topic starter  

leafytree様、わいひら様、ご回答ありがとうございます。

 

leafytree様のおっしゃるとおり、

「タブレットを縦にした状態でも、サイドバーを表示させたままにしたい」ということです。

本文を読みやすくするために2カラムにしたいと思っています。

 

leafytree様、わいひら様がおっしゃることも重々承知しているのですが

個人的に1カラムだと1画面の中にある情報が少なく、

全文を読み切るのにも多くのスクロールが必要なので読みづらさを感じてしまうのです。

普段からiPadでばかりWEBページをみているので慣れの問題なのかもしれませんが、

2カラムの方が本文を読みやすいです。

https://kurashinista.jp

こちらのようなサイトが理想でした。

 

わいひら様が考えてくださったCSSも試してみましたが

残念ながら反映されませんでした。

考えてくださってありがとうございます。

 

Cocoon Blocksがとても魅力的な機能なので

cocoonを使っていきたいのですが、やはり無理なのでしょうか。。。


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@あおこ さん

なるほど、そういうことですか・・

少し、お待ちください。


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@あおこ さん

ちょっと、酔っ払い運転ですが・・

@media screen and (max-width: 1023px) {
.content-in {
display: flex;
}
#main.main {
display: block;
margin: 0.5%;
width: 67%;
}
div.sidebar {
display: block;
margin: 0.5%;
width: 30%;
}
}

@media screen and (max-width: 834px) {
.content-in {
display: block;
}
#main.main, div.sidebar {
display: block;
margin: 10px 0;
padding: 16px;
width: auto;
}
.no-mobile-sidebar .sidebar {
display: none;
}
}

どこか、間違えてるかもしれません。

実際には、確かめていません。

当たらずとも、遠からず・・


   
わいひら reacted
(@あおこ)
Active Member
結合: 5年前
投稿: 6
Topic starter  

leafytree様、ありがとうございます。

いただいたソースを試してみましたが2カラムにはなりませんでした。

自分でも調べながらなんとか修正できないか模索します。

またご教授いただけるとうれしいです。


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@あおこ さん

適当に書いたCSSのコードですが、極端に間違ってはいないと思います。

 

834pxの方の数値を少しずつ少なくして試してみてください。(1023pxの方はそのまま変えずに。)

 

834pxでは、タブレットを縦に持ったときの横幅より大きいのかもしれません。


   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

例えば、800pxぐらいににしてみるとか・・

iPhone/iPad/Apple Watch解像度(画面サイズ)早見表


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 
@media screen and (max-width: 1023px) {
.content-in {
display: flex;
}
#main.main {
display: block;
margin: 0.5%;
width: 67%;
}
div.sidebar {
display: block;
margin: 0.5%;
width: 30%;
}
}

@media screen and (max-width: 800px) {
.content-in {
display: block;
}
#main.main, div.sidebar {
display: block;
margin: 10px 0;
padding: 16px;
width: auto;
}
.no-mobile-sidebar .sidebar {
display: none;
}
}

800pxにしてみました。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 

https://kurashinista.jp/
こちらのページをiPad Pro(1024×1366)で表示させると、添付画像のように表示されるようですが。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 
投稿者:: @あおこ

iPad Pro 11-inch (1st generation) ディスプレイ:2,388 x 1,668ピクセル

こちらの端末は、なんpxのメディアクエリが使用されているんだろう…。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 

画像サイズは、添付画像のようになっていますね。


   
(@あおこ)
Active Member
結合: 5年前
投稿: 6
Topic starter  

リフィトリー様、わいひら様、ありがとうございます。

 

リフィトリー様の新しいコードを試してみましたが

残念ながら反映されませんでした。

(max-width: 800px)の部分を色々変更してみましたが
横幅を1023pxまで小さくすると1カラムになってしまいました。

Childスタイルシート(style.css)に以下のコードを書いたり消したりして
反映してるかどうかを見ています。
.navi-menu-content {
left: auto;
right: 0;
transform: translateX(105%);
}

 

 

わいひら様、画面のウィンドウサイズが見られるサイトがあったので

確認してみました。

https://www.benricho.org/Tips/browse_size.html

お使いのディスプレイの画面解像度 横:834 × 縦 : 1194
お使いのディスプレイの利用可能領域 横:834 × 縦 : 1194

 

834pxで閲覧しているようです。

わいひら様の試していただいた内容だと

私のiPad Proでも1カラムで表示されるはずですよね・・・

 

謎な動きをさせてしまい申し訳ありません。

また何か気がつかれた事がありましたら

教えていただけるとうれしいです。

 

リフィトリー様、わいひら様、本当にありがとうございます。


   
(@あおこ)
Active Member
結合: 5年前
投稿: 6
Topic starter  

わいひら様

 

調べてみたところ、Safariにて「PCサイトを表示」させるようにしていたようです。

設定した覚えはありませんが、私のiPadでも「暮らしにスタ」のサイトを

モバイル表示にさせることができました。

iPadのSafariでモバイル用のWebページをデスクトップ(PC)用に切り替える

 

Cocoonを使用しているWEBサイトでは「デスクトップ用Webサイトを表示」させても

モバイルサイト(1カラム)での表示となりました。


   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@あおこ さん

ちょっと、コードに足りないところがあったようです。

私も、ローカルのテストサイトの親テーマの追加CSSに以下のコードを設定してみたところ、反映されるようです。

@media screen and (max-width: 1023px) {
.content-in {
display: flex;
}
#main.main {
display: block;
margin: 0.5%;
width: 67%;
}
div.sidebar {
display: block;
margin: 0.5%;
width: 30%;
}
.no-mobile-sidebar .sidebar {
display: block;
}
}

@media screen and (max-width: 800px) {
.content-in {
display: block;
}
#main.main, div.sidebar {
display: block;
margin: 10px 0;
padding: 16px;
width: auto;
}
.no-mobile-sidebar .sidebar {
display: none;
}
}

黄色のところが、足りなかった部分です。

 

子テーマのCSSに追記で反映されなければ、

ダッシュボードの「外観」→「カスタマイズ」→「追加CSS」の中にコピペしてみてください。

 

環境情報を、いただいていないので、よくわからないのですが、子テーマに書いたCSSがどうも反映されていないような気がします。


   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@あおこ さん

でも、やっぱり、サイドバーのプロフィールも、細長くなっちゃうし、やってはみたものの、ちょっと、微妙ですね。

 


   
わいひら reacted
(@あおこ)
Active Member
結合: 5年前
投稿: 6
Topic starter  

リフィトリー様

なんどもありがとうございます。

ダッシュボードの「外観」→「カスタマイズ」→「追加CSS」に追加して

反映されました!!!

本当にありがとうございます。

おっしゃる通りメニューの間延び感は否めませんが

いろいろ試してスッキリできるようやってみたいと思います。

 

リフィトリー様、わいひら様、本当にありがとうございました!


   
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

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