Twitterはこちら仕事依頼はこちら

【Cocoon】プロフィールをオシャレで可愛くしてみた!

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

当サイトでは、Amazonアソシエイトをはじめとした第三者配信のアフィリエイトプログラムにより商品・サービスをご紹介、適格販売により収入を得ています。

こんにちは、ぽんひろ(@ponhiroo)です。

今回はCocoonのプロフィールボックスをカスタマイズします!

劇的BeforeAfterがこちら!

Cocoonプロフィールカスタマイズ ビフォアフター

デモページから実際のデザインが見られます。

参考デモページ

グラデーションを使って可愛く、オシャレにしてみました!

このカスタマイズではさらに以下の項目が変更できます。

出来ること
  • 色を変える
  • 肩書きを入れる
  • フォローミーの文字を入れる
  • アイコンを増やす、減らす

逆に対応できていないのは以下の通りです。

出来ないこと
  • 記事下のプロフィールは変わりません

現状サイドバーのみです。モバイル時にサイドバーを表示させれば、デモページのように擬似的に記事下に持って来ることはできます。
要望があれば記事下のプロフィールも作ります。

このカスタマイズでは以下のファイルを編集します。

今回編集するファイル
  • style.css
  • function.php

人によってはfuncrion.phpの編集は必要ありません。

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

以下の手順でカスタマイズを行っていきます。

手順
  1. (人によって)function.php編集
  2. プロフィール設定
  3. CSSコピペ

以上です!

コピペで出来るのでそんなに難しくはないと思います。

手順1:function.php編集(必要な人だけ)

対象者

もっと見るボタン(More)を入れたい人

デモページではプロフィールページに飛ぶようになっています。

プロフィールページがなかったり、必要ない人はスルーしてください。

function.phpにコードをコピペ

プロフィール説明欄でHTMLタグを使えるようにする処理をfunction.phpに書きます。

以下のコードを「WordPress管理画面→外観→テーマエディター→function.php(子テーマ)」にコピペしてください。

注意必ずバックアップを取ってからやってください。

//プロフィール欄でHTMLコードを使えるようにする
remove_filter('pre_user_description', 'wp_filter_kses');

これで準備OKです。

手順2:WordPressのプロフィール設定

プロフィール設定がまだの方はプロフィール設定をまずしましょう。

WordPress管理画面→ユーザー→あなたのプロフィール」を選択してください。

手順2-1:プロフィールの名前を設定しよう!

プロフィール名前入力

ニックネームを入力するとブログ上の表示名が変えられるようになります。

表示したい名前を入力し、設定しましょう。

手順2-2:プロフィールに表示するSNSボタンを設定しよう!

プロフィールSNS設定

プロフィールにあるアイコンを表示させるためにはSNS情報を入力する必要があります。

必要なものだけで大丈夫です。

手順2-3:プロフィール情報の入力

プロフィール情報の入力

もっと見るボタン(More)」が必要な人は以下のようにボタンのタグを入れます。

<a class="to-profile" href="ここにリンク先URL">More</a>

ここにプロフィールの説明文ここにプロフィールの説明文ここにプロフィールの説明文ここにプロフィールの説明文ここにプロフィールの説明文

必要ない人はそのままプロフィールを入力してください。

手順2-4:プロフィール画像を設定

プロフィール画像設定

プロフィールにのせるアイコンを設定します。

今回のデザインはデモページのように背景なしが映えるようになっているので背景なし推奨です。

背景なしにしたい方はjpgファイルだと必ず背景が付いて来るのでpngファイルがオススメです。

プロフィールを更新」を選択で設定終了です。

手順2-5:プロフィール画像が表示されない人はアバター設定を確認

画像を設定したのに表示されない場合はアバター設定がOFFになってる可能性があります。

WordPress管理画面→設定→ディスカッション」を選択してください。

下の方にアバターの表示という項目があるのでチェックを入れて保存しましょう。

wordpressアバター設定

手順3:プロフィール用CSSをコピペ!

あとはコピペするだけ!

WordPress管理画面→外観→テーマエディター→style.css」に下記コードをコピペしてください。

