おにちゃん塾運営者に関する情報

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

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

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

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

本記事の内容

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

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

おにちゃん

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

記事の内容

サイト運営者

ブログアイコン例:おにちゃん
おにちゃん(22歳)
@onityanzyuku01

大学4年|経済学部(現在休学中)

おにちゃん塾を3年ほど運営しております。副業、フリーランス、独立までの情報を網羅していく予定です。

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

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

準備するもの
  • プロフィール画像
  • 自己紹介テキスト
おにちゃん

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


プロフィール画像

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

おにちゃん

おにちゃん塾で言うと
←この写真です。

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

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

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

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

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

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

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

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

おにちゃん

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


自己紹介のテキスト

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

おにちゃん塾で言うと、下記の部分です。

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

おにちゃん

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

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


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

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

おにちゃん

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

プロフィールで必要な項目
  1. 名:
  2. 姓:
  3. ニックネーム:
  4. ブログ上の表示名:
  5. プロフィール情報:
  6. プロフィール写真:

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

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

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

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

これで、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ボタンをカスタマイズしたい方は上記のコードで編集可能です!

おにちゃん

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

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

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


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

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

ココナラに掲載されている出品物

このように、ココナラでは3000円〜5000円でWordPressのカスタマイズ対応をしてくれます。

先ほどの画像の方のように、ココナラには沢山の案件をこなしている方が在籍しているので、カスタマイズ外注したい方はココナラを活用してみてください。

1分以内に完了!無料会員登録はこちら

まとめ:Cocoonプロフィールのカスタマイズ

ここまでで「【超簡単】Cocoonプロフィールのカスタマイズ|サイドバーに設置にしよう」の解説は以上です。

本記事で解説したことまとめ
  • Cocoonプロフィールを設置する前の準備物
  • Cocoonプロフィールを設置する方法
  • Cocoonプロフィールのカスタマイズ方法
おにちゃん

本記事は以上です。
本格的にサイドバー、及びCocoonをカスタマイズしたい方は下記の記事をご覧ください。


Cocoonユーザー向けTwitterアカウント

おにちゃん塾の運営者(@onityanzyuku01)ではブログ関連の情報を随時発信しています。

  1. ブログ運営
  2. アフィリエイト収益化
  3. SEO対策含むWebマーケティング
おにちゃん

上記を知りたい方はぜひフォローしてください。


Cocoonではないテーマでブログ運営したい方

Cocoon以外のテーマ、具体的には有料テーマでブログ運営してみたい方は「SWELL」をおすすめします。

おにちゃん

今、稼いでいるブロガー達はこぞってSWELLを活用しています。

デザイン性+機能面を考えると当然な気がします。
Cocoonを運営している凄腕のテーマ開発者とも提携しているので、間違い無いです。

有料テーマに挑戦したい方はSWELLがおすすめです。


Cocoonを本格的にカスタマイズしたい方

→プログラミングを学びましょう。

Cocoon含む、WordPressを扱うためには下記の言語が必要です。

  1. HTML
  2. CSS
  3. JavaScript(React)
  4. PHP(WordPress)
おにちゃん

おにちゃん塾で、すべての言語を学べます。
カスタマイズを本格的に始めたい方はぜひご覧ください。


\ おにちゃん塾に清き一票を /

おにちゃん塾はランキングサイトに登録しています。

役立ったと言う方はこちらのバナーをクリックしてください。
クリックするだけで、僕の順位が上がります(๑>◡<๑)

ブログランキング・にほんブログ村へ
URLをコピーする
URLをコピーしました!
記事の内容
閉じる