Cocoonでプロフィール欄を作成しよう!

Cocoon

こんにちは、ゆんつです。

ブログにつきものなのがプロフィール欄。

PCで色んなブログを巡っていると、画面の右上や左上にイラスト又は顔写真と簡単な自己紹介が書かれているプロフィール欄をよく見かけます。

ブログに設けられているプロフィール欄の例

WordPressの無料テーマ「Cocoon」ではプロフィールウィジェットが用意されています。

ですので、特別なことをしなくても手軽にブログの好きな場所にプロフィールを表示することが出来ます。

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。

今日は

Cocoonで簡単にプロフィール欄を作成

してみましょう。

手順

プロフィールに必要な情報を入力したのち、プロフィールウィジェットを設置することで、ブログに簡単にプロフィールを表示できるようになります。

プロフィールの入力

まずはプロフィール欄に表示される自己紹介の内容を入力してきます。

ダッシュボードから「ユーザー」⇒「プロフィール」をクリック。

ダッシュボードから「ユーザー」⇒「プロフィール」をクリック

すると「プロフィール」の設定画面になります。

プロフィール設定画面

下の方にスクロールさせていくと「ブログ上の表示名」という項目があります。

名前の設定

このブログ上の表示名がプロフィール欄に表示される名前になります。

デフォルトではユーザー名がブログ上の表示名になっているはずなので、これを変更したい場合は、その上にある名、姓、ニックネームのいずれかの欄に自分が付けたい名前を入力してください。

ブログ上の表示名はセレクトボックスなっていて、クリックすると名や姓、ニックネームに入力した名前が選択肢として現れるようになるので、好きな名前を選択してください。

名や姓、ニックネームに入力した名前をブログ上の表示名に設定することができる

ブログ上の表示名を決定して下に進むと連絡先情報の入力欄があります。

twitter、youtube、facebookなどSNSのアドレスを持っていてプロフィール欄からリンクを貼りたい場合は、こちらにそれらのURLを入力します。

連絡先情報の設定

URLを入力すると、各SNSに対応したアイコンが表示され、プロフィール欄のアイコンからそれぞれのSNSに飛ぶことが出来るようになります。

未入力のものは基本的にはアイコンが表示されません。

ちなみにメールアドレスは入力されていても、プロフィール欄には現れないのでご安心ください。

連絡先情報を設定後、さらに下の方にスクロールすると「あなたについて」という項目があります。

プロフィール情報の設定

ここの「プロフィール情報」に記入したことが、プロフィール画像の下に表示されます。

簡単な自己紹介文を書いておけば良いと思います。

自己紹介文を記入したら更に下にスクロールし、「プロフィール画像」という項目に進みます。

プロフィール画像の設定

ここでプロフィール画像を設定します。

プロフィール画像のサイズは240px×240pxの正方形が推奨されています。

「選択ボタンを」クリックして、自己紹介に使いたい画像をアップロードします。

この画像が、プロフィール欄で使用されるプロフィール画像となります。

プロフィール画像の設定

また、プロフィール画像設定の下には「プロフィールページURL」を入力する欄が有ります。

プロフィールページURLの設定

ここに詳細な自己紹介ページへのURLを記入しておくと、プロフィールの名前部分をクリックしたときにそのページにジャンプするようになります。

プロフィール欄にあまり詳細な自己紹介を書くとプロフィール欄が長くなって見づらくなります。

ですので、詳細なプロフィールは固定ページなどで別に作成し、ここにはそのページへのURLを入力しておくと良いかと思います。

ここが未入力の場合は、過去の記事が一覧できるアーカイブページへのリンクとなります。

以上の設定が終わったら一番下にある「プロフィールを更新」ボタンをクリックして、いままでの設定を保存しておきます。

作成したプロフィールを表示する

作成したプロフィールを好きな場所に表示させましょう。

ダッシュボードから「外観」⇒「ウィジェット」をクリック

ダッシュボードから外観を選択しウィジェットをクリック

使用できるウィジェット一覧の中に[C]プロフィールというウィジェットがあるのでクリックします。

利用できるウィジェット一覧

すると設置場所を選択する項目が出るので、表示させたい場所を選んで「ウィジェットを追加」をクリック。

プロフィール設置場所の選択

僕はブログの右上に表示させたいので、サイドバーを選択しました。

サイドバーの末尾にプロフィールウィジェットが追加されています。

サイドバーに追加されたプロフィールウィジェット

後はこの「プロフィールウィジェット」をドラッグ&ドロップでサイドバーの好きな位置に配置します。

ウィジェットをサイドバーの好きな位置に配置する

サイドバーの一番上に設定しました。

最後に追加したプロフィールウィジェットをクリックします。

すると「タイトル」と「肩書ラベル」という項目があるので、この2つを設定します。

タイトルと肩書ラベルの設定

「タイトル」がプロフィール欄の見出しになり、「肩書ラベル」はプロフィール画像の上に表示されます。

ちなみにタイトルの横にある人型のアイコンはFontAwsomeで別途設定したものなので、本来このアイコンは表示されません。

これで全ての設定は完了です。

サイドバーの一番上にプロフィールを設定したので、ちゃんと設定できているかどうかブログを確認してみます。

はいっ。

プロフィール設定後のブログ

しっかりサイドバーの一番上にプロフィール欄が追加されていますね。

備考

連絡先情報でtwitterなどのSNSに関するリンクを全く設定しなくても、デフォルトの状態で「feedlyで更新情報を購読」と「RSSで更新情報をフォロー」のアイコンは表示されます。

連絡先情報未設定でも表示されるアイコン

これらが不要な場合はテーマの編集で以下のコードをcssに記入することで消すことが出来ます。

#author_box-2 .author-follows {
    display: none;
}

プロフィール欄が有ると無いとではプロフィールページへのアクセス数が全然違う

僕はブログを開始してしばらくしてからプロフィールページを作成し、ナビゲーションリンクにそのプロフィールページへのリンクを貼っていました。

でもほとんど見てもらえず、プロフィールページのアクセス数は微々たるものでした。

ゆんつ
ゆんつ

誰も僕に興味なし(笑)

ところがサイドバーにプロフィール欄を設置してから、プロフィールページへのアクセス数がちょっとずつですが増えてきたのです!

ブログに人を呼ぶのは文章の出来が一番大事だと思いますが、書いている人に興味が持てるかも重要な要素だと思います。

簡単でもいいのでプロフィール欄を設けておけば、そのプロフィールに興味を持ってブログを見てくれる人が増えるかもしれません。

設置してみて「不要だな」と感じたらウィジェットを外せば良いだけなので、もしプロフィール欄が未設定の場合は一度試してみる価値があるかもしれません。

それでは、またですー。

コメント

  1. うら より:

    最近ブログを始めたものです。

    凄く参考になりました。
    有り難うございます。

  2. 桃太郎 より:

    いつも参考にさせて頂いています。
    ありがとうございます。
    私のブログでインスタのリンクアイコンだけ表示されない(白紙になる)のですが、なにか設定に問題があるのでしょうか?ぜひ教えていただきたいです。

    • ゆんつゆんつ より:

      桃太郎様

      コメントありがとうございます。

      インスタグラムへのリンクに色を付けたい場合は以下のコードをCSSに貼り付けてみてください。

      .author-box .sns-follow-buttons a.instagram-button {
      background-color: #cf2e92 !important;
      }

      ※色は一応インスタグラムっぽい紫色にしていますが、お好きな色に変更してください。
      #cf2e92が色のコードなので、この部分を好きな色のコードにしていただければ色を変更できます。