Diviで美しいモバイルソーシャルフォローBIOSを作成する方法（無料ダウンロード！）

あなたがあなたの個人的なウェブサイトを作成しているとき、あなたが簡単にリンクすることができるソーシャルフォローバイオページを持つことは助けになります。 それはあなたがしていることの要約と人々があなたの仕事を見ることができる場所で素晴らしいオンライン訪問カードを作ります。 モバイルソーシャルフォローバイオ内で共有される情報は、通常、画像、名前、役職、簡単な説明、ポートフォリオリンクに限定されます。 また、訪問者があなたと連絡を取るのに役立つCTAを追加することもできます。

この投稿では、Diviを使用して2つの美しいモバイルソーシャルフォローBIOSを作成する方法を紹介します。 チュートリアルの最後に、両方の例のJSONファイルも共有して、すぐに開始できるようにします。

それを手に入れよう！

プレビュー

チュートリアルに入る前に、最初から再作成する2つの例を簡単に見てみましょう。

例1

例2

例1の再作成を開始します

新しいセクションを追加

背景色

最初の例から始めましょう！ 新しいページを作成するか、既存のページを開いて、通常のセクションを追加します。 セクション設定を開き、白い背景色を追加します。

• 背景色：#ffffff

間隔

次に、セクションの間隔設定に移動して、いくつかの変更を加えます。 画面サイズによって値が異なることに気付くでしょう。 左右のパディングを変更することで、さまざまな画面サイズで同じ種類のスリムなデザインを維持しています。

• トップパディング：50px（デスクトップとタブレット）、0px（電話）
• 下部のパディング：50px（デスクトップとタブレット）、0px（電話）
• 左パディング：36vw（デスクトップ）、23vw（タブレット）、0vw（電話）
• 右パディング：36vw（デスクトップ）、23vw（タブレット）、0vw（電話）

行＃1を追加

カラム構造

次の列構造を使用して、セクションに新しい行を追加して続行します。

背景色

モジュールをまだ追加せずに、行設定を開いて背景色を追加します。

• 背景色：＃333333

サイジング

次に、[デザイン]タブのサイズ設定に移動し、列と行の間のすべてのカスタムスペースを削除します。

• この行を全幅にする：はい
• カスタムガター幅を使用：はい
• 側溝幅：1

ボックスシャドウ

また、ボックスシャドウを追加して、より大きな画面サイズである程度の奥行きを作成しています。

• ボックスシャドウブラー強度：80px
• 影の色：rgba（0,0,0,0.3）

画像モジュールの追加

画像をアップロード

モジュールの追加を開始する時が来ました！ 1：1の比率のイメージモジュールから始めます。 たとえば、使用している画像の幅と高さは「500px」です。

配置

画像をアップロードしたら、[デザイン]タブに移動して、画像の配置を変更します。

• 画像の配置：中央

サイジング

次にサイズ設定で幅を変更して、画像のサイズを縮小します。

• 幅：33％
• モジュールの配置：中央

国境

また、境界線設定の各コーナーに「50vw」を追加して、画像を円に変えています。 その上に、次の設定を使用して白い境界線を追加します。

• ボーダー幅：8px
• ボーダーカラー：#ffffff

ボックスシャドウ

最後になりましたが、ボックスシャドウを追加して、立体的なデザインを作成します。

• ボックスシャドウの垂直位置：40px
• ボックスシャドウブラー強度：100px
• 影の色：＃000000

テキストモジュール＃1を追加

H3コンテンツを追加する

次のモジュールへ！ 画像モジュールのすぐ下に、H3コンテンツを含むテキストモジュールを追加します。

H3テキスト設定

[デザイン]タブに移動し、H3テキスト設定を変更して続行します。

• 見出し3フォント：Open Sans
• 見出し3フォントの太さ：半太字
• 見出し3テキストの配置：中央
• 見出し3のテキストの色：#ffffff
• 見出し3行の高さ：0.1em

間隔

また、画像モジュールとこのテキストモジュールの間にスペースを作成するために、上部マージンを追加しています。

• トップマージン：30px

テキストモジュール＃2を追加

コンテンツを追加する

次に必要なモジュールは、別のテキストモジュールです。 コンテンツボックスに役職を追加します。

テキスト設定

次に、[デザイン]タブに移動し、テキスト設定を変更します。

