「ホームページビルダーが好きすぎてやめられない！」
「WordPressに変えたほうが良いといわれるけど、使い慣れたホームページビルダーが楽なんだよなぁ」
そんな皆さんに朗報です！
ホームページビルダーと同じような操作方法でWordPressの見た目（デザイン）を触れる機能＝プラグインがあります。
HTMLがわからなくても大丈夫。
CSSの知識がなくても問題ありません。
こういうふうにしたいなぁというページが、誰でも簡単に、直感的につくれます。イメージとしては、エクセルでWEBページをつくっていくような感じです。パズルのようにはめ込みなので、慣れていなくても理解しやすく、戸惑いが少なくて済みます。
ホームページビルダーは有料のソフトですが、このプラグイン”Page Builder by SiteOrigin”。ではお金もかかりません。
初心者の方から、WEBサイト担当者になってしまった人、本職のデザイナーさんも使っているので安心です。昔はホームページビルダーでつくっていたけど、次はWordPressで構築しないといけないなぁと思っている人にもぴったりです！
このプラグインを入れると何ができるの？
WordPressで普通に記事を書くと、文字がズラズラと並んで途中でちょっと写真という一般的な”ブログ”の見た目になります。
それを、一歩先行く見た目に進化させることができます。
具体的にいうと、記事のレイアウトがとても手軽になり、画像を入れたり背景に色を付けたりなどのデザインも簡単にできるようになります。
この記事では”Page Builder by SiteOrigin”の使い方と、実際の表示をビフォーアフターでお見せしながら解説していきます。
１．プラグイン”Page Builder by SiteOrigin”の導入
WordPress管理画面から、”Page Builder by SiteOrigin”を検索してインストール。スタートの準備はこれだけで完了です。
※WordPressはレンタルサーバーを用意して、ご自身で構築してください（WordPressの準備についてはこちらをご参照ください）
２．このプラグインで見た目を変えられる理由
このプラグインの仕組みを簡単にいうと、1つの長方形を自由に区切れるようになるイメージです。
Wordで書いた文書を、Excelを使って見た目を整えるのに似ているかもしれません。WordPressで記事を書くスペースは通常は真っ白い四角なのですが、それを青い枠で自由に区切り、それぞれに文を入れたり画像を入れたりできます。
◯画像を4つ並べたい
◯文字の後ろに色を付けたい
◯Mapを入れたい
このようなことがクリックするだけでできるようになります！
便利ですよね！
スマートフォン対応もしています。
画像を4つ並べた場合は、パソコンで閲覧したときは4つが横に並びますが、スマホで見たときは4つが縦に並びます。
では実際に、記事作成ページのレイアウトを変えてみましょう！
３．レイアウト変更例：文字とマップを並べて表示する
例として、とあるお店のグルメレポート記事の見た目を調整していきます。
グルメレポートなので、写真も入れたいですが、お店の情報やMAPを入れて目立たせたいところです。
でも、そのまま記事の中に貼り付けると文章と混じってしまって目立ちづらい。背景に色を入れたり、お店の情報とMAPを横に並べたりして目立たせる工夫を、このプラグインでやってみました。
①メニューの「列を追加」をクリック
②２カラム（割合は50%、50%）で１列追加
→画面が開くので、4つに分けたいときは、”4カラム”と設定。
→カラムとは列の単位のことで、Excelでいうと横（列）にいくつセルが並んでいるか…というようなイメージです
③分かれたカラムそれぞれに、ウィジェット（アプリ）をはめ込む
→ウィジェットを追加ボタンを押すとメニューが出ます。テキストを入れる場合は「SiteOrigin Editor」、Mapを入れる場合は「SiteOrigin GoogleMaps」を選択します。
左にテキスト、右にMapを入れるとこのような見た目になります。
ただ文字を書き入れたブログよりは、ちょっとかっこよくなりました！
スマホで見ると、並列ではなく縦に並んでいます。画像を横にいくつか並べたいときもこのパターンで挿入すればOK。
カラムの中に設定するウィジェット（アプリ）は一覧が出るので、自分が入れたいものを選びます。左にMapを入れたければ、左にMapのウィジェット。文字ではなく画像を入れたいときはImageのウィジェットを入れると画像がドラッグ&ドロップで入れられます。
※参考：カラムに挿入するウィジェット（アプリ）一覧の例
４．ビジュアル変更例：ボタン／アイコンを追加する
記事の中に、「ここからダウンロード」や「資料を請求する」などのボタンやアイコンを入れるのも簡単です。
①ウィジェットを追加する→「SiteOrigin Button」をクリック
②ボタンに乗せる文字や、ボタンを押した時にどのアドレスに飛ぶか、そしてボタンの色などを設定します
この設定だけで、記事の中にボタンが埋め込まれます。
きれいなボタンが簡単に入りました。
文字にリンクを貼っただけよりも、目立ちます！
今回はセンターに寄せて配置していますが、左寄せや右寄せももちろんできます。ボタンの色も青以外にも変えられます。
ビジュアルがよくなれば、クリック率が上がること間違いなしです。
まとめ
デザイナーがいなくても、ホームページビルダーを使う知識しかなくても、このプラグイン一つでここまでできます。
今回は記事の見た目の変更にしか触れませんでしたが、トップページのレイアウトを変える機能もあります。かなり高機能なプラグインなので、ちょっとずつ触りながら思い通りのビジュアルに近づけていってくださいね。