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

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

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

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

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

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

Cocoon

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

wp-cocoon.com

今日は

してみましょう。

手順

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

プロフィールの入力

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

はいっ。

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

備考

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

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

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

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

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

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

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

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

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

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

それでは、またですー。