【初心者向け】Cocoonでプロフィールを作成する(ウィジェット)

【初心者向け】Cocoonでプロフィールを作成する(ウィジェット)

この記事では、プロフィール(ウィジェット)を作成する方法について、くわしく解説していきます。

テーマは、Cocoonを対象としています。

「CTRL」+「D」を押すだけで、当サイト【還じいブログ】の記事がブックマークできます!

ブログを開設したら、アナタがどんな人かをわかってもらうために、プロフィールを必ず作成しましょう!

この記事では、Cocoonの独自ウィジェットである「プロフィールウィジェット」を使ったプロフィールの作り方を詳しく解説していいきます。

今からプロフィールを作成しようと考えている人は、ぜひ参考にしてください!

プロフィールウィジェットを作ると、

ページのサイドバーやメインカラムの好きな位置に配置できるので、なかなか便利です。

Cocoonのプロフィールウィジェットのイメージ
目次

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

プロフィール作成の前に、まずはプロフィール用のイラスト画像や写真を準備してください。

画像形式は、JPG、PNG、GIFなどでよいです。

プロフィール画像の推奨サイズ

プロフィールの画像サイズは、縦240px、横240pxが推奨となっています。(pxはピクセル)

画像サイズは、縦240px、横240pxより大きいサイズでも構いませんが、必ず正方形にしてください。

ちなみに、以下の画像(縦256px、横256px)をサンプルとして用意しました。(実際に使っている画像です)

プロフィール画像

プロフィールウィジェットを作成する

画像が用意できたところで、プロフィールウィジェットを作成していきます。

今回は、冒頭の画像にあったように、サイドバーメインエリア(記事本文下)にプロフィールウィジェットを配置します。

プロフィール情報を入力する

まず、プロフィールウィジェットの作成に必要なプロフィール情報を入力します。

管理画面メニュー「ユーザー」の「プロフィール」(①)をクリック。

プロフィール画面を開く

「プロフィール情報」に、簡単なプロフィールを入力。
※できるだけ簡潔でわかりやすいプロフィールにした方がいいでしょう。

プロフィール作成に必要なプロフィール情報を入力する

プロフィール画像をアップロードする

プロフィールの画像をドラッグ&ドロップでアップロードします。

準備した「プロフィール画像」をアップロードするので、「選択」をクリック。

プロフィール作成に必要なプロフィール画像を選択する

用意していたプロフィール画像をドラッグ&ドロップしてアップロードしたら、下の方にある「画像を選択」ボタンをクリックします。

プロフィール画像をメディアライブラリにドラッグ&ドロップする
プロフィール画像をメディアライブラリにドラッグ&ドロップする

プロフィールページのURLを入力する

あらかじめ、詳細なプロフィールを書いたページ(固定)を別途用意してください。
※プロフィールは、投稿ページではなく固定ページに書きます。

プロフィールの固定ページは、必ず作成しましょう!

還じい

簡単なプロフィールでもいいんです。
どんな人かわかるようなものを書きましょう!

参考(僕のプロフィールです)  プロフィール

経験するとわかりますが、サイト(ブログ)へのアクセスが増えていくと「プロフィール」を確認する人が必ず出てきます。

アナタがどんな人かをわかってもらうためにも、プロフィールのページは必須です。

まだプロフィールのページを作っていない場合は、URLは未入力のままにしましょう。
※未入力の場合は、自動的に記事のアーカイブ(一覧)ページのURLが埋め込まれます)

プロフィールのページを作成している場合は、

プロフィールページのURLを入力し、「プロフィールを更新」を押してプロフィール情報を保存します。

プロフィールページのURLを入力する

SNSアカウントのURLを入力する

X(旧ツイッター)、Facebook、インスタグラム、YoutubeなどのSNSアカウントを持っていて、公表しても構わない場合は、公表しましょう。

対象のSNSアカウントのページ(URL)を入力すれば、SNSのアイコンがプロフィールの下に表示されるます。

SNSアカウントのURLを入力する

下の画像はURLを全て入力した場合のSNSアイコンです。

プロフィールに表示されるSNSアイコン

プロフィールウィジェットを配置する

プロフィールの情報はすべて入力できたので、プロフィールウィジェットを追加配置していきます。

ここで配置するのは、サイドバー記事本文下です。

還じい

プロフィールはこの2つの配置が定番です!

管理画面メニュー「外観」の「ウィジェット」(①)をクリック。

ウィジェット画面を表示する

サイドバーの中に配置

まずは、サイドバーの中にプロフィールウィジェットを配置します。

ウィジェット画面左側の「利用できるウィジェット」の中に【[C]プロフィール】というウィジェットがあります。

  • 【[C]プロフィール】の▲(①)をクリック。
  • 「サイドバー」にチェック
  • 「ウィジェットを追加」をクリック。
プロフィールウィジェットをサイドバーに配置する

これで、サイドバーの中に配置されるので、続けて以下を入力。

  • 「タイトル」を入力。(プロフィールでいいでしょう)
  • 「肩書ラベル」を入力。(ブロガーなどでもいいです)
  • 「画像を円形にする」にチェック(チェックつけない場合は四角です)
  • 「保存」をクリック。
プロフィールウィジェットをサイドバーに配置する

ひとまず、サイドバーへのプロフィールウィジェットの配置はこれで完了です。
続けて、記事本文下に配置します。

記事本文下に配置

2つ目のプロフィールウィジェットを記事の本文下に配置します。

ウィジェット画面左側の「利用できるウィジェット」の中に【[C]プロフィール】というウィジェットがあります。

  • 【[C]プロフィール】の▲(①)をクリック。
  • 「記事本文下」にチェック
  • 「ウィジェットを追加」をクリック。
プロフィールウィジェットを記事本文下に配置する

これで、記事本文下に配置されるので、続けて以下を入力。(サイドバーの時と同じ)

  • 「タイトル」を入力。(プロフィールでいいでしょう)
  • 「肩書ラベル」を入力。(ブロガーなどでもいいです)
  • 「画像を円形にする」にチェック(チェックつけない場合は四角です)
  • 「保存」をクリック。
プロフィールウィジェットを記事本文下に配置する

これで、記事本文下への配置が完了です。

以上で、サイドバーと記事本文下にプロフィールウィジェットを追加配置できました。

ページを見ると以下のように、記事本文下とサイドバーにプロフィールウィジェットが配置されているのがわかります。

サイドバーと記事本文下に配置されたプロフィールウィジェット

まとめ

  • 訪問者はどんな人が運営しているのか気になるので、プロフィールをチェックする。
  • 収益化を目指すのであれば、プロフィールは必ず書いておきたい。
  • プロフィールは、プロフィールウィジェットを使うとなにかと便利。
  • ウィジェットは好きな位置に配置できる。

「CTRL」+「D」を押すだけで、当サイト【還じいブログ】の記事がブックマークできます!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次