SWELLの記事の書き方マニュアル【ブロックエディターの使い方】 2025 5/17 広告 SWELL May 10, 2025May 17, 2025 「SWELL ブロックエディタの使い方がよく分からない…」「思いどおりにデザインできない…」 と悩んでいませんか？ 特に初心者の方にとって、ブロックエディタの操作は最初の大きな壁になりがちです。 でも安心してください。この記事では、SWELL ブロックエディタの基本操作から応用テクニックまで、分かりやすく丁寧に解説します。 この記事を読めば、あなたが知りたい答えがきっと見つかります。効率よく記事作成を進め、理想のサイトを実現するためのヒントを手に入れましょう。 SWELLをまだ導入して方は以下の記事をご覧ください。>>【安心】WordPress有料テーマ『SWELL』の購入方法をやさしく解説>> SWELLの初期設定を初心者向けにやさしく解説！ 目次ブロックエディターとは ブロックエディター（Gutenberg）とは、2018年のWordPress5.0から採用されているエディターで、ブロックを組み合わて記事を書いていくので「ブロックエディター」と呼ばれています。 たとえば、こんな記事があったとして▼ 実際は以下のようなブロックで構成されてます▼ WordPress共通のブロックエディターの基本的な使い方は、以下の記事で参考にどうぞ。 あわせて読みたい 【グーテンベルグ】WordPressブログの記事の書き方をゼロから解説！ WordPressを開設したものの、グーテンベルグで記事を書く方法がわかりません。初心者向けに教えてください。 こういった疑問に答えます。 WordPressで記事を書くときに… 本記事では、ブロックエディターの基本的な使い方に加え、WordPressテーマのSWELLにおけるブロックエディターの使い方も紹介します。 ブロックエディターの画面構成 SWELLのブロックエディターは、大別すると3つのエリアに分かれます。 トップツールバー 右ツールバー メインコンテンツエリア 構成1：トップツールバー トップツールバーは、「ブロック追加」「元に戻す」「プレビュー」「記事公開」といった基本項目が並ぶエリア。 以下のように、デフォルトだとブロックツールバーはブロックのすぐ上部に表示されます。 エディターの右上にある「⋮」マーク＞「トップツールバー」にチェックを入れます。 すると、ブロックツールバーが上部に固定されるようになります。この状態をトップツールバーと呼びます。 お好みで設定してください。 構成2：右ツールバー 右ツールバーは「投稿タブ」と「ブロックタブ」の２つに分かれます。 投稿タブ 「投稿タブ」では、パーマリンク（URL）、カテゴリー、アイキャッチなどの設定を行います。 ブロックタブ 「ブロックタブ」ではボックス装飾、テキストカラー、フォントサイズ変更などが行えます。 構成3：メインコンテンツエリア 記事本文を入力して、記事作成を行うエリアです。 ブロックエディターで記事を公開するまでの4ステップ SWELLブロックエディターを使って記事を公開するまでの流れを紹介します。 タイトル入力 本文作成 投稿設定 記事公開 ステップ1：タイトル入力 まず、「タイトルを追加」となっている箇所をタップして、タイトルを入力します。 ステップ2：本文入力 続いて、メインエリアで本文や画像などを入力していきます。 上記の部分に「文章」「見出し」「画像」など、様々なブロックを組み合わせて記事を作成していきます。 以下はSWELL公式サイトによる動画。記事作成のイメージをざっとつかみたい方は参考にどうぞ。 </noscript><iframe width="560" height="315" data-src="https://www.youtube.com/embed/j0M8PY6HsUA?si=qisBfpbWC9PvbwX8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen class="lazyload" > ステップ3：投稿設定 タイトル、記事本文の入力が完了したら「投稿設定」をします。 設定する主な項目は、 アイキャッチ画像 URL(パーマリンク) カテゴリー アイキャッチ画像設定 右ツールバーにある「アイキャッチ画像を設定」をクリックし、アイキャッチ画像に使う画像を設定します。 アイキャッチ画像って何？という方は、以下の記事をご覧ください。 あわせて読みたい ブログ記事の書き方とは｜記事の構成要素6つと書き方の手順10 ブログを始めたはいいけど、どうやって記事を書けばいいかわかりません。初心者向けに記事の書き方を教えてください こういった疑問に答えます。 今回は、ブログ記事の… URL(パーマリンク)設定 URL（パーマリンク）は、記事のURLの一部を構成するもの。 STEP右ツールバーの「スラッグ」をクリック STEPパーマリンクを入力 入力欄に任意の文字列を入力します。記事の内容を簡潔に表した英語にしておくのがおすすめ。 カテゴリ設定 記事のカテゴリを設定します。 右ツールバーにある「カテゴリー」内の中から、記事に適したカテゴリを選びます。 カテゴリの追加/編集は、WordPress管理画面の「投稿」＞「カテゴリ」から行います。 ステップ4：記事の公開 最後に、トップツールバーの「公開」をクリックします。 これで記事の投稿が完了です。 以上、ブロックエディターでの記事作成の流れを紹介しました。 ブロックエディターの基本的な使い方 続いて、ブロックエディターの基本的な使い方を紹介します。 特によく使う使い方は以下のとおり。 ブロックの追加 ブロックの移動 ブロックの削除 ブロックのコピー ブロックのグループ化 ブロックの追加 ブロックの追加方法は以下の3つの方法があります。 トップツールバーの「＋」から追加 メインコンテンツエリアの「＋」から追加 「/」を入力して追加 順に見ていきましょう。 方法1：トップツールバーの「＋」から追加 STEPブロック追加「＋」をタップ STEP使いたいブロックを選んでクリック 方法2：メインコンテンツエリカの「＋」から追加 STEPブロック追加「＋」をタップ STEP使いたいブロックを選んでクリック ブロックが6個表示されるので、使いたいブロックがあれば選びます。 もし使いたいブロックがなければ、検索ボックスから検索するか、「すべてを表示」をクリックします。 STEP使いたいブロックを選んでクリック ステップ2で「すべてを表示」をクリックした場合は、左メニューにブロック一覧が表示されるので、その中から選びます。 方法3：「/」を入力して追加 段落ブロックで「/+ブロック名」を入力するだけで、ブロックを追加できます。 たとえば、「/heading」と入力すると見出しブロックを簡単に呼び出せます。「/見出し」のように日本語でもOK。 主要なブロックを呼び出すための英字キーワードを以下にまとめておきます。 ブロック名(コアブロック)キーワード見出し/headingリスト/list画像/imageボタン/buttons表/tableカラム/columnsスペーサー/spacerグループ/groupコアブロック ブロック名(SWELLブロック)キーワードふきだしブロック/ballonSWELLボタンブロック/buttonキャプションブロック/capフルワイドブロック/fullwid関連記事ブロック/blogcard , /postlinkステップブロック/step投稿リストブロック/postlistタブブロック/tabアコーディオンブロック/accordion説明リストブロック/dlリッチカラムブロック/rich-columns制限エリアブロック/restrict-areaSWELLブロック 上記のキーワードを含め、便利なショートカットは以下をご覧ください。 あわせて読みたい ブロックエディターの記事執筆を時短するショートカット集【SWELL専用もあり】 本記事では、ブロックエディターの記事執筆を快適にするショートカットを紹介します。 SWELL 専用のブロックのショートカットも紹介してますよ。 SWELLでのブロックエデ… ブロックの移動 STEP移動させたいブロックを選択 移動させたいブロックの横をクリックすると、選択した状態になります。 STEP上下ボタンをクリック 今回は例として上に移動させるので、上のマークをクリックします。 すると、ブロックを上に移動できます。 ブロックの削除 STEP削除したいブロックを選択 STEP「⋮」マーク>「削除」 をクリック すると、削除したいブロックが消えます。 ブロックのコピー STEPコピーしたいブロックを選択 STEP「⋮」マーク ＞「コピー」 をクリック 上記の代わりに、「Ctrl＋C」でもOK。 STEP貼り付けしたい場所で、「右クリック」＞「貼り付け」をクリック すると、コピーされます。 上記の代わりに、「Ctrl＋V」でもOK。 ブロックのグループ化 グループ化を行うことで、グループ単位での装飾や移動ができるようになります。 STEPグループ化したいブロックの範囲を選択 STEP「⋮」マーク >「グループ化」 をクリック すると、選択した箇所がグループ化されます。 hideharu グループ化すると、グループ単位での装飾や移動ができるようになります。 SWELLのブロックエディター機能を把握する ここまでWordPress標準のブロックエディターの使い方を説明してきました。 ここからは、SWELLオリジナルの機能を紹介します。 SWELL ブロックエディタとは？特徴を解説 SWELL ブロックエディタは、初心者でも直感的に使えるWordPressテーマ専用の編集ツールです。 まず、SWELLはシンプルで高速なテーマとして知られ、特にブロックエディタとの相性の良さが特徴です。Gutenbergの標準機能に加え、SWELL独自のオリジナルブロックが用意されているため、デザイン性の高いページが簡単に作成できます。 さらに、クリック操作が中心で、コードの知識がなくてもプロ並みの仕上がりを実現できます。たとえば、見出し・ボタン・ふきだし・FAQなどの要素は、すべて「ブロック」として用意され、必要なものを選んで配置するだけ。 この仕組みを理解することで、あなたの記事作成の幅は大きく広がります。重要なのは、「ブロックを組み立ててページを作る」という発想です。 SWELL ブロックエディタと他テーマの違い SWELL ブロックエディタの特徴は、標準のWordPressテーマや他社テーマと比べても群を抜いています。 他テーマ（例：Cocoon、JIN、THE THOR）と比べると、SWELLは「純正ブロックエディタに完全対応」しており、プラグイン不要で多彩な装飾が可能です。 つまり、追加ツールに頼らずにシンプルな構成で強力なデザインが作れるってこと。 また、表示速度の最適化やSEO対策もデフォルトで組み込まれており、初心者でもプロ並みの成果が出せます。他テーマから乗り換えると、その使いやすさとスピードに驚く方が多いです。 他テーマと比べたときのSWELLの秀逸さを詳しく知りたい方は以下をご覧ください。 あわせて読みたい WordPressテーマSWELLのレビュー【評判どおり最強だった】 WordPressテーマのSWELLを購入しようか迷ってます。評判は良いけど、実際はどうなんだろう？利用者の声を聞きたいな。 こういった疑問に答えます。 「SWELLって評判が良… ブロックが表示されないときの対処法 SWELL ブロックエディタでブロックが表示されない場合は、テーマやプラグインの競合が原因のことが多いです。 まず確認すべきは、WordPress本体・SWELLテーマ・使用中のプラグインがすべて最新バージョンかどうかです。古いバージョンのままだと、表示の不具合が発生しやすくなります。 次に、プラグイン同士の競合が疑われる場合は、一度すべてのプラグインを停止し、問題が解消するか確認しましょう。その後、1つずつプラグインを有効化していき、原因を特定します。 SWELLで推奨のプラグインは以下にまとめているので参考にしてください。 あわせて読みたい SWELLの初期設定を初心者向けにやさしく解説！ SWELLを購入したものの、次は何をすればいいかわかりません…。初期設定のやり方を教えてください。 こういった疑問に答えます。 今回は、SWELLの初期設定について解説し… また、キャッシュやブラウザの問題も見逃せません。キャッシュを削除し、シークレットモードで再確認することで、解決することがあります。 SWELLオリジナルのブロックエディターの機能 SWELLで使えるブロックエディターの公式マニュアルは以下です。 >>ブロックエディターで使えるSWELLの専用機能まとめ SWELLオリジナルのブロックエディターの機能を大別すると以下の3つ。 SWELLオリジナルのブロック SWELLで強化されたWordPress標準ブロック SWELLで強化されたブロックツールバー 順に見ていきましょう。 SWELLオリジナルのブロック21個 SWELLオリジナルのブロックの使い方を紹介します。 2025年5月時点で、オリジナルブロックは21個。 以下はSWELL公式サイトによる使い方の紹介動画。使い方のイメージをざっとつかみたい方はご覧ください。 </noscript><iframe width="560" height="315" data-src="https://www.youtube.com/embed/j0M8PY6HsUA?si=qisBfpbWC9PvbwX8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen class="lazyload" > 以下は本章で紹介するブロック。クリックするとジャンプします。 キャプションボックスふきだしSWELLボタンFAQアコーディオンステップタブ関連記事ブログパーツ説明リストバナーリンク広告タグABテストフルワイド投稿リストRSSリッチカラム制限エリアボックスメニュー商品レビューリンクリスト では順に見ていきましょう。 キャプションボックスブロック キャプションボックスブロックは、キャプション(短い説明文やタイトル)がついたボックスを作成できる機能。 例1 SWELLのおすすめポイント 使いやすく、記事執筆を時短できる 専門知識ゼロでもブログをおしゃれにできる カスタマイズ性が高く独自デザインにできる 例2 SWELLのおすすめポイント SEO対策が万全。検索上位表示に有利になる マニュアルが充実。トラブルに対応しやすい 最新のブロックエディタに完全対応している SWELLのキャプションボックスブロックは以下のメリットがあります。 文章だけでなく、リストや画像も配置できる カラーや形などスタイルを柔軟に変更できる スタイルを事前に設定、一括変更できる キャプションにアイコンを設定できる キャプションボックスブロックの形やカラーは管理画面から一括で設定できます。 SWELL設定 ＞ エディター設定 から設定できる 詳しくは公式マニュアルをご覧ください。 >>SWELLの「キャプション付きブロック」の使い方 呼び出すショートカット：/cap ふきだしブロック ふきだしブロックはふきだしを作成できるブロック。 SWELLのふきだしブロックはメチャ便利！ hideharu こんな感じでオシャレだし hideharu 左右の位置を選択できるし hideharu 吹き出しの色や枠線を変更できるし hideharu アイコンも変更できる ふきだしは、WordPress管理画面の「ふきだし」から事前に登録できます。 詳しくは公式マニュアルをご覧ください。 >>SWELLのふきだしブロックの使い方 呼び出すショートカット：/baloon SWELLボタンブロック SWELLボタンブロックは、SWELL専用のブロック作成機能。 WordPress側にも「ボタンブロック」がありますが、SWELLボタンブロックは機能が拡張されていて、超便利。 例1 SWELL公式サイトを見る 例2 SWELL公式サイトを見る SWELLボタンは以下のようなメリットがあります。 カラーや形などスタイルを柔軟に変更できる テキスト型の広告タグを改変せずに貼り付け可 クリック率を計測できる アイコンを設定できる ボタンの形やカラーは管理画面から一括で設定できます。 SWELL設定 ＞ エディター設定 で設定できる 詳しくは公式マニュアルをご覧ください。 >>SWELL専用ボタンブロックの使い方 呼び出すショートカット：/button FAQブロック FAQブロックは、「よくある質問」のようなQ&Aを簡単に設置できるブロックです。 例1 おすすめのWordPressテーマは何？ SWELLです。 SWELLは有料ですか？ はい。買い切りで17,600円です。 例2 おすすめのWordPressテーマは何？ SWELLです。 SWELLは有料ですか？ はい。買い切りで17,600円です。 SWELLのFAQブロックは、以下のメリットもあります。 構造化データを出力できるの 質問テキストを見出しにできる 詳しくは公式マニュアルをご覧ください。 >>【SWELLブロック】Q&Aを簡単に設置！FAQブロックの使い方 呼び出すショートカット：/faq, /qa アコーディオンブロック アコーディオンブロックは、サイト訪問者のクリックやタップの操作で自由にコンテンツを開閉できるブロックです。 例 ここをクリックしてみてね！hideharu これが「アコーディオンブロックです」 長文の補足説明など、ふだんは隠しておいて、みたい人だけアコーディオンを開いて読むといった使い方ができます。 SWELLのアコーディオンブロックは、以下のメリットがあります。 キーボードでアコーディオンの開閉ができる ページ内検索でアコーディオン内部のテキストもヒットする 詳しくはSWELL公式サイトのマニュアルの以下をご覧ください。 SWELL アコーディオンブロックの使い方 | WordPressテーマ SWELL このページでは、WordPressテーマ『SWELL』で利用可能なGutenberg用ブロック、「アコーディオンブロック」の使い方を解説していきます。 このブロックを使うと、クリック（… 呼び出すショートカット：/accordion ステップブロック ステップブロックは、手順の解説などに便利なブロックです。 例1 STEPレンタルサーバーを契約する ここにテキストを入力 STEPWordPressをインストールする ここにテキストを入力 STEPWordPressテーマを導入する ここにテキストを入力 例2 STEPレンタルサーバーを契約する ここにテキストを入力 STEPWordPressをインストールする ここにテキストを入力 STEPWordPressテーマを導入する ここにテキストを入力 詳しくはSWELL公式サイトのマニュアルの以下をご覧ください。 SWELL 【SWELL専用ブロック】ステップブロックの使い方 | WordPressテーマ SWELL このページでは、WordPressテーマ『SWELL』で使える専用ブロック、「ステップブロック」の使い方を解説していきます。 「ステップブロック」を使用すると、作業の手順や契… 呼び出すショートカット：/step タブブロック タブブロックは、複数のコンテンツを並列に配置し切り替えながら表示できるブロックです。 比較記事などにも活躍します。 例 バナー型ランキング型アフィリエイト型テキスト型 最高のWordPressテーマ「SWELL」17,600円(税込)ラクにオシャレな記事を書ける。ラクにオシャレなサイトにできる。 アプデで常に進化を続け、ブログ運営が楽しくなる最高のテーマ。>> 公式サイトはこちら 最高のWordPressテーマ「SWELL」17,600円(税込)ラクにオシャレな記事を書ける。ラクにオシャレなサイトにできる。 アプデで常に進化を続け、ブログ運営が楽しくなる最高のテーマ。>> 公式サイトはこちら WordPressテーマ「SWELL」 SWELLのタブブロックは以下の特徴があります。 タブのスタイルを3種類から選択できる タブのサイズをデバイスごとに設定できる 最初に開くタブを指定できる 呼び出すショートカット：/tab 関連記事ブロック 関連記事ブロックは、関連する記事のリンクをカード形式で表示できる機能。 「ブログカード」と呼ばれたりもします。 この関連記事ブロックでは、内部リンクはもちろん外部リンクも設置可能。 例：内部リンク あわせて読みたい WordPressテーマSWELLのレビュー【評判どおり最強だった】 WordPressテーマのSWELLを購入しようか迷ってます。評判は良いけど、実際はどうなんだろう？利用者の声を聞きたいな。 こういった疑問に答えます。 「SWELLって評判が良… 例：外部リンク Macの活用 おすすめのMacはMacBook Air【コスパ最強】 おすすめのMacを教えてください こういった疑問に答えます。 本記事では、おすすめのMacを紹介します。 最初に結論をいうと、おすすめは MacBook Air です。 Macはノートパ… ブログカードの表示スタイルは、管理画面から設定できます。 SWELL設定 ＞ エディター設定 で設定できる 詳しくはSWELL公式サイトのマニュアルの以下をご覧ください。 SWELL 【SWELLブロック】関連記事ブロックで簡単にブログカード作成！ | WordPressテーマ SWELL SWELLでは、関連記事へのリンクをブログカードとして表示するためのショートコードを用意しています。 このショートコードを簡単に利用できるように、ブロックエディター（… 呼び出すショートカット：/postlink, /blogcard ブログパーツブロック ブログパーツブロックは、よく使うブロックや定型文をあらかじめ登録しておくことで、簡単に使いまわせる機能です。 ブログパーツブロックはWordPressの標準機能「パターン」と基本的な機能としては同じ。 しかし、SWELLのブログパーツは以下のメリットがあります。 ショートコード化して使うこともできるのでウィジェットなどにも挿入できる メインビジュアルやカテゴリーページのカスタマイズでも活躍 たとえば、ボックスメニューをサイドバーに設置するときは、ブログパーツを使います。ショートコード化して呼び出せるから。手順は以下をご覧ください。 あわせて読みたい SWELLボックスメニュー使い方徹底解説｜サイドバー設置のコツと事例集 「SWELLのボックスメニューって、どう使えばいいの？」そんな疑問を持っていませんか？ サイドバーや記事下におしゃれなナビゲーションを設置したいのに、設定方法やデ… なお、ブログパーツを作成・編集しようとすると、「wp-revisions-controlプラグインでエラーが発生したためレンダリングできません。」というメッセージがでることがあります。 あまり気にする必要はありませんが、気になる方は以下の記事をご覧ください。 あわせて読みたい SWELL「wp-revisions-controlプラグインでエラーが発生したためレンダリングできません」への対処法 SWELLでブログパーツを編集しようとすると、以下のメッセージがでる場合があります。 “wp-revisions-controlプラグインでエラーが発生したためレンダリングできません。… ブログパーツブロックの詳細はSWELL公式サイトのマニュアルの以下をご覧ください。 SWELL 登録したコンテンツを自由に呼び出せる「ブログパーツ」機能 | WordPressテーマ SWELL ここでは、WordPressテーマ「SWELL」で使用可能な「ブログパーツ」機能について解説していきます。 SWELLでは「ブログパーツ」として登録したコンテンツを、ショートコード… 呼び出すショートカット：/parts, /blogparts 説明リストブロック 説明リストブロックは、項目と項目に対する説明をセットで表示できる機能。 例1 ドメイン インターネット上でWebサイトやメールアドレスの「住所」を表す文字列。 レンタルサーバー インターネット上にWebサイトやメールアドレスなどのサービスを提供するために必要なサーバーを、業者から借りて利用するサービス。 WordPress Webサイトやブログを簡単に作成・管理できる、無料のCMS (コンテンツマネジメントシステム)。 例2 ドメイン インターネット上でWebサイトやメールアドレスの「住所」を表す文字列。 レンタルサーバー インターネット上にWebサイトやメールアドレスなどのサービスを提供するために必要なサーバーを、業者から借りて利用するサービス。 WordPress Webサイトやブログを簡単に作成・管理できる、無料のCMS (コンテンツマネジメントシステム)。 SWELLの説明ブロックは以下のメリットがあります。 スタイルを4種類から選択できる 説明欄(ddタグ)部分にはブロックを自由に挿入できる 呼び出すショートカット：/dl バナーリンクブロック バナーリンクブロックは、画像の上に文字を入力してリンクを設定できるブロックです。 バナーリンクブロックを使えば、オシャレな見た目のバナーを設置できます。 例 SWELL購入方法SWELL購入方法をやさしく解説します SWELL購入方法SWELL購入方法をやさしく解説します 呼び出すショートカット：/banner-link 広告タグブロック 広告タブブロックは、広告タグ管理機能で登録した広告を記事内に呼び出せるブロック。 広告タグ管理機能と広告タグブロックを組み合わせると、広告をかんたん設置でき、クリック率も計測できて便利。 バナー型ランキング型アフィリエイト型テキスト型 最高のWordPressテーマ「SWELL」17,600円(税込)ラクにオシャレな記事を書ける。ラクにオシャレなサイトにできる。 アプデで常に進化を続け、ブログ運営が楽しくなる最高のテーマ。>> 公式サイトはこちら 最高のWordPressテーマ「SWELL」17,600円(税込)ラクにオシャレな記事を書ける。ラクにオシャレなサイトにできる。 アプデで常に進化を続け、ブログ運営が楽しくなる最高のテーマ。>> 公式サイトはこちら WordPressテーマ「SWELL」 詳しくは公式マニュアルをご覧ください。 >>広告タグ管理機能・広告タグブロックの使い方 呼び出すショートカット：/ad ABテストブロック ABテストブロックは、読者に表示される内容を2パターン用意して、ランダム表示ができるブロックです。 このABテストを使って、広告の効果測定ができます。 呼び出すショートカット：/ab フルワイドブロック フルワイドブロックは画面の横幅全体を使って背景画像や背景色を設定できる機能。 SWELLのフルワイドブロックは、サイトをオシャレにカスタマイズするってときに便利。 特に、トップページの作成時に活躍します。 例1 さぁ、SWELLでブログを始めよう。 例2 さぁ、SWELLでブログを始めよう。 SWELLのフルワイドブロックは以下の特徴があります。 背景に画像や塗りつぶしを適用できる ブロック上下の境界線の形状を変更できる 詳しくは公式マニュアルをご覧ください。 >>【SWELL専用ブロック】フルワイドブロックの使い方 呼び出すショートカット：/fullwide 投稿リストブロック 投稿リストブロックは、投稿の一覧を表示することができるブロックです。 トップページやカテゴリーページなどを作りこむときに活躍します。 例1 May 10, 2025 SWELL SWELLの記事の書き方マニュアル【ブロックエディターの使い方】 May 3, 2025 SWELL SWELLボックスメニュー使い方徹底解説｜サイドバー設置のコツと事例集 April 26, 2025 SWELL SWELL「wp-revisions-controlプラグインでエラーが発生したためレンダリングできません」への対処法 例2 SWELL SWELLの記事の書き方マニュアル【ブロックエディターの使い方】 May 10, 2025 SWELL SWELLボックスメニュー使い方徹底解説｜サイドバー設置のコツと事例集 May 3, 2025 SWELL SWELL「wp-revisions-controlプラグインでエラーが発生したためレンダリングできません」への対処法 April 26, 2025 SWELLの投稿リストブロックは、 表示スタイル 表示順 表示条件 を細かく設定できるので便利です。 呼び出すショートカット：/post-list RSSブロック RSSブロックでは、RSSフィードのリストをSWELLのデザインに合わせた形で最大10件まで表示してくれる機能。 このRSSブロックで設定できる内容は、上述した「投稿リストブロック」と似てます。 以下は、私の別サイトの記事を表示させた例。 例 Macの活用 May 11, 2025 iPhone内の写真がiCloudに同期されないときの対処法 Macの活用 May 10, 2025 iPhoneで迷惑電話を着信拒否(ブロック)する方法 Macの活用 April 6, 2025 フリーボードとは？iPhone・iPad・Macで使える便利アプリ解説 呼び出すショートカット：/rss リッチカラムブロック リッチカラムブロックは、WordPress標準のカラムブロックを強化した上位互換の機能。 いろんな表示形態のサイトを作る際に重宝します。 例 ステップ1： WordPressでブログ開設 mixhostでWordPressブログを始める方法【初心者向でも簡単】 September 24, 2022 ステップ2： ブログテーマ買うならSWELL SWELL WordPressテーマSWELLのレビュー【評判どおり最強だった】 January 1, 2024 ステップ3： 記事を書いてみよう WordPress 【グーテンベルグ】WordPressブログの記事の書き方をゼロから解説！ December 25, 2023 リッチカラムは以下のようなメリットがあります。 デバイスごとの表示列数を柔軟に設定できる 余白設定も柔軟に調整できる CSSの編集不要 詳細は公式マニュアルの以下をご覧ください。(リッチカラムブロックではなく、カラムブロックの説明ですが、機能は概ね同じですので) >>カラムブロックで使えるSWELLのオリジナル機能 呼び出すショートカット：/rich 制限エリアブロック 制限エリアブロックは、特定の期間だけブロックを表示したり、ユーザーごとにブロックの表示／非表示を切り替えたりできる機能。 特定の期間だけブロックを表示 例 2025/5/1 06:00から2025/5/10 23:59 まで50%割引セール 上記のような期間限定セールを、指定の期間だけ表示できます。 手動で期間限定セールの情報を追記したけど、セール期間終了後に削除し忘れる・・・というミスを防げるのがメリット。 ユーザーごとにブロックの表示／非表示を切り替え 大きくは以下の2つの制限を指定できます。 非ログインユーザー ログインユーザー ログインユーザーの場合は以下のようにさらに細く制限できます。 設定画面 呼び出すショートカット：/user, /role, /login ボックスメニューブロック ボックスメニューブロックは、アイコンとテキストが組み合わされたボックス型のリンクを簡単に作成できる機能。 サイトバーとかに置くと、それだけでクオリティーが高くみえます。 例1 WordPress SWELL レンタルサーバー ノウハウ 例2 WordPress SWELL レンタルサーバー ノウハウ 例3：サイドバーに設定 SWELL公式サイトのサイドバー SWELLボックスメニューは以下のメリットがあります。 レイアウトや列数を柔軟に変更できる 設定できるアイコンの種類が豊富 アイコンは画像も設定できる アイコンやテキストのカラーやサイズを変更可 ボックス同士の余白を調整できる ボックスメニューの詳細は以下をご覧ください。 あわせて読みたい SWELLボックスメニュー使い方徹底解説｜サイドバー設置のコツと事例集 「SWELLのボックスメニューって、どう使えばいいの？」そんな疑問を持っていませんか？ サイドバーや記事下におしゃれなナビゲーションを設置したいのに、設定方法やデ… 呼び出すショートカット：/box-menu 商品レビューブロック 商品レビューブロックは、レビュー用のボックスを作成できる機能。 評価用のスターマークやメリット・デメリットをおしゃれに作成できるので、レビュー記事で重宝します。 例 WordPressテーマ「SWELL」 総合評価 ( 5 ) メリット 使いやすく、記事執筆を時短できる専門知識ゼロでもブログをおしゃれにできるカスタマイズ性が高く独自デザインにできる デメリット 料金は安くはない 商品レビューブロックは以下のメリットがあります。 商品レビュー用のボックスを簡単かつオシャレに作成できる メリット・デメリットや星評価を構造化データとして出力できる 呼び出すショートカット：/review, /product リンクリストブロック リンクリストブロックは、その名のとおりでリンクのリスト。 リンク集や記事一覧をつくるときに便利。 例1 Step1：ブログを開設する Step2：SWELL導入する Step3：記事を書く 例2 Step1：ブログを開設する Step2：SWELL導入する Step3：記事を書く リンクリストブロックは以下のメリットがあります。 リストのデザインを2種類から選択できる リストのアイコンを4種類から選択できる リストを横並びにもできる 呼び出すショートカット：/link-list SWELLで強化されたWordPress標準ブロック 段落ブロック 記事を書く上で最も使用するブロックが段落ブロックで、文字入力に使う基本のブロックです。 SWELLでは、クリック操作だけで段落ブロックへの装飾が可能。 SWELLとWordPress標準の段落ブロックの設定項目を比較すると以下のとおり。 SWELL 標準 hideharu SWELLの段落ブロックの充実さがわかりますね！ 詳しくは公式マニュアルをご覧ください。 >>SWELLで使える「ボックス装飾」一覧 グループブロック グループブロックは複数のブロックをグループ化してくれるブロック。 前述した「ブロックの基本的な使い方」でも紹介しました。 SWELLのグループブロックはとても便利！ 手順：1. グループ化したいブロックを選択2. 「⋮」マークをクリック3. グループ化をクリック すると、先ほどの段落ブロックで設定できる装飾の一部がグループブロックにも適用できます。 見出しブロック 見出しブロックは見出しを表示できるブロック。 SWELLの見出しブロックでは、2種類のスタイルを選択できます。 デフォルト セクション用 デフォルトのスタイルは通常の記事で使用します。 セクション用のスタイルはフルワイドブロックと組み合わせてトップページで使うことが多いです。 詳しくは公式マニュアルをご覧ください。 >>「セクション用見出し」の使用方法 見出しのデザインは以下の場所で変更できます。WordPress管理画面＞「外観」＞「カスタマイズ」＞「投稿・固定ページ」＞「コンテンツのデザイン」 呼び出すショートカット：/heading 画像ブロック 画像ブロックは記事の中に画像を埋め込めるブロック。 WordPress標準の場合、画像ブロックのスタイルは2種類しかありませんが、SWELLの場合は7種類から選べます。 呼び出すショートカット：/image, /img リストブロック リストブロックは箇条書きが簡単に作れるブロック。 WordPress標準の場合、リストブロックのスタイルは2種類しかありませんが、SWELLの場合は8種類から選べます。 例 これがリスト これがリスト これがリスト これがリスト これがリスト これがリスト これがリスト これがリスト これがリスト それぞれのリストアイコンのカラーは管理画面から変更できます。 WordPress管理画面＞「SWELL設定」＞「エディター設定」＞「カラーセット」＞『リスト設定』 SWELLのリストブロック独自の機能として以下のような装飾もできます。 下線を付ける 横並び 詳しくは公式マニュアルをご覧ください。 >>リストで使えるデザイン装飾一覧 呼び出すショートカット：/list テーブルブロック テーブルブロックは表を作れるブロック。 WordPress標準の場合、テーブルブロックのスタイルは2種類しかありませんが、SWELLの場合は4種類から選べます。 また、SWELLのテーブルブロックは、WordPress標準だとできない機能がたくさんあります。 1列目をthタグ風に表示する 1列目を固定する 横スクロールできる 背景に記号に表示する など。 例：横スクロール スクロールできます No項目1項目2項目3項目4項目5項目61ここはテキストここはテキストここはテキストここはテキストここはテキストここはテキスト2ここはテキストここはテキストここはテキストここはテキストここはテキストここはテキスト 例：背景に記号を入れる 商品A商品B商品C機能A 少し古い普通 最新機能機能B 非対応 制限付き使用可性能A 200500 1000性能B500 1000 800 詳しくはSWELL公式サイトのマニュアルの以下をご覧ください。 SWELL 「テーブルブロック」で使えるSWELLのオリジナル機能 | WordPressテーマ SWELL ここでは、テーブルタグを簡単に出力できる「テーブルブロック（表ブロック）」に関するSWELLのオリジナル機能について解説していきます。 テーブルブロックのスタイル一覧… 呼び出すショートカット：/table SWELLで強化されたブロックツールバー ブロックツールバーとは、任意のブロックを選択している時に、ブロック上部に表示されるツールバー。 WordPress標準の状態とSWELLのブロックツールバーを比較すると、以下のとおり。 SWELL 標準 hideharu SWELLの項目の多さが分かりますね！ ボタン位置のカスタマイズ機能 エディター右上にあるSWELLのアイコンをクリックすると、以下のような設定が出現します。 ここの設定によって、いくつかのボタンについて、表示の有無や位置を調節することが可能です。 テキストの装飾 WordPressの標準機能として、太字 や イタリック文字、取り消し線 などのテキスト装飾ができるようになっていますが、SWELLではこれらの機能をさらに強化されています。 マーカー線を引いたり、フォントサイズを調節したり、文字色を変えたり、といった様々なテキスト装飾がツールバーからサクッとできるようになっています。 テキストの装飾に使うブロックツールバーは以下の赤枠。 詳しくは公式マニュアルをご覧ください。 >>SWELLで使えるテキスト装飾機能（書式）一覧 ブロック下の余白設定 ブロック下の余白量を設定して、行間を広げたり狭くしたりを簡単にできます。 他テーマだと、行間を広げたい場合は「スペーサーブロック」を使って広げることが多いですが、SWELLではブロックツールバーから簡単に設定できるので便利です。 詳細は公式マニュアルをご覧ください。 >>SWELLの各ブロックで使用できるレイアウト設定・上下の余白調節 PC、スマホの表示設定 PCだけで表示させたり、スマホだけで表示させたりを設定できます。 「デバイスコントロール」という機能で、以下で設定します。 PCだといい感じにレイアウトになっていたとしても、スマホだと見づらい、といったときにこの機能を使うとよいでしょう。 アイコン アイコンがたくさん用意されています。 赤枠のアイコンマークをクリックして、アイコンを選択すればOK。 ショートコードの呼び出し テキスト装飾だけでなく、SWELLで使える便利なショートコードを簡単に呼び出すためのツールボタンも用意されています。 記事内広告 スマホだけ改行・PCだけ改行 アイコン用ショートコード 評価用スター（） HTML挿入 などのショートコードを呼び出せます。 評価用スターの使い方は以下の記事をご覧ください。 あわせて読みたい 【SWELL】レビュー用の星マーク・評価用スターを表示する方法 SWELLでレビュー用の星マークを表示する方法を教えて こういった疑問に答えます。 商品レビューとかで使う星マークを表示する方法を紹介します。 こんなの▼ SWELLでレビ… カスタム書式 SWELLには書式セット機能というものがあります。 たとえば、”マーカー”+”太字”など、良く使う文字装飾の組み合わせを事前に作っておき、記事内で簡単に装飾できる機能です。 カスタム書式の設定方法 WordPress管理画面で「SWELL設定」＞「エディター設定」＞「カスタム書式」 カスタム書式の使い方 STEP装飾するブロックを選択 STEPブロックツールバーのSWELLアイコン＞「書式セット」をクリック すると、事前に設定した書式がすぐに反映されます。 hideharu 時短になるので活用しましょう！ 記事執筆で活躍する便利機能 ブロックエディターでコンテンツを作成するときの便利機能を紹介します。 パターン ページ内リンク ポチップ(商品リンクプラグイン) パターン パターンは、よく使うブロックの組み合わせやレイアウトをあらかじめ登録しておき、エディター上で簡単に呼び出すことができる機能。 パターンを使うことで記事作成を効率化できます。 パターンは、前述したSWELL独自のブログパーツと機能は似てます。 2023年8月9日にリリースされたWordPress6.3から、従来の「ブロックパターン」と「再利用ブロック」が統合されて『パターン』という名称に変更されました。 パターンは、同期する仕様と同期しない仕様の2種類あります。 同期するパターン (従来の再利用ブロック) 同期しないパターン (従来のブロックパターン) 同期するパターンは、パターンを編集すると、別の場所で使っている同じ同期パターンにも変更が反映されます。 非同期パターンはパターンを編集しても、他ページなどで使っている同じパターンに変更は反映されません。 同期させたいかさせたくないかによって、2つを使い分けましょう。 パターンの登録方法 STEP登録したいブロックを選択 STEPブロックツールバーの「⋮」マーク>「パターンを作成」 をクリック STEPパターンの「名前」「カテゴリー」を入力し、同期有無を設定 作成したパターンを同期させるなら「同期」ボタンをオンにします。同期させないなら「同期」ボタンをオフにします。 パターンの使い方 登録したパターンを使用する方法を紹介します。 STEPブロックインサーターを表示 STEP「パターン」タブをクリック STEP希望のパターンを選択 ページ内リンク ページ内リンクは、同じページ内の任意の箇所にリンクを設置できる機能。 たとえば、以下のリンクをクリックしてみてください。1章までジャンプします。 1章：ブロックエディターとは 記事の中でうまくページ内リンクを活用すると、読者にとって見やすい記事になるので、ぜひ作り方を覚えておきましょう。 ページ内リンクの詳細は以下をご覧ください。 あわせて読みたい SWELL：ブロックエディターのページ内リンク(アンカーリンク)の作り方！ WordPressのブロックエディターでページ内リンク(アンカーリンク)を設置する方法を紹介します。 ページ内リンクとは？記事内の任意の箇所にジャンプできる機能 ページ内… ポチップ(商品リンクプラグイン) ポチップは、Amazonや楽天、Yahoo!などのリンクを作成、管理できるプラグイン。 ポチップを導入すれば、おしゃれな商品リンクを10秒でサクッと作成できます。 例 Apple AirPods Pro（第2世代）- MagSafe充電ケース（USB-C） Apple(アップル) ¥34,354 （2025/05/18 14:37時点 | Amazon調べ） 口コミを見る Amazon 楽天市場 Yahooショッピング ポチップ ポチップは無料のプラグインですが、機能が拡張された有料版のポチッププロもあります。 ポチッププロを導入すると以下のメリットがあります。 セール情報を複数設定できる 商品画像を自由に変更できる セールイベントを自動で取得できる 設置したブロックごとにクリック率を計測できる お知らせバーにセール情報を表示できる（SWELLユーザーのみ） 上記の「お知らせバー表示機能」はSWELLとポチップの組み合わせのみで使用できる機能で、SWELLとの相性も抜群のプラグインです。 ポチップの使い方の詳細は以下をご覧ください。 あわせて読みたい 物販用プラグインPochipp(ポチップ)の初期設定と使い方 物販用プラグインPochipp(ポチップ)の使い方がわかりません。教えてください。 こういった疑問に答えます。 ブログ、サイトで物販をするならぜひとも導入したいWordPres… まとめ｜SWELL ブロックエディタの使い方をマスターして効率的な記事作成を実現しよう SWELLのブロックエディタの基本操作から応用テクニックまでを紹介しました。 SWELL ブロックエディタをしっかり理解し、活用することで、あなたの記事作成はぐっと効率化されます。 ぜひ今回紹介した基本・応用テクニックを試し、実際のサイト運営に役立ててください。 SWELLのデザインの設定がまだの方は以下の記事を参考にどうぞ。 あわせて読みたい SWELLのデザインをカスタマイズする方法【初心者向け】 SWELLを購入して初期設定は終わったけど、デザインはどうやって変更すればいいかわかりません。教えてください。 こういった疑問に答えます。 今回は、本記事ではSWELL… 最高のWordPressテーマ「SWELL」17,600円(税込)ラクにオシャレな記事を書ける。ラクにオシャレなサイトにできる。 アプデで常に進化を続け、ブログ運営が楽しくなる最高のテーマ。>> 公式サイトはこちら SWELL公式サイトはこちらからどうぞ！ SWELL公式サイトへ SWELL この記事が気に入ったら フォローしてね！ Follow @hideharublog よかったらシェアしてね！ URLをコピーしました！