/************************************
** プロフィール-サイドバー
************************************/
.sidebar .widget_author_box {
  background: #fff;
  padding-top: 1.2em;
  border-radius: 3px 3px 0 0;
  max-width: 360px;
  margin: 0 auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}
.sidebar .author-box {
  padding: 120px 0 0;
  border: none;
  position: relative;
  margin: 0 0 3em;
  max-width: 100%;
  overflow:hidden;
}
.sidebar .author-content {
  background: -webkit-linear-gradient(0deg, rgba(28, 189, 255, 1) 0%, rgba(55, 219, 255, 1) 51.39%, rgba(70, 205, 255, 1) 100%);
  background: linear-gradient(90deg, rgba(28, 189, 255, 1) 0%, rgba(55, 219, 255, 1) 51.39%, rgba(70, 205, 255, 1) 100%);
  border-radius: 200px 200px 0px 0px / 100px 100px 0px 0px;
  color: #fff;
  padding: 20px;
  width:110%;
  margin-left:-5% !important;
}
.sidebar .author-box .author-name a {
  color: #42ace7;
  text-decoration: none;
  letter-spacing: 1px;
  font-size: 18px;
}
.sidebar .author-box .author-description {
  padding: 45px 25px 0px;
  text-align: justify;
  text-justify: inter-ideograph;
}
.sidebar .author-box p {
  line-height: 1.8;
  font-size: 14px;
}
.sidebar .author-box .author-thumb {
  width: 120px;
  margin: 0 auto;
  position: absolute;
  top: 50px;
  right: 0;
  left: 0;
  bottom: 0;
}
.sidebar .author-box .author-name {
  font-size: 1.1em;
  font-weight: bold;
  position: absolute;
  margin-bottom: 0.4em;
  top: 23px;
  bottom: 0;
  right: 0;
  left: 0;
}
.sidebar .author-box .author-widget-name {
  position: absolute;
  top: 3px;
  bottom: 0;
  right: 0;
  left: 0;
  font-size: 0.7em;
  color: #bbb;
}
.sidebar .author-box .sns-follow {
  padding: 15px 10px;
}
.sidebar .author-box .sns-follow-buttons {
  display: flex;
  justify-content: space-evenly;
}
.sidebar .author-box .sns-follow-buttons a {
  border-radius: 50%;
  border: none;
  width: 45px;
  height: 45px;
  line-height: 45px;
  font-size: 30px;
  box-shadow: 0 0 10px rgba(66, 172, 231, .5), 0 0 5px -5px rgba(66, 172, 231);
  background:#fff;
}
.sidebar .author-box .sns-follow-buttons a:hover {
  box-shadow: 0 10px 20px -2px rgba(0, 0, 0, .2);
  opacity: 1;
}
.sidebar .author-box .sns-follow-buttons .follow-button span:before {
  color: #46CDFF;
}
.sidebar .icon-instagram-new:before {
  content: "\ea92";
  font-size: 24px;
}
.sidebar .author-box .to-profile {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  color: #46CDFF;
  box-shadow: 0 0 10px rgba(66, 172, 231, .5), 0 0 5px -5px rgba(66, 172, 231);
  top: 105px;
  right: 45px;
  font-size: 0.9em;
  font-weight: bold;
}
.sidebar .author-box .to-profile:hover {
  box-shadow: 0 10px 20px -2px rgba(0, 0, 0, .2);
}
.sidebar .author-box .sns-follow-message {
  margin-bottom: 10px;
  font-size: 13px;
}
.sidebar .author-box .sns-follow-message:before {
  content: "\";
  margin-right: 5px;
}
.sidebar .author-box .sns-follow-message:after {
  content: "/";
  margin-left: 5px;
}
.sidebar .icon-twitter-logo:before {
  position: absolute;
  top: 8px;
  right: 0;
  bottom: 0;
  left: 0;
}
.sidebar .icon-facebook-logo:before {
  position: absolute;
  top: 6px;
  bottom: 0;
  right: 8px;
  left: 0;
}
.sidebar .icon-hatebu-logo:before {
  position: absolute;
  top: 8px;
  bottom: 0;
  right: 0;
  left: 0;
}
.sidebar .icon-feedly-logo:before {
  position: absolute;
  top: 8px;
  right: 0;
  bottom: 0;
  left: 0;
}
.sidebar .icon-rss-logo:before {
  position: absolute;
  top: 8px;
  right: 0;
  bottom: 0;
  left: 0;
}

