【Cocoon】ブログのサイドバーにプロフィールを作成する方法

ブログのサイドバーに プロフィールを作成する方法 ブログ

ブログ作成後、記事作成とともに重要なのが、デザインなどブログページの外観整理です!

実のところ、ブログは初心者の私ですが、設定内容を記録し、同じように最近ブログを始められた方にご参考いただければと思っております!

今回は、WordPressの無料テーマ「Cocoon(コクーン)」で、ブログのサイドバーにプロフィール欄を作成する方法について紹介いたします。

この記事はこんな人におすすめ!

・ブログにプロフィール欄を表示したい人 

・ブログを始めたばかりの人

・ブログを無料でカスタマイズをしたい人

カスタマイズ前のブログ

カスタマイズ前のブログの様子がこちらです。スキンはぽんひろさん作成のSeason (Winter)を使用しています。

カスタマイズ前のブログの様子

なにもカスタマイズしていない状態だとかなりシンプルですね。ここにプロフィール欄を追加していきます!

プロフィールの作成

まずは、ブログに表示させたいプロフィールの内容を作成しましょう。

①WordPress管理画面 >「ユーザー」>「プロフィール」を選択
WordPressの管理画面から「ユーザー」>「プロフィール」を選択します。

管理画面の「ユーザー」から「プロフィール」を選択

②ニックネーム、ブログ上の表示名を入力
(ブログ上の表示名は、ニックネームを入力後にプルダウンから選択可能になります。)
メールアドレスは入力済みとなっているので、変更しない場合は消さずにそのままにしておきます。変更する場合は新しいメールアドレスを入力します。

TwitterやInstagramなど、SNSのリンクを表示させたい場合はURLを入力しましょう。

ニックネーム、ブログ上の表示名の入力

③プロフィール情報を入力
下部にスクロールし、プロフィール情報欄に自己紹介やブログの概要などをこちらに入力しましょう。

プロフィール情報の入力

年齢、趣味、特技、属性、ブログで書いている内容などが

書かれることが多いです。

いろんなブログのプロフィール欄を参考にするといいかもしれません。

オリジナリティーある自己紹介を考えてみましょう!

④プロフィール画像の設定
プロフィールに設定したい画像を用意しておきます。
最下部の「プロフィール画像」>「プロフィール画像のアップロード」の「選択」ボタンをクリックします。

プロフィール画像のアップロード

ファイルをドロップ、または「ファイルを選択」ボタンから選択して、画像をアップロードします。

ファイルのアップロード

選択された画像を確認しましょう。
設定したプロフィールを確認し、問題なければ「プロフィールを更新」ボタンをクリックしてプロフィールの作成は完了です!

プロフィール画像の確認

プロフィール欄をブログに表示

プロフィールを作成したら、ブログに表示させる設定をしていきましょう。
サイドバーコンテンツ下部の2個所に表示する設定方法を紹介します。

どちらも最初に完成イメージを載せているので、イメージに合う方を選んで設定してみてください!

共通の操作

①WordPress管理画面 >「外観」>「ウィジェット」を選択
WordPressの管理画面から「外観」>「ウィジェット」を選択します。

WordPress管理画面 >「外観」>「ウィジェット」を選択

②「[C]プロフィール」を選択

「[C]プロフィール」を選択

ここからは、プロフィール欄をブログ内のどこに表示するかで設定方法が変わります。

プロフィール欄をサイドバーに表示

【サイドバー表示完成イメージ】

サイドバー表示完成イメージ

③ – a 「サイドバー」を選択し、「ウィジェットを追加」をクリック

 「サイドバー」を選択し、「ウィジェットを追加」をクリック

④ プロフィールの内容を記入

「タイトル」、「肩書きラベル」、「画像を円形にする」のチェックを入力して、「保存」ボタンをクリックします。

イトル」、「肩書きラベル」、「画像を円形にする」のチェックを入力

【プロフィール記入例】

【プロフィール記入例】

プロフィール欄をコンテンツ下部に表示

【コンテンツ下部表示完成イメージ】

コンテンツ下部表示完成イメージ

③ – b 「コンテンツ下部」を選択し、「ウィジェットを追加」をクリック
その後の操作は「プロフィール欄をサイドバーに表示する」の④と同じになります。

「コンテンツ下部」を選択し、「ウィジェットを追加」をクリック

完成!

本記事を最後までご覧いただきありがとうございます。

以上が、ブログにプロフィール欄を設定する方法になります。
ブログを運営する方々の参考にしていただければ幸いです!

コメント

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