簡単!WordPressのサイドバーにプロフィールを作る方法

ードプレスのサイドバーにプロフィールを作る方法WordPressの使い方
ワードプレスで作ったサイトに、プロフィールを表示したい!

という人のために、WordPressでの基本的なプロフィールの作り方を紹介していきます。

 

ワードプレス プロフィール

この記事では↑このようなシンプルで簡単なプロフィールを作成して、サイトのサイドバーに設置してきます。

手軽に・プラグインなしで作成したい人におすすめの方法です。

 

スポンサーリンク

プロフィール画像を準備する

プロフィール画像・アイコンを用意

まだプロフィール画像を用意していない人は、

などでオリジナルのアイコンを用意するのがおすすめです。ココナラだと、イラストレーターの方に手軽に自分のアイコンを作ってもらえます。

 

WordPressにアップロードする

用意した画像は、あらかじめパソコンに保存しておき、WordPressにアップロードします。

プロフィール画像をパソコンに保存したら、WordPressの管理画面にログインし「メディア>新規追加」をクリックします。

 

ファイルを選択」をクリックし、パソコンに保存してあるプロフィール画像を選択します。

 

ワードプレス メディアのアップロード

アップロードが完了すると、下にアップロード出来た画像が表示されます。できたら右の編集」をクリックします。

 

するとその画像の「ファイルURL」が表示されるので、コピーするかページを開いたままにしておきましょう。あとでプロフィールを作る時に使います。

 

プロフィールを作成する

ワードプレス ウィジェット

管理画面の左メニューのから「外観>ウィジェット」をクリックします。

 

ワードプレス ウィジェット

利用できるウィジェット一覧が表示されるので「テキスト」を探します。

 

ワードプレス ウィジェット

  1. 「テキスト」をクリックし、
  2. 「サイドバー」を選択します。(テーマによって少し表示が違いますが、サイドバーと書かれているものを選んでください。)
  3. 下に表示される「ウィジェットを追加」をクリックします。
「固定サイドバー」や「サイドバースクロール追従」は、ページを下へスクロールしても表示され続けるサイドバーです。プロフィールは、追従しない通常「サイドバー」がおすすめです。

 

タイトル

ワードプレス プロフィール作成

このような画面が表示されるので、プロフィールを作成していきます。

まずはタイトルを決めます。入れるなら「プロフィール」や「自己紹介」など分かりやすいタイトルを付けましょう。空欄でもOKです。

 

画像を挿入する

ワードプレス プロフィール作成

次にプロフィール画像を挿入します。

画像を挿入する時は、右上の「テキスト」タブを選択してから、以下をコードをコピーして貼り付けて下さい。

※「画像のURL」の部分は、先ほど用意した画像の「ファイルURL」に置き換えて下さい。

<center>
<img src="画像のURL"
width="150" height="150" class="profileimg">
</center>

画像サイズは好きな大きさに変更できます。width=幅、height=高さなので、例えば「width="100" height="100"」のように変更すると小さくなります。

このブログでは「width="150" height="150"」に設定しています。

「ビジュアル」タブに戻すとプレビューを確認することができるので、必要がある場合は調整してみて下さい。

 

本文を入力する

ワードプレス プロフィール作成

①名前
画像の下に「名前」を入力します。このブログと同じように、中央揃え・太字で表示する場合は、以下のタグで囲むと同じように表示できます。

<p style="text-align: center;"><strong>自分の名前</strong></p>

↑「自分の名前」を書き換えて使用してください。

②自己紹介文
名前の下に、自分の自己紹介文を書きます。

 

ワードプレス プロフィール作成

入力が終わったら、右上の「ビジュアル」タブをクリックし、画像が挿入されているか、本文がちゃんと入力されているか確認します。(フォントなどはこの画面では反映されないので、後で実際の画面を確認してみて下さい。)

よければ「保存」をクリックします。

 

ワードプレス プロフィール

実際に自分のページを確認して、プロフィールがちゃんと表示されていれば完成です!

 

プロフィールをカスタマイズする

以上の手順で完成したプロフィールに、

  • 画像丸くする方法
  • ツイッターのフォローボタンを設置方法

↑これらのカスタマイズをする方法を紹介します。取り入れたい人は参考にしてみて下さい。

 

画像を丸くする

CSSで画像を丸くする

元から丸くトリミングされた画像の場合は必要ないですが、上の画像のように四角い画像をCSSで丸くしたい時は、以下のコードをコピペすればOKです。

.profileimg {
border-radius: 50%;
}

このコードを追加するだけで丸くなるはずです。(先ほど紹介した、 <center>
<img src="画像のURL"width="150" height="150" class="profile"></center>
 のコードを使った画像が丸くなります。)

コードの追加方法は以下の通りです。

 

WordPress カスタマイズ

サイドバーの「外観>カスタマイズ」をクリックします。

 

ワードプレス CSSの追加

開いたメニューの中に「追加CSS」があるのでクリックします。

 

ワードプレス CSSの追加

追加CSSが開いたら下の白枠の中に先ほどのコードをコピペし、右上の「公開」をクリックします。

これで実際のページを確認してみると、四角い画像も丸くなっていると思います。(投稿画面では反映されないので、実際の画面を確認してみて下さい。)

 

ツイッターのフォローボタンを設置する

ツイッターのフォローボタンを設置したい場合は、別のツイッターのツールを使ってコードを生成する必要があります。

手順はWordPressでTwitterのフォローボタンを設置する方法で紹介しているので参考にしてみて下さい。

 

以上が簡単なワードプレスでの簡単なプロフィールの作成方法でした。プラグインなしで使いたい時などに活用してみて下さい。

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