一部のウェブサイトは、スクロールするのがより魅力的だと感じたことはありませんか？それはしばしば、異なるセクション間のスムーズで流れるような遷移を作成するシェイプディバイダーという、微妙なデザイン要素が働いているからです。
これらの曲線、角度、またはジグザグの線は、些細なディテールのように見えるかもしれませんが、サイトがプロフェッショナルでモダンに見える方法に大きな違いをもたらします。
さらに、コンテンツを自然に区切り、訪問者の視線を意図した場所に誘導するのに役立ちます。
最も信頼性の高い方法を見つけるために複数のオプションをテストした後、常に優れた結果をもたらす2つに絞り込みました。
今日は、WordPress のデフォルトの方法と SeedProd を使用するという、これらの 2 つの簡単なアプローチを説明します。
WordPressサイトにカスタムシェイプディバイダーを追加する理由
シェイプディバイダーは、コンテンツブロックの間に追加するセクションディバイダーの一種です。
これらの区切り線は、組み込みのWordPressブロックで作成された水平線のようなシンプルなものにすることができます。
これらの基本的な区切り線を使用してコンテンツを整理および分離できます。これは、多くの異なるトピックを扱うページで特に役立ちます。
ページビルダープラグインやその他の ウェブデザインソフトウェア を使用して、より高度なシェイプディバイダーを作成することもできます。これにより、サイトの最も重要なコンテンツを強調し、訪問者や顧客の目を引くことができます。
プロフェッショナルに見えるシェイプディバイダーを導入することで、ページをより面白く、魅力的なものにすることもできます。
例えば、メールニュースレターのサインアップフォームにユニークな背景を作成するために使用できます。
それでは、WordPress でカスタム形状の区切り線を作成する方法を見てみましょう。以下のクイックリンクを使用して、使用したい方法に直接ジャンプしてください。
- 方法1：ブロックエディターでシンプルなシェイプ区切り線を作成する（プラグイン不要）
- 方法 2: ページビルダーを使用して WordPress でカスタムシェイプディバイダーを作成する（推奨）
- Frequently Answered Questions: Custom Shape Dividers
方法1：ブロックエディターでシンプルなシェイプ区切り線を作成する（プラグイン不要）
WordPress の形状区切り線を追加する最も簡単な方法は、組み込みのセパレーターブロックを使用することです。
この方法を使用すると、WordPressのブロック間に水平線区切りを追加し、線の色とスタイルをカスタマイズできます。
この方法では、WordPressに異なるシェイプを追加することはできず、カスタマイズ設定も限られています。ただし、追加のWordPressプラグインをインストールする必要がないため、ウェブサイトにシンプルなシェイプ区切り線を追加する最も簡単な方法です。
開始するには、水平区切り線を追加したい投稿またはページをGutenbergコンテンツエディターで開きます。次に、区切り線を入れたい場所にある「+」ボタンをクリックします。
ポップアップで「Separator」と入力します。
右側のブロックが表示されたら、クリックしてページまたは投稿に追加します。
デフォルトの区切りブロックをカスタマイズするには、それをクリックし、右側のメニューの設定を使用します。
デフォルト、ワイドライン、ドットの間は、「スタイル」セクションのボタンを使用して切り替えることができます。
テーマやブランディングの残りの部分に合わせるために、線の色を変更することもできます。
これを行うには、「背景」をクリックし、表示されるポップアップから色を選択します。
さらに、区切り線のマージンを調整することもできます。
マージンが大きいほど、分離されたブロック間のスペースが大きくなります。
区切り線の見た目に満足したら、[公開] または [更新] ボタンをクリックして、形状区切り線機能を有効にすることができます。
方法 2: ページビルダーを使用して WordPress でカスタムシェイプディバイダーを作成する（推奨）
異なる形状を使用し、ディバイダーのすべての部分をカスタマイズしたい場合は、[SeedProd]プラグインの使用をお勧めします。
SeedProdは市場で最高のWordPressページビルダープラグインであり、シンプルなドラッグアンドドロップエディターを使用して、セクション、行、または列にカスタムシェイプディバイダーを追加できます。
このツールはデモ環境で徹底的にテストされており、非常に初心者フレンドリーで直感的であることがわかりました。特に新規ユーザーにとって、ページ作成が楽に感じられました。発見した内容については、レビュー全文で詳しくご覧いただけます。
SeedProdには、300以上のプロがデザインしたテンプレートと90以上のブロックがあり、美しいカスタムホームページ、ランディングページなどを作成するために使用できます。
注意: WordPress.org では SeedProd の無料バージョンが利用可能ですが、今回は豊富なシェイプディバイダーが付属している Pro バージョンを使用します。
まず、SeedProdプラグインをインストールして有効にする必要があります。詳細については、WordPressプラグインのインストール方法のステップバイステップガイドを参照してください。
有効化後、ライセンスキーを入力する必要があります。
この情報は、SeedProdウェブサイトの[アカウント]で確認できます。ライセンスキーを入力したら、「キーの検証」ボタンをクリックします。
これが完了したら、[SeedProd » Pages]に移動し、「新しいランディングページを追加」ボタンをクリックします。
その後、ページテンプレートを選択します。SeedProdには、WordPressウェブサイトに完全に適合するように微調整できる、プロフェッショナルなウェブサイトデザインテンプレートが多数用意されています。
テンプレートを選択するには、マウスカーソルを合わせ、[チェックマーク]アイコンをクリックするだけです。
次に、ページの名前を入力してください。SeedProd はページのタイトルに基づいて自動的に URL を作成しますが、URL は好きなものに変更できます。
入力した情報に満足したら、「保存してページの編集を開始」ボタンをクリックします。
次に、ドラッグアンドドロップのページビルダーに移動し、テンプレートをカスタマイズする準備ができます。
SeedProdエディタは、右側にデザインのライブプレビュー、左側にいくつかのブロック設定を表示します。
左側のメニューにも、レイアウトにドラッグできるブロックがあります。
例えば、ボタンや画像のような標準ブロックをドラッグアンドドロップしたり、カウントダウンタイマー、ソーシャルメディア共有ボタンなどの高度なブロックを使用したりできます。
ブロックをカスタマイズするには、レイアウト内でクリックして選択するだけです。
左側のメニューに、そのブロックを設定するために使用できるすべての設定が表示されます。また、ページの背景色を変更したり、背景画像を追加したり、ブランドに合わせて配色やフォントを変更することもできます。
SeedProd には、「セクション」という、よく一緒に使用されるブロックのコレクションも付属しています。例えば、SeedProd にはヘッダーセクション、ヒーロー画像、コールトゥアクション、お客様の声、機能、フッターセクションなどがあります。
さまざまなセクションを確認するには、「セクション」タブをクリックするだけです。
ドラッグ＆ドロップでセクションやブロックをレイアウト内で移動できます。
ブロックを削除したい場合は、ブロックにカーソルを合わせると表示されるゴミ箱アイコンをクリックしてください。
SeedProdセクションを使用するかどうかに関わらず、カスタムシェイプディバイダーを作成できるようになりました。ディバイダーを追加したいセクション、行、または列を選択してクリックするだけです。
次に、左側のメニューの「詳細設定」タブをクリックします。
次に、「シェイプディバイダー」セクションをクリックして展開します。
開始するには、「上」または「下」ボタンのいずれかを選択して、シェイプディバイダーを表示する場所を選択できます。
これで、「タイプ」メニューを開き、使用したいシェイプディバイダーを選択できます。
異なる形状を選択すると、ライブプレビューが自動的に更新されるため、さまざまなスタイルを試して最適なものを見つけることができます。
シェイプディバイダーを選択した後、新しい設定を使用してスタイルを設定できます。
開始するには、「カラー」をクリックし、表示されるポップアップから新しい色を選択できます。
これで、[幅] と [高さ] スライダーをドラッグして、区切り線のサイズを変更できます。
特定のサイズがすでに決まっている場合は、その数値をボックスに入力できます。
「フリップ」スイッチをオンまたはオフにすることで、ディバイダーを反転させることもできます。
デフォルトでは、区切り線はコンテンツの残りの部分の後ろに表示されるため、ユーザーは区切り線に重なるテキスト、画像、その他のコンテンツをはっきりと見ることができます。
ただし、シェイプを前面に移動すると、興味深い効果を生み出すことができます。これがどのように見えるかを確認したい場合は、「前面に移動」スイッチをクリックして有効にするだけです。
区切り線をさらに追加するには、上記で説明したのと同じ手順に従ってください。
エリアの上下にシェイプディバイダーを追加することもでき、しばしば印象的で目を引く結果を生み出します。
左側のメニューでさらにブロックを追加し、それらのブロックをカスタマイズすることで、ページでの作業を続けることができます。
ページの見た目が気に入ったら、「保存」ボタンをクリックします。その後、「公開」を選択してページを公開できます。
WordPressテーマにシェイプディバイダーを追加する方法
SeedProd のドラッグ＆ドロップエディターを使用すると、ユニークな形状の区切り線を任意のページに追加できます。ただし、同じ形状の区切り線を複数のウェブページ、またはウェブサイト全体で使用したい場合もあります。WordPress ブログやウェブサイト全体で使用したい場合もあります。
これにより、一貫したデザインを作成でき、多くの時間を節約することもできます。この場合、SeedProdテーマビルダーを使用してテーマにシェイプディバイダーを追加することをお勧めします。
SeedProdを使用すると、コードを書かずにWordPressテーマを作成およびカスタマイズできます。サイドバー、ヘッダー、フッター、個別投稿など、テーマを構成するすべてのファイルを作成します。
次に、使い慣れたドラッグアンドドロップビルダーを使用してこれらのファイルをカスタマイズできます。これには、上記と同じ手順に従ってシェイプ区切り線を追加することが含まれます。
SeedProdを使用して新しいテーマを有効にすると、既存のWordPressテーマが上書きされます。そのため、現在のテーマを置き換えたい場合にのみ、この方法を使用してください。
詳細なステップバイステップの手順については、カスタムWordPressテーマを簡単に作成する方法に関するガイドを参照してください。
よくある質問：カスタムシェイプ区切り線
カスタムシェイプディバイダーの作成に関して、読者からよく寄せられる質問をいくつかご紹介します。
シェイプディバイダーはサイトの速度に影響しますか？
一般的に、シェイプディバイダーはパフォーマンスに大きな影響を与えません。特に、純粋な CSS または SeedProd を使用して作成された場合はそうです。これらは軽量で、ブラウザで素早く読み込まれます。
ただし、それらを使いすぎたり、画像ファイルに依存したりすると、ロード時間がわずかに増加する可能性があります。サイトを高速に保つには：
- プラグインは最小限に抑えて使用してください。
- 大きな画像ファイルよりもSVGを優先します。
- 1つのセクションにエフェクトを重ねすぎないようにしてください。
デザインと速度のバランスを取ることが、スムーズなユーザーエクスペリエンスの鍵となります。
モバイルでシェイプディバイダーがうまく表示されるようにするにはどうすればよいですか？
レスポンシブデザインは非常に重要です。ページビルダーを使用している場合、ほとんどのビルダーでは、デスクトップ、タブレット、モバイルでシェイプディバイダーの表示、高さ、向きを個別に調整できます。
いくつかのヒントを以下に示します。
- シェイプディバイダーをさまざまな画面サイズでテストします。SeedProdを使用すると、ドラッグアンドドロップビルダー内で直接モバイルでのデザインの見え方をプレビューできるため、これを簡単に行えます。
- モバイルでは、より小さくまたはシンプルなシェイプを使用してください。
- テキストの読み取りを困難にしたり、重要なコンテンツをオーバーラップさせたりする形状は避けてください。
SeedProdのようなツールは、サイトの各バージョンを簡単に調整できるレスポンシブコントロールを提供します。
事前に作成されたシェイプディバイダー SVG はどこで見つけられますか？
事前にデザインされたSVGシェイプディバイダーをダウンロードできる無料リソースがたくさんあります。ゼロからデザインすることなくカスタムデザインが必要な場合に最適です。
いくつかのオプションを以下に示します。
- [Haikei] – ユニークでカスタマイズ可能な形状のための無料SVGジェネレーター。
- ShapeDividers.com – コピー＆ペーストできるさまざまな SVG ディバイダーを提供しています。
SVGをダウンロードしたら、カスタムHTMLブロックに貼り付けるか、セットアップに応じてテーマのファイルに含めることができます。
その他のWordPressデザインのヒントとコツを発見する
ウェブサイト訪問者を感動させるデザイン機能をもっと追加したいですか？詳細については、これらのWordPressデザインのヒントとコツをご覧ください。
- WordPress テーマにパララックス効果を追加する方法
- WordPressで「固定」フローティングフッターバーを作成する方法
- モバイル対応レスポンシブWordPressメニュー作成の初心者ガイド
- WordPressにプリローダーアニメーションを追加する方法（ステップバイステップ）
- WordPress投稿にドロップキャップを追加する方法
- WordPress ウェブサイトにダークモードを追加するための初心者向けガイド（簡単）
- WordPressにアニメーション背景を追加する方法
このチュートリアルで、WordPressでカスタムシェイプディバイダーを作成する方法を学べたことを願っています。また、WordPressでアイコン付きの機能ボックスを追加する方法や、モバイルフレンドリーなWordPressウェブサイトを作成する方法に関する専門家のアドバイスも学ぶと良いでしょう。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
kzain
ねえ、カスタムシェイプの区切り線を試しているんだけど、ブログのデザインが劇的に変わったよ。
デスクトップとモバイルデバイスの両方でこれらの区切り線をきれいに見せるためのコツはある？画面サイズが違うと、見た目と機能性のバランスを取るのがちょっと難しいんだ。
WPBeginnerサポート
現時点では、テストが必要になります。現時点で具体的なヒントはありません。
管理者
Dayo Olobayo
指示が非常に詳細でわかりやすいのが気に入りました。シェイプディバイダーのカスタマイズは、ウェブサイトに個人的なタッチを加えるのに最適な方法です。将来参照するために必ずブックマークしておきます。