ブロックエディタやHTMLで会社概要・運営者情報や人物紹介・スタッフ紹介を作る～CSSデザイン付き～

2019年9月19日ページに使える機能・デザイン

コーポレートサイトや店舗のサイトに必須な基本情報を入力するページ。

about us page　会社概要　紹介

最近ではスマホで地図を見ながら場所を探す人が多いため、
アクセスページにはGoogleマップの表示をしてそのままGoogleマップのアプリが開けるようにすることが必須です。

会社概要のページは企業や仕事用のサイトには必須ですが、
紹介の仕方はサイトによって様々です。

WordPressでは新しいエディタGudenbergのブロックによって、
HTMLを書かなくても簡単にデザインが作成できます。

LightningのVK All in one Expansion Unitにもいくつか独自のブロックがあるので、
それらを使った簡単な会社紹介のページを作っていきましょう。

よくあるパターンの作り方とコピペ用のCSSデザインを紹介します。

会社概要や店舗情報をブロックやHTMLで設置＆CSSカスタマイズ

資格が必要な事業を行っている会社では、
会社の運営者の情報や事業の資格情報をきちんとサイトに掲載することは信用にかかわる大切なポイントになります。

コーポレートサイト以外でも、運営者情報をきちんと表示する場合や、チェーン店のグループサイトで使うことができます。

テーブルブロックで作る会社概要

テーブルブロックを使えば、HTMLを書かなくても作れるので、情報を頻繁に変更する場合や簡単につくりたい場合に便利です。

会社概要テーブルブロックのサンプル

ページのエディタでフォーマットのテーブルブロックを追加します。

列数は２列、行数は必要な項目数で指定して追加するだけで、テーブルが生成されます。

あとはテーブル内のセルに表示したい情報を入力するだけです。

セルを選択した状態で、のようなマークを選択すると、テーブルを作った後でも列や行の追加・編集ができます。

デフォルトの選択できるデザインは背景色の変更または行ごとに色が変わるテーブルのみなので、
CSSでカスタマイズしていきましょう。

