WordPressブログのサイドバーにプロフィールを設置する方法

こんにちは、ryusukeです。

今日はWordPressのサイドバーにプロフィールを設置する方法を初心者向けにできるだけ
わかりやすく解説していきます。

実際にこの記事で説明されているように設定をすることでこのブログのサイドバーの
プロフィール欄と同じようなものが完成します。

１　サイドバーにプロフィールを設置する方法

１　サイドバーにプロフィールを設置する方法

では、さっそくWordPressブログのサイドバーにプロフィール欄を設置する方法を
解説していきます。

その手順は以下のとおり。↓

画像を用意する
画像をアップロードする
プロフィールを設定する

上の３つの手順を行うことでこのブログのサイドバーにあるようなプロフィール欄を
作成することが可能になります。

１つずつ順番に詳しく解説していきます。

１：画像を用意する

まず、WordPressブログのサイドバーにプロフィール欄を設置するには画像を
用意する必要があります。

画像は基本的にはどんなものでもOKですが個人的には以下のどれかから
選ぶのがおすすめです。

自分の似顔絵
自分の写真(顔出しになるのでリスクあり！)
ペットの写真

大体上の３つの画像のどれか１つをプロフィール画像に設定している人が多いです。

ですが、個人的には上記の３つの中でも１番の自分の似顔絵を用意するのがおすすめです。

実際にこのブログのプロフィール欄にも自分の似顔絵を使っていますからね。

似顔絵の場合は有料でココナラで作ってもらうか、似顔絵ジェネレーターを
使って無料で自分で作るかのどっちかがおすすめです。

ちなみに、このブログのプロフィール画像は似顔絵ジェネレーターで作成しました。

個人的には初心者の間は外注せずに似顔絵ジェネレーターで作成した似顔絵を
使っておけば特に問題ないと思います。

クオリティも無料とは思えないクオリティですからね。

なお、自分の顔出しやペットの写真などでも全く問題はないのでそこは自分の好き嫌いで
選んでおけばOKです。

プロフィールにする画像を用意したら、次にWordPressにそのプロフィール画像に設定する
画像をアップロードします。

２：画像をアップロードする

次に、プロフィール画像に設定する画像を用意したらそのプロフィールに設定する画像を
WordPressにアップロードします。

まず、画像のアップロードをするには[メディア]→[新規追加]をクリックします。

次に[ファイルを選択]をクリックしてプロフィール画像にしたい画像を
選択してアップロードします。

画像のアップロードが完了したらプロフィールの設定に入ります。

３：プロフィールを設定する

次に画像のアップロードが終わったらプロフィールの設定に入ります。

プロフィールの設定をするにはまず、[外観]→[ウィジェット]をクリックしてください。

次に利用できるウィジェットの中から[テキスト]を探してください。

[テキスト]が見つかったら以下の手順でプロフィールの設定をしてください。

[テキスト]をクリックする。
[サイドバーウィジェット]をクリックする。
[ウィジェットを追加]をクリックする。

なお、サイドバーウィジェットの部分は微妙に異なっていることがありますが
[サイドバー]と書かれているものを選べばOKです。

そうしたら、本格的なプロフィールの設定が可能になります。

１：タイトルの設定

まず、タイトルの欄には[プロフィール]や[自己紹介]と書いておけば問題ないです。

ちなみに、このブログの場合はプロフィールと入力しています。

タイトルを設定したら次にさっきアップロードしたプロフィール画像を設定します。

２：プロフィール画像の設定

次にプロフィール画像の設定に入ります。

まず、プロフィール画像を設定するには下のコードをコピーしてテキストエディタの方に
ペーストしてください。

<div style="text-align: center;">
<img src="" width="150" height="150" />
</div>

注ビジュアルエディターにはコピーしないでください。

下の画像みたいな感じになるはずです。

次に上記のコードをコピーしたら別タブでWordPressのダッシュボードを開いて
[メディア]→[ライブラリ]をクリックしてさっきアップロードした
プロフィール画像にしたい画像をクリックしてください。

プロフィールにしたい画像を選んだら右下の方にあるリンクをコピーに
書いてあるURLをコピーしてください。

URLをコピーしたら元のタブに戻ってテキストエディタにさっきペーストした
コードの<img src="">の""の中に画像のURLをペーストしてください。

なお、似顔絵ジェネレータで作った画像をプロフィール画像にする際はhttp://~の
URLをhttps://に、sをpと:(コロン)の間に入れてください。

そうでないとSSL設定が効かない【保護されていない通信】状態になってしまってSEO面で
マイナスの評価を受けてしまいます。

<div style="text-align: center;">
<img src="この中に画像URLをペーストする" width="150" height="150" />
</div>

で、URLをペーストしてビジュアルエディタに切り替えた際に下の画像みたいな感じで
画像が表示されていればプロフィール画像の設定は完了です。

次にブログの管理人の名前の設定に入ります。

３：名前の設定

次にプロフィール画像の下に設定するブログの管理人の名前を表示する設定をしていきます。

下のコードをコピーしてテキストエディタのさっきペーストした</div>の下の
部分にペーストしてください。

<p style="text-align: center;"><strong>この中に名前を入力する</strong></p>

上記のコードをコピーし終わったら【この中に名前を入力する】を削除して
その部分をブログの管理人の名前に書き換えてください。

書き換えてビジュアルエディタに切り替えて下の画像みたいな感じで画像の下に
名前が表示されていれば管理人の名前の設定は終了です。

４：プロフィール文の設定

最後にブログ管理人の名前の下にプロフィール文を表示する設定をしていきます。

プロフィール文の設定の仕方は以下のコードが設定中のテキストエディタに
表示されているはずなのでその一番下に書きます。

具体的には以下のように書きます。

<div style="text-align: center;">
<img src="※プロフィール画像のURL" width="150" height="150" />
</div>
<p style="text-align: center;"><strong></strong></p><!--ここまでが今まで設定した部分->
<!--ここにプロフィールを書く-->

プロフィール文を書いた後にビジュアルエディタに切り替えて下の画像みたいな感じで
表示されていればプロフィール文の設定は終了です。