[SWELL]プロフィールの設定方法とウィジェット活用ガイド|SNSアイコンも簡単設置!

2506_profile-guide

こんにちは "osaboo"osabooです。"@osaboo_Bot"

SWELLのプロフィールの設定方法とウィジェットの活用法方を初心者さん向けに解説します。
「サイドバーにプロフィールを設定するための全手順をわかりやすくご紹介します!」

「記事下エリア」に表示する「この記事を書いた人」については以下の記事をご覧ください。

Question

SWELLでプロフィールを設定するにはどうすればいいの?

SWELLには、ブログの「運営者情報」をおしゃれに表示できるプロフィールウィジェットが標準で用意されています。
サイドバーやフッターに自分の情報やSNSリンクをまとめておくことで、ブログの信頼性がアップし、読者にも親しみを感じてもらえます。

この記事では

  • プロフィールウィジェットの設置手順
  • 各設定項目の使い方
  • SNSアイコンの表示方法

を初心者向けにわかりやすく解説します。

SWELLを使い始めたばかりの方でも、この記事を読めば「自分らしいプロフィール欄」を簡単に作れるようになります!

こんな方におすすめ
  • SWELLでプロフィールを設定したいけどやり方がわからない
  • SNSアイコンをおしゃれに並べたい
  • サイドバーに運営者情報を載せたい
  • ブログの信頼性を高めたい
この記事でわかること
  • SWELLでプロフィールを設定する基本手順
  • ウィジェットを使った設置方法と活用ポイント
  • SNSアイコンを追加・カスタマイズする方法
  • プロフィールデザインを整えるコツと注意点

それではご覧ください。

目次 "Contents"

「[SWELL] プロフィール」ウィジェットとは?

SWELLには、利用できるウィジェット項目の中に「[SWELL] プロフィール」という、運営者の情報をまとめて表示できる便利な機能があります。

以下のような情報を、1つのブロックでスッキリ見せられます。

  • 名前や肩書き
  • 自己紹介文
  • プロフィール画像(アイコン)
  • 背景画像
  • ボタン(リンク付き)
  • SNSアイコンリスト

SNSアイコンを表示するには、カスタマイザー側でSNSリンクを設定する必要があります。

ウィジェット側だけではアイコンは出てこないので注意しましょう。(詳しくは後述します)

「[SWELL] プロフィール」ウィジェットでは、次のような項目を設定できます。

2506-1|プロフィール|プレビュー
プロフィール(サンプル)
設定項目は6個
  1. 名前と肩書き
  2. プロフィール文(テキスト)
  3. アイコン画像
  4. 背景画像
  5. ボタン設定
  6. SNSアイコンリスト
  • これらの表示設定はすべてウィジェトで行えます。
  • ボタンの丸みはSWELのエディター設定が反映されます。
  • SNSアイコンリスト:SNS情報(アカウント)の設定はカスタマイザーで行います。

ここでは、WordPress標準の「ユーザー > プロフィール」での設定は不要です。
SWELLのウィジェット機能とカスタマイザーの設定だけで完結します。

「[SWELL] プロフィール」ウィジェットの設置手順

ここでは、「[SWELL] プロフィール」ウィジェットの設置手順をご紹介します。

WordPress管理画面からウィジェットを開きます。

Menu『WordPress管理>ダッシュボード>外観>ウィジェット』をクリックします。

886-1|WordPress管理|ダッシュボード|外観|ウィジェット

ウィジェット画面で、利用できるウィジェットの中から『[SWELL] プロフィール』を選択してウィジェットエリア(表示する領域)を指示します。

この記事ではプロフィールを表示させる一般的なウィジェットエリアである『共通サイドバー』に設置します。

  • 『[SWELL] プロフィール』をクリックしてドロップダウンメニューを開きます。
  • ウィジェットエリア(表示する領域)を選択します。(サンプルでは『共通サイドバー』)
  • 『ウィジェットを追加』をクリックします。
  • 『[SWELL] プロフィール』をウィジェットエリア(表示する領域)『共通サイドバー』へドラッグ&ドロップしても同じです。
