サイドバーにプロフィール欄を設定する

サイドバーには、ぜひプロフィール欄を設定して読者に軽く自己紹介をしましょう！

この記事では、サイドバーにプロフィール欄を設定する方法を解説します。

準備：アイコン画像を用意する

Cocoonでは、プロフィール欄に設置するアイコン画像の大きさが「横180ピクセル × 高さ180ピクセル」のものを推奨しています。

お使いのパソコンに入っている画像編集ソフトやウェブ上の無料ツールをお使いの方は、そちらでサイズの変更をして下さい。

一方、ピクセル数を指定して画像サイズを変更するためのツールをお持ちでない場合は、無料で使える「Canva（キャンバ）」がオススメです。

新規作成からアイコン画像をアップロードするまでの手順

まずは、Canvaの画面右上にある「デザインを作成」をクリックして「カスタムサイズ」を選択します。

幅と高さの所を、それぞれ180と入力して「新しいデザインを作成」ボタンをクリックして下さい。

すると、新たに編集画面のページが開きます。

次に左にあるメニューから「アップロード」をクリックして「メディアをアップロード」を選択して下さい。
ご自分のパソコンの中から画像を選ぶように促されますので、編集したいアイコン画像を選択して下さい。

画像を編集して、サイズ変更をしたファイルを手に入れる手順

画像のアップロードが終わりますと画面の左側に表示されますので、画像を右側の白い部分（キャンバス）にドラッグ＆ドロップして下さい。

そして、キャンバス上に置かれた画像の上で右クリックをしてメニューを表示させ、「画像を背景として設定します」を選択します。

するとキャンバスいっぱいに画像が拡大されます。
キャンバスのサイズが180ピクセルの正方形ですので、これでプロフィール欄にふさわしいサイズの画像ができました。

最後は、完成した画像をご自分のパソコンにダウンロードします。
画面右上にある「共有」ボタンをクリックして「ダウンロード」を選択して下さい。

ファイルの種類が「PNG」であることを確認して「ダウンロード」ボタンをクリックすると、ダウンロードが開始されます。

サイドバーにプロフィール欄を設定する手順

プロフィール情報の入力とアイコン画像を設定する手順

ワードプレスの管理画面、左のメニューから「ユーザー」→「プロフィール」画面を開きます。
まずは、プロフィール欄に表示する名前を確認します。

「ブログ上の表示名」がプロフィール欄の名前として使用されますので、ここがユーザー名になっている場合はニックネームに変更して下さい。

次に簡単な自己紹介文、またはサイトの説明を入力します。
入力する場所は「プロフィール情報」内です。

ここは2～3文くらいにして、あまり長文にならないようにして下さい。
（より詳しい内容は、固定ページの「プロフィール」内に書き込みます。）

最後は、Canva等でサイズ変更をしたアイコン画像を設定します。
「プロフィール画像のアップロード」内の「選択」ボタンをクリックします。

画像のアップロードが終わりますと画面に表示されます。

下にある「プロフィールページURL」には、プロフィールページ（固定ページ）のURLを入力します。
まだページを作成していなくても、「サイトのURL/profile/」と入力しておいて下さい。

実際にプロフィールページを作成した後は、サイドバーのプロフィール欄からプロフィールページに移動できるようになります。

最後は忘れずに「プロフィールを更新」をクリックして保存して下さい。

サイドバーにプロフィール欄を設置する手順

ワードプレスのメニューより「外観」→「カスタマイズ」→「ウィジェット」→「サイドバー」画面に移動します。

まずは「ウィジェットを追加」ボタンをクリックします。

「プロフィール」を選択します。
見当たらない場合は、検索ボックスに「プロフィール」と入力して探します。

次に追加された「プロフィール」ブロックをクリックして下さい。
入力欄が表示されます。

「タイトル」は空白のままにしておいて下さい。
「肩書きラベル」の入力は任意です。
アイコン画像を円形にしたい場合は「画像を円形にする」の所にチェックを入れて下さい。

入力が終わりましたら「適用」ボタンをクリックして下さい。
画面右側のプレビューにプロフィール欄が追加されました。

プレビューでの確認が終わりましたら「完了」ボタンをクリックして、プロフィールブロックの編集を終了します。

最後はプロフィールブロックを移動します。
今は「検索ボックス」→「最近の投稿」→「コメント」→「プロフィール欄」の順に表示されていますので、「検索ボックス」の下に配置されるように「プロフィールブロック」をドラック＆ドロップします。

これでプロフィール欄の設定は終了です。
サイトを表示させて最終確認をしてみて下さい。