Menu
カテゴリー

【SWELL】「横並び」になっている(できる)ブロック12選

悩む人

SWELLブロックやコアブロックの中で「横並び」になっている(できる)ブロックを教えてほしいです。

こういった悩みにお答えします。

本記事で解決できること

  • 「横並び」になっている(できる)ブロックが分かる
  • 「横並び」になっている(できる)ブロックの詳細な使い方(記事へのリンク付)

是非、最後までご覧ください。

News

以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。

本記事の内容

【SWELL】「横並び」になっている(できる)ブロック12選

ボックスメニュー

(ブロック挿入ツールを切り替え)から、「ブロック」>「SWELLブロック」>「ボックスメニュー」を選択します。

ボックスメニューブロックを選択すると自動的に「設定」が開きます。

デフォルトではアイコンとテキストの並びは「縦並び」になっています。

横並びを選択するとアイコンとテキストの並びが「横並び」になります。

以下より各デバイスでの表示を確認できます。

あわせて読みたい
【SWELL】ボックスメニューの使い方【オススメ画像サイズも紹介】 SWELLのボックスメニューの使い方を知りたいですか?本記事では、SWELLのボックスメニューブロックの使い方の解説やオススメのアイコン(または画像)サイズを紹介しています。SWELLのボックスメニューブロックの使い方を知りたい人は是非ご覧ください。

リッチカラム

(ブロック挿入ツールを切り替え)から、「ブロック」>「SWELLブロック」>「リッチカラム」を選択します。

挿入時から「横並び」になっています。

以下より各デバイスでの表示を確認できます。

あわせて読みたい
【SWELL】リッチカラムの使い方【標準搭載のカラムよりリッチ】 SWELLはWordPressに標準で用意されているカラムブロックとは別に独自にリッチカラムブロックを用意しています。本記事では、そのリッチカラムブロックの使い方について余すことなく解説しています。SWELLが用意しているリッチカラムブロックの使い方を知りたい方は是非ご覧ください。

説明リスト(DL)

(ブロック挿入ツールを切り替え)から、「ブロック」>「SWELLブロック」>「説明リスト(DL)」を選択します。

説明リスト(DL)を選択すると自動的に「スタイル」が開きます。

スタイルがデフォルトでは「縦並び」になっています。

横並びを選択すると「横並び」になります。

以下より各デバイスでの表示を確認できます。

あわせて読みたい
【SWELL】説明リスト(DL)の使い方【事例付き】 SWELLの説明リスト(DL)の使い方を知りたいですか?本記事では、説明リストとは、説明リストの使い方、説明リストを使った実例を紹介しています。SWELLの説明リストの使い方を知りたい方は是非ご覧ください。

ふきだし

(ブロック挿入ツールを切り替え)から、「ブロック」>「SWELLブロック」>「ふきだし」を選択します。

ふきだしブロックを選択すると自動的に「ふきだし設定」が開きます。

ふきだし設定から、以下を選択(入力)します。

  • スマホでのテキストとアイコンの並び ※ デフォルトは「横並び」です。
  • アイコン下に表示する名前
  • アイコン画像

選択(入力)後です。

以下より各デバイスでの表示を確認できます。

あわせて読みたい
SWELLブロック「ふきだし」の使い方【最適な画像サイズも紹介】 SWELLブロック「ふきだし」の使い方や最適な画像サイズについて知りたいですか?本記事では、ふきだしセットの登録と使い方、投稿画面から「ふきだし」を作成する方法、最適な画像サイズ(画像作成のツールも紹介)を解説しています。SWELLブロック「ふきだし」の使い方や最適な画像サイズについて知りたい方は是非ご覧ください。

リンクリスト

(ブロック挿入ツールを切り替え)から、「ブロック」>「SWELLブロック」>「リンクリスト」を選択します。

リンクリストブロックを選択すると自動的に「スタイル」が開きます。

デフォルトでは以下が「無効」になっています。

  • 横並びにする → 「有効」にします。

有効にすると「横並び」になります。

以下より各デバイスでの表示を確認できます。

あわせて読みたい
【SWELL】リンクリストブロックの使い方【一括生成も行える】 SWELLのリンクリストブロックの使い方を知りたいですか?本記事では、リンクリストのスタイルや設定(フォントサイズ、アイコン設定、アイコン位置、カラー設定)、一括生成方法を解説しています。SWELLのリンクリストブロックの使い方を知りたい方は是非ご覧ください。

投稿リスト

(ブロック挿入ツールを切り替え)から、「ブロック」>「SWELLブロック」>「投稿リスト」を選択します。

投稿リストブロックを選択すると自動的に「表示設定」が開きます。

デフォルトでは、3カラムの「横並び」です。

表示する投稿数を「4」にすると4記事目が折り返されます。

以下より各デバイスでの表示を確認できます。

デバイスごとではなく画面幅によってはPCでも折り返されます。

あわせて読みたい
【SWELL】投稿リストの使い方をおすすめ記事の作り方を例に解説 SWELLブロックの投稿リストの使い方を知りたいですか?本記事では、おすすめ記事の作成・設置を例にして投稿リストやブログパーツの使い方からサイドバーへの設置方法まで解説しています。SWELLブロックの投稿リストやブログパーツの使い方、サイドバーへの設置方法を知りたい方は是非ご覧ください。

