WordPressのサイドバーにプロフィールを追加しよう

スポンサーリンク

WordPressのサイドバーにプロフィールを追加しよう

ブログの名刺代わりであるプロフィールをWordPressで作成していきます。
プロフィールはとても大事なので必ず作りましょう。
作り方はとても簡単ですぐに作ることができます。

スポンサーリンク

プロフィール画像を用意しよう

まず初めに、プロフィールの画像を用意しましょう。
自分で作成できる方は作成してもらってもいいですし、作るのがめんどくさい方や自分で作れない方は無料の素材を探して自分の好きなように編集しましょう。
Googleで『無料 素材 イラスト』のように検索すると出てきやすいと思います。

今回はこのような画像を用意してみました。

プロフィールの画像
猫のイラストを切り取って文字を入れるだけでできます。
プロフィール画像はあなたの印象を決める大事なものなので、こだわってみてください。

プロフィール画像は、WordPressにアップロードしておきましょう。
ダッシュボードからメディアを選択してください。
選択するとメディアライブラリに移行しますので、ここに画像をアップロードします。
操作はとても簡単で、ドラッグ&ドロップで簡単にアップロードすることができます。

メディアライブラリの画像

アップロードが完了したら、アップロードした画像を選択してください。
すると、その画像の詳細が見れますので、右側にある『URL』を控えておいてください
後で使用するので、必ず控えるようにしてください。

 

画像のURLを説明する画像

ウィジェットにプロフィールを追加しよう

プロフィール画像が用意できましたら、さっそくプロフィールを作成していきます。
サイドバーに作成しますので、WordPressではウィジェットに追加すれば簡単に作ることができますね。

まずは、ダッシュボードから外観、ウィジェットを選択してください。
自作テーマを適用している方はウィジェットの項目がない場合がありますので注意してください。

ウィジェット編集画面を開いたら、サイドバーの項目にテキストを追加しましょう。
追加方法は、好きな項目を探してドラッグ&ドロップで追加することができます。

ウィジェット編集画面の画像

テキストを追加したら、テキストの右側についてる「▼」をおして詳細を開きます。
開いたら各項目を以下の画像を参考に入力してください。

もしくは、以下のように設定してください。

テキストの編集例の画像

二つの画像の違いは、imgタグをかっこっているタグが、

  • <center> ~ </center>
  • <div style=”text-align: center”> ~ </div>

の違いです。
見栄えとしては、どちらも中央ぞろえをしますので同じになりますが、『<center> ~ </center>』は、HTML5の非推奨タグなので、できれば『<div style=”text-align: center”> ~ </div>』を使いましょう。

紹介文にある<b>は太字にするタグです。
太字もstyle属性で設定することが多いと思いますが、<b>は非推奨タグではないので大丈夫です。

imgのなかの『href』には、プロフィール画像のURLを指定します。
これは、画像をアップロードした際に控えてもらったURLになりますので、差し替えてもらえれば大丈夫です。

<img>タグのhrefと紹介文が完成すれば、あとは保存のボタンを押せば完成になります。
ちなみに、ウィジェットの順番もドラッグ&ドロップで簡単に操作することができます。

自分のサイトを開けば、サイドバーにプロフィールができてると思います。

まとめ

サイドバーにプロフィールを作成する方法を説明しましたが、やってみるととても簡単に作成できることがわかると思います。
プロフィールは、あなたのブログの顔といっても過言ではないものなのでサクッと作って見栄えのいいブログを作り上げてください。

コメント