WordPressウェブサイトにセクションディバイダーを追加したいですか？セクションディバイダーは、コンテンツを分割してページを読みやすくするシンプルなデザイン要素です。また、訪問者をスクロールさせ続ける視覚的な面白さも加えます。
コーディングやデザインのスキルは必要ありません。このガイドでは、WordPressで簡単にウェブサイトを分割する方法をステップバイステップで紹介します。
WordPressのセクションディバイダーとは？
セクションディバイダーは、シェイプディバイダーと呼ばれることもあり、WordPressのコンテンツを分割するために使用できるデザイン要素です。セクション間に視覚的な切り替えを加えることで、ページがより構造化され、わかりやすくなります。
コンテンツブロックの上や下に仕切りを配置することで、トピックを分けたり、ページ上の重要なエリアを強調したりすることができます。
仕切りには、SVGシェイプの仕切り、ラインまたはテキストベースの仕切り、カスタムデザインなど、さまざまなスタイルがあります。あなたのブランドカラーやレイアウトに合わせて、洗練されたスタイルに仕上げることができます。
仕切り板を使う利点は？
シェイプディバイダーは、訪問者を圧倒することなく注目を集めることができます。セクション間の区切りがスムーズになり、コンテンツが読みやすく、より魅力的になります。
重いアニメーションや気が散るようなグラフィックを使う代わりに、仕切りは重要な情報を強調し、視線をページに誘導するすっきりとした方法を提供する。
実際、視覚的に魅力的なレイアウトのウェブサイトでは、直帰率が最大38％低下し、コンバージョン率が86％向上しています。シェイプディバイダーは、サイトを一から作り直すことなく、デザインを一新し、これらのメリットを得る簡単な方法です。
WordPressサイトにファンシーな仕切りを追加する方法
先に述べたように、WordPressで派手なセクション区切りを作るには、通常、デザインやコーディングの知識が必要です。しかし、以下にコードなしでセクション区切りを追加する2つの方法を紹介します。
方法1：SeedProdでウェブサイトの仕切りを作成する
最初の方法として、SeedProdを使ってWordPressサイトに形の仕切りを追加します。
SeedProdは、WordPressのための最高のウェブサイトビルダーの一つです。カスタムWordPressテーマ、ランディングページ、レスポンシブWebサイトレイアウトをコードなしで作成できます。
あらかじめ用意された数百ものテンプレート、多数のコンテンツ要素、WordPressページをカスタマイズするための簡単なドラッグ＆ドロップのビジュアルエディタが付属しています。
このガイドで使用する機能の一つは、SeedProdに内蔵されているファンシーなシェイプディバイダーです。数回のクリックで、魅力的なシェイプセパレータを投稿やページに追加することができます。
SeedProdを使ってWordPressにシェイプディバイダーを追加するには、以下の手順に従ってください。
SeedProd WordPressプラグインのインストールと有効化
まず、ここをクリックしてSeedProdを開始し、プラグインをコンピュータにダウンロードします。次に、プラグイン.zipファイルをWordPressウェブサイトにアップロードします。
WordPressプラグインのインストール方法については、こちらのガイドをご参照ください。
注：SeedProdには無料版もありますが、ここではShape Divider機能のためにSeedProdのプレミアム版を使用します。
SeedProdをインストールし、有効化した後、SeedProd " 設定に行き、プラグインのライセンスキーを入力してください。
ライセンス・キーは、SeedProdのウェブサイトにログインし、ダウンロード・セクションの下にあります。
WordPressテーマまたはランディングページの作成
SeedProdでセクション分割を使用するには2つの方法があります。
新しいWordPressテーマを作成し、異なるテーマ部分にシェイプディバイダーを追加することができます。または、独立したランディングページを作成し、1つのページにシェイプデバイダーを追加することもできます。
以下はその両方の設定方法である：
WordPressテーマ
SeedProdのテーマビルダーを使用すると、ドラッグアンドドロップエディタで新しいWordPressテーマを作成することができます。
サイドバー、ヘッダー、フッター、シングル投稿など、テーマを構成するすべてのファイルを作成します。そして、コードなしで、各ファイルを視覚的にカスタマイズすることができます。
新しいテーマを有効化すると、既存のWordPressテーマが上書きされますので、既存のテーマを失っても構わない場合にのみ、このオプションを選択してください。
このチュートリアルに従って、SeedProdでカスタムWordPressテーマを作成してください。
ランディングページ
SeedProdのランディングページビルダーは、ドラッグ＆ドロップのインターフェイスを使ってWordPressで単一のランディングページを作成することができます。デザインを完全にカスタマイズすることができますが、テーマビルダーバージョンとは異なり、既存のテーマを上書きすることはありません。
現在のWordPressテーマはそのままに、シェイプディバイダー機能を使いたい場合に良い解決策です。
WordPressでランディングページを作成するには、このステップバイステップのガイドに従ってください。
WordPressテーマやランディングページを作成したら、次のステップに進みましょう。
セクションディバイダーでデザインをカスタマイズ
WordPressにシェイプディバイダーを追加するには、テーマテンプレートまたはランディングページを編集し、SeedProdのビジュアルページビルダーを開きます。このチュートリアルでは、カスタムWordPressテーマのホームページを編集します。
ビジュアルエディタに入ったら、シェイプディバイダーを追加したいページのエリアを見つける必要があります。SeedProdでは、セクション、列、行にシェイプデバイダーを追加することができます。
選択したセクションまたは行をクリックすると、左側に設定パネルが開きます。そのパネルの中にある詳細タブをクリックすると、より多くのカスタマイズオプションが表示されます。
パネルの下部にShape Dividers の見出しがあります。見出しをクリックするとシェイプディバイダーの設定が開きます。
まず、セクションの上部または下部に仕切りを追加することができます。
ドロップダウンメニューをクリックすると、18種類の仕切りの形を選択できます。
シェイプを選択すると、SeedProdはシェイプの外観をカスタマイズするための追加設定を表示します。
例えば、こんなことができる：
- シェイプの色を変更する
- カスタムの幅と高さを選択する
- 形を反転させる
- シェイプを前面に
同じ手順で、セクションの下部にシェイプの仕切りを追加できます。数回クリックするだけで、印象的な視覚効果を作り出すことができます。
SeedProdのシェイプディバイダーで作成できるさまざまな効果の例をもう少しご紹介します：
山
波
カーブ
納得がいくまで、いろいろなウェブサイトの仕切りを試してみてください。
WordPressでファンシーな仕切りを公開する
これでシェイプの仕切りができたので、新しいデザインを公開することができます。
WordPressテーマを作成している場合は、SeedProd Theme Builderにアクセスして、「Enable SeedProd Theme」トグルを「Yes」の位置にクリックすることで公開できます。
保存]ボタンのドロップダウン矢印をクリックし、ランディングページの[公開] をクリックするだけです。
これで、ライブのウェブサイトを訪問して、セクションディバイダーが動作しているのを見ることができます。以下は、ヒーローの背景画像セクションにセクション分割があるデモサイトの例です：
SeedProdでアイコンとテキスト分割を追加する
派手なセクションの仕切りがあなたのウェブサイトのニーズに合わない場合は、SeedProdのDividerブロックを使用して、WordPressサイトにテキストとアイコンの仕切りを追加することもできます。
原理は以前と同じですが、行、列、セクションのオプションを選択する代わりに、ディバイダー・ブロックをページにドラッグする必要があります。
そこからドロップダウンボックスをクリックして、このようにアイコンの行の区切りを選択することができる：
あるいは、この例のようなテキストの仕切り：
これで、SeedProdを使ってWordPressで魅力的な仕切りを作る2つの方法ができました。次に、プラグインを使わずに仕切りを追加する方法を見てみましょう。
方法2：プラグインを使わずにWordPressでセクション分割を作成する
また、WordPressの組み込み設定を使用して、サイトに仕切りを追加することもできます。この方法は、追加のWordPressプラグインをインストールしたくない場合に便利です。
しかし、カスタマイズのオプションは限られている。たとえば、異なる行スタイルを追加したり、改行ごとに背景色を変更したりすることしかできない。
より高度なカスタマイズをご希望の場合は、方法1のご利用をお勧めします。プラグインを使わずにWordPressに横線のセクション区切りを追加するには、以下の手順に従ってください。
WordPressのブロックエディターで横線を追加する
WordPressのブロックエディターを使って水平セクションの仕切りを追加するには、投稿またはページを開き、仕切りたい場所でプラス（+）アイコンをクリックします。
次に、検索ボックスに「Separator」と入力し、Separatorブロックをクリックする。
ページにブロックを追加すると、テキストの各セクションの間に水平方向の区切りが表示されます。
右側のパネルで「デフォルト」、「ワイドライン」、「ドット」をクリックすると、区切り線のスタイルを変更できます。
セパレーターの背景色も同じパネルで変更できる。
すべての見た目に満足したら、ページを更新または公開して結果を確認しましょう。
WordPressクラシックエディターに横線を追加する
以下の手順に従って、WordPressクラシックエディタを使ってウェブサイトにセクション区切りを追加してください。
既存の投稿やページを編集するか、新しい投稿やページを作成します。すべてのエディター設定が表示されない場合は、ツールバーの切り替えアイコンをクリックしてください。
次に、ページ上で仕切りを追加したい場所をクリックします。次に、水平線のアイコンをクリックします。
横線の仕切りは白黒か薄いグレーで、このように投稿やページ全体を覆います：
WordPressのセクション分割に関するFAQ
SeedProdとあなたのスモールビジネス
この記事でWordPressにセクションの仕切りを追加する方法を学んでいただけたら幸いです。SeedProdの強力なドラッグ＆ドロップWebサイトビルダーを使えば、派手な形の仕切りを作るのは簡単です。
SeedProdはあらゆる方法であなたのビジネスの成長をサポートします！中小企業やウェブ開発のヒントについては、当社のブログをご覧ください。お気に入りの関連記事をいくつかご紹介します：
お読みいただきありがとうございました！あなたのご意見をぜひお聞かせください。YouTube、X、Facebookで、あなたのビジネスを成長させるために役立つアドバイスやコンテンツを提供していますので、お気軽に会話にご参加ください。