• テキストフォント：Open Sans
• テキストフォントの太さ：通常
• テキストの色：＃919191
• テキストの向き：中央

テキストモジュール＃3を追加

コンテンツを追加する

自分の簡単な説明を含む別のテキストモジュールを追加して続行します。

テキスト設定

テキスト設定に移動し、いくつかの変更を加えます。

• テキストフォント：Open Sans
• テキストの色：＃b7b7b7
• テキスト行の高さ：1.6em
• テキストの向き：中央

サイジング

モジュールの幅も変更します。

• 幅：68％
• モジュールの配置：中央

間隔

また、上下の余白を追加して、スペースを追加します。

• トップマージン：30px
• 下マージン：30px

ボタンモジュールの追加

コピーを追加

この行で必要な次の最後のモジュールはボタンモジュールです。 コピーを追加します。

配置

次に、[デザイン]タブに移動し、ボタンの配置を変更して、前のモジュールと一致させます。

• ボタンの配置：中央

ボタンの設定

ボタン設定でボタンの外観を変更して続行します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：13px
• ボタンのテキストの色：#ffffff
• 色1：＃ad32ff
• 色2：＃32baff
• グラデーション方向：96度
• ボタンの境界線の幅：0px
• ボタンの境界線半径：30px
• ボタンフォント：Sansを開く
• フォントの太さ：超太字
• フォントスタイル：大文字

間隔

次に、カスタムマージンとパディングを追加します。

• 下マージン：50px
• トップパディング：15px
• ボトムパディング：15px
• 左パディング：50px
• 右パディング：50px

ボックスシャドウ

そして、ボックスシャドウを追加してボタンのデザインを完成させます。

• ボックスシャドウの垂直位置：20px
• ボックスシャドウブラー強度：80px
• 影の色：rgba（0,0,0,0.69）

行＃2を追加

カラム構造

次の行へ！ 次の列構造を使用します。

グラデーションの背景

モジュールをまだ追加せずに、行設定を開き、グラデーションの背景を追加します。

• 色1：＃1e1e1e
• 色2：＃3f3f3f
• グラデーションタイプ：ラジアル
• 半径方向：左上
• 開始位置：26％
• 背景画像の上にグラデーションを配置：はい

背景画像

次の画像をコンピューターに保存し、行の背景画像として使用します。

次の背景設定とともに：

• 背景画像サイズ：実際のサイズ
• 背景画像の位置：中央
• 背景画像の繰り返し：繰り返しなし
• 背景画像のブレンド：ハードライト

サイジング

次に、[デザイン]タブに移動し、列と行の間のスペースをすべて削除します。 これにより、取得した行スペースを最大限に活用できます。

• この行を全幅にする：はい
• カスタムガター幅を使用：はい
• 側溝幅：1

間隔

次に、カスタムパディングを追加します。

• トップパディング：84px
• ボトムパディング：84px
• 左パディング：4vw（デスクトップ）、7vw（タブレット）、14vw（電話）
• 右パディング：4vw（デスクトップ）、7vw（タブレット）、14vw（電話）

ボックスシャドウ

ボックスシャドウと一緒に。

• ボックスシャドウブラー強度：80px
• 影の色：rgba（0,0,0,0.3）

画面

すべてのソーシャルフォローアイコンが隣り合って表示されるようにするために、CSSコードの1行を行のメイン要素に追加します。

display: flex;

ソーシャルメディアフォローモジュールを列1に追加

配置

列1で必要な最初のモジュールは、ソーシャルメディアフォローモジュールです。 モジュールを追加したら、[デザイン]タブでアイテムの配置を変更します。

• アイテムの配置：中央

新しいソーシャルネットワークを追加する

新しいソーシャルネットワークを追加して続行します。 この例では、Dribbbleを使用しています。

リンク

Dribbbleプロファイルへのリンクを追加します。

グラデーションの背景

次に、次の設定を使用してグラデーションの背景を変更します。

• 色1：＃ea0061
• 色2：＃ea4c8d
• 勾配方向：136度

間隔

また、カスタムパディングを追加して、モジュールのサイズを増やします。

• トップパディング：20px
• ボトムパディング：20px
• 左パディング：20px
• 右パディング：20px

国境

また、境界線設定の各コーナーに「20vw」を追加して、モジュールを円に変えています。

ボックスシャドウ

最後になりましたが、ボックスシャドウを追加します。

