> 時を生みだすテーマ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テーマ「SWELL」の特徴
総合評価
( 5 )
メリット
  • とってもオシャレなサイトが誰でも作れる
  • 構造化機能も充実!SEO対策をしやすい
  • 高速化のプロを顧問!ページスピードが速い
  • 時短機能も充実!記事執筆を効率化できる
  • ブロックエディター対応度ナンバーワン
  • ブログ運営が楽しくなる
  • 初心者でもカスタマイズしやすい
  • 買い切り、複数サイトに使える
  • アプデが頻繁で進化が止まらない
デメリット
  • 値段が安くない(17,600円)
  • AMP非対応
  • 個人開発

SWELLは美しいデザインで、何もしなくても細かいところまでオシャレです。

そして、とても使いやすく、書きやすく、時短に繋がる生産性高いWordPressテーマ。

まさに時間を生み出してくれるテーマといえるでしょう。

時間=お金です。つまり、SWELLはタイパが良くて収益力の高いテーマということ。

テーマ選びで後悔したくない方は、ぜひSWELLで優越の旅へ。

\ 綺麗なデザインで他を魅了 /

※ブログを効率化でき、収益力がUPします!

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

コメント

コメントする

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

CAPTCHA

見たいところに飛べる目次