たくさん撮りためた写真を整理して、フォトギャラリーを作成しててみましょう。 simpler2-69 基本色 black 教室試作サイト http://c15.seta.red 2016-8-27

....

ページビルダーの使い方

2015年07月07日

WordPressは、たくさんあるテーマやプラグインを使って、簡単に美しいく魅力的なサイトを構成できて満足することはあっても、不満は少ないかもしれません。
しかし、コンテンツのレイアウトやデザインにかげってはWordPressが助けてくれることは少ないと思います。リッチエディタがありますが、これだけでは簡素で味気ないレイアウトのページの山が作られるだけで、自分でももっとプロの作るようなページが作れないものかと思うことも少なくないのでしょうか。もちろんコンテンツは最も重要ですが、楽しくデザインしながら作ることも大切だと思います。
デザイナーやコーダーには簡単のことですら、Web系の知識がないことには、魅力的なページを作るのは難しいのが現状です。
もちろん機能面に関してはプラグインを活用することでかなり補うことができます。ただし、それはあくまで機能面でのことで「デザイン・レイアウト」についてはなかなか思うとおりになりません。やはり、魅力的なページを作ろうとすると、コードやらタグやらhtmlやらのことを知らなければ難しいのです。

「Page Builder」でレイアウトの設定が簡単に!

そこで紹介するのがWordPressプラグイン「?Page Builder By SiteOrigin(ページビルダー)」です。
Page Builder(ページビルダー)は、「ドラッグ&ドロップ操作」で視覚的かつ直感的にレスポンシブページを作るための無料プラグインです。
あたかもWordPressのサイドバーやフッターなどのウィジェットエリアを編集するのと同じ要領でページも編集することができます。
ホームページ作成ソフト「ホームページ・ビルダー(※)」をずっとずっとシンプルにしたようなものと思っていただくとわかりやすいかもしれません。
※?Webの知識がない方にも簡単にもホームページを作成できるようにするためのソフト(10年以上前、はじめてWebサイトを作った時にお世話になりました)
今回はそんなページビルダーの魅力や特徴、使い方をご紹介したいと思います。

ページビルダーの概要、特徴

まずは実例をご覧いただくのが一番早いでしょう。
ページビルダーをWordPressにインストールすると、新規ページを作るおなじみの画面に「Page Builder」というタブと操作メニューが加わります。

たとえば「サイドバーなし・1カラムのプレーンな全幅ページ」に

レスポンシブページ作成用のWordPressプラグイン「PageBuilder」の実例2

操作メニューを使ってレイアウトを決め、コンテンツを入れます。

レスポンシブページ作成用のWordPressプラグイン「PageBuilder」の実例3

あっという間にカスタムページができ上がります。(アクセスマップページを想定して作ってみました)

レスポンシブページ作成用のWordPressプラグイン「PageBuilder」の実例4

しかも全自動でレスポンシブページになっています!

レスポンシブページ作成用のWordPressプラグイン「PageBuilder」の実例5

ドラッグ&ドロップだけでレイアウトを作り(カスタムレイアウト)、ウィジェットパーツを使ってわずか数ステップでカスタムページを作ることができるのです。

ページビルダー特徴

  • コーディング不要!ドラッグ&ドロップ操作でレイアウトを自由にカスタマイズ
  • 3ステップででき上がったページはなんとレスポンシブ仕様
  • 大部分のWordPressテーマで使用可
  • 通常のウィジェットパーツに加え、独自のウィジェットパーツが付属

ページビルダーの使い方

ページビルダーの導入方法、使い方、注意点

それでは実際にどのように使うのかご紹介しましょう。まずはプラグインのインストールからです。

ページビルダーをインストール、有効化

  1. 「WordPress ダッシュボード > 外観 > プラグイン > 新規追加」
  2. 「Page Builder」と検索
  3. 「いますぐインストール」をクリック
  4. 「有効化」をクリック

レスポンシブページ作成用のWordPressプラグイン「PageBuilder」の導入・インストール方法1

 

「投稿 > 新規追加」画面、もしくは「固定ページ > 新規追加」画面に「Page Buider」という記事編集用のメニュータブと、操作メニューが表示されていればOKです。

レスポンシブページ作成用のWordPressプラグイン「PageBuilder」の導入1

 

ページビルダーの使い方

使い方については、さきほどご覧いただいたページ(下図)を例にとってご説明していきます。

レスポンシブページ作成用のWordPressプラグイン「PageBuilder」で作るページの完成図

では、改めて確認していきましょう。

1)新規ページを追加、ページテンプレートを選択

ページビルダーは投稿ページであれ固定ページであれ使うことができますが、今回は固定ページの全幅ページ用テンプレートを使って作成します。

ダッシュボード > 固定ページ > 新規追加

レスポンシブページ作成用のWordPressプラグイン「PageBuilder」の設定方法・使い方1

 

2)ページのレイアウトを作る