• ボックスシャドウの垂直位置：20px
• ボックスシャドウブラー強度：80px
• 影の色：＃000000

テキストモジュール＃1を列1に追加します

コンテンツを追加する

次の最初の列にテキストモジュールを追加します。

テキスト設定

テキスト設定を変更します。

• テキストフォント：Open Sans
• テキストフォントの太さ：超太字
• テキストの色：#ffffff
• テキストの向き：中央

テキストモジュール＃2を列1に追加します

コンテンツを追加する

前のものの下にもう1つ追加します。

テキスト設定

このモジュールのテキスト設定も変更します。

• テキストフォント：Open Sans
• テキストの色：＃898989
• テキストサイズ：11px
• テキストの向き：中央

列1のモジュールのクローンを作成し、残りの列に複製を2回配置します

列1のすべてのモジュールのカスタマイズが完了したら、先に進んでそれらのクローンを2回作成できます。 行の残りの2つの列に重複を配置します。

ソーシャルネットワークの変更

もちろん、ソーシャルネットワークを変更する必要があります。

ソーシャルネットワークリンクの変更

リンクと一緒に。

ソーシャルネットワークのグラデーションの背景を変更する

そして、ネットワーク勾配の背景。

• 色1：＃0043ff
• 色2：＃00aced

• 色1：＃ea2c59
• 色2：＃fed270

例2の再作成を開始します

新しいセクションを追加

背景色

次の例に移りましょう！ 背景色が白の新しいセクションを追加します。

• 背景色：#ffffff

間隔

次に、カスタムパディングを追加します。

• トップパディング：50px（デスクトップとタブレット）、0px（電話）
• 下部のパディング：50px（デスクトップとタブレット）、0px（電話）
• 左パディング：36vw（デスクトップ）、23vw（タブレット）、4vw（電話）
• 右パディング：36vw（デスクトップ）、23vw（タブレット）、4vw（電話）

行＃1を追加

カラム構造

次の列構造を使用して、新しい行を追加して続行します。

サイジング

モジュールをまだ追加せずに、行設定のデザインタブに移動し、サイズ設定を変更します。

• この行を全幅にする：はい
• カスタムガター幅を使用：はい
• 側溝幅：1

画像モジュールの追加

画像をアップロード

モジュールの追加を開始する時が来ました！ 最初に必要なモジュールは、1：1の比率の画像モジュールです。

配置

画像の配置を変更します。

• 画像の配置：中央

サイジング

幅も変更します。

• 幅：33％
• モジュールの配置：中央

国境

そして、境界線設定の各コーナーに「20px」を追加します。

ボックスシャドウ

微妙なボックスシャドウを追加して、画像デザインを完成させます。

• ボックスシャドウブラー強度：51px
• 影の色：rgba（0,0,0,0.37）

テキストモジュール＃1を追加

H3コンテンツを追加する

次に必要なモジュールはテキストモジュールです。 選択したH3コンテンツをいくつか追加します。

H3テキスト設定

デザインタブでH3テキスト設定を変更します。

• 見出し3フォント：Open Sans
• 見出し3フォントの太さ：超太字
• 見出し3フォントスタイル：大文字
• 見出し3テキストの配置：中央
• 見出し3テキストの色：＃000000
• 見出し3文字の間隔：-1px
• 見出し3行の高さ：0.9em

間隔

次に上マージンを追加します。

• トップマージン：30px

テキストモジュール＃2を追加

コンテンツを追加する

別のテキストモジュールを追加します。

テキスト設定

テキスト設定を変更します。

• テキストフォント：Open Sans
• テキストの色：＃919191
• テキストの向き：中央

行＃2を追加

カラム構造

次の列構造を使用して、新しい行を追加して続行します。

背景色

モジュールをまだ追加せずに、行の設定を開き、行の背景色を変更します。

• 背景色：#ffffff

列2の背景色

2番目の列にも背景色を追加します。

• 列2の背景色：#efefef

配置

左行の配置を使用していることを確認してください。

• 行の配置：左

サイジング

次にサイズ設定に移動し、いくつかの変更を加えます。

• カスタム幅を使用：はい
• 単位： ％
• カスタム幅：67％
• カスタムガター幅を使用：はい
• 側溝幅：1
• 列の高さを等しくする：はい

間隔

また、行とその列にカスタムパディングを追加しています。

