目次
難しいデザイン抜きでホームページ(WordPress)のデザインがしたい！！
[speech_bubble type=”drop” subtype=”L1″ icon=”ten.jpg” name=”仏様”]ううう。悩ましい。 [/speech_bubble] [speech_bubble type=”drop” subtype=”R1″ icon=”shima.jpg” name=”島村竜一”] どうされましたか？ [/speech_bubble] [speech_bubble type=”drop” subtype=”L1″ icon=”ten.jpg” name=”仏様”]もっと布教活動を行うために信者に読んでもらうためのホームページが欲しい。 [/speech_bubble] [speech_bubble type=”drop” subtype=”R1″ icon=”shima.jpg” name=”島村竜一”] なにを悩んでいらしゃいますか？WordPress(ワードプレス)をお使いならば楽にブログをかけるのではないでしょうか？ [/speech_bubble] [speech_bubble type=”drop” subtype=”L1″ icon=”ten.jpg” name=”仏様”]いや。いや。
ただブログを書くなら簡単じゃが。ただ縦方向に文章を並べるだけではあまりに見てくれが悪すぎる。 [/speech_bubble] [speech_bubble type=”drop” subtype=”R1″ icon=”shima.jpg” name=”島村竜一”] たしかに人に読んでもらうためにも見た目は大切ですね。
どうでしょうか？
HTML,CSSなどを勉強されるというのは？
勉強すればドンドンとデザインは良くなっていきますよ。
[/speech_bubble] [speech_bubble type=”drop” subtype=”L1″ icon=”ten.jpg” name=”仏様”]いや私は人々を救うため忙しいのだ。そんなこと学んでいる暇はないのじゃ。 [/speech_bubble] [speech_bubble type=”drop” subtype=”R1″ icon=”shima.jpg” name=”島村竜一”] ではどうでしょう？WordPress(ワードプレス)のPlugin(プラグイン)などでデザインも楽にできるものがありますよ。 [/speech_bubble] [speech_bubble type=”drop” subtype=”L1″ icon=”ten.jpg” name=”仏様”]いやいやあるのは知っているが覚えるのがちとめんどうじゃ。 [/speech_bubble] [speech_bubble type=”think” subtype=”R1″ icon=”devil.jpg” name=”悪魔くん”] ケッケッケッ。悩め。悩め。
その間にドンドン悪さをしてやる。 [/speech_bubble] [speech_bubble type=”drop” subtype=”L1″ icon=”ten.jpg” name=”仏様”]！！！
まずい。なんとかならないのか？
このままでは大変なことになりそうじゃ [/speech_bubble] [speech_bubble type=”rtail” subtype=”R1″ icon=”shima.jpg” name=”島村竜一”] 分かりました。覚えずに誰でも
マウスだけでデザインができるものを用意いたします。 [/speech_bubble]
びっくり！コードを書かずにマウスを動かすだけでホームページのデザインができます
今回ご紹介するのは「Beaverbuilder モニター版」です。
実はこのPlugin(プラグイン) 海外では非常に評判の高いいいWordPress(ワードプレス)のPlugin(プラグイン)！！
これをいれるだけでマウス片手にホームページのデザインができるようになります。
WordPress(ワードプレス)の固定ページ、投稿ページの
デザインを変更することができます。
でも残念なことに日本語に翻訳されていなかったのです。
それじゃもったいないということで
日本語に島村が翻訳することにしました。
WordPress(ワードプレス)をお使いならば
このPlugin(プラグイン)をインストールするだけでポンと使えるのでぜひ使ってみてくださいね。
せっかくなので実演で説明していきます。
PageBuilderの起動方法
今回は「プレゼント付きメルマガ」の固定ページを作る例を元に説明をいたします。
固定ページの起動方法は
WordPress(ワードプレス)の管理画面から「固定ページ」、「新規追加」をクリックしてくださいね。
固定ページが表示されたらさっそくタイトルを入力しましょう。
今回は「プレゼント付きメルマガ」を作る例を元に説明をいたします。
タイトルを入力したら「下書きととして保存」ボタンをクリックします。
「Page Builder(日本語版)」のタブをクリックしてくださいね。
起動が完了すると上にメニューが表示されます。
右側にサイドバーが表示されます。
読ませる記事のレイアウトを作成する
つぎにレイアウトを考えます。
慣れないうちは紙に書いて考えることをお勧めします。
レイアウトはブロックを組み合わせるイメージでいてくださいね。
今回はメルマガ登録画面を作成していきます。
表示する内容は下記のものとします。
1.告知文章
2.メルマガ登録画面
3.プレゼント企画
4.メルマガ登録画面
そしてレイアウトは
1段
1段
2段
1段
としましょう。
では実際に操作を行っていきましょう。
右に表示された「サイドバー」の「レイアウト」をクリックします。
レイアウト一覧が表示されますので「1カラム」をクリックしたまま
左にドラッグしていきましょう。
左側のホームページが表示されているところ
でマウスを離すとホラできました。
点線で表示されているのがホームページの各部品
を配置する場所になります。
これを後３回繰り返します。
これでレイアウトは出来上がりましたね。
気軽に文章を入力してみよう
では今度はここに文章を入力していきましょう。
サイドバーの基本部品をクリックしてみてくださいね。
ここから今度は「テキストエディター」をクリックしたまま左にドラッグしていきましょう。
左側のホームページが表示されているところ
でマウスを離すとテキストエディターの設定画面が表示されますので
文章を入力していきましょう。
リアルタイムで内容が反映されるのでとても分かりやすいですよ。
終わったら保存をクリックしましょう。
写真を登録してみよう
ホームページも文章だけでは味気ないですよ。
ぜひ魅力的な画像をいれてアピールしましょう。
サイドバーの基本部品をクリックしてみてくださいね。
ここから今度は「写真」をクリックしたまま左にドラッグしていきましょう。
左側のホームページが表示されているところ
でマウスを離すと写真設定画面が表示されました。
では写真を設定しましょう。
「写真を選択」をクリックします。
左側の「ファイルをアップロード」をクリッックしてくださいね。
「ファイルを選択」をクリックして画像を選択してくださいね。
「写真を選択」をクリックします。
ほら。写真が表示されました。
今度は
写真の表示方法もちょっと変えてみましょう。
「設定なし」から「円形」を選んでみましょう。
今度は選んだ写真が円形に切り抜かれて表示されました。
いろいろな設定がこの画面でできますが、今回はここまでにして
「保存」ボタンをクリックしましょう。
保存をしましょう
ここまでできたら保存をしましょう。
上のメニューバーから「保存」ボタンをクリックしてくださいね。
ここで「一般公開」をクリックしてくださいね。
注意：間違っても「変更した内容を破棄します」をクリックしないでくださいね。
せっかく作ったものが無くなってしまいます。
今回作成中のページはこちらになります。
https://goodsystem.jp/salesmale-beaverbuilder/
今日はここまで明日この続きを書きます。
まとめ：Beaverbuilderはマウス操作だけで楽々にホームページのデザインができます
いままでどうしてもWordPress(ワードプレス)のデザインというと難しい、、、
大変だというイメージがありました。
プログラムを
ガリガリ、
ガリガリと
書かなきゃいけない。
こんなプラグイン(Plugin)があるから便利だよといいながらそれを覚えるのも大変です。
最も大切なのは企画と魅力的な文章を書くことです。
とてもとてもHTML,CSSを覚えている暇なんて僕たちにはありません。
もっと楽しくWordPress(ワードプレス)のブログを書いて欲しいから
そんな思いをこめBeaverbuilderを翻訳しました。
無料で使えますので是非使ってみてくださいね。
仕事の生産性をあげるためさまざまな方法を試しました。その結果UiPathにたどり着き現在UiPathを使った業務効率化の開発、講師の仕事をしています。
講師、開発などの相談はお問い合わせからお願いします。
