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

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

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

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

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

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

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

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

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

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

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

変更するとしたら、以下のような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;
  }
}

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

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

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

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

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

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

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

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

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

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

https://kurashinista.jp

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

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

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

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

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

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

@あおこ さん

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

少し、お待ちください。

@あおこ さん

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

@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;
}
}

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

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

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

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

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

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

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

@あおこ さん

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

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

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

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

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

@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にしてみました。

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

投稿者:: @あおこ

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

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

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

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

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

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

（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カラムで表示されるはずですよね・・・

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

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

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

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

わいひら様

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

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

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

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

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

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

@あおこ さん

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

私も、ローカルのテストサイトの親テーマの追加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がどうも反映されていないような気がします。

@あおこ さん

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

リフィトリー様

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

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

反映されました！！！

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

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

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

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