「|||(Add Row)」というメニューから行を追加します。ここでは2カラムにしたいので、カラム数には「2」を入力し「Add(追加)」ボタンをクリック。

レスポンシブページ作成用のWordPressプラグイン「PageBuilder」の設定方法・使い方2

 

最初からあったウィジェットエリアの下に新しく2カラムのウィジェットエリアが追加されました。カラムの間の境界線を動かして横幅比率を変更します。

レスポンシブページ作成用のWordPressプラグイン「PageBuilder」の設定方法・使い方3

 

3)ウィジェット・パーツを挿入、編集する

レイアウトができ上がったら、次はウィジェット・パーツを挿入します。

レスポンシブページ作成用のWordPressプラグイン「PageBuilder」の設定方法・使い方4

 

画像を挿入するために「Image(PB)」というパーツを選択。

レスポンシブページ作成用のWordPressプラグイン「PageBuilder」の設定方法・使い方5

 

メディアライブラリから画像URLをコピーしておきます。

レスポンシブページ作成用のWordPressプラグイン「PageBuilder」の設定方法・使い方6

 

ウィジェット・パーツの編集ボタン(Edit)を押して、画像URLとリンク先URLを入力し「Done(完了)」ボタンを押します。

レスポンシブページ作成用のWordPressプラグイン「PageBuilder」の設定方法・使い方7

 

同様に、他のウィジェット・エリアにもウィジェット・パーツを挿入します。ここではテキストウィジェットを挿入しています。

レスポンシブページ作成用のWordPressプラグイン「PageBuilder」の設定方法・使い方8

 

ウィジェット・パーツの編集ボタン(Edit)を押して、内容を入力します。

レスポンシブページ作成用のWordPressプラグイン「PageBuilder」の設定方法・使い方9

 

2つ目のテキストウィジェットにも入力。

レスポンシブページ作成用のWordPressプラグイン「PageBuilder」の設定方法・使い方10

 

3つ目のウィジェットにはGoogleマップの埋め込みコードを挿入します。

参考)サイドバーを自在に簡単カスタマイズ。WPプラグイン「WooSidebars」

レスポンシブページ作成用のWordPressプラグイン「PageBuilder」の設定方法・使い方11

 

以上で完了!「公開」ボタンをクリックしてカスタムページのでき上がりです。

レスポンシブページ作成用のWordPressプラグイン「PageBuilder」の実例4

 

その他、行ごと削除したり、行の入れ替え、ウィジェット・パーツを複製することもできます(動画の最後のほうで紹介しております)

レスポンシブページ作成用のWordPressプラグイン「PageBuilder」の設定方法・使い方14

6カラムにすることだって簡単です。

レスポンシブページ作成用のWordPressプラグイン「PageBuilder」の設定方法・使い方13

 

ページビルダー使用上の注意

一点ご注意いただきたいのが、このページビルダーを使ってページを作成すると、他の「ビジュアルエディタ」「テキストエディタ」で作成、編集したコンテンツは無効化されるというか、自動で削除されます。。。お気を付け下さい。

その他の事例

その他のレスポンシブページ作成事例

さきほど作ったのは「アクセスマップ」ページを想定していますが、ビジネス系サイトのトップページを想定してカスタムページを作ってみました。

レスポンシブページ作成用のWordPressプラグイン「PageBuilder」のトップページ作成事例1

 

構造的に見てみるとこうなっています。

レスポンシブページ作成用のWordPressプラグイン「PageBuilder」のトップページ作成事例2

 

ページビルダーでの編集画面はこうです。

レスポンシブページ作成用のWordPressプラグイン「PageBuilder」のトップページ作成事例3

 

さきほどのアクセスマップのページよりは複雑になっていますが、それでも大して時間をかけずにこのようなカスタムページが出来るのです。

他のプラグインと掛け合わせることで、さらに表現力に幅が出ますね。ちなみにスライドショー作成には以下のプラグインを使いました。

WordPressで簡単にスライダーを設置するプラグイン「Soliloquy」

「Soliloquy(ソリロクイ)」でスライドショーを作って、そのショートコードをテキストウィジェットに挿入しています。

 

まとめ

当初、あっさりとご紹介しようと思っていたのですが、いつの間にか超長文になってしまいました。

というのも日本語で解説されているサイトがほとんどなく、また、英語サイトでもほとんどなかったので、わたし自身も使い方のコツをつかむのに多少時間がかかったので、いつの間にか強く入れこんでしまったのかもしれません(笑)

一旦ページビルダーに慣れると、かなり自由にWebサイト、ページを作ることができます。これは使ってみないとわからないかもしれません。

htmlやcssなんかの知識があれば言う事がないでしょう。しかし、そのような知識がなくとも十分に活用できるのが、このプラグインの魅力です。他のプラグインと組合わせて、ぜひWordPressを楽しんでいただければと思います。

投稿者:admin246tt カテゴリー: その他, ワードプレス

“ページビルダーの使い方” への1件のコメント

  1. 福山千秋 より:

    この記事面白かったです。
    今後を期待しています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA