ブログのノウハウ

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

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

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

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

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

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

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

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

※収益化を目指している方には、おしゃれなWordPressテーマのSWELLをおすすめしています。詳しくは以下の記事をご覧ください。
【最新】SEOに強いおすすめWordPressテーマ16選

【保存版】ブログ初心者が月5万稼ぐまでの全手順を解説
ブログをアクセスアップするには?【初心者がやるべき対策は1つだけ】

プロフィールの設定方法

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

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

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

ウィジェット設定

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

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

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

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

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

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

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

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

プロフィール設定

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

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

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

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

こちらで名前やTwitterリンクなどを入力します。

「ニックネーム(必須)」に入力した名前が「ブログ上の表示名」に反映され、プロフィールに表示されることになります。

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

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

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

「選択」をクリックして、プロフィール画像を選択します。
ここで選ぶプロフィール画像は、正方形が望ましいです。

以上のように設定できたら「プロフィールを更新」をクリックします。

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

これでブログにプロフィール欄が表示されるようになりました。

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

Cocoonヘッダーロゴデザイン

「外観」から「テーマエディター」に進み「style.css」を開きます。

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){/*サイドバー表示時はMAX120pxで*/
.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(135deg, #427eff 0%, #f13f79 80%) 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;
}
}

Cocoonヘッダーロゴデザイン

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

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

※コード内の「#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;

デザインを確認する

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

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

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

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

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

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

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

こちらに入力すると、SNSフォローボタンは自動的に表示されます。
入力せずに空欄にしておくと、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ボタンを非表示にしたい場合

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

このブログでは、以上のようなCocoonのオリジナルカスタマイズを他にもたくさん紹介しています。
すべてコピペでOKなので、初心者の方にもおすすめです。

【コピペでOK】ブログ初心者でもできる『Cocoonカスタマイズ』の完全マニュアル

お願い
Cocoonカスタマイズは、皆様のフィードバックをもらいながら、改善の努力を重ねることで作成しています。
もし「当ブログのデザインが役に立った」と感じていただけた場合には、是非、ブログやTwitterで小さく紹介していただけると大変嬉しく思います。
よろしくお願いいたしますm(__)m

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

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

TwitterのDMなどでも一生懸命サポートしていますが、若干のズレが出てしまったり、思うようにカスタマイズできない部分も少なからずあります。

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

SWELLは公式サイトの設定マニュアルや、購入者用の質問フォーラムが充実しているので、説明不要で初心者の方でも安心して使えます。

また、特にブログの収益化を目指している方には、デザインや設定の時間を短縮して、記事執筆に専念してもらいたいとも感じているところです。

使用感はデモサイトにて確かめられるので、興味のある方は確認してみてください。人気急上昇中なだけあって、時代に合ったオシャレなデザインです。
SWELLのデモサイトはこちら

その他のおすすめテーマも紹介していますので、1日でも早く記事を書いてアフィリエイト成果に繋げてください!

【最新版】SEOに強いおすすめWordPressテーマ16選

また、Googleアドセンスにまだ合格できていない方は、こちらの記事で審査攻略をまとめています。

【最新】Googleアドセンス審査に合格するための6つのポイント

ちなみに、副業ブログで結果を出した方法を以下で全て公開しています。

【副業ブログは稼げる?】会社員がバレずに月30万稼ぐまでにやったことを全て公開します

以下は、ブログのSEO対策に関するおすすめ記事の紹介です。

ブログのアクセス数を増やす方法とは?

PV画像

yujiblogはSEOで検索上位を獲得した結果、1年ほどでアクセス数が大幅に伸びました。

ブログのアクセス数を増やす方法について以下の記事で解説したので、参考にしていただけたらと思います。

ブログをアクセスアップするには?【初心者がやるべき対策は1つだけ】

SEOに強いブログ記事の書き方テンプレート

以下で紹介する記事では、検索上位を獲るためのブログの書き方について、徹底的に解説しています。

この記事で達成できる目標
・読者にとって読みやすい記事が書ける
・Googleに評価されやすい記事が書ける

テンプレを完コピするだけでSEOに強い記事が書けるようになるので、実際に手を動かしながら挑戦してみてください。

【完全版】SEOに強いブログ記事の書き方テンプレート

ブログ収入を稼ぐまでの流れを徹底解説

またアクセス数に比例してアフィリエイトの売り上げも伸びており、現在の収益は毎月35万以上となっています。

以下の記事では、ブログを収益化する方法について詳しくまとめています。

【初心者向け】ブログ収入を稼ぐまでの流れを徹底解説

セールスライティングの5つのコツ

セールスライティングとは、文章で商品を売る技術のことです。

的確なセールスライティングができると「成約率」が高くなるので、ページのアクセス数が少ない状態でアフィリエイト成果を出すことが可能です。

以下の記事では、文章でモノが売れていくセールスライティングのノウハウについて詳しく解説しています。

【売れる文章術】セールスライティングの5つのコツ

サイト表示速度が遅くて悩んでいる方へ

ブログの表示速度は、Googleからの評価に関わる重要な要素です。

Googleはこれまでに何度も『サイト表示速度とSEOの関係』について明言しています。

Web検索ランキングでのサイト速度の使用
『ユーザーは速度を重視しています。そのため、検索ランキングではサイトの速度を考慮に入れることにしました。』
詳細情報:Google 検索セントラルブログ
読み込み速度をモバイル検索のランキング要素に使用
『2018年7月よりページの読み込み速度をモバイル検索のランキング要素として使用することを本日みなさんにお伝えしたいと思います。』
詳細情報:Googleウェブマスター向け公式ブログ

このようにSEOで重視されるサイト表示速度ですが、レスポンスの速いサーバーを使うことで大幅に改善されます。

そこで以下の記事では、ブログアフィリエイトに最適なレンタルサーバーを5つ厳選しました。

高速サーバーへの『お得な乗り換え情報』についても詳しく解説しているので、是非チェックしてみてください。

【高速化】ブログアフィリエイトにおすすめのレンタルサーバー5選

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

【保存版】ブログ初心者が月5万稼ぐまでの全手順を解説
一般人でもブログ収入は稼げる?個人が月10万稼ぐための8つのポイント
Amazonアソシエイト審査に1発合格した話
【限定公開】もしもかんたんリンクのカスタマイズ
【注意】もしもアフィリエイトは危ない!?
【その画像の著作権、大丈夫?】安心のフリー素材サイト9選

コメント

  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をコピーしました