【超簡単】Cocoonプロフィールのカスタマイズ｜サイドバーに設置にしよう

2022 8/27

2022年8月27日

想定読者

Cocoonプロフィールをカスタマイズしたい方「設置する前の準備物や設置する方法、カスタマイズ方法を詳しく知りたい」

本記事は、上記の方に向けて執筆しています。

本記事の内容

Cocoonプロフィールを設置するには準備物が必要な話
Cocoonプロフィールを設置する手順
CocoonプロフィールをCSSでカスタマイズする方法

この記事はCocoonを長年活用していたブロガーが執筆しています。
今は「SWELL」というテーマに変更していますが、サブブログではCocoonを活用しています。

エコおじい

5分程度で読める内容になっているので、ぜひ最後までご覧ください。

記事の内容

Cocoonプロフィール設置前に：準備物を用意しよう

Cocoonプロフィールを設置する前に準備物を用意しましょう。

準備するもの

プロフィール画像
自己紹介テキスト

エコおじい

１つ1つ解説していきます。

プロフィール画像

まずは、プロフィール画像を準備しましょう。

エコおじい

当サイトで言うと
←この写真です。

プロフィール画像はサイトの顔になる部分なので、慎重に選びましょう。
おすすめは自分の顔orキャラクターです。

よく、無料素材に落ちている画像を使用している方がいますが、ブログ運営の観点からいうと、絶対ダメです。

自分の顔→写真を適切なサイズに切り抜いて利用する
キャラクター→canvaで作る。作れない場合はココナラで外注

エコおじい

私と同じように、自分の顔を活用する方は過去の写真からアイコンにマッチしそうな画像を選びましょう。

顔出しNGの方はcanvaなどの格安デザインツールでアイコンを作成しましょう。

Canva Pro
無料トライアル期間は14日間

超簡単、かつ無料期間が設定してあるので、お金がない方にもおすすめです。

自分で制作できない場合は、アイコンを外注しましょう。
ココナラなどであれば、1000円程度でアイコンが作成できます。

エコおじい

下記の記事で、実質無料でアイコンを作成する方法を紹介していますので、参考にしてみてください。

あわせて読みたい

【ブログのアイコン作成はココナラ】初心者ブロガーのブランドを育てる!! ブログアイコンを設定していない→今すぐ有料で作成してもらいましょう。ブログ運営でアイコンは欠かせません。当サイトでも使用しています。本記事の内容ブログアイ...

自己紹介のテキスト

Cocoonプロフィール機能には自己紹介するテキストが必要です。

当サイトで言うと、下記の部分です。

ブログ・SEO対策・プログラミングが大好きです。
WordPress案件を主に取り扱っています。
ホームページ制作・SEO対策・その他のご依頼を請け負っています。お気軽にお問い合わせください！

エコおじい

このような文章を作成しておきましょう。

プロフィールアイコンとプロフィール文が完成した方は、実際にサイドバーにプロフィールを設置していきましょう。

Cocoonプロフィールをサイドバーに設置する

WordPressの管理画面＜外観＜ウィジェットへ行き、プロフィールをサイドバーに設置しましょう。

エコおじい

設置した方は、次にWordPress管理画面＜ユーザー＜プロフィールをクリックしてプロフィールを設定していきましょう。

プロフィールで必要な項目

名：
姓：
ニックネーム：
ブログ上の表示名：
プロフィール情報：
プロフィール写真：

上記の項目を入力した後、プロフィールを更新しましょう。

サイドバーを確認してみましょう。

色などはブログごとに異なると思いますが、大枠は一緒です。

これで、Cocoonサイドバーにプロフィールを設置する方法の解説は以上です。
次に、CSSを使ってカスタマイズしていきましょう。

【CSS編】Cocoonプロフィールのカスタマイズ

プロフィール設置ができた方はCSSを使ってプロフィールをカスタマイズしていきましょう。

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

背景画像の指定
SNS

エコおじい

1つ1つ解説していきます。

カスタマイズ例①背景画像の指定

.nwa .author-box .author-thumb {
    float: none;
    width: 100%;
    margin: 9px auto 0;
	   height: 0;
    padding-top: calc(100%*392/700);
    position: relative;
    background: url() center no-repeat;
    background-size: cover;
}

.sidebar .author-thumb img{
    width: 50%;
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -40%;
	  border: 3px solid #fff;
}

.author-name {
	margin-top: 60px;
}

背景画像を指定したい場合は上記のコードで可能です。

エコおじい

上記のコードは「ウェブアシビ」から拾ったものを私が少しカスタマイズしています。
質問に回答できませんので、その点はご了承ください。

background: url() center no-repeat:
→url()の中に指定の画像を追加する。今回はurl(https://sib-muscle.com/wp-content/uploads/2021/12/shutterstock_1555681472-1-e1638965715641.png)を追加しています
width: 50%;
→ここの部分でプロフィール画像の幅をカスタマイズすることができます。
カスタマイズした方は、bottomの値を調整しましょう。
.author-nameの部分
→自己紹介文のmarginを指定しています。

カスタマイズ例②SNSアカウント

.author-follows{
	padding: 12px 0;
	background-color: #73c3fb;
}
.author-follows::before{
	content: 'SNSアカウント';
	color: white;
	letter-spacing: 0.2em;
}
.author-box .sns-follow-buttons a.follow-button{
	width: 40px;
	height: 40px;
	margin: 6px 10px 2px 2px;
	color: white;
	border-color: white;
	font-size: 24px;
	font-weight: bold;
	line-height: 1.6;
}
.author-box a.follow-button span::before {
	font-size: 22px;
}

SNSボタンをカスタマイズしたい方は上記のコードで編集可能です！

エコおじい

このコードは「なこラボ」から頂戴しています。
そこから私なりのカラーに変更しています。

注意点は特にありません。
自分がお好きな色を指定してあげるだけで、簡単に実装することができます。

WordPressカスタマイズ外注したい方

カスタマイズを外注したい方は「ココナラ」がおすすめです。