色を変える方法!

それぞれの色の変え方です。

背景色を変える!

サンプルの青いグラーデション部分ですね。

ここを変えるには先ほどコピーしたCSSで以下の箇所を変更します。

#sidebar .author-content {
  background: -webkit-linear-gradient(0deg, rgba(28, 189, 255, 1) 0%, rgba(55, 219, 255, 1) 51.39%, rgba(70, 205, 255, 1) 100%);
  background: linear-gradient(90deg, rgba(28, 189, 255, 1) 0%, rgba(55, 219, 255, 1) 51.39%, rgba(70, 205, 255, 1) 100%);
  border-radius: 200px 200px 0px 0px / 100px 100px 0px 0px;
  color: #fff;
  padding: 20px;
  width:110%;
  margin-left:-5% !important;
}

ここのbackgroundというところです。

ここを好きな色に変えるのですが何を書いたらいいかわかりませんよね。

ベタ塗りの方法とグラデーションにする方法を紹介します。

1:ベタ塗り

まず二つあるbackgroundを削除します。

次にbackground:#○○;を追加します。○○にカラーコードを入れます。

白だったら#ffffff、黒だったら#000000のような感じです。

Googleでカラーコードで検索すれば例が出て来ると思うのでそちらを参考にしてください。

変更後参考コード

#sidebar .author-content {
  background: #ff9a9e;
  border-radius: 200px 200px 0px 0px / 100px 100px 0px 0px;
  color: #fff;
  padding: 20px;
  width:110%;
  margin-left:-5% !important;
}

2:グラデーション

ベタ塗りではなくグラデーションにする方法です。

グラデーションのCSSは下記サイトがオススメです。

参考Webgradients

グラデーションオススメサイト

例えば上図の左のグラデーションにしてみましょう。

CopyCSSをクリックすればCSSがコピーされます。

それを下記のようにbackground二つを消して、代わりに貼り付けます。

変更後参考コード

#sidebar .author-content {
  background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
  border-radius: 200px 200px 0px 0px / 100px 100px 0px 0px;
  color: #fff;
  padding: 20px;
  width:110%;
  margin-left:-5% !important;
}

するとこのように色が変わってるかと思います。

プロフィール背景色を変更

名前の色を変える!

背景色だけ変えても統一感なくて微妙ですよね。

次に名前の色を変えましょう。

先ほどコピーしたCSSで以下の箇所を変更します。

#sidebar .author-box .author-name a {
  color: #42ace7;
  text-decoration: none;
  letter-spacing: 1px;
  font-size: 18px;
}

colorを変更します。

文字色もグラデーションにできますがやや複雑なので割愛します。

カラーコードを入れていきましょう。

グラデーションを背景色にした方はグラデーションのコード内にあるカラーコードがオススメです。

background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);

↑の場合#ff9a9eとかですね。

color:#ff9a9e;を元のcolorを消して追加します。

これで色が変わってるはずです。

プロフィール名前の色を変更

変更後参考コード

#sidebar .author-box .author-name a {
  color: #ff9a9e;
  text-decoration: none;
  letter-spacing: 1px;
  font-size: 18px;
}

アイコンの色を変える!

アイコンの色も変えていきましょう!

先ほどコピーしたCSSで以下の箇所を変更します。

2箇所あります。

#sidebar .author-box .sns-follow-buttons .follow-button span:before {
  color: #46CDFF;
}
#sidebar .author-box .to-profile {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  color: #46CDFF;
  box-shadow: 0 0 10px rgba(66, 172, 231, .5), 0 0 5px -5px rgba(66, 172, 231);
  top: 105px;
  right: 45px;
  font-size: 0.9em;
  font-weight: bold;
}

それぞれのcolorのカラーコードを変更してください。

プロフィールアイコンの色を変更

アイコンは影の色も変えなければいけない

影が青くなってるのに気づきましたかね。

最後に影の色も変えなければいけません。

今、面倒くさっ!って思いました?あと少しです、頑張りましょう。

