今回は、WordPressのプラグインPage Builder By SiteOrigin(ページビルダー バイ サイトオリジン)を利用して、ブロック感覚でWebページを作成する方法をご紹介します。
もくじ
プラグインは便利ですが、古いプラグインや、ご利用のテーマやプラグインの組み合わせによっては競合して、不具合を起こす場合もあります。そのため、WordPressのバックアップを取った上自己責任で実施をお願いいたします。
また最近ではブロックエディターが進化してきたため、本プラグイン「Page Builder」を使う機会は少なくなりました。ですので、本プラグインは必要な場合のみ導入検討するようにしましょう。
プラグイン「Page Builder by SiteOrigin」とは
レイアウト作成に便利なプラグイン「Page Builder(ページビルダー)」で、HTMLやCSSの知識がなくても、ブロック感覚でページを作成できます。
ページビルダーの特徴
- 投稿ページや固定ページで、文章・画像および各ウィジェットをドラッグアンドドロップで自由に配置することができるプラグイン
ページビルダーの導入
ページビルダーを利用するためには、まず下記の２つのプラグインをインストールします。
- Page Builder by SiteOrigin
- SiteOrigin Widgets Bundle
管理画面＞プラグイン新規追加を選択します。
「Page Builder by SiteOrigin」で検索後、プラグインをインストール・有効化します。
同様に管理画面＞プラグイン新規追加を選択します。
下記のオプションプラグイン「SiteOrigin Widgets Bundle」もインストールしておく必要があります。
「SiteOrigin Widgets Bundle」で検索後、プラグインをインストール・有効化します。
「SiteOrigin Widgets Bundle」は「Page Builder」で、18種類の高機能なウイジェットを使うことができるプラグインです。「Page Builder by SiteOrigin」と一緒に「SiteOrigin Widgets Bundle」もインストールしておきましょう。
「Page Builder by SiteOrigin」をインストールすると、投稿画面に「ビジュアル」「テキスト」タブ以外に「ページビルダー」タブが表示されます。
「Page Builder by SiteOrigin」の使い方
では、「Page Builder by SiteOrigin」を使って、レイアウトを工夫した記事を作成してみましょう。
ページイビルダーインストール後は、固定ページまたは投稿ページを開くと「ページビルダー」というエディタが新たに追加されていますのでクリックします。
下記はページビルダーのエディター画面です。
ページビルダーの基本的な使い方
- 列を追加する(行を追加)
- 追加した列のブロック内にウィジェットを追加する
列を追加する
それでは、具体的な操作手順を説明して行きます。ページビルダーの編集画面でメニューから「列を追加」をクリックします。
行の編集画面が表示されます。列数などを設定することができます。
一連の流れを動画でも説明します。ページビルダーで「列を追加」ボタンをクリックして「挿入」をクリックします。行が追加されます。
ウィジェットを追加する
次に、追加した行にウィジェットを追加してみましょう。特定のカラム(列)をクリックするとその列が選択されてカラムの色が変わります。
メニューの「ウィジェットの追加」をクリックします。追加できるウィジェットの一覧が表示されますので、ここでは、「SiteOrigin Editor」をクリックします。
追加したウィジェット付近にカーソルを合わせて編集ボタンを押下します。従来のビジュアル・テキストエディターのように文章や画像を入れることができます。完了したら終了ボタンを押下します。
同様にして、右側のカラム(カラム)にもSiteOrigin Editorを挿入して、文章や画像を入れていきます。
ここで一旦プレビュー画面を見てみましょう。
ページビルダーで作った内容が反映されていることがわかります。
スマートフォン表示の際は、カラムが縦に並びます。
さて、エディター画面に戻って引き続き操作を続けて行きましょう。２段目の行を追加する時も、同じ手順で「列を追加」→「ウィジェットを追加」の手順で作成していくことができます。
プレビューを確認すると、2段目の行が追加されていることがわかります。
同様にして行とウィジェットを追加していくことができます。区切りのいいところで「下書きとして保存」するか、完成している場合は「公開」ボタンを押して保存しておきましょう。
行を複製・配置する
行は「重複」を押すことで複製することができます。
下記は行を複製する例です。複製した行はドラッグアンドドロップで好きなカラム(列)に配置することができます。
行を後から編集する
行を後から編集して、カラム数(列数)をあとから変更することもできます。
ウィジェットを複製・配置する
ウィジェットも同様に複製することができます。ウィジェット付近にカーソルを合わせて「重複」をクリックします。複製したウィジェットはドラッグアンドドロップで好きな場所に配置することができます。
カラムの幅(列幅)の比率を変更する
一度作った行内の列幅(カラム幅)の比率を変更することもできます。比率の変更は編集画面でも、行の編集画面からでも実施することができます。
そのほかの色々なページビルダーの使い方
ライブエディター LiveEditorでリアルタイムで編集する
ライブエディターボタンをクリックすると、表示画面を見ながらリアルタイムでページ編集することができます。
もちろんライブエディターで列やウィジェットを追加することもできます。
(補足)レイアウトビルダーでほか多彩なレイアウトを作成する
レイアウトビルダーは、ページビルダー機能を兼ね備えた「ウィジェット」です。たとえば、ワードプレスのウィジェットからレイアウトビルダーを利用することで、自由にレイアウトを作ることができます。
下記は、外観＞ウィジェットからフッター内にレイアウトビルダーを配置してレイアウトを作った例です。
色々なウィジェットを利用する
今回は、ウィジェットの例としてSiteOrigin Editorを中心に説明しましたが、ワードプレスで利用できるウィジェットは大抵利用することができます。
下記は、有料テーマ「Lightning Pro」と和風デザインスキン「Jpn Style」＋オプションプラグイン「VK All in one Expantion Unit」をベースに「ページビルダー」と組み合わせて1カラム型のホームページを作成した例です。
合わせて読みたい記事
上記で取り上げているLightning Pro(和風デザインスキン)やそのほかワードプレスのオススメテーマはこちらをご参照ください。
「SiteOrigin Widgets Bundle」の色々なウィジェット
最初に導入した「Page Builder by SiteOrigin」のオプションプラグイン「SiteOrigin Widgets Bundle」にどのようなウィジェットがあるか見ておきましょう。
「SiteOrigin Widgets Bundle」は「Page Builder」で、18種類の高機能なウイジェットを使うことができるプラグインです。「Page Builder by SiteOrigin」と一緒に「SiteOrigin Widgets Bundle」もインストールしておくことが推奨されます。
「プラグイン」＞インストール済みプラグイン＞「SiteOrigin Widget Bundle」のmanage widgetをクリックします。
デフォルトでは、いくつかのウィジェット機能が有効化されていますが、「SiteOrigin Widgets Bundle」には他にもたくさんのウィジェットが用意されています。下記の設定画面から必要なウィジェットを有効化することができます。
| ウィジェット | 意味 |
|---|---|
| SiteOrigin Google Map | 住所、名称の入力だけでGoogle マップが簡単に作成できるウィジェットです。但しGoogleMapを表示させるためには、Google Map Apiが必要です。 |
| SiteOrigin Contact Form | シンプルなお問い合わせフォームを作成することができるウィジェットです。 |
| SiteOrigin Testimonials | 製品・サービスのお客様の声を共有するサムネイルとリンクを設置するウィジェットです。 |
| SiteOrigin Icon | 各種のアイコンを表示するウィジェットです。 |
| SiteOrigin Editor | TinyMCEエディター（HTMLタグを入力することなく、Webサイトのページを作成できるリッチエディタ）を使って記事を作成することができるウィジェットです。 |
| SiteOrigin Simple Masonry | 比率を設定し、レンガ造りの壁のように複数の画像をレイアウトし表示することができるウィジェットです。/td> |
| SiteOrigin Slider | 画像や動画をスライダー表示できるウィジェットです。 |
| SiteOrigin Social Media Buttons | ソーシャルメディアアイコンを設置できるウィジェットです。 |
| SiteOrigin Hero | ヒーローイメージをスライダー形式で表示するウィジェットです。 |
| SiteOrigin Buttons | カスタマイズできるボタンを設置できるウィジェットです。 |
| SiteOrigin PriceTable | シンプルな価格表を作成できるウィジェットです。 |
| SiteOrigin Video Player | 動画を再生するプレーヤーのウィジェットです。 |
| SiteOrigin Post Carousel | 1つの画像を表示する場所に複数の画像を置いてスライドショーのように表示することができるウィジェットです |
| SiteOrigin Images | 画像を配置できるウィジェットです。 |
| SiteOrigin Headline | 見出しを表示するウィジェットです。 |
| SiteOrigin Call-to-Action(CTA) | 行動を促すメッセージとボタンを表示するウィジェットです。 |
| SiteOrigin Features | アイコンや画像とテキストを複数配置して特集を表示するウィジェットです。 |
「Page Builder by SiteOrigin」を使う上での注意点
「Page Builder by SiteOrigin」のメリットは、HTMLやCSSの知識ない初心者でも自由に様々なページのレイアウトが作成でき非常に便利な反面、注意点もあります。ここでは特に気をつけたい2点をご紹介します。
一つ目は、一度ページビルダーで作成したページは「テキストエディター」や「ビジュアルエディター」で触ってはいけない点です。理由としては、独自のHTML・CSSがバックグランドで書き込まれているため、ページビルダーで作ったページを「テキストエディター」や「ビジュアルエディター」で編集すると知らないうちに必要なHTMLタグなどを消してしまいレイアウトが崩れる恐れがあるためです。
二つ目はページビルダーとほかのプラグイン、テーマの相性など、使い方の組み合わせによっては、まれにうまく表示されない・不具合が起きる可能性がある点です。これに関しては、組み合わせが無限にあるため、実際に試しながら判断するようにしてください。
まとめ ページビルダーはホームページ作成の大きな味方
まとめです。今回はPage Builder By Site Originを利用して自由なレイアウト作成をしてページを作る方法をご紹介しました。
ただし、最近ではすでにWordPressのブロックエディターが使い勝手がかなり良くなってきましたのでPage Builderの重要度は下がりました。
必要がある場合のみ、本プラグインを導入検討するようにしましょう。
なお、そのほかのよく使うおすすめプラグイン一覧を「WordPressおすすめプラグインを一覧・目的別紹介」でご紹介していますので、プラグインをお探しの方はあわせてご参考いただけると幸いです。
今回は以上になります。最後までご覧いただきありがとうございました。
あわせて読みたい記事
個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。
YouTubeチャンネル開設しました！
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。
ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。
を利用して、ブロック感覚でWebページを作成する方法をご紹介します。 ){kind=link}