IT音痴の私でもできた!プラグラミングなしでWordPressのデザインができるなんて-無料で使えるBeaverBuilderpluginを使ってみました。-前編

IT音痴の私でもできた!プラグラミングなしでWordPressのデザインができるなんて-無料で使えるBeaverBuilderpluginを使ってみました。-前編

難しいデザイン抜きでホームページ(WordPress)のデザインがしたい!!

仏様
ううう。悩ましい。
島村竜一
どうされましたか?
仏様
もっと布教活動を行うために信者に読んでもらうためのホームページが欲しい。
島村竜一
なにを悩んでいらしゃいますか?
WordPress(ワードプレス)をお使いならば楽にブログをかけるのではないでしょうか?
仏様
いや。いや。
ただブログを書くなら簡単じゃが。ただ縦方向に文章を並べるだけではあまりに見てくれが悪すぎる。
島村竜一
たしかに人に読んでもらうためにも見た目は大切ですね。
どうでしょうか?
HTML,CSSなどを勉強されるというのは?
勉強すればドンドンとデザインは良くなっていきますよ。
仏様
いや私は人々を救うため忙しいのだ。そんなこと学んでいる暇はないのじゃ。
島村竜一
ではどうでしょう?WordPress(ワードプレス)のPlugin(プラグイン)などでデザインも楽にできるものがありますよ。
仏様
いやいやあるのは知っているが覚えるのがちとめんどうじゃ。
悪魔くん
ケッケッケッ。悩め。悩め。
その間にドンドン悪さをしてやる。
仏様
!!!
まずい。なんとかならないのか?
このままでは大変なことになりそうじゃ
島村竜一
分かりました。覚えずに誰でも
マウスだけでデザインができるものを用意いたします。

びっくり!コードを書かずにマウスを動かすだけでホームページのデザインができます

今回ご紹介するのは「Beaverbuilder モニター版」です。

実はこのPlugin(プラグイン) 海外では非常に評判の高いいいWordPress(ワードプレス)のPlugin(プラグイン)!!

これをいれるだけでマウス片手にホームページのデザインができるようになります。

 

WordPress(ワードプレス)の固定ページ、投稿ページの
デザインを変更することができます。

でも残念なことに日本語に翻訳されていなかったのです。

それじゃもったいないということで
日本語に島村が翻訳することにしました。

WordPress(ワードプレス)をお使いならば
このPlugin(プラグイン)をインストールするだけでポンと使えるのでぜひ使ってみてくださいね。

せっかくなので実演で説明していきます。

PageBuilderの起動方法

今回は「プレゼント付きメルマガ」の固定ページを作る例を元に説明をいたします。

固定ページの起動方法は

WordPress(ワードプレス)の管理画面から「固定ページ」、「新規追加」をクリックしてくださいね。

 

1-min

 

固定ページが表示されたらさっそくタイトルを入力しましょう。

今回は「プレゼント付きメルマガ」を作る例を元に説明をいたします。

 

2-min

タイトルを入力したら「下書きととして保存」ボタンをクリックします。

3-min

「Page Builder(日本語版)」のタブをクリックしてくださいね。

4-min

起動が完了すると上にメニューが表示されます。

5-min
右側にサイドバーが表示されます。

6-min

読ませる記事のレイアウトを作成する

つぎにレイアウトを考えます。
慣れないうちは紙に書いて考えることをお勧めします。

7-min

レイアウトはブロックを組み合わせるイメージでいてくださいね。

今回はメルマガ登録画面を作成していきます。

表示する内容は下記のものとします。

1.告知文章
2.メルマガ登録画面
3.プレゼント企画
4.メルマガ登録画面

そしてレイアウトは
1段
1段
2段
1段
としましょう。

では実際に操作を行っていきましょう。
右に表示された「サイドバー」の「レイアウト」をクリックします。

8-min
レイアウト一覧が表示されますので「1カラム」をクリックしたまま
左にドラッグしていきましょう。

9-min
左側のホームページが表示されているところ
でマウスを離すとホラできました。

点線で表示されているのがホームページの各部品
を配置する場所になります。

beaverbuilder設定画面

 

これを後3回繰り返します。

beaverbuilder設定画面
これでレイアウトは出来上がりましたね。

気軽に文章を入力してみよう

では今度はここに文章を入力していきましょう。
サイドバーの基本部品をクリックしてみてくださいね。
ここから今度は「テキストエディター」をクリックしたまま左にドラッグしていきましょう。
beaverbuilder設定画面

左側のホームページが表示されているところ
でマウスを離すとテキストエディターの設定画面が表示されますので
文章を入力していきましょう。

リアルタイムで内容が反映されるのでとても分かりやすいですよ。

beaverbuilder設定画面
終わったら保存をクリックしましょう。

beaverbuilder設定画面

 

写真を登録してみよう

ホームページも文章だけでは味気ないですよ。

ぜひ魅力的な画像をいれてアピールしましょう。

サイドバーの基本部品をクリックしてみてくださいね。
ここから今度は「写真」をクリックしたまま左にドラッグしていきましょう。

beaverbuilder設定画面

左側のホームページが表示されているところ
でマウスを離すと写真設定画面が表示されました。

では写真を設定しましょう。

「写真を選択」をクリックします。

beaverbuilder設定画面
左側の「ファイルをアップロード」をクリッックしてくださいね。

beaverbuilder設定画面
「ファイルを選択」をクリックして画像を選択してくださいね。

beaverbuilder設定画面
「写真を選択」をクリックします。

beaverbuilder設定画面
ほら。写真が表示されました。

今度は
写真の表示方法もちょっと変えてみましょう。

「設定なし」から「円形」を選んでみましょう。

beaverbuilder設定画面

 

今度は選んだ写真が円形に切り抜かれて表示されました。

beaverbuilder設定画面
いろいろな設定がこの画面でできますが、今回はここまでにして
「保存」ボタンをクリックしましょう。

beaverbuilder設定画面

保存をしましょう

ここまでできたら保存をしましょう。

 

上のメニューバーから「保存」ボタンをクリックしてくださいね。

beaverbuilder設定画面

ここで「一般公開」をクリックしてくださいね。
注意:間違っても「変更した内容を破棄します」をクリックしないでくださいね。
せっかく作ったものが無くなってしまいます。

25-min

 

今回作成中のページはこちらになります。
http://goodsystem.jp/blog/salesmale-beaverbuilder/

今日はここまで明日この続きを書きます。

まとめ:Beaverbuilderはマウス操作だけで楽々にホームページのデザインができます

楽々

いままでどうしてもWordPress(ワードプレス)のデザインというと難しい、、、
大変だというイメージがありました。

プログラムを
ガリガリ、
ガリガリと
書かなきゃいけない。

こんなプラグイン(Plugin)があるから便利だよといいながらそれを覚えるのも大変です。

WordPress(ワードプレス)を覚えるのは僕たちの仕事ではありません。
最も大切なのは企画と魅力的な文章を書くことです。
とてもとてもHTML,CSSを覚えている暇なんて僕たちにはありません。

もっと楽しくWordPress(ワードプレス)のブログを書いて欲しいから
そんな思いをこめBeaverbuilderを翻訳しました。

無料で使えますので是非使ってみてくださいね。

この記事が気に入ったら
ぜひいいねをお願いしますね。

Twitter で
Loading Facebook Comments ...

コメントを残す

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

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)