当ブログでは、Cocoonを初期状態からカスタマイズする方法（コピペ可）をまとめています。
プロフィールウィジェットを使えば、ブログのサイドバーやフッターに写真、名前、紹介文を表示できます。
この記事では、Cocoonでプロフィールウィジェットを作成する方法と、個性的にカスタマイズする方法を紹介します。
プロフィールウィジェットとは？
プロフィールウィジェットは、ブログのサイドバーやフッターに表示され、読者が「このブログを誰が書いているのか」を瞬時に知ることができる重要な役割を果たします。
多くの読者は、記事の内容が気に入ると「この人はどんな人だろう？」と興味をもちます。
プロフィールウィジェットがあれば、読者はページを探し回ることなくすぐに著者の情報を手に入れられます。これは、ブログの親しみやすさや信頼性を高めるポイントになります。
ブログ自体のファンになることもあるよね！
プロフィールウィジェットのカスタマイズについて
プロフィールウィジェットのカスタマイズすると、以下のように見た目を変更できます。
背景色は緑がいいんだけど……。
もちろん変えまくってね！
プロフィールウィジェットのカスタマイズは、「ユーザー」「ウィジェット」「CSS」の３つがポイントになります。
CSSを追加する場所
CSSを追加する場合は、以下の場所に貼りつけてください。
【外観】→【カスタマイズ】→【追加CSS】に以下のコードを記述する。
プロフィールウィジェットの名前・画像を変える
プロフィールウィジェットの名前・画像を変える方法は以下のとおりです。
【ユーザー】→【プロフィール】をクリックします。
中にある【ニックネーム（必須）】にブログ上で表示したい名前を入力します。
初期設定のユーザー名のまま使用するのは避けましょう！
理由は、投稿者名から管理画面のログインIDがわかってしまうためセキュリティ的に問題があるからです。
【あなたについて】の【プロフィール情報】の下にプロフィール写真の挿入箇所がありますが、ここでは挿入しません。
一番下のほうに【プロフィール画像のアップロード】という場所があるのでここからプロフィール画像をアップロードします。
フォームの下部にアップロードのための情報が小さい文字で書いています。
プロフィール画像のサイズは、240px×240pxの正方形の画像がおすすめされています。
また、画像の容量を小さくするためTinyPNG等で圧縮します。
プロフィール画像だけ圧縮すればいいの？
ブログで使う画像・写真はすべて圧縮したほうがいいんだ！
容量が大きいとブログの表示速度が遅くなっちゃうよ！
プロフィールの設定が終わったら【プロフィールの更新】をクリックします。
プロフィールウィジェットにSNSアイコンを表示させる
プロフィールウィジェットにSNSアイコンを表示させる方法は以下のとおりです。
【ユーザー】→【プロフィール】をクリックします。
中にあるSNSのフォームにアドレスを入力すると、プロフィールウィジェットのボックスにアイコンが表示されます。
SNSのアドレスは、下記のように入力します。
- X:https://twitter.com/ユーザーネーム（＠は省略）
- インスタ：https://www.instagram.com/ユーザーネーム
- TikTok：https://tiktok.com/@ユーザーネーム
- YouTube：https://www.youtube.com/channel/チャンネルのID
SNSアイコンの角を丸くする
SNSアイコンの角を丸くする方法は以下のとおりです。
/* プロフィールウィジェットのSNSアイコンの角を丸くする */
.author-box .sns-follow-buttons a.follow-button{
border-radius:50%;
}プロフィールボックスの背景色・境界線を変える
プロフィールボックスの背景色・境界線を変える方法は以下のとおりです。
/* プロフィールボックスの背景色を変える */
.author-box{
background: #FBFBFB; /*背景色を変える*/
border:1; /*境界線の太さ*/
}プロフィールボックスの角を丸くする
プロフィールボックスの角を丸くする方法は以下のとおりです。
/* プロフィールボックスの角を丸くする */
.author-box{
border-radius:20px; /*角を丸める*/
}プロフィール名の文字サイズ・文字色・フォントを変える
プロフィール名の文字サイズ・文字色・フォントを変える方法は以下のとおりです。
/* プロフィール名の文字サイズ・文字色・フォントを変える */
.author-name a{
font-size: 20px; /*文字サイズ*/
color:#B39394; /*文字の色*/
font-family: 'Zen Maru Gothic', serif; /*フォントを変える*/
}プロフィール情報の文字サイズ・文字色を変える
プロフィール情報の文字サイズ・文字色を変える方法は以下のとおりです。
/* プロフィールボックスの角を丸くする */
.author-description {
font-size: 15px; /*文字サイズ*/
color:#333333; /*文字の色*/
}色々試してみてね！
