[eiki]

【お使いの Snow Monkey のバージョン】17.0.4
【お使いの Snow Monkey Blocks のバージョン】16.0.1
【お使いの Snow Monkey Editor のバージョン】8.0.1
【お使いのブラウザ】Chrome
【当該サイトのURL】

### 実現したいこと

基本的な質問になってしまい恐縮なのですが、情報ブロックの使い方について質問です。

現在、情報ブロックで「企業概要」を作成しているのですが、PCではラベルと内容が1行表示されるものの、スマホにするとラベルと内容が別の行になってしまい、2段になってしまいます。

スマホでも1行で表示されるようにしたいのですが、どのように対応したらよろしいでしょうか。

### 試したこと

・情報ブロックにて「スマートフォンでカラムを分割しない」にチェック

そもそもに、企業概要や沿革のようなものは「情報ブロック」で書くのが適しているのかなと思って使っているのですが、もしその他のブロックの方が綺麗に作れるなどあれば、併せて教えていただけると幸いです。

よろしくお願いいたします。

♥ 0

いいねをした人: 居ません

[GONSY]

そもそもに、企業概要や沿革のようなものは「情報ブロック」で書くのが適しているのかなと思って使っているのですが、もしその他のブロックの方が綺麗に作れるなどあれば、

【カスタム HTML】 ブロック（中身はdl） ＋ CSSでつくる場合があります。
クライアントでも簡単に操作したい、などの場合は、【テーブル】が一般的かと思いますが、細かな設定ができないので、私は以下のプラグインを使用することがあります。

Flexible Table Block

Flexible Table Block は、自由な構成でテーブルを作成できる WordPress のブロックエディター用カスタムブロックプラグインです。

ja.wordpress.org

列ごとの幅やスマホ用の処理なども変更しやすいので重宝してます。

♥ 1

いいねをした人:

[eiki]

GONSY様

 

早速ご回答いただきありがとうございました。
やはり、HTML＋CSSが一番手軽にできる選択肢なのですね、、、

 

実はお察しの通り、クライアント様にてメンテをする予定になっているため、可能な限りコーディングには頼らずに作りたいといった状況になります。

 

まずは、ご提案いただいたプラグイン「Flexible Table Block」を試してみようと思います！
貴重なアドバイスをありがとうございました。

 

ちなみに、やはり情報ブロックをスマホでも横並びで表示することはできないのでしょうか。
既に情報ブロックで作成しているので、横並びにできればそれで解決なのですが、、、

 

ご存じの方がいらっしゃいましたら、情報ブロックのスマホでの横並びの可否もご教示いただけますと幸いです。

 

お手数をおかけしますが、よろしくお願いいたします。

♥ 0

いいねをした人: 居ません

[中野桂輔]

こんにちは。

 

情報ブロックをスマホでも横並びにする方法ですが、気になって試してみました。

「スマートフォンでカラムを分割しない」のチェックを外す
で私の環境では横並びにできました。

（現状、説明と実際の挙動が逆になっているような？）

 

お試しください。

♥ 1

いいねをした人:

[GONSY]

ちなみに、やはり情報ブロックをスマホでも横並びで表示することはできないのでしょうか。
既に情報ブロックで作成しているので、横並びにできればそれで解決なのですが、、、

すでに作成済みということでしたか。

ベストな方法かわかりませんが、スマホで横並び＋見やすくする方法のひとつになります。
情報ブロックの右メニュー［スマートフォンでカラムを分割しない］のトグルはオフにして、［追加 CSS クラス］に sample を記述して以下のCSSを追加。

.wp-block-snow-monkey-blocks-information.sample {
	overflow-x: scroll;
}

.wp-block-snow-monkey-blocks-information.sample .smb-information__body {
	min-width: 900px; /* 見やすいような任意の数値 */
}

こうするとPCのそれに近い感じの情報ブロックになると思います。
お試しくださいませ。

♥ 1

いいねをした人:

[eiki]

中野様、GONSY様

 

いつもお世話になっております。
ご丁寧にご返信をいただきありがとうございました。

 

アドバイスをもとに、対応させていただいたところ、思い描いていた通りに修正することができました。

 

また、「スマートフォンでカラムを分割しない」のトグルをOFFにすると、横並びもしっかりとされました。

お二方のアドバイスに感謝しております。
この度はありがとうございました。

♥ 1

いいねをした人:

[投稿者]

投稿