> デザインが綺麗でおしゃれ!評判のSWELLをレビュー!

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

Cocoonプロフィールの設置

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

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

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

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

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

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

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

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

Cocoonの使い方マニュアル

テーマ名WordPressテーマ「Cocoon」
価格無料
開発者わいひらさん(@MrYhira
タップできる目次

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

プロフィール例

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

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

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

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

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

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

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

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

STEP
「ユーザー」→「プロフィール」をクリック
プロフィール
STEP
プロフィール文を入力する
プロフィール情報
STEP
プロフィール画像を選択する
プロフィール画像
STEP
表示したいSNSアカウントのURLを入力
SNS

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

STEP
「外観」→「ウィジェット」をクリック
ウィジェット
STEP
「プロフィール」をサイドバーに追加する
プロフィールウィジェット
STEP
「プロフィール」をクリック
位置調整
STEP
「画像を円形にする」をクリック
画像を円にする

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

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

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

STEP
「外観」→「テーマファイルエディター」をクリック
テーマファイルエディター
STEP
「Cocoon Child:スタイルシート」にコードを貼り付ける
CSS貼り付け

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

/* プロフィール */
.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を取得する方法は、下記です。

  1. WordPress管理画面から「メディア」→「ライブラリ」をクリック
  2. 背景に使いたい画像をクリック(ない場合はアップロード)
  3. ファイルのURLをコピー
STEP
以上、これでプロフィールの設定ができました。
プロフィール設定完了

▼今回参考にした記事▼

Cocoonのカスタマイズが難しいなと思ったら・・・

Cocoonでのカスタマイズが難しいなぁ・・・と思っているなら、当サイトで使用しているSWELLがオススメです。

今回のようにCSSなどのコードを使わなくても簡単にオシャレにできます。

他の細かいところまでオシャレなので、見た目にこだわりたいなら、超おすすめなWordpressテーマ。

ぜひ、一度SWELLの公式サイトを覗いてみてくださいね。

\ Cocoon開発者もイチオシする有料テーマ /

Cocoon開発者が、Cocoonからの移行先として推奨しているテーマでもあります。

まとめ|Cocoonプロフィールをカスタマイズ~!

今回は、Cocoonでのプロフィールをオシャレにカスタマイズする方法を解説しました。

コードを使用するので、ややハードルが高くはなりますが、実際のところはコピペするだけなので簡単です。

ぜひこの機会に、Cocoonのプロフィールをカスタマイズして、気に入ったブログを手に入れちゃってくださいね。

では、また!

時短に繋がる、超高機能Wordpressテーマ。

Wordpressテーマ「SWELL」の画像

SWELLはオシャレで、非常に使いやすく、時短に繋がる生産性高いWordpressテーマ。

しかも、開発者の熱意が素晴らしく、常に新しい機能が追加され続けています。

17,600円と一見安くはないものの、その機能や生産性などの魅力を考慮すれば、むしろ安いとすら感じます。

あなたも、二度と手放せなくなるWordpressテーマ「SWELL」の感動を味わってみて下さい。

\いま最高のWordpressテーマ/

※有料テーマの中で一番おすすめ

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

CAPTCHA

タップできる目次
閉じる