こんにちは、ikuzo(いくぞう)です。
今回は、WordPressのサイドバーにプロフィールを設置する方法を2つ紹介します。
1つはWordPressのプロフィールウィジェットを使う方法で、もう一つはテキストウィジェットを使うやり方です。
2つ目のやり方は少しだけHTMLもいじります。
WordPress初心者の方にも分かりやすいように解説していきますよ！
プロフィール用の画像を用意する
まずはプロフィール用のイラスト、または写真を準備しましょう。
イラストを使う場合、上手な人は自分で描くのもいいですし、
そうでない方は、ココナラ
でイラストレーターの方にお願いするという手もあります。
ココナラは依頼する人にもよりますが、プロフィール用のイラストであれば2～5千円程度で描いてもらえます（初回はクーポンが使えるのでもう少し安くなります）。
イラストレーターさんは、ココナラのカテゴリー一覧にある「イラスト・漫画」→「アイコン・SNSイラスト作成」から探します。
出典：ココナラ
ちなみに私のイラストは、yapiころんさんという方に描いていただきました。
出典：yapiころんさんのページ
プロフィール用の画像を調整する
プロフィール用の画像の用意ができたら、画像の大きさを調整します。
プロフィール用の画像は、推奨サイズが240px×240pxの正方形です。
画像のサイズ変更や、画像を正方形に切り抜くには、
無料の画像編集ソフト「PhotoScape X」がおススメです。
PhotoScape Xのインストール方法や基本的な使い方はこちら↓
PhotoScape Xを起動させたら左上の「写真編集」を選択して、プロフィール用の画像ファイルを画面へドロップします。
右のメニューに「サイズ変更」と「切り抜き」があります。
プロフィール画像を正方形にするには「切り抜き」の「1×1」を選択して任意の範囲で切り抜きます。
「サイズ変更」を押して「240」と入力し、「適用」を押します。
最後に右下の「保存」を押してプロフィール画像を保存します。
イラストの保存は綺麗に見える「PNG」での保存がおすすめです。
保存した画像のファイルサイズが大きい場合、TinyPNGなどで圧縮しましょう。
TinyPNGは画像を画面へドロップして保存するだけなので簡単です（画像の見た目は変わりません）。
プロフィールウィジェットでプロフィールを表示させる方法
ここからはプロフィールウィジェットを使ってプロフィールを表示させる方法を紹介します。
WordPressでは、テキストウィジェットでもプロフィールの作成も可能です。
テキストウィジェットで作る方法は次の章に書きましたので、先に軽く目を通していただいて、どちらの方法でプロフィールを表示させるかを決めてはいかがでしょうか。
WordPressのプロフィールを設定する
WordPressメニューの「ユーザー」→「プロフィール」をクリックします。
「ニックネーム」を入力して「ブログ上の表示名」を選択します。
この2つを入力しないと「ユーザー名」がそのままプロフィールに表示されます。
ユーザー名がそのまま表示されるのはセキュリティ上よろしくないと言われているので、ユーザー名と表示名は別のものにした方が無難ですが、
WordPressのパスワードを難解なものにして「SiteGuard WP Plugin」あたりのプラグインを入れておけば個人的には同じでも問題ないと思います。
実際、私は同じです（やる場合は自己責任でお願いします）。
SNSボタンの設定
プロフィールにSNSボタン（アイコン）を表示させたい場合は各SNSの欄にURLを入力します。
URLを入力しないとそれぞれのSNSボタンは表示されません。
「feedly」と「RSS」ボタンを非表示にする方法
しかし「feedly」と「RSS」のボタンだけは必ず表示されてしまします。
「feedly」と「RSS」ボタンを非表示にする方法は、WordPressのテーマによって違います。
たとえばCocoonの場合、Cocoon設定の「SNSフォロー」タブにある
「feedlyフォローボタンを表示する」「RSS購読ボタンを表示する」のチェックを外します。
私は使ったことがありませんが、SWELLも同じやり方のようです。
WordPressの使っているテーマ名＋「feedly RSS 消す」などで検索するとボタンの消し方が見つかるはずです。
プロフィール情報の入力
プロフィール情報には簡単な自己紹介を書きます。
プロフィール画像のアップロード
ここへプロフィール画像をアップします。固定ページで作ったプロフィールページがある方はその下へURLを入力します。
すべての入力が完了したら「プロフィールを更新」を押します。
プロフィールウィジェットの設定
あとはプロフィールウィジェットを設定すれば、サイドバーにプロフィールが表示されます。
メニューの「外観」→「ウィジェット」をクリックします。
利用できるウィジェットの中から「プロフィール」を探します。
▼マークを押して「サイドバー」を選択し、「ウィジェットを追加」を押します。
「肩書きラベル」を入力して、必要があれば「タイトル」も入力して「保存」を押します。
サイドバー内のプロフィールの表示位置は、ウィジェットをドラッグして変更可能です。
これでサイドバーにプロフィールが表示されていると思います。
テキストウィジェットでプロフィールを表示させる方法
「プロフィール」ウィジェットではなく、「テキスト」ウィジェットでプロフィールを表示させる方法もあります。
「テキスト」ウィジェットを使うメリットとしては、
プロフィール画像の大きさを調整しやすいことと、エックスの「フォローする」のボタンを設置できることです。
「テキスト」でプロフィールを作るには、「テキスト」ウィジェットの▼マークを押して、サイドバーにウィジェットを追加します。
ウィジェットを開いたら「メディアを追加」を押してプロフィール画像をアップロードします。
「中央揃え」を押して画像を真ん中に配置、鉛筆マークを押すと画像の大きさを調整できます。
表示させたい大きさよりも、気持ち大きめにプロフィール画像を作っておくと調整しやすいです。
そして、プロフィール画像の下にプロフィール名や自己紹介文を入力します。
名前を中央に配置するには「テキスト」エディターにして名前を<center>と</center>で挟むか、もしくは次のコードを使います。
<p style="text-align: center;">ここに名前を入れる</p>
フォントサイズを変えたり、画像と名前の間隔を調整したいようでしたら、こちらのコードを使ってください。
<p style="font-size: 20px; margin: 0px 0 20px; text-align: center;"><strong>ここに名前を入れる</strong></p>
上のコードは「20px」の部分が文字の大きさです。
“margin”に続く「0px」の部分が上の余白、「20px」の部分が下の余白です。
どちらも数字を大きくしたり小さくすることで、文字や余白の大きさを調整できます。
コードに使う英数字は必ず「半角文字」を使ってください。全角文字を使うとコードが効かなくなります。
文字の大きさだけを変えるのであれば、こちらのコードを使ってください。
<p style="font-size: 20px;">ここに文章を入れる</p>
X（エックス）のフォローボタンを設置
X（エックス）のフォローボタンを作るには、https://publish.twitter.com/にアクセスします。
入力欄に自分のX（エックス）アカウントのURLを入力して、右側の「→」を押します。
XアカウントのURLはこうなります（ユーザー名の@は省略します）。
https://x.com/ユーザー名（@は省略）
または「https://twitter.com/ユーザー名」でも可
右側の“X Buttons”を選択します。
左の“Follow Button”を選択します。
“Set customization options”をクリックします。
“Hide Usernane”にチェックを入れると「～さんをフォローする」が「フォローする」だけになり、
“Large Button”にチェックを入れるとボタンが大きくなります。
「Update」もしくは「Cancel」を押すと元の画面へ戻るので
“Copy Code”を押してコードをコピー、これをテキストエディターの自己紹介文の下などに貼り付けます。
ただ、以前はこれでできたのですが、今回やってみたところコードがちゃんと生成されませんでした。
試しに「フォローする」を押してみたところ、なぜか「X」さんのページへ遷移したので、
その場合はコードを一部修正する必要があります。
修整は、コード内に2カ所ある「x」の部分（もしくは「twitter」の部分）を自身のユーザー名に変更するだけです。
最後にウィジェット右下の「保存」を押せばプロフィールの完成です。
最後に
おつかれさまでした。
うまい具合にWordPressのプロフィールは完成したでしょうか？
テキストウィジェットを使うやり方ではコードも使用しましたが、私も最初はHTMLなどチンプンカンプンだったものの、こちらのサルワカさんのサイトで勉強しました。
とても役にたって、今でも何か疑問が出るたびに利用させてもらってます。
これからHTMLやCSSを覚えたい方は、ぜひ覗いてみてください。
本日は最後まで読んでいただき、ありがとうございました。
コメント