要約：WordPressにシェイプディバイダーを追加する方法
シェイプディバイダーは、ページセクション間に視覚的な遷移を追加するSVGグラフィックです。SeedProdならコーディングは不要です。
- SeedProdをインストールする – 有料プランを取得し、プラグインをインストールして、ライセンスキーを入力します。
- ビジュアルエディターを開く – ランディングページまたはテーマテンプレートを作成または編集します。
- シェイプディバイダーを見つける – いずれかのセクションをクリックし、[高度な設定]タブに移動して、[シェイプディバイダー]パネルを開きます。
- カスタマイズする – 18種類の形状から選択し、色、幅、高さを設定します。
- プラグイン不要のオプション – 代わりに、WordPressの区切り線ブロックを使用して、シンプルな水平線を使用します。
ほとんどのWordPressテーマには、セクション間にシェイプディバイダーを追加する組み込みの方法がありません。シェイプディバイダーは、重いアニメーションなしで、訪問者をページの下に誘導するのに役立つクリーンな視覚的遷移を作成します。
小規模ビジネスサイト、ポートフォリオ、ブログのいずれを運営していても、これらを追加するためにコーディングやデザインのスキルは必要ありません。このガイドでは、WordPressにシェイプディバイダーを追加する2つの方法を紹介します。
WordPressのセクションディバイダーとは？
セクションディバイダー（シェイプディバイダーとも呼ばれる）は、WordPressコンテンツを分割するために使用できるデザイン要素です。セクション間に視覚的な遷移を追加するため、ページがより構造化され、フォローしやすくなります。
トピックを分離したり、ページ上の重要な領域を強調したりするために、コンテンツブロックの上または下にディバイダーを配置できます。
ディバイダーには、SVGシェイプディバイダー、線またはテキストベースのディバイダー、カスタムデザインなど、さまざまなスタイルがあります。ほとんどは、ブランドカラーやレイアウトに合わせてスタイル設定でき、洗練された外観になります。
WordPressサイトに装飾的なディバイダーを追加する方法
SeedProdを使用すると、組み込みのシェイプディバイダーパネルを通じて、WordPressの任意のセクションにシェイプディバイダーを追加できます。コードは不要です。
18種類のSVGスタイルから選択し、色、幅、高さ、位置をカスタマイズできます。
方法1：SeedProdでウェブサイトディバイダーを作成する
この方法では、SeedProdを使用してWordPressサイトにシェイプディバイダーを追加します。
SeedProdは、WordPress用の最高のウェブサイトビルダーの1つです。コードなしでカスタムWordPressテーマ、ランディングページ、レスポンシブウェブサイトレイアウトを作成できます。
何百もの既製テンプレート、多数のコンテンツ要素、およびWordPressページをカスタマイズするための簡単なドラッグアンドドロップビジュアルエディターが付属しています。
このガイドで使用する機能の1つは、SeedProdの組み込みの装飾的なシェイプディバイダーです。これにより、コーディングなしで数回クリックするだけで、投稿またはページに魅力的なシェイプセパレーターを追加できます。
SeedProdを使用してWordPressにシェイプディバイダーを追加するには、以下の手順に従ってください。
SeedProd WordPressプラグインのインストールと有効化
まず、ここをクリックしてSeedProdの利用を開始し、プラグインをコンピューターにダウンロードします。次に、プラグインの.zipファイルをWordPressウェブサイトにアップロードします。
必要であれば、WordPressプラグインのインストールに関するこのガイドに従ってください。
注意：SeedProdには無料版がありますが、ここではShape Divider機能のためにSeedProdのプレミアム版を使用します。
SeedProdをインストールして有効化した後、SeedProd » 設定に移動し、プラグインのライセンスキーを入力してください。
ライセンスキーは、SeedProdのウェブサイトにログインし、ダウンロードセクションで確認できます。
WordPressテーマまたはランディングページを作成する
SeedProdでセクションの区切り線を使用するには、2つの方法があります。
新しいWordPressテーマを作成し、さまざまなテーマパーツにシェイプディバイダーを追加できます。または、スタンドアロンのランディングページを作成し、単一のページにシェイプディバイダーを追加することもできます。
両方の設定方法を以下に示します。
WordPressテーマ
SeedProdのテーマビルダーを使用すると、ドラッグアンドドロップエディターで新しいWordPressテーマを作成できます。
これにより、サイドバー、ヘッダー、フッター、シングル投稿など、テーマを構成するすべてのファイルが作成されます。その後、コードなしで各ファイルを視覚的にカスタマイズできます。
新しいテーマを有効化すると、既存のWordPressテーマが上書きされるため、このオプションは既存のテーマを失っても問題ない場合にのみ選択してください。
SeedProdでカスタムWordPressテーマを作成するには、このチュートリアルに従ってください。
ランディングページ
SeedProdのランディングページビルダーを使用すると、ドラッグアンドドロップインターフェイスを使用してWordPressで単一のランディングページを作成できます。デザインを完全にカスタマイズできますが、テーマビルダーバージョンとは異なり、既存のテーマを上書きすることはありません。
現在のWordPressテーマを維持しながら、シェイプディバイダー機能を使用したい場合に最適なソリューションです。
WordPressでランディングページを作成するためのステップバイステップガイドに従ってください。
WordPressテーマまたはランディングページを作成したら、次のステップに進むことができます。
セクションディバイダーでデザインをカスタマイズする
WordPressにシェイプディバイダーを追加するには、テーマテンプレートまたはランディングページを編集してSeedProdのビジュアルエディターを開きます。このチュートリアルでは、カスタムWordPressテーマのホームページを編集します。
ビジュアルエディターに入ったら、シェイプディバイダーを追加したいページの領域を見つける必要があります。SeedProdでは、セクション、カラム、行にシェイプディバイダーを追加できます。
選択したセクションまたは行をクリックして、左側の設定パネルを開きます。パネル内で、詳細設定タブをクリックして、さらにカスタマイズオプションを表示します。
パネルの下部にあるシェイプディバイダーの見出しが表示されます。見出しをクリックして、シェイプディバイダーの設定を開きます。
まず、セクションの上部または下部に区切り線を追加するかどうかを選択できます。
次に、ドロップダウンメニューをクリックして、区切り線のための18種類の形状を選択できます。
形状を選択すると、SeedProdに形状の外観をカスタマイズするための追加設定が表示されます。
たとえば、次のことができます：
- 形状の色を変更する
- カスタムの幅と高さを選択する
- 形状を反転する
- 形状を前面に表示する
セクションの下部にシェイプディバイダーを追加するには、同様の手順に従います。
SeedProdのシェイプディバイダーで作成できるさまざまなエフェクトの例をいくつかご紹介します。
山
波
カーブ
すべてがどのように見えるかに満足するまで、さまざまなウェブサイトディバイダーを試してください。
SeedProdのシェイプディバイダーはデフォルトでレスポンシブです。特定のデバイスで非表示にする必要がある場合は、[高度な設定]タブのブロック表示設定を使用してください。
WordPressでFancy Dividersを公開する
シェイプディバイダーが配置されたら、新しいデザインを公開できます。
WordPressテーマを作成している場合は、SeedProd Theme Builderに移動し、「SeedProdテーマを有効にする」トグルを「はい」の位置にクリックして公開できます。
単に[保存]ボタンのドロップダウン矢印をクリックし、ランディングページの場合は[公開]をクリックします。
これで、ライブウェブサイトにアクセスして、セクションディバイダーが機能していることを確認できます。ヒーローの背景画像セクションにセクション分割があるデモサイトの例を次に示します。
SeedProdでアイコンとテキストのディバイダーを追加する
Fancyセクションディバイダーがウェブサイトのニーズに適さない場合は、SeedProdのDividerブロックを使用して、WordPressサイトにテキストとアイコンのディバイダーの線を追加することもできます。
原則は以前と同じですが、行、列、またはセクションのオプションを選択する代わりに、Dividerブロックをページにドラッグする必要があります。
そこから、ドロップダウンボックスをクリックして、このようなアイコンラインディバイダーを選択できます。
または、この例に似たテキストディバイダー。
これで、SeedProdを使用してWordPressで魅力的なディバイダーを作成する2つの方法ができました。次に、プラグインなしでディバイダーを追加する方法を見てみましょう。
方法2：プラグインなしでWordPressでセクションディバイダーを作成する
組み込みのWordPress設定を使用して、サイトにディバイダーを追加することもできます。この方法は、追加のWordPressプラグインをインストールしたくない場合に役立ちます。
ただし、カスタマイズオプションはより限定的です。たとえば、各線区切りに対して異なる線スタイルを追加し、背景色を変更することしかできません。
高度なカスタマイズオプションについては、方法1を使用することをお勧めします。以下の手順に従って、プラグインなしでWordPressに水平線セクションディバイダーを追加します。
WordPressブロックエディターで水平線を追加する
WordPressブロックエディターを使用して水平セクションディバイダーを追加するには、投稿またはページを開き、ディバイダーを配置したい場所でプラス（+）アイコンをクリックします。
次に、検索ボックスに「Separator」と入力し、**Separator**ブロックをクリックします。
ブロックをページに追加すると、テキストの各セクションの間に水平セパレーターが表示されます。
右側のパネルで、[デフォルト]、[ワイドライン]、または[ドット]をクリックして、ディバイダースタイルを変更できます。
同じパネルで、セパレーターの背景色を変更することもできます。
すべてがどのように見えるかに満足したら、ページを更新または公開して結果を確認します。
WordPressクラシックエディターで水平線を追加する
WordPressのクラシックエディターを使用してウェブサイトにセクション区切りを追加する方法については、これらの手順に従ってください。
既存の投稿またはページを編集するか、新しい投稿またはページを作成します。すべてのエディター設定が表示されない場合は、ツールバーの切り替えアイコンをクリックしてください。
次に、区切りを追加したいページ上の場所をクリックします。その後、水平線アイコンをクリックします。
水平線区切りは白黒または明るい灰色になり、投稿またはページ全体にこのように表示されます。
WordPressのセクション区切りに関するFAQ
コードなしでWordPressページにシェイプ区切りを追加するにはどうすればよいですか？
SeedProdのビジュアルエディターでセクションを開き、[高度な設定]タブをクリックして、[シェイプ区切り]パネルまでスクロールします。18種類のSVGシェイプから選択し、色、幅、高さを設定してから公開します。CSSやコードは不要です。
SeedProdのシェイプ区切りは、どのページまたは投稿でも機能しますか？
はい。シェイプ区切りは、ランディングページまたはWordPressテーマ全体を構築している場合でも、SeedProdのビジュアルエディター内の任意のセクションまたは行で機能します。任意のセクションの上部または下部に追加できます。
シェイプ区切り機能はSeedProdの無料版で利用できますか？
いいえ。シェイプ区切りはプレミアム機能です。[高度な設定]のシェイプ区切りパネルにアクセスするには、有料のSeedProdプランが必要です。
既存のWordPressテーマでシェイプ区切りを使用できますか？
はい、ただし1つの注意点があります。SeedProdのランディングページビルダーを使用する場合、既存のテーマはそのまま残り、ランディングページのみがシェイプ区切りを使用します。SeedProdのテーマビルダーを有効にすると、現在のテーマが完全に置き換えられます。
シェイプ区切りとWordPressの区切りブロックの違いは何ですか？
区切りブロック（ネイティブWordPressブロック）は、コンテンツ領域の間に単純な水平線を追加します。シェイプ区切りは、波や曲線のような、セクションの端全体に広がるフル幅のSVGグラフィックです。シェイプ区切りは、SeedProdでより視覚的に特徴的で完全にカスタマイズ可能です。
SeedProdとあなたのスモールビジネス
この記事がWordPressにセクション区切りを追加する方法を学ぶのに役立ったことを願っています。SeedProdの強力なドラッグアンドドロップウェブサイトビルダーを使用すると、派手なシェイプ区切りを作成するのは簡単です。
関連する記事をいくつかご紹介します。
お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。