リスト

(ブロック挿入ツールを切り替え)から、「ブロック」>「テキスト」>「リスト」を選択します。

リストが挿入されました。

リストブロックを選択すると自動的に「リストの追加スタイル」が開きます。

リストの追加スタイルは、デフォルトでは選択されておらず「縦並び」です。

横並びを選択すると「横並び」になります。

以下より各デバイスでの表示を確認できます。

あわせて読みたい
【SWELL】リストで使えるデザイン装飾と使い方【全24パターン】 【SWELL】リストで使える「デザイン装飾」や使い方について知りたいですか?本記事では、WordPress側で用意してくれている「コアブロック」のリストに対してSWELL独自のカスタマイズを加えて使いやすくした「デザイン装飾」全24パターンの紹介からリストの使い方までを解説しています。リストで使える「デザイン装飾」や使い方について知りたい方は是非ご覧ください。

テーブル

(ブロック挿入ツールを切り替え)から、「ブロック」>「テキスト」>「テーブル」を選択します。

テーブルから表形式のデータを以下します。

  • カラム数:3
  • 行数:1

3カラムの「横並び」になりました。

以下より各デバイスでの表示を確認できます。

あわせて読みたい
【SWELL】テーブルブロックの使い方【カスタマイズ方法を解説】 SWELLのテーブルの使い方を知りたいですか?本記事では、WordPressが用意しているスタイルの種類、SWELLが用意している「[SWELL]テーブル」で使っている、また、使っていない機能の使い方まで解説しています。SWELLのテーブルの使い方を知りたい方は是非ご覧ください。

ギャラリー

(ブロック挿入ツールを切り替え)から、「ブロック」>「メディア」>「ギャラリー」を選択します。

画像をドラッグするか、新規アップロードするか、ライブラリからファイルを選択してギャラリーを挿入します。

ギャラリーを挿入後にギャラリーブロックを選択すると自動的に「設定」が開きます。

デフォルトは3カラムです。

2カラムにすると3枚目が折り返されます。

カラムは、1段目のカラム数を指し、以降は、残った枚数に応じて均等に配置されます。

以下より各デバイスでの表示を確認できます。

あわせて読みたい
【SWELL】ギャラリーブロックの使い方【カスタマイズコード付】 WordPressのコアブロックにSWELL独自のカスタマイズを加えたギャラリーの使い方を知りたいですか?本記事では、ギャラリーブロックの使い方やカスタマイズ方法を解説しています。SWELL独自のカスタマイズを加えたギャラリーブロックの使い方を知りたい方は是非ご覧ください。

メディアとテキスト

(ブロック挿入ツールを切り替え)から、「ブロック」>「メディア」>「メディアとテキスト」を選択します。

挿入時からメディアとテキストは「横並び」です。

以下より各デバイスでの表示を確認できます。

あわせて読みたい
【SWELL】画像の上に文字を重ねる方法を4つ紹介 SWELLで画像の上に文字を重ねる方法を知りたいですか?本記事では、画像とテキストが横並びになった状態から画像の上にテキストを重ねる方法から、その他に3つの方法を紹介しています。SWELLで画像の上に文字を重ねる方法を知りたい方は是非ご覧ください。

カラム

(ブロック挿入ツールを切り替え)から、「ブロック」>「デザイン」>「カラム」を選択します。

カラムから、「33 / 33 / 33」を選択します。

挿入時から「横並び」です。

以下より各デバイスでの表示を確認できます。

あわせて読みたい
【SWELL】カラムの使い方【リッチカラムとの違いも分かる】 WordPress側が用意してくれている「コアブロック」に対してSWELL独自のカスタマイズを加えて使いやすくした「カラム」の使い方を知りたいですか?本記事では、カラムの使い方、SWELLブロックのリッチカラムとの違いについて解説しています。カラムの使い方を知りたい方は是非ご覧ください。

ブロックツールバーから横並び

上から順に以下のブロックを挿入しました。

  • SWELLボタン
  • SWELLボタン
  • SWELLボタン

グループ化したいブロックを選択します。

ブロックツールバーから、(横並び)を選択します。

「横並び」になりました。

以下より各デバイスでの表示を確認できます。

横並びブロックを使用

ブロックツールバーから「横並び」を選択する方法とは異なり、先に用意した「横並びブロック」の中にブロックを集めます。
個人的に使う場面はないかなぁとか思っていますので気になる方のみ開いてご覧ください。

OPEN

(ブロック挿入ツールを切り替え)から、「ブロック」>「デザイン」>「横並び」を選択します。

(ブロックを追加)をクリックして「ブロック挿入ツールを切り替え」を開きます。

(ブロック挿入ツールを切り替え)から、「SWELLボタン」を選択します。

同じ要領で (ブロックを追加)から、「SWELLボタン」を追加します。

SWELLボタンが3つ横並びになりました。

SWELL独自のカスタマイズ(装飾)

横並びブロックを選択すると自動的に「ボーダー設定」や「スタイル」が開きます。

以下よりボーダーとスタイルの表示を確認できます。

News

以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。

今回は以上です。

※ PS:本記事で「悩みが解決した」「参考になった」方は、是非 (Twitter)でシェアをお願いします!

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
本記事の内容