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

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

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

今回は,設置時にエレメントの中身を設定(文章を入れたり,地図コードを入れたり)しましたが,もし,設置した後に中身の設定,及び変更をしたくなった場合は,各エレメントの上にマウスを持っていってください。

アイコンが出てきました

アイコンが出てきました

左から,⁠エレメントの場所移動」⁠編集」⁠コピー」⁠ゴミ箱」のアイコンです。中身の設定をするときは,⁠編集」アイコンをクリックします。

さてさて,無事サンプルと同じような構成になりましたか?

……え?全然ダメ?特に中段がダメ?

おっと,説明が後回しになってしまいましたね。

そうなんです。見ての通り,エレメントを追加していくと,エレメントは「縦方向(行方向)⁠に並んでいきます。

ですが,今回のサンプル構成のように,時にはエレメントを「横方向(列方向)⁠に並べたい場合が出てきます。

そんな時はどうするかというと,「行エレメント」なるものを使います。

これです。行エレメント。コイツが重要

これです。行エレメント。コイツが重要

この行エレメント,一見中身がないタダの箱なのですが,実は構成上,非常に重要なエレメントでして。

例えば,⁠列を作りたい場合」は,⁠行エレメント」が担当します。

こんな感じに。

行エレメントを追加した後,エレメントの左上にある「行アイコン」にマウスを乗せると,分割比率を選択できるメニューがスルスルっと出てきます

行エレメントを追加した後,エレメントの左上にある「行アイコン」にマウスを乗せると,分割比率を選択できるメニューがスルスルっと出てきます

1/2+1/2(半分と半分)に分割した状態。2つに分かれました

1/2+1/2(半分と半分)に分割した状態。2つに分かれました

こうやってできた列に,エレメントをドラッグ&ドロップで入れていけば,列を作ることができるのです。

ドラッグ&ドロップ,と。できました~

ドラッグ&ドロップ,と。できました~

ちなみに,行エレメント以外のエレメントを新規に設置する際には,まず自動的に「行エレメント」が作られ,⁠その中に対象のエレメント」が作られます。もちろん,その行エレメントを直接分割してもOKです。

画像エレメントを設置した状態。最初から行エレメントの上に乗っています。

画像エレメントを設置した状態。最初から行エレメントの上に乗っています。

今回はわかりやすさのために,あえて「行エレメント」を単独で追加する形でやってみました。

もうひとつ。特に列を作る必要がない場合は,既にある行エレメントの上下にある「+」ボタンからエレメントを作ることで,ひとつの行エレメントの中に複数のエレメントを並べることが可能です。

「文章のエレメント」「お問い合わせフォームのエレメント」を,ひとつの行エレメントの中に並べてみました

「文章のエレメント」+「お問い合わせフォームのエレメント」を,ひとつの行エレメントの中に並べてみました

逆に,行エレメントの中に行エレメントを入れ子にすることも可能です。

もうこうなってくると何が何やら

もうこうなってくると何が何やら

テーマにもよるのですが,行エレメント自身の設定で,⁠行の上下の余白」「行が表示される時のアニメーションの有無」⁠⁠行の背景」などを設定できるようになっています。

そのため場面によっては,行をより細かくわけて管理するほうが良い場合もありますし,逆に管理を単純にするために,行をひとつで管理するほうが良い場合も出てきます。

……ムズカシイじゃないですか。楽しく無いじゃないですか。

えーと。まあ,しばらくは「細かいことは気にしない」で大丈夫です!どういう構成であっても,見た目上ちゃんと表示ができていれば,第1段階はクリアですのでね!

では,サンプルの構成通りに,横方向にもエレメントを並べてみましょう。正しく構成できたら,ページの公開をどーぞ。

できましたよ~。超ステキ~

できましたよ~。超ステキ~

ちなみに,ちょっとおまけの話ですが,今回導入しているイマドキのテーマ「The7」は,PCから見た時,タブレットやスマホから見た時,それぞれのケースで自動的に構成を組み替えて,見やすいWebサイトにしてくれる,「レスポンシブデザイン」という仕組みで作られています。

試しに,今作ったばかりの固定ページを,スマホ表示に切り替えてみましょう。ブラウザの横幅をグーッと狭くしてみてください。

ぐーっと

ぐーっと

おおお,自動的に構成が切り替わりましたよ。

なんで今ココで,こんな話をしているかと言うとですね。コンテンツエリアにおける構成の自動切り替えルールは,エレメントの並び順と密接に関わっているからなのです。

スマホサイズになってしまうと,PCサイズと比べて画面が狭くなりますので,エレメントが横に並ぶスペースが無くなってしまいます。

その結果,すべてのエレメントが「縦」に並び替わります。

その時のエレメントの並び順は,⁠まずは行の並びを前提にして」⁠同じ行の中で,列が分かれている場合は左から右」となります。

余裕が出てきたら,そのあたりも意識しつつ,構成を組んでみてくださいね。サンプルの構成をいろいろイジってみて,どんな違いが出るのか見てみるとわかりやすいと思います。

……以上,ここはおまけでした。

最初の頃は思った通りに構成が組めなくてゲンナリすることもあるかもしれませんが……スマホまで含まてピシっと組み上げられた時は,そりゃあもうモノスゴイ達成感が味わえます。自分のWebサイトがキラッキラ輝いて見えます。

その,⁠うっひょー!」な瞬間を目指して,ぜひぜひ「Visual Composer」と,⁠エレメント」の世界に挑戦してみてくださいね!

著者プロフィール

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

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

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

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

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


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

コメント

コメントの記入