2箇所変更します。

#sidebar .author-box .sns-follow-buttons a {
  border-radius: 50%;
  border: none;
  width: 45px;
  height: 45px;
  line-height: 45px;
  font-size: 30px;
  box-shadow: 0 0 10px rgba(66, 172, 231, .5), 0 0 5px -5px rgba(66, 172, 231);
}
#sidebar .author-box .to-profile {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  color: #46CDFF;
  box-shadow: 0 0 10px rgba(66, 172, 231, .5), 0 0 5px -5px rgba(66, 172, 231);
  top: 105px;
  right: 45px;
  font-size: 0.9em;
  font-weight: bold;
}

box-shadowの数値を変更します。

数値はカラーコードをGoogleで検索すると出てきます。

例えば「#ff9a9e」で検索。

GoogleでRGBを調べる

rgb(255, 154, 158)の数値を先ほどのCSSに反映させます。

変更後参考コード

#sidebar .author-box .sns-follow-buttons a {
  border-radius: 50%;
  border: none;
  width: 45px;
  height: 45px;
  line-height: 45px;
  font-size: 30px;
  box-shadow: 0 0 10px rgba(255, 154, 158, .5), 0 0 5px -5px rgba(255, 154, 158);
}
#sidebar .author-box .to-profile {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  color: #46CDFF;
  box-shadow: 0 0 10px rgba(255, 154, 158, .5), 0 0 5px -5px rgba(255, 154, 158);
  top: 105px;
  right: 45px;
  font-size: 0.9em;
  font-weight: bold;
}

するとこのように影もピンクになります。

プロフィールアイコンの影色を変更

プロフィールその他カスタマイズ方法

プロフィールに肩書きを入れる

プロフィールに肩書きをつける

名前の上にある肩書きの付け方です。

WordPress管理画面→外観→ウィジェット」のプロフィール設定のところに肩書き入力欄があります。

プロフィール肩書き入力

入力して保存すればOKです!

フォローミーを入れる!

プロフィールにフォローミーを入れる

文言は何でもいいんですがフォローボタンの上に文字を入れる方法です。

WordPress管理画面→Cocoon設定→SNSフォロー」を選択。

フォローメッセージという欄に好きな文言を入れます。

フォローメッセージ

次にCSSを追加します。

WordPress管理画面→外観→テーマエディター→style.css」を選択。

下記コードを追記します。

#sidebar .author-box .sns-follow-message {
  display:block;
}

これで表示されるはずです!

以上です!お疲れさまでした!

導入済みのブログ、サイト紹介させてください

「この記事を見て導入したよ!」という方でSNSやブログでこの記事を紹介していただいた場合、こちらでブログを紹介させていただきます!

紹介したにも関わらず反映されていないという方は大変申し訳ないのですがご連絡ください!

おかげさまで増えてきましたので締め切らせていただきます!

