ブログのノウハウ

【Cocoon】ブログ初心者でもできるプロフィールのおしゃれなカスタマイズ【コピペでOK】

こんにちは、yuji(@yuji_invest)です。
このブログでは、WordPressとアフィリエイトのノウハウについて詳しく解説しています。

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

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

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

Cocoonプロフィールのカスタマイズ

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

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

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

プロフィールの設定方法

Cocoonプロフィールのカスタマイズ

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

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

ウィジェット設定

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

1.WordPressメニューの「外観」から「ウィジェット」を開きます。Cocoonプロフィールのカスタマイズ

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

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

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

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

プロフィール設定

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

1.WordPressメニューの「ユーザー」から「あなたのプロフィール」を開きます。Cocoonプロフィールのカスタマイズ

2.こちらで名前やTwitterリンクなどを入力します。「ニックネーム(必須)」に入力した名前が「ブログ上の表示名」に反映され、プロフィールに表示されることになります。Cocoonプロフィールのカスタマイズ

3.「プロフィール情報」に自己紹介文を入力します。Cocoonプロフィールのカスタマイズ

4.「選択」をクリックして、プロフィール画像を選択します。(※プロフィール画像は正方形のものを用意してください。)Cocoonプロフィールのカスタマイズ

5.以上のように設定できたら「プロフィールを更新」をクリックします。これでプロフィール欄が表示されました。Cocoonプロフィールのカスタマイズ

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

1.「外観」から「テーマエディター」に進み「style.css」を開きます。Cocoonヘッダーロゴデザイン

2.スタイルシートに以下のコードをコピペしてください。Cocoonヘッダーロゴデザイン