2506-2|ウィジェット|[SWELL] プロフィール

ウィジェットエリア(表示する領域)に『[SWELL] プロフィール』が設置できたら…次に詳細設定をしていきます。

「[SWELL] プロフィール」ウィジェットの詳細設定

ここでは、ウィジェットエリアに設置した「[SWELL] プロフィール」ウィジェットの詳細設定をご紹介します。

』をクリックします。

2506-3|ウィジェット|[SWELL] プロフィール|詳細

「[SWELL] プロフィール」ウィジェットの詳細設定画面が開いたら、表示したいプロフィール項目(❶〜❻)を順に設定します。

項目は次の通りです。
  • 名前 & 役職(肩書き)
    • 運営者名や職種などを入力
  • プロフィール文
    • 自己紹介やメッセージを自由に記載
  • アイコン画像
    • あなたの顔写真やイメージ画像を設定
  • プロール背景画像
    • プロフィール欄の背景デザインを変更
  • ボタンのリンク先・テキスト・色
    • 任意のリンクボタンを設置
  • SNSアイコンリストの表示・丸枠
    • SNSのリンクアイコンを表示(丸枠のON/OFFも可能)

詳細設定

2506-4|ウィジェット|[SWELL] プロフィール|詳細

反映箇所(プレビュー)

2506-5|ウィジェット|[SWELL] プロフィール|詳細|プレビュー

ボタンの表示と形状について

SWELL設定のエディター設定での設定が形状に反映されます。→ ウイジェットで変更不可
(ボタンの色はデフォルトでメインカラーが反映されます。→ ウイジェットで変更可)

  • ボタンの表示は「プロフィール文」と「ボタンリンク先」が入力されている場合に表示されます。
  • ボタンの表示は「SWELL設定のエディター設定」が反映されます。

ボタンの形状を変更する手順

Menu『WordPress管理>ダッシュボード>SWELL設定>エディター設定』をクリックします。

2283-17|WordPress管理|ダッシュボード|SWELL設定|エディター設定

エディター画面で、『ボタン』タブを選択し『カラー設定・ボタンの丸み』をお好みで変更します。最後に『変更を保存』をクリックして完了です。

2506-6|SWELL設定|エディター設定|ボタンタブ

「ボタンブロックの使い方や設定」の詳細はこちらの記事で詳しく御紹介しています。
あわせてご覧ください。

「SNSアイコンリスト」SNS情報(アカウント)の設定方法

SNSアイコンリストを表示するためには、カスタマイザーでSNS情報(アカウント)の設定が必要です。

カスタマイザーを起動します。

Menu『WordPress管理>ダッシュボード>外観>カスタマイズ』をクリックします。

カスタマイザーが起動すると、画面の左側に以下の画面が表示されます。

「カスタマイザー」画面で以下の手順で進み、詳細を設定します。

この記事では、「SNS情報」の詳細設定項目について紹介します。(赤破線部)

  • URLを入力した「SNSリンクアイコン」が「[SWELL] プロフィール」に表示されます。

SNS情報
➡︎

2506-7|カスタマイザー|SNS情報
yajirusi-yoko-40x80

設定項目詳細(SNSリンク設定)
⬇︎

2506-8|カスタマイザー|SNS情報|SNSリンク設定

まとめ[SWELL]プロフィールの設定方法とウィジェット活用ガイド|SNSアイコンも簡単設置!

この記事では、SWELLの「利用できるウィジェット」項目にある『[SWELL] プロフィール』ウィジェットの設定方法を、初心者向けにわかりやすく解説しました。

設定は「ウィジェット」「エディター設定」「カスタマイザー」の3つの箇所に分かれていますが、手順通りに進めれば誰でも簡単に整えられます。

プロフィール欄は、サイト運営者の信頼性を高め、読者とのつながりを作る大切なエリアです。
少し手間はかかりますが、完成したときの見栄えは抜群です。ぜひチャレンジしてみてください!

この記事がお役に立てば嬉しいです。

「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。\^^/

  • URLをコピーしました!
  • URLをコピーしました!
目次 "Contents"