Cocoonでプロフィールを設置・カスタマイズする方法

Name: WordPressテーマ「SWELL」の特徴
Brand: WordPressテーマ「SWELL」
Price: 17600 JPY

2022年5月25日2022年6月8日

WordPressテーマ「Cocoon」でプロフィールを設置・カスタマイズする方法を解説！

マチコ

Cocoonプロフィールを使いたいのですが･･･
できれば見た目もこだわりたいです。

こういった悩みを解決します。

Cocoonのプロフィールは設置が簡単です。

が、見た目に関してはあまり良いとはいえず、カスタマイズした方が良いでしょう。

というわけで、今回はプロフィールの設置とカスタマイズ方法をあわせて紹介。

WordPressテーマ「Cocoon」使いになりたい方は、ぜひチェックしてみてくださいね。

▼WordPressテーマおすすめランキング▼

今回の記事で先性できるCocoonプロフィール

ヒナキラ

今回はこういったプロフィールをCocoonで設定する方法になります。

ちなみに、プロフィール用のアイコンは重要です。

無料では良いアイコンは作れないので、「ココナラ」というサービスを利用しましょう。アイコンであれば、1,000円から作成依頼ができます。

Cocoonプロフィール設定の手順

まずは、Cocoonでプロフィールを設定する手順をみておきましょう。

ユーザープロフィールを設定する
サイドバーで「[C]プロフィール」を設定する
テーマファイルにCSSコードを入力する

では、順番に解説していきま～す。

①：ユーザープロフィールの設定

STEP

「ユーザー」→「プロフィール」をクリック

STEP

プロフィール文を入力する

STEP

プロフィール画像を選択する

STEP

表示したいSNSアカウントのURLを入力

②：サイドバーで「[C]プロフィール」を設定する

STEP

「外観」→「ウィジェット」をクリック

STEP

「プロフィール」をサイドバーに追加する

STEP

「プロフィール」をクリック

STEP

「画像を円形にする」をクリック

円形にすることで、アイコン画像まわりを円形にできます。（一般的には円形を使用）

チェックをしない場合は、アイコン画像まわりが四角形になりますよ。

③：テーマファイルにCSSコードを入力する

STEP

「外観」→「テーマファイルエディター」をクリック

STEP

「Cocoon Child:スタイルシート」にコードを貼り付ける

上記画像の赤枠内に、以下のコードを貼り付けます。

/* プロフィール */
.nwa .author-box {
    text-align: center;
    max-width: 100%;
}
.sidebar .author-box {
    border: none;
    border-radius: 4px;
    margin: 1em 0;
    line-height: 1.4;
    position: relative;
    padding: 1.4% 2% 1.8%;
}
.nwa .author-box .author-thumb {
    float: none;
    width: 100%;
    margin: 9px auto 0;
    background: url(https://p-house.jp/wp-content/uploads/2022/05/Wordpress-theme-9.png)center no-repeat;
    background-size: cover;
    height: 0;
    padding-top: calc(100%*350/700);
    position: relative;
}
.sidebar .author-thumb img {
    border: 3px solid #fff;
    width: 30%;
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -25%;
}
.nwa .author-box .author-content {
    margin-top: 16%;
    font-size: 0.9em;
}
.author-name {
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 10px;
}
.author-box .author-name a {
    text-decoration: none;
    color: #333;
}
.author-box p {
    margin-top: 0.3em;
    line-height: 1.6;
}
.author-box p a {
    text-decoration: none;
    color: #008cee;
}
.author-box p a:hover {
    text-decoration: underline;
    color: #008cee;
}

プロフィールの背景画像については、18行目の（）内で設定します。（画像URLを貼り付け）

なお、画像URLを取得する方法は、下記です。