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

Cocoon

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

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

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

WordPressの無料テーマ「Cocoon」ではプロフィールのウィジェットが用意されているので、特別なことをしなくても手軽にブログの好きな場所にプロフィールを表示することが出来ます。

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

今日はCocoonで簡単にプロフィール欄を作成してみましょう。

手順

1. プロフィールの入力

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

ダッシュボードから「ユーザー」→「あなたのプロフィール」をクリック。

ユーザー選択後、あなたのプロフィールをクリック

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

プロフィール設定画面

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

名前の設定

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

もしこの名前を変更したい場合は、その上にある名、姓、ニックネームのいずれかの欄に自分が付けたい名前を入力してください。

「ブログ上の表示名」はセレクトボックスなっていて、クリックすると入力した名前が候補として現れるようになるので、それを選択してください。

名前を決定して下に進むと連絡先情報の入力欄があります。

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

連絡先情報の設定

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

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

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

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

プロフィール情報の設定

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

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

自己紹介文を記入したら更に下にスクロールし、続いてプロフィール画像を設定します。

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

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

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

プロフィール画像の設定

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

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

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

プロフィール欄にあまり詳細な自己紹介を書くとプロフィール欄が長くなって見づらいので、詳細なプロフィールページは別に作っておいて、ここにはそのページへのURLを記入しておくと良いかと思います。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

はいっ。

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

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

備考

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

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

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

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

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

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

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

ゆんつ
ゆんつ

誰も僕に興味なし(笑)

ところがプロフィール欄を設けてから、プロフィールページへのアクセス数がちょっとずつですが増えてきたのです。

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

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

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

それでは、またですー。

コメント