スタイルシートに入力するときの注意点
・編集前に必ずスタイルシートのバックアップを取る
・編集するテーマが「CocoonChild」になっていることを確かめる
・「@charset “UTF-8”;」から始まる部分(最初から入力されている内容)は消さずに下に追記していく
/************************************
** プロフィール欄
************************************/
.nwa .author-box {
max-width:none;
padding: 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 2em 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:0 3px;
}
a.follow-button.website-button.website-follow-button-sq{background-color: #6eb6fd!important;}
a.follow-button.twitter-button.twitter-follow-button-sq{background-color: #7dcdf7!important;}
a.follow-button.facebook-button.facebook-follow-button-sq{background-color: #7c9dec!important;}
a.follow-button.hatebu-button.hatebu-follow-button-sq{background-color: #2c6ebd!important;}
a.follow-button.instagram-button.instagram-follow-button-sq{background: linear-gradient(165deg, #427eff 5%, #f13f79 50%) no-repeat !important;}
a.follow-button.pinterest-button.pinterest-follow-button-sq{background-color: #bd081c!important;}
a.follow-button.youtube-button.youtube-follow-button-sq{background-color: #cd201f!important;}
a.follow-button.linkedin-button.linkedin-follow-button-sq{background-color: #0A66C2!important;}
a.follow-button.note-button.note-follow-button-sq{background-color: #41C9B4!important;}
a.follow-button.soundcloud-button.soundcloud-follow-button-sq{background-color: #FF5500!important;}
a.follow-button.flickr-button.flickr-follow-button-sq{background-color: #111!important;}
a.follow-button.line-button.line-follow-button-sq{background-color: #00c300!important;}
a.follow-button.amazon-button.amazon-follow-button-sq{background-color: #ff9900!important;}
a.follow-button.rakuten-room-button.rakuten-room-follow-button-sq{background-color: #C61E79!important;}
a.follow-button.slack-button.slack-follow-button-sq{background-color: #4A154B!important;}
a.follow-button.github-button.github-follow-button-sq{background-color: #4078c0!important;}
a.follow-button.codepen-button.codepen-follow-button-sq{background-color: #47CF73!important;}
a.follow-button.feedly-button.feedly-follow-button-sq{background-color: #2bb24c!important;}
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;
}
}
※「#author_box-2」は「#author_box-3」もしくは「#author_box-4」となる場合があります。
※背景画像にはアップロードした画像URLを入力してください。
例:background: url(https://yujiblog.org/wp-content/uploads/2020/02/madison-ralg-kxED2shuUg-unsplash-scaled.jpg) center no-repeat;

3.コピペができたら「ファイルを更新」をクリックします。Cocoonヘッダーロゴデザイン

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

デザインを確認する

Cocoonプロフィールのカスタマイズ

このように表示されていればOKです。

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

Cocoonプロフィールのカスタマイズ

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

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

SNSボタンを非表示にしたい場合

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

となります。

Cocoonプロフィールのカスタマイズ

また「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;
}

Cocoonプロフィールのカスタマイズ

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

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

おしらせ
「当ブログのデザインが役に立った」と感じていただけた場合には、ブログやTwitterで小さく紹介していただけると大変嬉しく思います。
またデザインが上手くいかなかった場合など、修正のためのフィードバックをいただけると助かります。ご協力よろしくお願いいたしますm(__)m

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

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

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

現在人気急上昇中のテーマなので、詳しいレビューを以下の記事から確認してみてくださいね。
》WordPressテーマSWELLのデメリット3つ

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

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

また、ブログデザインのお手本になるブログや、配色がわかるサイトを紹介していますので、是非以下を参考にしてみてくださいね!
》おしゃれなブログデザインを作る15のコツ

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

ブログアクセス数を増やそう

PV画像

当ブログではSEOで検索上位を獲得した結果、1年ほどでアクセス数が大幅に伸びました。
アクセス数を増やす方法について以下の記事で解説したので、是非参考にしていただけたらと思います。
》ブログをアクセスアップするには?【初心者がやるべき対策は1つだけ】

SEOに強いブログ記事を書こう

Google検索で上位を獲れる記事を書くと、アクセスが増えブログ収入がアップします。
SEOに強い記事の書き方をまとめたので、テンプレを真似しつつ記事を書いてみてくださいね。
》【完全版】SEOに強いブログ記事の書き方テンプレート

ASP審査に合格しよう

Amazonアソシエイト・Googleアドセンス・各ASPの合格方法をまとめました。
参考にしつつ審査に挑戦してみてください◎
》【完全攻略】アフィリエイトASPの審査に合格するコツと記事数

セールスライティングで商品を売ろう

セールスライティングとは、文章で商品を売るテクニックのことです。
的確なセールスライティングで、アフィリエイトの成約率を高めていきましょう!
》【売れる文章術】セールスライティングの5つのコツ

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

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

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

》【保存版】ブログで月5万稼ぐまでのロードマップ
》【超基本】アフィリエイトの完全マップ

コメント

  1. だーこま より:

    はじめまして!
    yujiさんのサイトを参考にブログカスタマイズできました。
    勝手ながら、コードも利用させていただきました。

    初心者ブロガーで、わからないことばかりでしたが
    大変分かりやすく記載してくださっていて
    いつもありがたく利用させてもらっています。

    一言お礼をお伝えしたくてコメントさせていただきました。
    これからも応援しています!

    • yujiyuji より:

      メッセージありがとうございます。

      もし設定でうまくいかないところや、わかりにくい箇所があれば、メール・コメント欄・DMへ気軽に質問してください。

  2. ありま より:

    はじめまして。大変参考になる記事をありがとうございます。
    こちらの記事の通りに、プロフィールをカスタマイズしてみたのですが1点わからないことがありまして・・・

    SNSフォローボタンが真っ白で表示されるということです。
    リンクはちゃんとされており問題ないのですが、ボタンの表示の仕方がわかりません。

    お手数ですが、教えていただけますすと助かります。よろしくお願いします。

    • yujiyuji より:

      お問い合わせありがとうございます。

      『SNSフォローボタンが真っ白で表示される』ということですが、ボタンの色は現在どのような状態でしょうか?

      「よく見ると薄いグレーに表示されている」などであれば、エラーが特定しやすいです。

    • yujiyuji より:

      【追記】
      コードに変更を加え、新たにボタンの種類を追加しました。
      最新版で試してみてください。

  3. 上原キイロ より:

    yujiさんのサイトを参考にかわいいカスタマイズができました。
    本当にありがとうございます!
    プロフィール欄について2つ質問があります。
    ①プロフィール写真を丸く使っていますがフチ無し、シャドウなしにしたい。
    ②PCでみた文章の左右の余白を縮小したいです。
    yujiさんのPCのプロフィール欄が理想です。
    同じようにする方法をお教えいただけませんでしょうか。
    CSSのどこをどのように変更すればよいですか。よろしくお願いします。

    • yujiyuji より:

      ありがとうございます(^^)

      ②の余白ですが、https://yujiblog.org/cocoon-customizationの記事で全体のバランスについてコードを載せています。
      .entry-content {
      padding:1em;
      padding-top:0;
      margin: 0 auto;
      }
      の部分が余白に該当するので、数値を変更してみてください!

      ①プロフィールについては、サイトの状態を見たいので、TwitterのDMでURLをお知らせくださm(__)m

      • 上原キイロ より:

        ありがとうございます。
        TwitterにDMを送らせていただきました。
        よろしくお願いいたします。

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