コメント

  1. 始めまして。東郷と申します。

    ぽんひろさんの記事を見て、自分のブログのプロフィールも変更してみました。

    私はCSSなど全く分からないのですが、ぽんひろさんの説明をみていると、とても分かり易く、ちょっとですが理解することが出来ました(コピペでカスタマイズしたカテゴリー部分の色が変更できず困っていましたが、解決することが出来ました)。

    現在ブログのデザインを色々いじっているので、とても参考になりました。
    ブログデザインを変更した過程を記事にした際、ぽんひろさんの記事も紹介させていただきました。

    https://togojun.com/トップページ作成

    ありがとうございました。

    • >東郷 潤さん

      ありがとうございます!
      記事紹介もありがとうございます!!

  2. ぽんひろさん、はじめまして。
    のんままと申します。

    私もぽんひろさんのサイトを拝見して、カスタマイズに挑戦しております。
    そこでひとつ悩んでおりまして、ぜひご教示頂きたいなと思っています。

    サンプルでお作りになっているピンクのグラデーションバージョンですが、プロフの文字が白く、飛んで見にくい状態です。文字色を見やすく、かつカラーバランスが損なわれないようなセンス良い色がありましたら教えて下さい。

    また、どこを改変しますと文字色は変わりますでしょうか。
    お忙しい折とは思いますが、よろしくお願いします。

    • >のんままさん

      コメントありがとうございます!

      文字色は
      .sidebar .author-content {
      にあるcolor:#fff;のカラーコードを変更すれば変わるかと思います。

      見にくい場合は「背景のピンクを濃くして文字色は白のまま」、もしくは「背景のピンクを薄くして文字色を濃いピンク、もしくは文字色を黒に少しピンクを足した色にする」でしょうか。

      わかりにくくて申し訳ございません。

  3. ぽんひろさん、はじめまして!
    IYOと申します。

    この記事を参考にプロフィールの変更したのですが、とても満足のいく出来栄えになりました!
    また、別記事のサイト型ページの作り方もとても参考になりました。
    ありがとうございます。(↓サイトURLです)
    https://chillaxjap.com/

    とても参考になったので、Twitterの方で紹介させていただきました。
    https://twitter.com/IYO_ChillaxJap/status/1213727335498694657

    • >IYOさん

      初めまして!カスタマイズ&紹介ありがとうございます!
      こちらも紹介させていただきます!

      • ありがとうございます

  4. ぽんひろさん、こんにちは。
    はじめまして♪

    サイトの情報を参考に
    プロフィールの変更をしてみました。

    分かりやすくてすぐにできました。
    ありがとうございました。

    Twitterもさきほどフォローさせていただきました。
    その他のページで紹介されているカスタマイズも
    少しずつ自分のサイトへ反映させていただければと思います。

    サイトURL)https://soyo.life/

    私のページでもカスタマイズの件を
    紹介させていただきたいと思います。

    ありがとうございました。

    • >そよさん

      返信遅くなりまして申し訳ございません。
      ご報告ありがとうございます!

      紹介いただきましたらこちらでもご紹介させてください!

  5. ぽんひろさん、はじめまして。
    キャシーといいます。

    この記事を見ながらプロフ作りました!
    細かく教えていただいたおかげで、作ることができました!
    本当にありがとうございます!!

    「コクーン トップページ 広告非表示」
    で検索していたところ、ぽんひろさんのブログを見つけ、

    そこから、プロフのカスタマイズまでさせてもらいました!

    参考にさせてもらった記事を二つブログで紹介させてもらいました。
    https://dattecathydamon.com/2020/01/31/cocoon-henkou/

    自分と同じように悩んでいる人に、ぽんひろさんのサイトを見てもらって、悩みが解決できるといいなぁと思います。

    • >キャシーさん

      返信遅くなりまして申し訳ございません。
      ご報告&紹介ありがとうございます!

      こちらでもご紹介させていただきます!
      よろしくお願いします!

  6. はじめまして。
    cocoonでブログ作成はじめて、こちらのサイトを参考にカスタマイズさせていただいています。ありがとうございます。

    今seasonのスキンを利用させていただいているのですが、こちらの手順でプロフィール設定がうまくいかず…。

    プロフィールアイコンが、プロフィール説明の部分までめりこんでしまいます…何か対処法はありますでしょうか?

    • >もこさん

      返信遅くなりまして申し訳ございません。

      問い合わせかTwitterのDMからで良いのでURLを教えていただくことは可能でしょうか?

      お手数おかけして申し訳ございません。

  7. はじめまして。
    cocoonでブログを作り始め、ぽんひろさんのサイトを参考にカスタマイズに挑戦中です。
    プロフィール欄のSNSボタンの形が崩れてしまい対処方法が解りません。
    ご教授いただけたら嬉しいです。
    サイト:https://mameshiba-ten.com/

    • >テンパさん

      ありがとうございます。

      CSSの下記コードを…

      .sidebar .author-box .sns-follow-buttons a {
      border-radius: 50%;
      border: none;
      width: 45px;
      height: 45px;
      line-height: 45px;
      font-size: 30px;
      box-shadow: 0 0 10px rgba(245, 186, 56, .5), 0 0 5px -5px rgba(245, 186, 56);
      background: #fff;
      }

      こちらのコードに書き換えてみてください。

      #container #sidebar .author-box .sns-follow-buttons a {
      border-radius: 50%;
      border: none;
      width: 45px !important;
      height: 45px;
      line-height: 45px;
      font-size: 30px !important;
      box-shadow: 0 0 10px rgba(245, 186, 56, .5), 0 0 5px -5px rgba(245, 186, 56);
      background: #fff;
      }

      • SNSボタンの形が〇になりました。
        何かが起こると素人なので、どこを修正して良いか解らずアタフタしてしまいました。
        ブログは日々悪戦苦闘ですが、当ブログでぽんひろさんのカスタマイズ記事を紹介させていただきたいと思います。
        ありがとうございました。

        • >テンパさん

          バージョンが変わったりでもしかしたらコードに不備があるかもですね…。お手数おかけして申し訳ないです。

          ご紹介ありがとうございます!
          連絡いただければ、こちらでも紹介させていただきます!

  8. 初めまして!!
    ブログ運営を始めて2週間のReiyaと申します!

    今回は、ぽんひろさんのプロフィール作成記事を拝見させて頂き
    自分も同じように設定してみました!
    宜しければ導入したサイトとして紹介していただきたいです^^

    ぽんひろさんのサイトもSNSでご紹介させて頂き、フォローもさせて
    頂きました!!

    とても分かりやすい記事で、初心者の私にはとても助かりました1
    ありがとうございました^^

    私のサイト「Leben Mentor」
    https://leben-mentor.com/

    私のTwitter
    https://twitter.com/__1221_id__

    • >Reiyaさん

      ご紹介ありがとうございます。
      こちらも紹介させていただきます!

  9. cocoonのカスタマイズがしやすくとても助かってます。

    しかし手順通り行ったのですがプロフィール画像の背景がなぜか表示されてしまいます。
    pngの画像を使いプロフィール編集画面では背景はないのですが原因がわかりません。

    • >マルオさん

      ありがとうございます。
      よろしければURLを教えていただいてもよろしいでしょうか?

      • 返信ありがとうございます!

        ブログのURLはこちらになります
        https://jinmaa-blog.com/

        コメント欄の名前を適当にしたせいでプロフィール名が違うことになっています…。

        • 返信めちゃくちゃ遅くなって申し訳ないです!

          .author-thumb img{
          background: none !important;
          }

          を追記していただいて確認していただいてもよろしいでしょうか?

          • ありがとうございます。
            無事背景がなくなりました。

  10. ありがとうございます。
    利用させていただいています!
    プロフィール欄のRSSのアイコンを削除したいのですが、
    削除の方法はありますか?

    • >多良木さん

      返信遅くなりまして申し訳ございません。

      CSSで
      .author-content .rss-button{
      display:none;
      }
      を追記すれば非表示になるかと思います。

  11. はじめまして!Yuriと申します。

    ぽんひろさんの記事を参考にいつもカスタマイズさせていただいております。

    そこでぜひ記事下のプロフィールも、今回のようにグラデーションのようにカスタマイズする方法を教えていただきたいです。

    ぜひよろしくお願いいたしますm(_ _)m

    • >Yuriさん

      ありがとうございます。
      記事下も作ろう作ろうって思ってるのですが時間がなかなか作れずできていません…。申し訳ございません!

  12. はじめまして!
    フリーランス猫と申します!

    WordPressのプロフィール部分をもっとおしゃれに変更出来たらナァ…と思っていたところ、ぽんひろ様の記事を拝見し、大変参考にさせていただきました(T_T)!!

    おかげで理想のプロフィールになりました〜!
    本当にありがとうございました!
    これからも記事たのしみにしています。

    「吾輩はフリーランス猫である」
    https://www.wagahai-freelance.com/

    • >フリーランス猫さん

      初めまして、ありがとうございます!
      可愛いサイトですね!

  13. はじめまして。いつもブログ作成の際に、よく見させていただいております。
    一つ質問させてください。

    SNSボタンの丸い枠の背景色を変更するにはどこを書き換えると、変更できますでしょうか?

    • >メテオさん

      返信遅くなりまして申し訳ございません。

      .sidebar .author-box .sns-follow-buttons a

      background: #fff;
      が背景色になります。

  14. ぽんひろさん、はじめまして。
    やすトトと申します。

    私もぽんひろさんのサイトを拝見して、カスタマイズに挑戦しております。
    そこでひとつ悩んでおりまして、ぜひご教示頂きたいなと思っています。

    コピペしてサンプル通りに変化したのですが1つ変化しません。

    SNSがサンプルの様に丸の白抜きになりません。
    どうしたらいいのか全然わかりません。
    どこがおかしいのか教えていただきたいです。

    お忙しい折とは思いますが、よろしくお願いします。

    • >やすトトさん

      返信めっっちゃくちゃ遅れて申し訳ないです!

      ・考えられる理由としてはCSSのコピペ先を間違えている。
      ・親テーマを適用してしまっている。
      ・キャッシュが残っている。
      などでしょうか。。。

  15. はじめまして!
    シャチとあんこと申します。
    今回、ぽんひろさんのサイトを参考にプロフィールをカスタマイズさせていただきました。

    なんの知識もありませんが、コピペで簡単にできてありがたいです!
    ありがとうございます。

    これから他の記事も参考にさせていただいて、レベルアップしていきたいです。

    よろしければ、ご覧になってくださいませ。
    https://shachianko.com/

    • >シャチとあんこさん

      初めまして!拝見しました!

      グラデーションがとてもきれいですね。
      ありがとうございます!

  16. 初めまして、フックンと申します。
    いつもおしゃれな、外装が凄くて、参考にさせていただいています。

    プロフィールのMoreの所が、波打ってバグが、スマホもPCもいくらしてもなって染むんですが、修正方法ないでしょうか?

    https://magickitchen.blog/

  17. はじめまして!くりぼーと申します。
    今回ぽんひろさんのサイトを参考にプロフィールをカスタマイズさせて頂きました。とてもかわいいカラーに出来て大変満足しているのですが、一点うまくいかないところがございまして、ご相談させてください。

    SNSのフォローボタンが白くならずに少し見づらくなってしまっている状態です。カーソルを合わせると白く変化するのですが、、、
    どのように対処すればよいのかご教授いただければ幸いです。

    .sidebar .author-box .sns-follow-buttons a
    を確認したところ、
    background: #fff;になっているのでホワイトのはずなのですが…

    https://clibolog.com/
    こちらがサイトになります。

    お忙しいところ大変恐縮ではございますが、どうぞよろしくお願いします!

  18. はじめまして!
    マルオと申します。

    最近ブログを始めて、プロフィール欄を入れたくて手順通りにコピペしてみたのですが、ページに反映されません・・・。
    考えられる原因とかあったら教えていただけないでしょうか?
    よろしくお願いいたします。

  19. 初めまして、るかと申します。

    とても素敵なデザインで、試してみたのですが…
    アイコンと名前が被ってしまうのと、プロフィール自体のサイズが大きいのですが、どうしたらいいかわかりますでしょうか…?

  20. 「名前:くりぼー :投稿日:2021/05/07(金) 15:58:00」のご質問ですが、僕も同様に上手くいかず、お問い合わせさせていただきました。
    回答は以下の通りで、追記すると改善しました。

    CSSの
    .sidebar .author-box .sns-follow-buttons a{
    }
    の中に書いてある
    background: #fff;
    が背景色ですが
    background: #fff !important;
    をつければ強制的に色を変更できます。

    透明度が薄くなってますがこちらを追記すれば透明ではなくなります。
    opacity: 1 !important;

    です。
    お試しください。
    ぽんひろさんありがとうございます。

  21. マルオ様と同じ状態になって困っております。お助けして頂きたくコメントさせていただきました。

    プロフィール画像はpngを使用していますが
    背景が出てきてしまい、透明になりません。

    追記する方法を試してみましたがダメです。
    どうしてでしょう?

    載っているように
    プロフィールサイドバーのcss.の最後に

         (省略)
    .sidebar .icon-rss-logo:before {
    position: absolute;
    top: 8px;
    right: 0;
    bottom: 0;
    left: 0;
    }
    .nwa .author-box .author-description {
    text-align: center;
    }
    .author-thumb img{
    background: none !important;
    }

    と追記しております。何か間違っているのでしょうか?

  22. プロフィールがきれいになりまた!ありがとうございます1

ページトップへ