【初心者向け】SWELLでプロフィールを作成する（ウィジェット）

プロフィールの作り方はいくつかありますが、今回紹介するのは[SWELL]プロフィールウィジェットから作る方法です。

通常は、[SWELL]プロフィールウィジェットはサイドバーに配置します。

既に記事の本文内にプロフィールを表示させていても、サイドバーの方にもプロフィールがあった方が、読者の目に留まりやすいので、サイドバーのプロフィールはおすすめです。

ぜひ参考にしてください！

画像（プロフィール、背景）の準備

先の画像にあるように、[SWELL]プロフィールウィジェットでは、プロフィール用の画像に、さらに背景画像を指定することができます。

それぞれの画像サイズは、以下のサイズ以上あれば問題ないです。（pxはピクセル）

ちなみに、以下はこのブログで準備した画像です。

プロフィール画像（256px × 256px）

背景画像(800px × 300px）

背景画像は以下のように中央部分が画面に表示されるので、端の方が切れても問題ない画像にしてください。

プロフィール画像、背景画像とも、PCに保存しておいてください。
あとの手順で、画像をアップロードします。

プロフィールウィジェットの配置と項目入力

[SWELL]プロフィールウィジェットをサイドバーに配置して、項目を入力します。

管理画面メニュー「外観」の「ウィジェット」（①）をクリック。

「共通サイドバー」の中に、[SWELL]プロフィールウィジェットを追加します。
※「共通サイドバー」は、PC、モバイルどちらでも表示されるサイドバーです。

[SWELL]プロフィールを「共通サイドバー」の中にドラッグ＆ドロップします。

[SWELL]プロフィールの項目の①～⑦まで入力していきます。（不要な項目があれば入力しなくてもかまいません）

項目の入力で難しいものはないと思いますが、「画像の選択」、「ボタンの設定」、「SNSのアイコン設定」について、これから詳細な手順を解説します。

画像の選択

まず、画像の選択手順ですが、手順がわかる人は次の「ボタンの入力」までスキップしてください。

画像の選択手順（タップで手順を展開）

プロフィール画像（④）のところにある「画像を選択」をクリックし、PCに保存しているプロフィール用の画像を画面にドラッグ＆ドロップでアップロード。

アップロードした画像にチェックがついていることを確認し、「画像を選択」をクリック。

背景画像も同じ手順でアップロードします。

ボタンの設定

ボタン（⑥）の項目として、ボタンリンク先、ボタンテキスト（ボタン名）、ボタンの色などを設定します。

ボタンリンク先

ここでは例として、ボタンのリンク先は「プロフィール」ページを指定していますが、リンク先はプロフィールでなくても、なんでも構いません。（おすすめのページやカテゴリーページなどあれば）

ボタンテキスト（ボタン名）

ボタンテキストには、ジャンプ先がわかるような名前を入力しますが、このブログでは以下のように入力しています。

[icon icon-person]プロフィール

［icon icon-person］は「人型のアイコン」を指定する書き方で、SWELLで使えるアイコンとなっています。

ボタンテキストにアイコンを指定することで、「プロフィール」の左に「人型のアイコン」が表示されていることがわかります。

SWELLで用意しているアイコンは他にも沢山あるので、以下の記事を参考にしてください。

[icon アイコンクラス名]

SNSのアイコン設定

次は、SNSアのアイコンを表示させる設定です。

まず、「SNSアイコンリストを表示する」にチェックを付けないと、SNSアイコンは表示されません。

表示したいSNSアイコンがある場合は、カスタマイザーの設定でURLを入力する必要があります。　

管理画面メニュー「外観」（①）の「カスタマイズ」（②）をクリック。

「SNS情報」をクリック。

Facebook、Twitter、Instagramなど、有名どころのSNSのURLを入力する項目は揃っています。
表示させたいSNSのアカウントページのURLを入力して、「公開」をクリックすると、そのSNSのアイコンが表示されます。

上の画像は全てのSNSのURLを入力した場合です。

これで、[SWELL]プロフィールウィジェットからプロフィールを作成する手順は全て完了です。

「CTRL」＋「D」を押すだけで、当サイト【還じいブログ】の記事がブックマークできます！