[ 解決済 ] ブロックエディターでカラム3段に設定したいのですが、Classic Paragraphと記載されます。

[With参加者]

ブロックエディターで作業しております。
横並びで画像3つとそれぞれの下に文章を付けたい。
カラム3段に設定したいのですが、
カラムを設置すると最初2段が設置されます。
右側のブロック（サイドバー）を見ると
Classic Paragraph　と記載されます。
なぜかブロックになりませんので
3段以上を設定できないようです。
手順が違うのでしょうか。

[RICK参加者]

ブロックエディタを使用してみようと思いましたが、
ネスト化させようとすると結構煩わしいですね。

LightningではBootstrapが使用されているので、
下記のように記述することができます。

<div class="col-md-4">
	<img src="画像1のURL" alt="" />
	<p class="">テキストテキストテキスト</p>
</div>
<div class="col-md-4">
	<img src="画像2のURL" alt="" />
	<p class="">テキストテキストテキスト</p>
</div>
<div class="col-md-4">
	<img src="画像3のURL" alt="" />
	<p class="">テキストテキストテキスト</p>
</div>

上記をカスタムHTMLブロックに記述するなり、
再利用ブロックに登録するなりすると良いでしょう。

col-md-4については下記サイトを見るとよいでしょう。
https://getbootstrap.com/docs/3.3/css/#grid-options
https://getbootstrap.com/docs/3.4/css/#grid-options
Lightning Originには3.4.1が、その他のスキンには3.3.4が
標準で搭載されているので２つ載せました。

再利用ブロックの使い方は下記が詳しかったと思います。

お問い合わせ情報の別パターンを増やす

[kurudrive参加者]

手動でカラムを作らずに画像ギャラリーのブロックを利用してはどうでしょう？

[With参加者]

誠にありがとうございます。
先ほど画像ギャラリーのブロックから
画像二つ取り込みましたが
横並びが出来ませんでした。
画像はブロック一つに対して一つ
のみ取り込みでした。
各固定ページに
3PR のように設定したいのですが
どうすれば良いですか。

[kurudrive参加者]

1. 一般ブロック > ギャラリー ブロックを選択
2. 配置されたギャラリーブロック内の「メディアライブラリ」 ボタンを押して画像を３つ選択 → ギャラリーを作成 ボタンをクリック
3. 「ギャラリーを挿入」ボタンをクリック

でできませんか？

[With参加者]

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

1. 一般ブロック > ギャラリー ブロックを選択
2. 配置されたギャラリーブロック内の「メディアライブラリ」 ボタンを押して画像を３つ選択
　　
　　→　手順通りですが、画像１つしか選べません。

→ ギャラリーを作成 ボタンをクリック
3. 「ギャラリーを挿入」ボタンをクリック

[With参加者]

ギャラリー ブロックを選択して
「メディアライブラリ」から、
画像１つしか選べませんでした。

ShiftやCtrlを押しながらでも画像に
チェックが2つ以上は付けられない状況です。

通常は画像2つ以上を選べるのでしょうか。
誠にお手数ですがお伝え下さい。

[kurudrive参加者]

通常Shiftを押さなくても複数選択になります。

Attachments:

You must be logged in to view attached files.

[With参加者]

誠にありがとうございます。
「ギャラリー」で複数枚の画像を選択できました。

確認したところ
「ギャラリー」ではなく
「画像」を選択していました。
「メディアライブラリ」からの操作画面で
見た目が同じなので気が付きませんでした。
誠に失礼しました。

[RICK参加者]

とりあえずギャラリー版とカラム版ができたので画像付きで投稿します。

• 説明文はどちらもキャプションを仕様しています。
• どちらの画像も上がギャラリー版、下がカラム版です。
• Editor.jpg がGutenbergでの表示、Site.jpg はサイト上の表示

カラムブロックでカラム数を変更するにはマウスカーソルを
カラムブロック左上にもっていくと表示される六文銭（Editor.jpg 参照）
をクリックすると右側のメニューでカラム数を変更できるようになります。

画像の位置調整は画像選択直前（Select_image.jpg）の状態で決めないと
位置を変えるのはかなり面倒です。位置決めする際には
六文銭を掴んでドラッグ＆ドロップで位置を変えられます。
位置を決める際は上部に青い線が表示されるので参考にしてみてください。

Gutenbergの肝はどうもこの六文銭にあるようです。

P.S.
あのアイコンは六文銭しか表現が思いつかなかったのであえてこう表現しました。

• この返信は3 ヶ月前に  RICK さんが編集しました。

Attachments:

You must be logged in to view attached files.

[投稿者]

投稿