【Cocoon】プロフィールを設置する方法とカスタマイズ

こんにちは、yuji（@yujiblog）です。
このブログでは、WordPressとアフィリエイトのノウハウを解説しています。

ブログ初心者なりに、ブログのプロフィールをおしゃれにデザインしたいです。

以上のような、ブログデザインについての要望にお答えします。

このブログではWordPressテーマのCocoonを使っていますが、プロフィールは以下のようなデザインにしています。

このようにできるだけシンプルにまとめることで、圧迫感のない自己紹介ができます。

この記事では、以上のようなCocoonのプロフィールを簡単に再現できる方法を解説したので、参考にしていただけたらと思います。

※ブログ収益化を目指している方には、WordPress有料テーマの利用をおすすめしています。詳しくは以下の記事をご覧ください。
》おすすめWordPressテーマ15選

【2024年】おすすめWordPressテーマ15選【初心者向けランキング】

【2024年最新】初心者におすすめのWordPressテーマ15選をまとめました。有料9個と無料6個のランキングで紹介しているので、ブログ運営に是非役立てていただければと思います。

yujiblog.org

2024.02.14

プロフィールの設定方法

何も設定してないブログの状態では、このようなデザインになっています。

また、Cocoonの全体的な基本設定がまだの方は以下の記事をご覧ください。
》Cocoonの使い方とおすすめ初期設定

ウィジェット設定

まずは、ブログにプロフィール欄を表示します。

１．WordPressメニューの「外観」から「ウィジェット」を開きます。

２．「サイドバー」「サイドバースクロール追従」に初期から入っているブロックがあれば、削除します。

※「ウィジェット管理画面が違う…」という方は以下で操作画面を設定してください。
》WordPress5.8以降でウィジェット画面をもとに戻す方法

３．左側に並んでいる一覧から「[C]プロフィール」を選択し、「サイドバー」にチェックを入れて「ウィジェットを追加」をクリックします。

４．サイドバーの枠の中に「[C]プロフィール」が表示されるので、ドラッグして1番上に移動。「画像を円形にする」にチェックを入れて「保存」をクリックしてください。

これでウィジェット設定は完了です。

プロフィール設定

続いて、プロフィールに表示する内容を編集します。

１．WordPressメニューの「ユーザー」から「プロフィール」を開きます。

２．こちらで名前やTwitterリンクなどを入力します。「ニックネーム（必須）」に入力した名前が「ブログ上の表示名」に反映され、プロフィールに表示されます。

３．「プロフィール情報」に自己紹介文を入力します。

４．「プロフィール画像のアップロード」から「選択」をクリックして、プロフィール画像を選択します。（※プロフィール画像は正方形のものを用意してください。）

５．以上のように設定できたら「プロフィールを更新」をクリックします。これでプロフィール欄が表示されました。

※プロフィール画像にはオリジナルアイコンを設定しましょう。ブログPVの伸びや、SNSでの反応率が大きく変わります。作成方法は以下にてご確認ください。
》ブログアイコンの作り方

スタイルシートにコードをコピペする

１．「外観」から「テーマファイルエディター」に進み「Cocoon Child: スタイルシート (style.css)」を開きます。

２．スタイルシートに以下のコードをコピペしてください。

スタイルシートに入力するときの注意点

• 編集前に必ずスタイルシートのバックアップを取る
• 編集するテーマが「CocoonChild」になっていることを確かめる
• 「@charset “UTF-8”;」から始まる部分（最初から入力されている内容すべて）は消さずに下に追記していく