/* テーブルブロック */
/* 左の列 */
.wp-block-table.is-style-regular td:first-child{
min-width:8em; /* スマホで幅が小さくなり過ぎないよう最小幅を8文字以上に */
background:linear-gradient(200deg, #ff9eb9 1%,40%, #fff 100%);
}
/* 両方の列でボーダーの色と太さを変更 */
.wp-block-table.is-style-regular td{
border-color:#ffeff3;
border-width:2px;
}
/* テーブルの外枠にボーダーをつける */
table.wp-block-table.is-style-regular{
border:2px solid #ffeff3;
}

このコードではグラデーションを使って立体感のあるデザインになっています。

テーブルデザイン自体は様々なコピペ用デザインコードがあるので、調べれば色々なデザインから選ぶことが出来ます。

ただし、テーブルブロックで追加した場合は、すべてtdタグになるので、thとtdで成り立っているデザインを使うときは調整が必要です。

:first-childを使うと、左側のセルのみにデザインを適用させることが出来ます。

左の列から順番に:first-child、:nth-child(2)で（）内に何列目の要素か数字で指定すれば列ごとのデザインを指定できます。

基本情報や事業内容を箇条書きした真面目イメージの会社概要HTML＆CSS

サンプルサイトの会社概要

HTMLのブロックに以下のコードで作成することができます。

<div class="about-page">
<h2 class="about-page">〇〇〇〇株式会社</h2>
<dl class="about-page">
 	<dt><i class="fas fa-map-marker-alt fa-fw"></i>所在地</dt>
 	<dd>〒2xx-00xx神奈川県〇〇市〇〇5xx</dd>
 	<dt><i class="fas fa-phone fa-fw"></i>電話</dt>
 	<dd><a class="con_txt_tel" href="tel:04xx-5x-4xxx"><i class="fas fa-phone"></i>04xx-5x-4xxx</a></dd>
 	<dt><i class="fas fa-phone fa-fw"></i>フリーダイヤル</dt>
 	<dd><a class="con_txt_tel" href="tel:0120-3xx-4xx"><i class="fas fa-phone"></i>0120-3xx-4xx</a></dd>
 	<dt><i class="fas fa-fax fa-fw"></i>ファックス</dt>
 	<dd>04xx-5x-1xxx</dd>
 	<dt><i class="far fa-envelope fa-fw"></i>メール</dt>
 	<dd><a class="con_txt_mail" href="mailto:support@〇〇〇.jp"><i class="far fa-envelope"></i>support@〇〇〇.jp</a></dd>
 	<dt><i class="fas fa-user fa-fw"></i>代表者</dt>
 	<dd>不動産　太郎</dd>
 	<dt><i class="fas fa-briefcase"></i>事業内容</dt>
 	<dd>不動産売買・賃貸仲介及び管理業</dd>
 	<dd>建築・リフォーム業</dd>
</dl>
</div>

全体をdivとdlのタグで囲みます。

dlは定義リストといって、用語とその意味を解説するために使われるHTMLタグですが、
ここでは項目名と内容を表示するために使っています。

tableを使ったデザインだと文字数によって読みにくくなったりするので、こっちの方がデザインはカスタマイズが簡単です。

項目を増やすときは、
dtが項目名
ddがその中身というように２つをセットにして増やしましょう。

 	<dt><i class="fas fa-fax fa-fw"></i>ファックス</dt>
 	<dd>04xx-5x-1xxx</dd>

コードを分解するとこのようになっています。

今回のデザインではFontAwesomeアイコンを使っているので、新しい項目をつくったり項目を変えたりする際は
FontAwesomeのアイコンを探してきて置き換えましょう。

Icons | Font Awesome

ブロックで作る会社代表者や社長の紹介

会社の紹介としてまず代表者の紹介をするところも多いでしょう。

病院のサイトでも医院長の顔写真と略歴を載せているところが多くあります。

そのようなデザインはHTMLを書かなくてもGudenbergのブロックで簡単につくることができます。

WordPressのブロックとVKブロック合わせて３種類あるのでそれぞれ解説していきます。

CSSカスタマイズは、画像サイズの調整や文字部分をボックスで囲んでカスタマイズすることで、自分のサイトに合わせたデザインに出来るでしょう。

メディアと文章のブロックを使う

メディアと文章のサンプル

※サンプルでは全幅デザインにすることで全体に背景を付けています。(別記事で解説)デフォルトの背景では幅全体ではなくブロックの周りにだけ色が付きます。

固定ページの編集画面で、ブロックを追加したら、
レイアウト要素のメディアと文章を選択します。

画像を追加したら、画像を右側にするか左側にするかを選択できます。

文章の側は通常のブロックと同じように見出し・段落・リスト・ボタンを追加することができます。

このようなタイプのブロックでは、右カラムの文章の設定などが表示されているところでブロックを選択すると設定の変更ができます。

背景色やテキストやボタンの色がカスタマイズできます。

カラムとしてレイアウトされているため、画像と文のレイアウトを自由に変えたい場合や他の要素を追加したい場合には向いていません。

gridレイアウトという少々特殊なCSSが使われているので、レイアウトを変えようとしたり複雑な変更をしようとすると苦労すると思います。

シンプルに２カラムに分けて画像と文章を表示したいという場合に使いましょう。

/* */
/* WordPressのメディアと文章 */
/* */
/* 全体をボックスに入れてカスタマイズしたい場合はこの中に指定 */
.wp-block-media-text{

}
/* 画像に囲み線を付ける*/
.wp-block-media-text__media{
border:2px solid #ad8c5e;
}
/* タイトル */
p.has-large-font-size{
text-shadow:1px 1px 1px #ad8c5e;
border-bottom:3px solid;
padding-bottom:0em;
}
/* スマホ以外で画像の幅と位置を変える */
@media screen and (min-width:576px){
.wp-block-media-text{
align-items: flex-start;
grid-template-columns: 30% auto;
}
}
/* スマホで縦並びに変える */
@media screen and (max-width:576px){
/* 画像 */
.wp-block-media-text__media{
width:90%;
margin-left:5% !important;
}
/* 画像と文字の間にスペース */
p.has-large-font-size{
margin-top:0.5em;
}
}
/* ボタン */
.wp-block-media-text__content a.wp-block-button__link{
background-color:#ff6798;
width:100%;
font-weight:bold;
border:2px solid #ff6798;
border-radius:0;
box-shadow:2px 2px 0px #e5d7c7;
}
/* ボタンホバー */
.wp-block-media-text__content a.wp-block-button__link:hover{
background-color:#fff;
color:#ff6798;
border:2px solid #ff6798;
text-decoration:none;
}

スマホでは見やすいように縦並びにした方が良いでしょう。

スマホ以外で画像の幅と位置を変えるときは、
align-itemsで画像を上揃えにするか中央揃えにするか下揃えにするかが変えられます。

grid-template-columnsでは、画像を全体の何％にするかを変えられます。

VK PRコンテンツを使う

VK PRコンテンツのサンプル

※サンプルでは背景をパララックスにしています。(別記事で解説)

固定ページの編集画面で、ブロックを追加したら、
VK Brocks(Beta)のPR Contentを選択します。

画像を追加してタイトルと本文を入力したら、右カラムの設定から色の設定とボタンの追加ができます。

デフォルトでは通常の横並びですが、画像の大きさを調整して文章を後ろに回り込ませることができます。

/* */
/* vk PRコンテンツ */
/* */

/* タイトル */
.vk_prContent_colTxt_title{
display:inline-block;
border-bottom:2px solid #fff;
}
/* ボタン */
.vk_prContent_colTxt_btn{
border:2px solid #fff;
}
/* 文章をボックスに入れる */
.col-sm-6.vk_prContent_colTxt{
background-color:rgba(255,103,152,0.8);
color:#fff;
padding:2em 1em;
}
/* 横並びのとき */
@media screen and (min-width:576px){
/* 画像の割合 */
.col-sm-6.vk_prContent_colImg{
width:30%;
z-index:1;
}
/* 文章を画像の下に重ねる */
.col-sm-6.vk_prContent_colTxt{
　　flex: 0 0 80%;
    max-width: 80%;
    margin-left: -10%;
    margin-top: 100px;
    padding-left: 10%;
    padding-right: 40px;
}
}
/* スマホ */
@media screen and (max-width:576px){
.col-sm-6.vk_prContent_colTxt{
margin-top:-2em;
padding:2em 0.5em;
}
}

文章をボックスに入れるところのデザインはどんなボックスにも出来るので、
オリジナルなデザインができるでしょう。

VKプロフィール(スタッフ)を使うとオシャレな雰囲気で人物紹介できる

画像と文章のレイアウトブロックでも人物紹介はできますが、
VKプロフィールだとよりプロフィールを紹介するのに適した設定とデザインが出来ます。

VKプロフィールサンプル

ブロックでVK Blocks (Beta)のスタッフを追加します。

各項目を入力したら、画像の右／左、枠の有無を選択します。

それぞれのテキストの色も指定ができます。

画像左を選択すればスマホでの表示で画像が上に表示されますが、
サンプルサイトではレイアウト上標準でカスタマイズしています。

/* */
/* VKプロフィール */
/* */
/* 全体をボックスに入れる */
.wp-block-vk-blocks-staff.vk_staff{
background-color:#e5d7c7;
padding:1.7em 15px;
box-shadow:1px 1px 1px #ad8c5e;
}
/* プロフィール名 */
h3.vk_staff_text_name{
background:linear-gradient(.25turn ,#ad8c5e 0% ,15% ,#fff 100%);
padding:10px 20px;
}
/* プロフィールの文の位置を揃える */
.vk_staff_text p, .vk_staff_text h4{
margin-left:20px;
}
/* プロフィールのタイトル */
h4.vk_staff_text_profileTitle{
border-radius:0;
border-bottom:1px solid #ad8c5e;
}
/* 役職名 */
.vk_staff_text_role{
color:#ff6798 !important;
font-weight:bold;
}
@media screen and (max-width:667px){
/* スマホでは画像を全幅に */
.vk_staff_photo{
width:100%;
float:none;
}
/* テキストも全幅に */
.vk_staff_text{
float:none;
width:100%;
}
}

タイトルのデザインをカスタマイズするだけでも、サイトに合った人物紹介ができます。

ただ、デフォルトのままではスマホのとき表示が崩れるので、
スマホでは縦並びになるようするカスタマイズだけはしておきましょう。

スタッフ・メンバー紹介をウィジェットやPRブロックで簡単に設置

会社のサイトや団体のサイトでは代表メンバーをトップページで紹介することがよくあります。

写真と自己紹介が綺麗に並んでいると見栄えがよく、信頼もアップ。

サイト制作初心者でも、簡単に自分でつくることが出来るので、ぜひ導入しましょう。

スタッフや職員、メンバーを紹介する場合は、時間が経ってから変わることもあるため、後から簡単に差し替えが出来るよう、HTMLよりもエディタで気軽に編集できる方が良いです。

横並びのレイアウトもCSSが難しいので、多少詳しい人でもブロックを使うべき！

VK PR blocksで簡単にスタッフ紹介コーナーを設置

ブロックエディタでVK Blocks (Beta)のPR Blocks (Beta)を追加します。

タイトルと紹介文を入力したら、設定カラムのブロックでアイコンではなく画像を設定します。

これだけで基本の３ブロックに分かれた人物紹介を作ることが出来ます。

VK PRブロックを使ったサンプルサイト

/* */
/* PRブロック */
/* */
/* 画像を大きく四角く表示する */
.vk_prBlocks_item_image{
width:auto;
height:auto;
border-radius:0;
}
/* 横並びのときブロックの高さを揃える */
@media screen and (min-width:576px){
.wp-block-vk-blocks-pr-blocks.vk_prBlocks{
display: -webkit-box; /*Android4.3*/
display: -moz-box; /*Firefox21*/
display: -ms-flexbox; /*IE10*/
display: -webkit-flex; /*PC-Safari,iOS8.4*/
display: flex;
margin:3em 0;
}
}
/* ボックス */
.vk_prBlocks_item.col-sm-4{
border:2px solid #ad8c5e;
background-color:#e5d7c7;
}
/* 横並びのときボックスのスペース */
@media screen and (min-width:576px){
.vk_prBlocks_item.col-sm-4{ margin:0.5em;
width:calc(33.333333% - 1em);
padding:1em;
}
}
/* ボックスタイトル */
.vk_prBlocks_item_title{
font-weight:bold;
box-shadow:none;
}
/* 画像 */
.vk_prBlocks_item_image{
border:2px solid #ad8c5e;
}
/* スマホ */
@media screen and (max-width:576px){
.vk_prBlocks_item.col-sm-4{
padding:1em 0.5em;
}
}

このカスタマイズでは一つ一つのPRブロックをボックスで囲んでいます。

また、人物紹介などで使用するときに大きく画像を使用したい場合は、カスタマイズの一番上にあるコードで画像を横幅いっぱいで表示するように変更しましょう。

VK 3PRエリアとVK PR Blocksでもスタッフ紹介を設置できる

トップページでは、トップページコンテンツエリア上部にウィジェットを追加することでVK Blocksと同じようなブロックを設置できます。

VK 3PRエリアでは画像をブロック幅で表示して紹介ができます。

VK 3PRエリアを使ったサンプル(タイトルのみカスタマイズ)

このウィジェットを使うとき、画像の大きさが揃っていないとそのままレイアウトが崩れてしまうので、同じ縦横比になるようにあらかじめ編集した画像を使用しましょう。

VK PR Blocksでは丸いアイコン型で画像を表示できます。

VK PR Blocksを使った部分のサンプル(カスタマイズなし)

どちらもそのままでレイアウトが崩れることはないので、CSSカスタマイズコードは載せません。(手抜き。)

タイトルのデザインなど変えたいときは、デベロッパーツールで要素のクラスと適用されているCSSを確認して、
基本的なCSSカスタマイズを行えばOK！です。

複雑な構造ではないので、初心者でもデベロッパーツールの使い方と基本のCSSカスタマイズの方法がわかっていれば簡単にカスタマイズできます。

ブロックを上手く使えば簡単に基本的な紹介ができる！

HTMLやCSSの知識がないと、どうしても画像や文字が並んでいるだけの平坦なサイトになってしまいがちですが、
WordPressでGudenbergのブロックエディタを使えば簡単にさまざまなレイアウトで会社や事業を紹介できてしまいます！

特にLightningのVK All in one Expansion Unitを使えばさらに充実したブロックが増えます。

苦手意識をもたず、初心者でもぜひ自分で会社のコーポレートサイトや店舗サイトを作ってみましょう。

さやに相談してみる
さやアイコン
さや

さやに相談してみる

自分では解決しない…けど専門業者に頼むのはちょっと…
自分で進めたいけどサポートが欲しい！というとき
お気軽にご相談ください！

さやっとウェブ制作サポート

記事内容のカスタマイズ代行、さらにご希望に合わせたカスタマイズ、ご希望の機能やデザインの制作、コンテンツ作成のお手伝いまでウェブ制作全般にご対応！

ご利用ガイド

ページに使える機能・デザインCSS,HTML,Lightning,カスタマイズ,企業・ビジネス,自作

Posted by さや