• トップパディング：0px
• ボトムパディング：0px
• 列1の上部パディング：20px
• 列1の下部パディング：20px
• 列2のトップパディング：20px
• 列2の下部パディング：20px

国境

左上、右上、左下の角に「14px」を追加します。

ボックスシャドウ

そして、微妙なボックスシャドウを追加して、行のデザインを完成させます。

• ボックスシャドウブラー強度：80px
• 影の色：rgba（0,0,0,0.17）

ソーシャルメディアフォローモジュールを列1に追加

配置

最初の列には、ソーシャルメディアフォローモジュールが必要です。 アイテムの配置を変更します。

• アイテムの配置：中央

新しいソーシャルネットワークを追加する

次に、新しいソーシャルネットワークを追加します。 Dribbbleを使用しています。

リンク

Dribbbleポートフォリオへのリンクを追加します。

グラデーションの背景

そして、ソーシャルネットワークのグラデーションの背景を変更します。

• 色1：＃ea0061
• 色2：＃ea4c8d
• 勾配方向：136度

間隔

次に、いくつかのカスタムパディング値を追加します。

• トップパディング：20px
• ボトムパディング：20px
• 左パディング：20px
• 右パディング：20px

国境

そして、ソーシャルネットワークの各コーナーに「10px」を追加します。

ボックスシャドウ

微妙なボックスシャドウを追加して、モジュールの設計を完了します。

• ボックスシャドウブラー強度：80px
• 影の色：rgba（0,0,0,0.3）

テキストモジュール＃1を列2に追加します

コンテンツを追加する

2番目の列にテキストモジュールを追加します。

テキスト設定

それに応じてテキスト設定を変更します。

• テキストフォント：Open Sans
• テキストフォントの太さ：超太字
• テキストの色：＃000000
• テキストの向き：中央

間隔

次に上マージンを追加してスペースを作成します。

• トップマージン：10px

テキストモジュール＃2を列2に追加します

コンテンツを追加する

列2に必要な2番目のモジュールは、別のテキストモジュールです。

テキスト設定

テキスト設定を変更します。

• テキストフォント：Open Sans
• テキストの色：＃898989
• テキストサイズ：11px
• テキストの向き：中央

行＃2のクローン

行の変更が完了したら、先に進んで一度クローンを作成できます。

スワップモジュール

次にモジュールを交換します。

列1の背景色を追加

次に、列1の背景色を複製行に追加します。

• 列1の背景色：#dbdbdb

列2の背景色を削除します

次に、列2の背景色を削除します。

行の配置を変更する

行の配置も変更します。

• 行の配置：右

行のサイズを変更する

サイズ設定のカスタム幅とともに。

• カスタム幅：66.99％

行の境界線を変更する

また、「14px」が右上隅と右下隅にのみ割り当てられるようにしています。

ソーシャルフォローネットワークの変更

ソーシャルネットワークを変更して続行します。

ソーシャルフォローネットワークのグラデーションの背景を変更する

グラデーションの背景と一緒に。

• 色1：＃0043ff
• 色2：＃00aced

両方のソーシャルフォロー行のクローンを作成する

両方のソーシャルフォロー行の作成が完了したら、それぞれのクローンを作成できます。

重複＃1の境界を変更する

最初の複製の丸みを帯びた角を変更します。

重複＃1のソーシャルフォローネットワークを変更する

ソーシャルネットワークと一緒に。

重複＃1のグラデーション背景を変更する

そして、グラデーションの背景。

• 色1：＃ea2c59
• 色2：＃fed270

重複＃2の境界を変更する

2番目の複製の丸みを帯びた角も変更して続行します。

重複＃2のソーシャルフォローネットワークを変更する

ソーシャルネットワークと一緒に。

重複＃2のグラデーション背景を変更する

そして、もう一度、ソーシャルネットワークに割り当てられているグラデーションの背景。

• 色1：＃00306b
• カラー2：＃007bb6

Mobile Social FollowBiosを無料でダウンロード

無料のモバイルソーシャルフォローセクションを利用するには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

プレビュー

すべての手順を完了したので、再作成した両方の例の結果を最後に見てみましょう。

例1

例2

最終的な考え

この投稿では、モバイルデバイス向けの魅力的なソーシャルフォローバイオを作成する方法を紹介しました。 これらのデザインをオンライン訪問カードとして使用し、ユーザーをこのページにリダイレクトして、連絡を取り合ったり、ポートフォリオのリンクを表示したりできます。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！