/************************************
****　プロフィール欄
************************************/
.nwa .author-box {
max-width:none;
padding: 0;
margin-bottom:0;
}
aside#author_box-2.widget.widget-sidebar.widget-sidebar-standard.widget_author_box{
padding: 0!important;
border-radius: 10px;
}
@media (max-width: 1023px){
aside {
padding: 0 .5em;
}
}
.nwa .author-box .author-thumb {
width: 100%;
height:9em;
margin:0 0 5em 0;
border-radius: 10px 10px 0 0;
}
.author-box figure.author-thumb{
float: none;
text-align: center;
background: url( /*こちらに背景画像のアップロードURLを入力*/) center no-repeat;
background-size: cover;
position: relative;
z-index: 0;
}
.author-box img.avatar.photo{
background-image: none;
padding: 0!important;
box-shadow:none;
}
.author-box figure.author-thumb img{
width: 40%;
max-width:180px;
margin-top:5em;
}
@media (min-width:1023px){
.nwa .author-box .author-thumb {
height:8em;
}
.author-box figure.author-thumb img{
max-width:120px;
}}
@media (max-width:480px){
.nwa .author-box .author-thumb {
height:8em;
}
.author-box figure.author-thumb img{
max-width:130px;
}}
.author-box .author-name {
margin: 0 0 1.5em 0;
}
.author-box .author-content .author-name a{
text-decoration: none;
font-size:1.2em;
color:#545454;
}
.nwa .author-box .author-description {
margin-bottom:1.5em
}
.author-box .author-content .author-description p{
font-size:14px;
color:#7b7b7b;
line-height:1.6em!important;
margin:1em;
}
#author_box-2 p{
margin:1em 2.5em;
}
div.author-follows{
padding-bottom:2em;
}
.author-box .author-content .author-description p a{ text-decoration: none; }
.author-box .author-content .author-description p a:hover{ text-decoration: underline; }
.author-box .author-content .author-follows .sns-buttons{ justify-content: center; }
.author-box .author-content .author-follows .sns-buttons a.follow-button{
border-radius: 50%;
border: none;
width: 40px;
height: 40px;
color: #fff!important;
margin:3px;
transition: .5s;
}
div.author-follows a.follow-button.website-button.website-follow-button-sq{background-color: #6eb6fd!important;}
div.author-follows a.follow-button.twitter-button.twitter-follow-button-sq{background-color: #000000!important;}
div.author-follows a.follow-button.facebook-button.facebook-follow-button-sq{background-color: #7c9dec!important;}
div.author-follows a.follow-button.hatebu-button.hatebu-follow-button-sq{background-color: #2c6ebd!important;}
div.author-follows a.follow-button.instagram-button.instagram-follow-button-sq{background: linear-gradient(165deg, #427eff 5%, #f13f79 50%) no-repeat !important;}
div.author-follows a.follow-button.pinterest-button.pinterest-follow-button-sq{background-color: #bd081c!important;}
div.author-follows a.follow-button.youtube-button.youtube-follow-button-sq{background-color: #cd201f!important;}
div.author-follows a.follow-button.tiktok-button.tiktok-follow-button-sq{background-color: #000000!important;}
div.author-follows a.follow-button.linkedin-button.linkedin-follow-button-sq{background-color: #0A66C2!important;}
div.author-follows a.follow-button.note-button.note-follow-button-sq{background-color: #41C9B4!important;}
div.author-follows a.follow-button.soundcloud-button.soundcloud-follow-button-sq{background-color: #FF5500!important;}
div.author-follows a.follow-button.flickr-button.flickr-follow-button-sq{background-color: #111!important;}
div.author-follows a.follow-button.line-button.line-follow-button-sq{background-color: #00c300!important;}
div.author-follows a.follow-button.amazon-button.amazon-follow-button-sq{background-color: #ff9900!important;}
div.author-follows a.follow-button.twitch-button.twitch-follow-button-sq{background-color: #5C16C5!important;}
div.author-follows a.follow-button.rakuten-room-button.rakuten-room-follow-button-sq{background-color: #C61E79!important;}
div.author-follows a.follow-button.slack-button.slack-follow-button-sq{background-color: #4A154B!important;}
div.author-follows a.follow-button.github-button.github-follow-button-sq{background-color: #4078c0!important;}
div.author-follows a.follow-button.codepen-button.codepen-follow-button-sq{background-color: #47CF73!important;}
div.author-follows a.follow-button.feedly-button.feedly-follow-button-sq{background-color: #2bb24c!important;}
div.author-follows a.follow-button.rss-button.rss-follow-button-sq{background-color: #f26522!important;}
.author-box .author-content .author-follows .sns-buttons a.follow-button span{ line-height: 40px; }
.author-box .author-content .author-follows .sns-buttons a.follow-button span::before{ font-size: 20px !important; }
@media (max-width:1023px){
.nwa .author-box .author-thumb {
height:11em;
margin:0 0 7em 0;
}
.author-name{
font-size:16px!important;
}
.author-description{
line-height: 1.5 !important;
text-align:center;
margin:0 auto;
}
}
@media screen and (max-width: 1023px){/*スマホ画面でサイドバーを非表示*/
div.sidebar {
display: none;
}
}

※プロフィール欄の余白が大きくなってしまう場合は、9行目・75行目の「#author_box-2」の数字を「#author_box-3」「#author_box-4」などに変更すると改善します。

※28行目の背景画像にはアップロードした画像URLを入力してください。画像URLは「メディア」→「画像を選択」→「ファイルのURL」で確認できます。
例：background: url(https://yujiblog.org/wp-content/uploads/2020/02/madison-ralg-kxED2shuUg-unsplash-scaled.jpg) center no-repeat;

※グレーの枠線が表示されてしまう場合は、以下を追記してください。
.author-box {
border: none;
}

※スマホ画面でサイドバーが非表示になるように設定しています。
スマホ記事下にプロフィールを表示したい場合は「フッター（モバイル用）」をご利用下さい。
》フッターのカスタマイズはこちら

３．コピペができたら「ファイルを更新」をクリックします。

４．以下のようなデザインになればOK。

これでプロフィールのカスタマイズは完了です。

SNSフォローボタンを非表示にしたい場合

プロフィール欄の「SNSフォローボタン」は、表示/非表示を切り替えることができます。

WordPress管理画面の「ユーザー」→「プロフィール」から編集可能。

• 入力する
  →SNSフォローボタンは自動的に表示される
• 入力せずに空欄にする
  →SNSフォローボタンは非表示になる

となります。

また「FEED」と「RSS」の2つのボタンを非表示にするには、以下のコードを追加入力してください。

a.follow-button.feedly-button.feedly-follow-button-sq{
display:none;
}
a.follow-button.rss-button.rss-follow-button-sq{
display:none;
}

これでSNSフォローボタンを非表示にすることができました。

リンクを表示したい場合

プロフィール内にリンクを表示する方法は、Twitterにて追加コードをお伝えしますので、下記までDMしてください。
》Twitterはこちら

プロフィール画像の作り方

プロフィール画像は、ブログの印象を左右する大切な要素です。

オリジナルアイコンを設定すると、読者に覚えてもらいやすく信頼感を与えることができます。

実際に当ブログでオリジナルアイコンを設定したところ、ブログのリピート率やSNSフォロワー数が改善されました。

このように、アイコンは記事中やSNSなどに幅広く使えるので、できるだけ早めに設定しておくのがおすすめです。

プロフィール画像の作成方法は下記にて解説しています。
》ブログアイコンの作り方

ブログアイコンの作り方【無料でオリジナルキャラクターを作成する手順】

無料でできるブログアイコンの作り方を解説しました。オリジナルのブログアイコンを設定すると、ブログのアクセス数やSNSフォロワー数が改善されます。

yujiblog.org

2023.04.26

また当ブログでは、Cocoonのオリジナルカスタマイズを多数紹介しています。是非以下の記事からご覧ください。
》ブログ初心者でもできるCocoonカスタマイズの完全マニュアル

ブログ初心者でもできるCocoonカスタマイズの完全マニュアル

WordPress/Cocoonを使ったブログでのオリジナルカスタマイズを紹介します。すべてコピペでOKなので「初心者だけどブログをおしゃれにデザインしたい」という方におすすめです。モバイル表示にも対応しています。

yujiblog.org

2023.01.01

おしらせ

Cocoonカスタマイズに関するご質問は、Twitterからのみ受け付けています。
@yujiblogのDMまでご連絡くださいませm(__)m

「カスタマイズが上手くいかない…」と感じる方へ

当ブログのカスタマイズは、1つ1つのパーツが複雑に関連し合っているため、個別でデザインを使う際などは上手く表示されないことがあります。

そこで、カスタマイズが難しい場合はSWELLの利用をおすすめしています。（※僕も2サイト目以降はSWELLで運用しており、デザイン性の高さに魅力を感じています。）

現在人気急上昇中のテーマなので、詳しいレビューをチェックしてみてください。
》SWELLの評判は本当？デメリットと口コミ・レビューを見る

【SWELLの評判は本当？】デメリットと悪い口コミ・レビューのまとめ

現在人気上昇中のWordPressテーマ「SWELL」の評判をまとめました。実際に使って感じたメリットデメリットやユーザーの本音レビュー・口コミを紹介したので、テーマ選びの参考にしていただければと思います。

yujiblog.org

2022.10.04

ちなみにSWELLは、Cocoon開発者のわいひらさんが「Cocoonからの乗り換え先」として公認しています。

その他のおすすめテーマも紹介していますので、デザイン設定はサクっと終わらせて1日でも早く記事を書き始めましょう。
》おすすめWordPressテーマ15選

また、ブログデザインのお手本になるサイトや、配色・ブランドカラーなどの知識を紹介しているので、こちらも参考にしてください。
》おしゃれなブログデザインを作る16のコツ&参考サイト22選

おしゃれなブログデザインを作る16のコツ&参考サイト22選

おしゃれなブログデザインを作る16のコツと、Webデザインの参考になるサイト22個を紹介しました。また、ブログで使える図解のデザイン方法3つも解説しています。

yujiblog.org

2023.01.08

以下は、ブログ収入を伸ばしたい方へのおすすめ記事です。

多くの人に読まれる記事を書こう

当ブログではSEOで検索上位を獲得した結果、アクセス数が大幅に伸びました。

このような「読まれる記事の書き方」をテンプレにまとめたので、参考にしていただけたらと思います。
》ブログ記事の書き方9ステップ【月26万PV読まれる14のコツ】

ブログ記事の書き方9ステップ【月26万PV読まれる14のコツ】

ブログ記事の書き方を9個のステップで解説しました。また月26万PV読まれたブログの書き方のコツ14選も紹介しています。テンプレ通りに書けば、誰でも読まれるブログを作れます。

yujiblog.org

2023.01.01

アフィリエイト神ツールを使いこなそう

また、当ブログの現在の収益は月20万ほどとなっていますが、このようなブログ運営を支えてくれた「神ツール」を以下にて紹介しています。
》ブログアフィリエイトのおすすめツール15選

ブログアフィリエイトの必須ツールおすすめ15選

ブログアフィリエイトにおすすめの必須ツール15選をまとめました。ブログ収入を稼ぐには、作業環境を整えることが大切です。必要なものにはしっかり投資をして、効率的にアフィリエイト成果を伸ばしていきましょう。

yujiblog.org

2023.01.08

この記事が少しでもお役に立てたら幸いです。
最後まで読んでいただき、ありがとうございました！

》ブログで月5万稼ぐロードマップ
》アフィリエイトの完全マップ