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

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

この記事では、[SWELL]プロフィールウィジェットからプロフィールを作成する手順についてくわしく解説します。

テーマはSWELLを対象としています。

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

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

SWELLでプロフィールウィジェットからプロフィールを作成する

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

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

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

目次

画像(プロフィール、背景)の準備

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

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

画像サイズ備考
プロフィール幅120px以上 × 高さ120px以上正方形で用意する
背景幅768px以上 × 高さ160px以上横長の方がよい
プロフィール/背景画像のサイズ

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

プロフィール画像(256px × 256px)

プロフィール画像

背景画像(800px × 300px)

プロフィールの背景画像

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

プロフィールの背景画像の表示範囲

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

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

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

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

WordPressの「外観」→「ウィジェット」

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

SWELLでプロフィールウィジェットからプロフィールを作成する

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

SWELLでプロフィールウィジェットからプロフィールを作成する

このブログの場合は、1番目のブロック(検索ブロック)と2番目のブロック(最近の投稿)の間に[SWELL]プロフィールを追加しました。

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

SWELLでプロフィールウィジェットからプロフィールを作成する

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

画像の選択

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

画像の選択手順(タップで手順を展開)

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

プロフィール画像をアップロードする

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

プロフィール画像を選択する

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

ボタンの設定

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

ボタンリンク先

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

ボタンテキスト(ボタン名)

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

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

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

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

ボタンの設定

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

SWELLで用意されているアイコン

※書き方は、以下の通りです。

[icon アイコンクラス名]

SNSのアイコン設定

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

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

SWELLの「この記事を書いた人」からプロフィールを作成する

ここでのSNSのアイコンというのは、SNSのアカウントを持っている場合のアカウントページをリンク先としたアイコンです。

つまり、ツイッターなど自分のアカウントを持っている場合は、そのアカウントを示すURLを入力します。

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

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

WordPressの外観→カスタマイズ

「SNS情報」をクリック。

SWELLでプロフィールウィジェットからプロフィールを作成する

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

SWELLでプロフィールウィジェットからプロフィールを作成する
SWELLでプロフィールウィジェットからプロフィールを作成する

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

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

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次