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

ブログ

こんにちは、ryusukeです。

 

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

 

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

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

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

 

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

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

 

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

 

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

1:画像を用意する

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

 

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

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

 

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

 

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

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

 

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

 

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

 

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

 

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

 

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

 

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

 

2:画像をアップロードする

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

 

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

 

 

 

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

 

 

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

3:プロフィールを設定する

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

 

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

 

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

 

 

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

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

 

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

 

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

1:タイトルの設定

 

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

 

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

 

 

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

2:プロフィール画像の設定

 

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

 

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

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

 

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

3:名前の設定

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

 

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

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

 

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

 

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

 

4:プロフィール文の設定

 

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

 

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

 

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

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

 

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

 

 

上の画像の下にある[保存]をクリックして[完了]をクリックすればプロフィールの
設定は終わりです。

 

最後に、サイドバーのプロフィール欄を表示する順番の指定をする方法を紹介します。

 

下の画像みたいな感じで[ウィジェット]にはサイドバーウィジェットと
表示されている部分があるはずです。

 

これは、サイドバーに表示するコンテンツの順番を指定しています。

 

なので、このサイドバーウィジェットの順番を変更すればサイドバーに表示されている
コンテンツの順番を変えることができます。

 

なお、プロフィール欄の順番を変えるには以下の手順で行います。

  1. [テキスト:プロフィール]を表示したい順番の部分までドラッグする。
  2. 表示したい順番の部分でドロップする

 

恐らくさっき作成した[テキスト:プロフィール]は一番下に表示されていると
思うのでこのブログのようにしたければ上から2番目でドロップします。

 

サイドバーの表示順を変更する方法の説明は以上です。

まとめ

以上がWordPressのサイドバーのウィジェットの順番を設定する方法とWordPressブログの
サイドバーにプロフィール欄を設置する方法でした。

 

WordPressブログ初心者の人やプロフィール欄を設置したかったけどやり方が
わからなかった人の参考になったらうれしいです。

 

サイドバーの設定をしたら下の記事でブログ運営に関する本格的な学習をしていって
ブログガチ勢に入ることをおすすめします!↓

ブログアフィリエイトをYouTube学習する際に見るべき動画8選
ブログアフィリエイトをYouTubeで学習したい人向け。この記事ではブログアフィリエイトをYouTubeで学習する際に見るべき8本の動画を、まとめて紹介していきます。ブログアフィリエイトをYouTubeで学習したいなら必読の内容かと。

おわり

タイトルとURLをコピーしました