![](https://hrdyuic.com/wp-content/uploads/8335d558d151e09a696fb916ebabfbd5.png)
SWELLブロックやコアブロックの中で「横並び」になっている(できる)ブロックを教えてほしいです。
こういった悩みにお答えします。
本記事で解決できること
- 「横並び」になっている(できる)ブロックが分かる
- 「横並び」になっている(できる)ブロックの詳細な使い方(記事へのリンク付)
是非、最後までご覧ください。
News
以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
【SWELL】「横並び」になっている(できる)ブロック12選
ボックスメニュー
(ブロック挿入ツールを切り替え)から、「ブロック」>「SWELLブロック」>「ボックスメニュー」を選択します。
![](https://hrdyuic.com/wp-content/uploads/ba3d26f10a465f2c3f5afe329d42171a.jpg)
![](https://hrdyuic.com/wp-content/uploads/ba3d26f10a465f2c3f5afe329d42171a.jpg)
ボックスメニューブロックを選択すると自動的に「設定」が開きます。
![](https://hrdyuic.com/wp-content/uploads/eadad69263415ae31a98f5b44221213e.jpg)
![](https://hrdyuic.com/wp-content/uploads/eadad69263415ae31a98f5b44221213e.jpg)
デフォルトではアイコンとテキストの並びは「縦並び」になっています。
![](https://hrdyuic.com/wp-content/uploads/8a763de9b0e6cef07efeb3067eea875c.jpg)
![](https://hrdyuic.com/wp-content/uploads/8a763de9b0e6cef07efeb3067eea875c.jpg)
横並びを選択するとアイコンとテキストの並びが「横並び」になります。
![](https://hrdyuic.com/wp-content/uploads/a59e9e326a788c98940f79f228d0e665.jpg)
![](https://hrdyuic.com/wp-content/uploads/a59e9e326a788c98940f79f228d0e665.jpg)
以下より各デバイスでの表示を確認できます。
![](https://hrdyuic.com/wp-content/uploads/83d9a0a00f6d192c953fd79b9aa59a8d.jpg)
![](https://hrdyuic.com/wp-content/uploads/83d9a0a00f6d192c953fd79b9aa59a8d.jpg)
![](https://hrdyuic.com/wp-content/uploads/giorgio-trovato-bYhDEWgqYLM-unsplash.jpg)
![](https://hrdyuic.com/wp-content/uploads/giorgio-trovato-bYhDEWgqYLM-unsplash.jpg)
リッチカラム
(ブロック挿入ツールを切り替え)から、「ブロック」>「SWELLブロック」>「リッチカラム」を選択します。
![](https://hrdyuic.com/wp-content/uploads/d5cd8ac65f9bc85e26c91c99ac9273ea.jpg)
![](https://hrdyuic.com/wp-content/uploads/d5cd8ac65f9bc85e26c91c99ac9273ea.jpg)
挿入時から「横並び」になっています。
![](https://hrdyuic.com/wp-content/uploads/9291ae2cfcdda35e54dd79032d407768-1-scaled.jpg)
![](https://hrdyuic.com/wp-content/uploads/9291ae2cfcdda35e54dd79032d407768-1-scaled.jpg)
以下より各デバイスでの表示を確認できます。
![](https://hrdyuic.com/wp-content/uploads/ff121cbaefe0c2c831fc3af2d775e890.jpg)
![](https://hrdyuic.com/wp-content/uploads/ff121cbaefe0c2c831fc3af2d775e890.jpg)
![](https://hrdyuic.com/wp-content/uploads/background-18176_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/background-18176_1920.jpg)
説明リスト(DL)
(ブロック挿入ツールを切り替え)から、「ブロック」>「SWELLブロック」>「説明リスト(DL)」を選択します。
![](https://hrdyuic.com/wp-content/uploads/662826e8cbeda23b12d0f983d1fdf155.jpg)
![](https://hrdyuic.com/wp-content/uploads/662826e8cbeda23b12d0f983d1fdf155.jpg)
説明リスト(DL)を選択すると自動的に「スタイル」が開きます。
![](https://hrdyuic.com/wp-content/uploads/3994938ad3cdeb1d60c581584e46bd7b.jpg)
![](https://hrdyuic.com/wp-content/uploads/3994938ad3cdeb1d60c581584e46bd7b.jpg)
スタイルがデフォルトでは「縦並び」になっています。
![](https://hrdyuic.com/wp-content/uploads/879a08f00095313d2d4c16c1233f5f39.jpg)
![](https://hrdyuic.com/wp-content/uploads/879a08f00095313d2d4c16c1233f5f39.jpg)
横並びを選択すると「横並び」になります。
![](https://hrdyuic.com/wp-content/uploads/441ea86cbc088e10621df05beb8465d2-1.jpg)
![](https://hrdyuic.com/wp-content/uploads/441ea86cbc088e10621df05beb8465d2-1.jpg)
以下より各デバイスでの表示を確認できます。
![](https://hrdyuic.com/wp-content/uploads/ab461bf798c7c83d7873a1c8f31d15d1.jpg)
![](https://hrdyuic.com/wp-content/uploads/ab461bf798c7c83d7873a1c8f31d15d1.jpg)
![](https://hrdyuic.com/wp-content/uploads/who-2985525_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/who-2985525_1920.jpg)
ふきだし
(ブロック挿入ツールを切り替え)から、「ブロック」>「SWELLブロック」>「ふきだし」を選択します。
![](https://hrdyuic.com/wp-content/uploads/c66f6f4280a39573673a7a9a38b9c383.jpg)
![](https://hrdyuic.com/wp-content/uploads/c66f6f4280a39573673a7a9a38b9c383.jpg)
ふきだしブロックを選択すると自動的に「ふきだし設定」が開きます。
![](https://hrdyuic.com/wp-content/uploads/92a955c67475b34ef5a8997832ce562a.jpg)
![](https://hrdyuic.com/wp-content/uploads/92a955c67475b34ef5a8997832ce562a.jpg)
ふきだし設定から、以下を選択(入力)します。
- スマホでのテキストとアイコンの並び ※ デフォルトは「横並び」です。
- アイコン下に表示する名前
- アイコン画像
![](https://hrdyuic.com/wp-content/uploads/99e10e703d425bc1482c2e8d61ef8c14.jpg)
![](https://hrdyuic.com/wp-content/uploads/99e10e703d425bc1482c2e8d61ef8c14.jpg)
選択(入力)後です。
![](https://hrdyuic.com/wp-content/uploads/84f7a8d96f7ebebd03b81f8916e3701d.jpg)
![](https://hrdyuic.com/wp-content/uploads/84f7a8d96f7ebebd03b81f8916e3701d.jpg)
以下より各デバイスでの表示を確認できます。
![](https://hrdyuic.com/wp-content/uploads/9ff645386b17aa79c763cca32c972055.jpg)
![](https://hrdyuic.com/wp-content/uploads/9ff645386b17aa79c763cca32c972055.jpg)
![](https://hrdyuic.com/wp-content/uploads/speech-balloon-6214960_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/speech-balloon-6214960_1920.jpg)
リンクリスト
(ブロック挿入ツールを切り替え)から、「ブロック」>「SWELLブロック」>「リンクリスト」を選択します。
![](https://hrdyuic.com/wp-content/uploads/a60db02bd82e11b9297b032c0e7c13cf.jpg)
![](https://hrdyuic.com/wp-content/uploads/a60db02bd82e11b9297b032c0e7c13cf.jpg)
リンクリストブロックを選択すると自動的に「スタイル」が開きます。
![](https://hrdyuic.com/wp-content/uploads/a936ac11d330d0420a02cc18fe9cc61c.jpg)
![](https://hrdyuic.com/wp-content/uploads/a936ac11d330d0420a02cc18fe9cc61c.jpg)
デフォルトでは以下が「無効」になっています。
- 横並びにする → 「有効」にします。
![](https://hrdyuic.com/wp-content/uploads/c3573cbea7acc4216388199de6eee30c-1.jpg)
![](https://hrdyuic.com/wp-content/uploads/c3573cbea7acc4216388199de6eee30c-1.jpg)
有効にすると「横並び」になります。
![](https://hrdyuic.com/wp-content/uploads/c38a000510b0c1bc1e044ee2871da87b-1.jpg)
![](https://hrdyuic.com/wp-content/uploads/c38a000510b0c1bc1e044ee2871da87b-1.jpg)
以下より各デバイスでの表示を確認できます。
![](https://hrdyuic.com/wp-content/uploads/74d78ab83e872bf761e26b63b1b0f8d3.jpg)
![](https://hrdyuic.com/wp-content/uploads/74d78ab83e872bf761e26b63b1b0f8d3.jpg)
![](https://hrdyuic.com/wp-content/uploads/link-5219567_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/link-5219567_1920.jpg)
投稿リスト
(ブロック挿入ツールを切り替え)から、「ブロック」>「SWELLブロック」>「投稿リスト」を選択します。
![](https://hrdyuic.com/wp-content/uploads/6a29c715252e2417a0c05b602ced83d2.jpg)
![](https://hrdyuic.com/wp-content/uploads/6a29c715252e2417a0c05b602ced83d2.jpg)
投稿リストブロックを選択すると自動的に「表示設定」が開きます。
![](https://hrdyuic.com/wp-content/uploads/6b3f77f74505ae76c9289eb7a1150b5f.jpg)
![](https://hrdyuic.com/wp-content/uploads/6b3f77f74505ae76c9289eb7a1150b5f.jpg)
デフォルトでは、3カラムの「横並び」です。
![](https://hrdyuic.com/wp-content/uploads/9648224ac8c5726f9c4d71da27b1b148.jpg)
![](https://hrdyuic.com/wp-content/uploads/9648224ac8c5726f9c4d71da27b1b148.jpg)
表示する投稿数を「4」にすると4記事目が折り返されます。
![](https://hrdyuic.com/wp-content/uploads/88cf6a7057c01714433f77b8c54ce3f6.jpg)
![](https://hrdyuic.com/wp-content/uploads/88cf6a7057c01714433f77b8c54ce3f6.jpg)
以下より各デバイスでの表示を確認できます。
![](https://hrdyuic.com/wp-content/uploads/8aed56aeaf05faa1ae4ec4f8314457dc.jpg)
![](https://hrdyuic.com/wp-content/uploads/8aed56aeaf05faa1ae4ec4f8314457dc.jpg)
デバイスごとではなく画面幅によってはPCでも折り返されます。
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-2024-05-06-12_09_30.jpg)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-2024-05-06-12_09_30.jpg)
![](https://hrdyuic.com/wp-content/uploads/towfiqu-barbhuiya-0ZUoBtLw3y4-unsplash.jpg)
![](https://hrdyuic.com/wp-content/uploads/towfiqu-barbhuiya-0ZUoBtLw3y4-unsplash.jpg)
リスト
(ブロック挿入ツールを切り替え)から、「ブロック」>「テキスト」>「リスト」を選択します。
![](https://hrdyuic.com/wp-content/uploads/d8f2f46a9271d04078998c3a04b6c9f9.jpg)
![](https://hrdyuic.com/wp-content/uploads/d8f2f46a9271d04078998c3a04b6c9f9.jpg)
リストが挿入されました。
![](https://hrdyuic.com/wp-content/uploads/62ca88a18192eb667a93a6530d8e0afc.jpg)
![](https://hrdyuic.com/wp-content/uploads/62ca88a18192eb667a93a6530d8e0afc.jpg)
リストブロックを選択すると自動的に「リストの追加スタイル」が開きます。
![](https://hrdyuic.com/wp-content/uploads/0d0ba1d28db8742ed10d685c344606bb.jpg)
![](https://hrdyuic.com/wp-content/uploads/0d0ba1d28db8742ed10d685c344606bb.jpg)
リストの追加スタイルは、デフォルトでは選択されておらず「縦並び」です。
![](https://hrdyuic.com/wp-content/uploads/2020e108002d40b808b089e14eb893d3.jpg)
![](https://hrdyuic.com/wp-content/uploads/2020e108002d40b808b089e14eb893d3.jpg)
横並びを選択すると「横並び」になります。
![](https://hrdyuic.com/wp-content/uploads/4084f9d8ba429c5a381ca6a88baa71de.jpg)
![](https://hrdyuic.com/wp-content/uploads/4084f9d8ba429c5a381ca6a88baa71de.jpg)
以下より各デバイスでの表示を確認できます。
![](https://hrdyuic.com/wp-content/uploads/0ff75b1b6c415876ef5fb961e8d67fe9.jpg)
![](https://hrdyuic.com/wp-content/uploads/0ff75b1b6c415876ef5fb961e8d67fe9.jpg)
![](https://hrdyuic.com/wp-content/uploads/checklist-2277707_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/checklist-2277707_1920.jpg)
テーブル
(ブロック挿入ツールを切り替え)から、「ブロック」>「テキスト」>「テーブル」を選択します。
![](https://hrdyuic.com/wp-content/uploads/be337dcc001b001bce5f0fc37258e7e6.jpg)
![](https://hrdyuic.com/wp-content/uploads/be337dcc001b001bce5f0fc37258e7e6.jpg)
テーブルから表形式のデータを以下します。
- カラム数:3
- 行数:1
![](https://hrdyuic.com/wp-content/uploads/faeba69dda1d1af940feaa85ef7afdae.jpg)
![](https://hrdyuic.com/wp-content/uploads/faeba69dda1d1af940feaa85ef7afdae.jpg)
3カラムの「横並び」になりました。
![](https://hrdyuic.com/wp-content/uploads/9453f81dd48ac4c0b27a62bbaaa474e8.jpg)
![](https://hrdyuic.com/wp-content/uploads/9453f81dd48ac4c0b27a62bbaaa474e8.jpg)
以下より各デバイスでの表示を確認できます。
![](https://hrdyuic.com/wp-content/uploads/0a06448fb2a5f5c654f6018de0db2a12.jpg)
![](https://hrdyuic.com/wp-content/uploads/0a06448fb2a5f5c654f6018de0db2a12.jpg)
![](https://hrdyuic.com/wp-content/uploads/letter-4745926_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/letter-4745926_1920.jpg)
ギャラリー
(ブロック挿入ツールを切り替え)から、「ブロック」>「メディア」>「ギャラリー」を選択します。
![](https://hrdyuic.com/wp-content/uploads/4f490bb7ff69d8f51d53f396307506f6.jpg)
![](https://hrdyuic.com/wp-content/uploads/4f490bb7ff69d8f51d53f396307506f6.jpg)
画像をドラッグするか、新規アップロードするか、ライブラリからファイルを選択してギャラリーを挿入します。
![](https://hrdyuic.com/wp-content/uploads/851e471104794daa99e8f02b1ba78314.jpg)
![](https://hrdyuic.com/wp-content/uploads/851e471104794daa99e8f02b1ba78314.jpg)
ギャラリーを挿入後にギャラリーブロックを選択すると自動的に「設定」が開きます。
![](https://hrdyuic.com/wp-content/uploads/b334b43fe232b252b0f0b75f931e2837.jpg)
![](https://hrdyuic.com/wp-content/uploads/b334b43fe232b252b0f0b75f931e2837.jpg)
デフォルトは3カラムです。
![](https://hrdyuic.com/wp-content/uploads/90b5254d99f3f5a489e1918796ec802c.jpg)
![](https://hrdyuic.com/wp-content/uploads/90b5254d99f3f5a489e1918796ec802c.jpg)
2カラムにすると3枚目が折り返されます。
カラムは、1段目のカラム数を指し、以降は、残った枚数に応じて均等に配置されます。
![](https://hrdyuic.com/wp-content/uploads/b5de8bbf6edc3f13f99538dcbf0fa598.jpg)
![](https://hrdyuic.com/wp-content/uploads/b5de8bbf6edc3f13f99538dcbf0fa598.jpg)
以下より各デバイスでの表示を確認できます。
![](https://hrdyuic.com/wp-content/uploads/a4a596e53de249f6c2ee6117a37ad9b1.jpg)
![](https://hrdyuic.com/wp-content/uploads/a4a596e53de249f6c2ee6117a37ad9b1.jpg)
![](https://hrdyuic.com/wp-content/uploads/wall-2558279_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/wall-2558279_1920.jpg)
メディアとテキスト
(ブロック挿入ツールを切り替え)から、「ブロック」>「メディア」>「メディアとテキスト」を選択します。
![](https://hrdyuic.com/wp-content/uploads/83d1e7213cd072078ff94a1fddd1618f.jpg)
![](https://hrdyuic.com/wp-content/uploads/83d1e7213cd072078ff94a1fddd1618f.jpg)
挿入時からメディアとテキストは「横並び」です。
![](https://hrdyuic.com/wp-content/uploads/a1b37ad2aa77e030e6561cab843804b2.jpg)
![](https://hrdyuic.com/wp-content/uploads/a1b37ad2aa77e030e6561cab843804b2.jpg)
以下より各デバイスでの表示を確認できます。
![](https://hrdyuic.com/wp-content/uploads/fc603499534797d735a3c3245e03cf50.jpg)
![](https://hrdyuic.com/wp-content/uploads/fc603499534797d735a3c3245e03cf50.jpg)
![](https://hrdyuic.com/wp-content/uploads/kunal-patil-oYfiH-1cIVs-unsplash.jpg)
![](https://hrdyuic.com/wp-content/uploads/kunal-patil-oYfiH-1cIVs-unsplash.jpg)
カラム
(ブロック挿入ツールを切り替え)から、「ブロック」>「デザイン」>「カラム」を選択します。
![](https://hrdyuic.com/wp-content/uploads/d638f06445bc6786253ac7136c686367.jpg)
![](https://hrdyuic.com/wp-content/uploads/d638f06445bc6786253ac7136c686367.jpg)
カラムから、「33 / 33 / 33」を選択します。
![](https://hrdyuic.com/wp-content/uploads/f2930a4c8f3f3397b427f31a06f22f6c.jpg)
![](https://hrdyuic.com/wp-content/uploads/f2930a4c8f3f3397b427f31a06f22f6c.jpg)
挿入時から「横並び」です。
![](https://hrdyuic.com/wp-content/uploads/23e901359d9ea57c207a00a0c3f4d816-1.jpg)
![](https://hrdyuic.com/wp-content/uploads/23e901359d9ea57c207a00a0c3f4d816-1.jpg)
以下より各デバイスでの表示を確認できます。
![](https://hrdyuic.com/wp-content/uploads/66372ecfc7cc544657a2d9e787cac2ff.jpg)
![](https://hrdyuic.com/wp-content/uploads/66372ecfc7cc544657a2d9e787cac2ff.jpg)
![](https://hrdyuic.com/wp-content/uploads/building-blocks-5097836_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/building-blocks-5097836_1920.jpg)
ブロックツールバーから横並び
上から順に以下のブロックを挿入しました。
- SWELLボタン
- SWELLボタン
- SWELLボタン
![](https://hrdyuic.com/wp-content/uploads/ed269c4318cd2794ed83ffc9b2be76c1.jpg)
![](https://hrdyuic.com/wp-content/uploads/ed269c4318cd2794ed83ffc9b2be76c1.jpg)
グループ化したいブロックを選択します。
![](https://hrdyuic.com/wp-content/uploads/b9389411b02a4e6d0feaefc019ab71f5-1.jpg)
![](https://hrdyuic.com/wp-content/uploads/b9389411b02a4e6d0feaefc019ab71f5-1.jpg)
ブロックツールバーから、
(横並び)を選択します。![](https://hrdyuic.com/wp-content/uploads/f150ef5d70a6bf247d2e7663a9551905.jpg)
![](https://hrdyuic.com/wp-content/uploads/f150ef5d70a6bf247d2e7663a9551905.jpg)
「横並び」になりました。
![](https://hrdyuic.com/wp-content/uploads/34ba7284bf3c62b4cf774b6db90defa0.jpg)
![](https://hrdyuic.com/wp-content/uploads/34ba7284bf3c62b4cf774b6db90defa0.jpg)
以下より各デバイスでの表示を確認できます。
![](https://hrdyuic.com/wp-content/uploads/bd12855add56c58219973dd7986c5722.jpg)
![](https://hrdyuic.com/wp-content/uploads/bd12855add56c58219973dd7986c5722.jpg)
横並びブロックを使用
ブロックツールバーから「横並び」を選択する方法とは異なり、先に用意した「横並びブロック」の中にブロックを集めます。
個人的に使う場面はないかなぁとか思っていますので気になる方のみ開いてご覧ください。
OPEN
(ブロック挿入ツールを切り替え)から、「ブロック」>「デザイン」>「横並び」を選択します。
![](https://hrdyuic.com/wp-content/uploads/8ae66a4fe2c9ff67d4ea890269eb6cbf.jpg)
![](https://hrdyuic.com/wp-content/uploads/8ae66a4fe2c9ff67d4ea890269eb6cbf.jpg)
(ブロックを追加)をクリックして「ブロック挿入ツールを切り替え」を開きます。
![](https://hrdyuic.com/wp-content/uploads/43006d6c972e531cd83660da72202c7b.jpg)
![](https://hrdyuic.com/wp-content/uploads/43006d6c972e531cd83660da72202c7b.jpg)
(ブロック挿入ツールを切り替え)から、「SWELLボタン」を選択します。
![](https://hrdyuic.com/wp-content/uploads/3cd2a509fe60e231ac8cb17401baa9ae.jpg)
![](https://hrdyuic.com/wp-content/uploads/3cd2a509fe60e231ac8cb17401baa9ae.jpg)
同じ要領で (ブロックを追加)から、「SWELLボタン」を追加します。
![](https://hrdyuic.com/wp-content/uploads/4ce9cccac0028a4e364ebcd07ec75b68.jpg)
![](https://hrdyuic.com/wp-content/uploads/4ce9cccac0028a4e364ebcd07ec75b68.jpg)
SWELLボタンが3つ横並びになりました。
![](https://hrdyuic.com/wp-content/uploads/de8bcbb38962fc5765afd312682c0fbd.jpg)
![](https://hrdyuic.com/wp-content/uploads/de8bcbb38962fc5765afd312682c0fbd.jpg)
SWELL独自のカスタマイズ(装飾)
横並びブロックを選択すると自動的に「ボーダー設定」や「スタイル」が開きます。
![](https://hrdyuic.com/wp-content/uploads/d70e153deeb39e44d88259703988e986.jpg)
![](https://hrdyuic.com/wp-content/uploads/d70e153deeb39e44d88259703988e986.jpg)
以下よりボーダーとスタイルの表示を確認できます。
![](https://hrdyuic.com/wp-content/uploads/c8ab7f45ff68185a8011701a974db889.jpg)
![](https://hrdyuic.com/wp-content/uploads/c8ab7f45ff68185a8011701a974db889.jpg)
News
以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
今回は以上です。