【Cocoon】画像ありプロフィールをサイドバーに設置する方法【WordPress】

こんにちは管理人のよしくまです。

いろんなブログを見ていると、画面の右側にプロフィールを設置しているのをよく見かけますよね。

自分がどんな人物なのか簡単に自己紹介できるので、設置しておくと訪れた人も安心ではないでしょうか。

Cocoonでのプロフィール設置は以下のステップだけです。

すごく簡単なのでさっそく設置してみましょう。

画像の準備

画像はお好みのものでかまいませんが、まずは自身の写真やフリーイラストなどを用意してみるとよいでしょう。

画像サイズのおすすめは240px×240pxの正方形です。

ちなみによしくまブログの画像は「フラット アイコン デザイン」のフリー素材をダウンロードしました。初めから正方形。商用利用OKで無料、クレジット表記もいらないので使いやすいです。

使いたい画像のサイズ変更やトリミングには『 PhotoScape X』を使っています。リサイズやトリミングのほかにも、無料で画像編集ができるので気に入っています。

簡単な自己紹介を用意する

画像の下に文章を表示できるので自己紹介の文章を用意しておきましょう。

出身地、趣味、資格、ブログでどんなことを発信しているのかなど。パッと見てわかるように、伝えたいことを簡潔にまとめておくのがいいかと思います。

プロフィール入力

管理画面左側の「ユーザー」から「プロフィール」をクリックします。

プロフィール画面を下にスクロールして、

を入力します。「ブログ上の表示名」がサイトに表示される名前になります。

「ニックネーム」に新しい名前を入力すると「ブログ上の表示名」で選択できるようになります。

サイト下の各SNSの欄にTwitterやYouTubeなど、自分のSNSページのURLを入力しておくと、プロフィール画面の下にアイコンを設置してリンクさせることができます。

プロフィールにリンクを設定する方法は、以下の記事で詳しく解説しています。

【Cocoon】サイドバーのプロフィールと詳細ページのリンク【WordPress】

Cocoonのサイドバーへのプロフィール設置は簡単です。サイドバーの簡潔なプロフィールから、クリックでプロフィールの詳細ページに飛ばせるリンク設定の方法を紹介します。プロフィール編集用の専用画面で設定するだけの簡単な手順です。

yoshikuma-office.com

2021.09.06

もう少し下にスクロールして「プロフィール情報」に、先ほど作成した自己紹介の文章を入力します。

「プロフィール写真」は無視して、さらに下にスクロールして「プロフィール画像のアップロード」の「選択」をクリックし、用意しておいた画像をアップロードします。

アップロードできたら、画面左下の「プロフィールを更新」をクリックしてください。次に、サイドバーに表示する設定に進みます。

サイドバーにプロフィールを表示させる

管理画面の「外観」⇒「ウィジェット」をクリックします。

「ウィジェット」の右側の「+」をクリックすると、検索ボックスが出てくるので「プロフィール」と入力⇒[C]プロフィールをクリックします。

サイドバーにプロフィールボックスが追加されるので、プロフィールをクリックしてください。『︙︙』にマウスカーソルを合わせて、ドラッグ＆ドロップで好きな位置に移動させます。

位置が決まったら「タイトル」に「プロフィール」と入力し、画面右上の「更新」をクリックします。

うまく設置できているか、サイトを表示して確認してみましょう。

今後のプロフィール内容の編集は、画面右上のアカウントをクリックするとすぐに編集ページに移動することができます。

プロフィールの詳細ページは、固定ページで作成して見やすいようにしておくといいと思います。