この記事では、[SWELL]プロフィールウィジェットからプロフィールを作成する手順についてくわしく解説します。
テーマはSWELLを対象としています。
プロフィールの作り方はいくつかありますが、今回紹介するのは[SWELL]プロフィールウィジェットから作る方法です。

通常は、[SWELL]プロフィールウィジェットはサイドバーに配置します。
既に記事の本文内にプロフィールを表示させていても、サイドバーの方にもプロフィールがあった方が、読者の目に留まりやすいので、サイドバーのプロフィールはおすすめです。
ぜひ参考にしてください!
画像(プロフィール、背景)の準備
先の画像にあるように、[SWELL]プロフィールウィジェットでは、プロフィール用の画像に、さらに背景画像を指定することができます。
それぞれの画像サイズは、以下のサイズ以上あれば問題ないです。(pxはピクセル)
画像 | サイズ | 備考 |
---|---|---|
プロフィール | 幅120px以上 × 高さ120px以上 | 正方形で用意する |
背景 | 幅768px以上 × 高さ160px以上 | 横長の方がよい |
ちなみに、以下はこのブログで準備した画像です。
プロフィール画像(256px × 256px)

背景画像(800px × 300px)

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

プロフィール画像、背景画像とも、PCに保存しておいてください。
あとの手順で、画像をアップロードします。
プロフィールウィジェットの配置と項目入力
[SWELL]プロフィールウィジェットをサイドバーに配置して、項目を入力します。
管理画面メニュー「外観」の「ウィジェット」(①)をクリック。

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

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

このブログの場合は、1番目のブロック(検索ブロック)と2番目のブロック(最近の投稿)の間に[SWELL]プロフィールを追加しました。
[SWELL]プロフィールの項目の①~⑦まで入力していきます。(不要な項目があれば入力しなくてもかまいません)

項目の入力で難しいものはないと思いますが、「画像の選択」、「ボタンの設定」、「SNSのアイコン設定」について、これから詳細な手順を解説します。
画像の選択
まず、画像の選択手順ですが、手順がわかる人は次の「ボタンの入力」までスキップしてください。
画像の選択手順(タップで手順を展開)
プロフィール画像(④)のところにある「画像を選択」をクリックし、PCに保存しているプロフィール用の画像を画面にドラッグ&ドロップでアップロード。

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

背景画像も同じ手順でアップロードします。
ボタンの設定
ボタン(⑥)の項目として、ボタンリンク先、ボタンテキスト(ボタン名)、ボタンの色などを設定します。
ボタンリンク先
ここでは例として、ボタンのリンク先は「プロフィール」ページを指定していますが、リンク先はプロフィールでなくても、なんでも構いません。(おすすめのページやカテゴリーページなどあれば)
ボタンテキスト(ボタン名)
ボタンテキストには、ジャンプ先がわかるような名前を入力しますが、このブログでは以下のように入力しています。
[icon icon-person]プロフィール
[icon icon-person]は「人型のアイコン」を指定する書き方で、SWELLで使えるアイコンとなっています。
ボタンテキストにアイコンを指定することで、「プロフィール」の左に「人型のアイコン」が表示されていることがわかります。

SWELLで用意しているアイコンは他にも沢山あるので、以下の記事を参考にしてください。
SNSのアイコン設定
次は、SNSアのアイコンを表示させる設定です。
まず、「SNSアイコンリストを表示する」にチェックを付けないと、SNSアイコンは表示されません。

ここでのSNSのアイコンというのは、SNSのアカウントを持っている場合のアカウントページをリンク先としたアイコンです。
つまり、ツイッターなど自分のアカウントを持っている場合は、そのアカウントを示すURLを入力します。
表示したいSNSアイコンがある場合は、カスタマイザーの設定でURLを入力する必要があります。
管理画面メニュー「外観」(①)の「カスタマイズ」(②)をクリック。

「SNS情報」をクリック。

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


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