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

Cocoon

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

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

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

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

  • プロフィール用の画像を用意する
  • 簡単な自己紹介用の文章を用意する
  • プロフィールを入力する
  • ウィジェットに追加する

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

画像の準備

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

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

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

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

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

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

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

自己紹介の詳細は、固定ページや投稿ページに別でページを作成してリンクさせることもできるので、ひとまずサイドバーへの設置が終わってから作成しましょう。

プロフィール入力

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

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

  • ニックネーム
  • ブログ上の表示名

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

コメント

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