サルでき流 WordPressではじめる企業サイトの作り方

第42回 中小企業経営者さんのための企業サイト作り 実践編その②「イマドキのエディタを使いこなす:Visual Composer」

この記事を読むのに必要な時間:およそ 6 分

Webサイトの記事を雑誌の誌面に変える,「Visual Composer」

それではいつものように,WordPressへログインをお願いします。今回テスト用に1本固定ページを作りますので,固定ページの「新規追加」画面を開いておいてください。

このボタン,表示されていますか?

このボタン,表示されていますか?

タイトル欄の下に,標準テーマの時には無かったボタンが表示されていると思います。これが「Visual Composer」の入り口です。

ではボタンを押す……その前に。

一応ザクッと「Visual Composer」の概要をお話ししておきましょう。

⁠Visual Composer」とは,その名の通り「目で見ながら,構成を組む」ことができるエディタのプラグインです。

……なんだか急に呪文のようになりましたね。順番に行きましょう。

⁠目で見ながら」のほうはわかりますね。問題は「構成を組む」のほうです。

何の構成?と言えば,⁠投稿記事」「固定ページ」の構成,ということになります。

うーん。そもそも「構成」という表現がちょっとわかりにくいかもしれません。

みなさんは今まで,例えば「ヘッダー」とか「フッター」とか,⁠コンテンツエリア(記事本文)⁠とか「サイドバー」とか,Webサイトのパーツを見てきましたよね。

このように,Webサイトは「役割を持ったいくつかのパーツが組み合わさって,ひとつのページになる」のでした。

この組み合わせのことを,⁠構成」と言います。

当たり前なのですが,今までのお話の中では,⁠それぞれのパーツ」「さらにバラバラに分解する」⁠なんてことは考えてきませんでしたよね。

別に,⁠ヘッダー」「サイドバー」は,既に十分細かくバラされていますので,さらにバラバラにする必要は無いのですが……。

ドーンと構えている「コンテンツエリア(記事本文)⁠については,ひょっとしたら,⁠細かくバラしたい」と思うことがあるかもしれません。

例えば,Webサイトの記事は,⁠上から下までズラッと画像や文章が並ぶ」のが一般的なのですが,それを雑誌の誌面のように,⁠ブロック分けしてもっと柔軟に並べたくなった」⁠みたいなことを誰かが言い出したケースです。

確かに,ずらずらと並ぶだけの記事よりも,ブロック分けをしたほうが,絶対にカッコよくなりそうです。ですけど,絶対に面倒になりそうな気がしますよね。嫌な予感がしますよね。

ましてWebサイト内でやるわけですから,⁠HTMLのコーディング」が何らかの形で必要になります。これは……見て見ぬふりをしよう,と。ワタシもあえて考えないようにしてきたのです。

そう,⁠今まで」は。

なんと,それを全面的に解消してしまったのが,この「Visual Composer」なのです

⁠単なるWebサイトの記事」を,プログラミング不要で「美しい雑誌の誌面」にすることができるようになった,と考えると,このプラグインのスゴさがわかると思います。

おっと,前フリが長くなりました。固定ページの「新規追加」画面を開けっ放しでお待ちいただいていましたね。ではでは,画面に戻って実際に見てみましょう!

見よ,これが「Visual Composer」だ!

⁠Visual Composer」には,2つの「モード」があります。

BACKEND EDITORモード

モードその1,管理画面上で,記事やページの構成を組むモードです。いつもの記事投稿画面の延長線,というイメージですね。

⁠WordPressで記事を書くこと既に数ヶ月。拙者WordPressの使い手として,今や管理画面を手足の如く使いこなしてござる」と,そんなアナタにはこちらのモードがオススメです。

記事を書く部分が,何やら楽しげな感じに変わってしまいました

記事を書く部分が,何やら楽しげな感じに変わってしまいました

FRONTEND EDITORモード

