チームメンバー・セクションは、あなたのチームや組織を構成する有能な人材を紹介するウェブサイトの専用スペースです。彼らの専門知識や実績、サクセスストーリーを紹介できる場所です。
ウェブサイトの主な目的は、注目を集めることだけでなく、人と人をつなぐことでもある。正直なところ、人と人とのつながりは長く印象に残るものだ。このため、ほとんどの確立された組織は、ウェブサイトにチームセクションを維持している。
あなたのウェブサイトがWordPressを使用しているなら、それは素晴らしいことです。このブログ記事では、プラグインを使わずにWordPressでチームメンバーセクションを作成する簡単なチュートリアルをご紹介します。最後までお付き合いください。
美しいテーブルを作る
ブロックエディター付き
WordPressでチームメンバーセクションを作成する方法
サイト上にチームメンバーセクションを作成できるページビルダーやカスタムブロックプラグインは数多くあります。しかし、Gutenbergブロックエディタには95以上のデフォルトブロックがあり、チームメンバーセクションを作成するために使用することもできます。
一度使い方を覚えてしまえば、多くの場合、追加のプラグインを使う必要はありません。このチュートリアルでは、これらのデフォルトブロックを使って説明します。一緒に手順を追っていきましょう。
ステップ01: パラグラフブロックを使ってチームセクションの名前を書く
ウェブ・セクションには必ず名前と見出しが必要です。同様に、チームのセクションにも、次のような名前が必要です。
- チーム紹介
- チーム紹介
- チームメンバー
- チームを支えるもの
- エキスパート紹介
タイトルを書く を段落ブロックを使って冒頭に置く。 タイトルを中央に揃え、太字にする、 そして サイズを大きくする.
ステップ 02: ブロックのグループ化
ブロックをグループ化することで、指定したグループセクション内に複数のブロックを1つずつ追加することができます。最大のメリットは、グループ化されていない通常のブロックでは不可能な、ブロック間の広範囲なカスタマイズができることです。
三点アイコンをクリック ツールバーの検索と グループオプションを押す on the list.
ブロックがグループ化されると、グループセクション内にGutenbergのプラス（+）アイコンが表示されます。これで、その中に新しいブロックを追加することができます。
ステップ03：チームセクションの簡単な説明を追加する
チームセクションの簡単な説明を追加することで、SEO効果が得られ、ユーザーがセクションの背景を理解しやすくなります。
パラグラフ・ブロックの追加 グループ・セクション内で。
セクションについて説明したいことを書くだけです。パディング・オプションを使えば、ブロック内のコンテンツの幅を小さくすることができます。
各ブロックは追加後すぐにカスタマイズできます。しかし、それはレイアウトが完成してからにしましょう。
ステップ 04: チームメンバーの追加
ここで、チームメンバーを表示するために、このセクション内に別のレイアウトを作成する必要があります。表示方法はさまざまです。これまで、ほとんどのウェブサイトがチームセクションを行、列、ボックス形式で表示しているのを見てきました。
そこで、チームセクションもコラムボックス形式で紹介する。 グループ全体を選択 によって グループアイコンをクリック ツールバーの プラス（＋）アイコンを押す.
探す カラムブロックを追加.
表示したいチームメンバーの数に応じて、列の数を選択します。今回は3人のメンバーを表示するので、3列を選択します。
3列と書きましたが、ブロックを追加した後の列が1列しかないことに驚かれるかもしれません。心配しないでください！マウスカーソルを交互に合わせ、右側の空白をクリックすると列が表示されます。
下のビデオをご覧ください。
親ブロックの中に新しいブロックを追加できる。最初の列に来てください。 画像ブロックを追加する をクリックしてください。その後、メディアライブラリまたはローカルドライブから画像をアップロードできます。
すでに画像が追加されているのがわかります。我々は 中央揃え.エッジサークルを使って画像のサイズを変更できます。
画像が完成したら キーボードのEnterボタンを押す をクリックすると、新しいブロック追加オプションが表示されます。デフォルトでは、段落ブロックが表示されます。
チームメンバーの名前、呼称、簡単な自己紹介を追加する。段落ブロックを使って追加しました。
これからは 個人のソーシャル・プロフィールをリンクする 同じ列のチームメンバーの ソーシャル・ブロックを通じて.
ここでは4つの人気プロフィールをリンクする。そこで、カラムブロックを使って、親カラムの中にさらに4つのカラムを作ります。
ソーシャル・アイコン・ブロックを追加する チームメンバーの名前と自己紹介の下にある親欄の中にある。
ソーシャル・アイコン・ブロックは、すべての人気ソーシャルメディア・プラットフォームを統合します。ソーシャル・アイコン・ブロックが追加されると、以下のリンクをクリックして、好きなブロックを選択することができます。 プラス（＋）アイコン.以下に添付したビデオでそのプロセスを説明する。
ソーシャルアイコンをクリック をひとつずつクリックしてください。それぞれのソーシャル・プロフィールのリンクをコピーペーストできるボックスが表示されます。このようにしてソーシャルセクションを完成させる。
親カラム全体を選択.に来てください。 スタイルタブ.を使用して、水平方向に追加したブロック間の不要なスペースを削除します。 ブロック間隔オプション.
背景色を追加する をチームメンバーの欄に追加する。見栄えを良くするために 水平パディングを追加する をクリックして、カラムの周囲にスペースを追加する。
同様に、新しいチームメンバーを追加して、右側の他の2つの列を完成させます。
3つの列すべてに3人のチームメンバーとその情報が記入されているのがわかるだろう。
ステップ05：チームメンバー全員のセクションをスタイライズする
チームメンバー全体のセクションを選択 をクリックしてください。 グループアイコン ツールバーの
背景色を追加する をクリックし、あなたにふさわしいと思われるチームのセクションを選んでください。その後 テキストの色を個別に変更するそれぞれの段落ブロックを一つずつ選択する。
次ページ パディングを追加する 縦にも横にも、セクション全体を囲む余白を作る。
最後に、チームセクションに半径を加え、ボーダーの角が半円形になるようにする。こうすることで、セクションに違った美しさを与えることができる。
ステップ 06: フロントエンドでチームセクションをプレビューする
最後に、ページのフロントエンドに来て、チームセクションがどのように見えるか見てみよう。
結論
チームメンバーのセクションも、さまざまな方法で作成し、カスタマイズすることができます。ここでは基本的なプロセスを紹介しましたが、そこからインスピレーションを得て、より素晴らしいデザインを作成・実現することができます。
もし、このチュートリアルのどこかで問題に直面した場合は、遠慮なくコメント欄からお知らせください。最後に、私たちのサイトから離れる前に、数分を割いて、この投稿を探索する WordPressでコンテンツボックスを作成する方法.