モードその2,プレビュー状態の記事やページ上で,直接構成を組むモードです。おおおスゲェ!時代はここまで来ましたか!

⁠ん~,管理画面とプレビュー画面を行ったり来たりするのが面倒なんだよね~,プレビュー画面で見ないと,具体的なイメージが湧きにくいし~」と,そんなアナタにはこちらのモードがオススメです。

今までの常識を覆す,衝撃的な直接編集のシーン

今までの常識を覆す,衝撃的な直接編集のシーン

ちなみに,一度「Visual Composer」に切り替えた後,やっぱり標準のエディタに戻したい,という時は,⁠CLASSIC MODE」というボタンを押せば戻ります。……戻りますが,⁠Visual Composer」で諸々構成をした後に標準エディタ戻すと,⁠Visual Composer」上で自動生成された,得体の知れないコードがズラズラっと出てきます。

おおう!なんだこりゃあ!

おおう!なんだこりゃあ!

このコードが重要な要素になっていますので,不用意にイジると,最悪の場合ページが崩壊してしまうこともあります(もし壊れたら,最初から作り直すか,可能であればリビジョンから崩壊前の状態を復活させてくださいね)⁠

ですので,ある程度コードが読めるくらい「Visual Composer」に慣れるまでは,一旦どちらかで作りはじめたら,切り替えないことをオススメします。

さてさて,モードがわかったら,次は「構成要素」のお話です。

⁠Visual Composer」では,「element(エレメント)⁠という構成要素を,パズルのように組み合わせてページを作っていきます

……エレメント?

これは実際に見たほうが早いので,画面で確認しましょう。エレメントにはこんな感じに,いくつかの種類があります。

たくさんのエレメントが用意されていますね

たくさんのエレメントが用意されていますね

  • 文章のエレメント
  • 画像のエレメント
  • タブやアコーディオンのエレメント
  • ボタンのエレメント
  • グラフやチャートのエレメント
  • ギャップ(行間)やセパレーター(区切り線)のエレメント
  • 地図(Google Maps)のエレメント
  • お問い合わせ(Contact Form 7)のエレメント

などなど……。

今までのエディタは,⁠文章のエレメント」1個あって,その中に文章(画像やリンクのHTMLコードを含む)を書くイメージでした。

今まではこれを1個だけ使っていた感じ

今まではこれを1個だけ使っていた感じ

それに対して,⁠Visual Composer」は,⁠文章のエレメント」を含んだ,複数のエレメントをひとつのページに並べて,各々のエレメントの中身を個別に書くイメージです。

組み合わせ自由自在

組み合わせ自由自在

……やっぱり実際にやってみないとピンときませんね。では,エレメントを使って,自由自在にページを構成してみましょう!

著者プロフィール

カワサキタカシ(かわさきたかし)

元アイ・ビー・エムERPコンサルタント,元アップル教育ソリューション開発者兼営業,他にも様々な経験を経て,人材育成会社『株式会社マイウェイ』を夫婦で起業。現在,同社の取締役兼なんでも担当。

「Webサイト」から「iPhoneアプリ」,「ビジネスサービス」から「会社」まで,『作ること』が好き。そして作る楽しさを誰かに『教えること』も好き。楽しく作る技術を学ぶコミュニティ,『サルでき.jp』をぐーたら管理中。

著書に『iPhoneアプリ開発塾』(技術評論社),『サルにもできるiPhone同人誌の創り方』(飛鳥新社)がある。

株式会社マイウェイ Webサイト
株式会社マイウェイ Facebook
カワサキタカシ Facebook
サルでき.jp


企業サイト作り(運用)にお困りの経営者さま・Webご担当者さま。ワタシ,『企業サイトを楽しく作る(育てる)ためのサポートサービス』もやっております。困り果てて現実逃避の小旅行に出かける前に,是非一度弊社Webサイトまでお気軽にご相談くださいませ。