【Cocoon】プロフィールを設置する方法|オリジナル画像を設定して信頼度UP!

「プロフィールを設定したい」

「プロフィールにリンクを挿入するには?」

「プロフィール画像が表示されない、どうして?」

この記事では、そんな方に向けて、Cocoonでプロフィールを設置する方法を解説します。

かめコンパス

こんにちは、かめコンパスです!

この記事を読めば、プロフィールを設置はもちろん、

  • 画像をどうやって準備するのか
  • 表示されない対処法が分かったり
  • リンクを挿入したり

できるようになります。

私もブログ始めたての頃は、いろいろ調べて下の画像のようにプロフィールを設置できました。

当ブログのプロフィール
当ブログのプロフィール

どこよりも分かりやすく書いている自信がありますので、ぜひ最後まで読んでマスターしてください!

\あなた好みのプロフィールアイコンが見つかる/

/今すぐ無料で会員登録\

また以下の記事では、Cocoonの使い方や設定方法をブログ運営歴・公開した記事数別でまとめて紹介しています。

目次

Cocoonプロフィールの設定方法

ます、Cocoonでプロフィールを設定していきます。

STEP

WardPress管理画面で、ユーザープロフィールの順にクリックする

「ユーザー」、「プロフィール」がある場所
STEP

表示されたページでプロフィール設定をする

表示されたページでプロフィール設定をする様子
STEP

設定し終えたら、プロフィールを更新をクリックする

「プロフィールを更新」がある場所

プロフィールの設定完了!

プロフィールで設定できる項目は、下記6つあります。

それぞれ詳しく解説します。

著者名を決める

「ニックネーム」、「ブログ上の表示名」がある場所
  • 「ニックネーム」=著者名
  • 「ブログ上の表示名」=表示させる著者名

の2つを決めます。

かめコンパス

ユーザーが覚えやすい名前がいいね

メールアドレスを入力する

「メール」がある場所

「メール」に、自分のメールアドレスを入力します。

かめコンパス

私の場合、プライベートとは別にビジネス用のメールアドレスを作ったよ

SNSアイコンを設置する

SNSのURLを入力する場所

SNSをやっている人は、SNSのURLも入力しましょう。

かめコンパス

SNS経由で自分のブログを見てもらえるよ

プロフィール情報を書く

「プロフィール情報」がある場所

「プロフィール情報」に、

  • 出身地や趣味
  • 実績や経歴
  • ブログの内容
  • ブログの運営目的

などをかんたんに書きましょう。

かめコンパス

一文を短め、箇条書きをしたら読みやすくなるよ

プロフィール画像をアップロードする

「プロフィール画像のアップロード」がある場所

「プロフィール画像のアップロード」に、著者のアイコンを設定します。

かめコンパス

自分の写真じゃなくてもいいよ

プロフィール用の固定ページにリンクさせる

「プロフィールページURL」がある場所

「プロフィールページURL」に、別で作ったプロフィール用の固定ページをリンクさせます。

プロフィール用の固定ページの作り方は、後ほど解説します。

かめコンパス

リンクすれば、著者名をクリックでプロフィール用ページに誘導できるよ

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

Cocoonでプロフィールの設定を終えたら、次はサイドバーにプロフィールを表示させていきます。

STEP

WardPress管理画面で、外観ウィジェットの順にクリックする

「外観」、「ウィジェット」がある場所
STEP

ウィジェット内にあるプロフィールをプルダウン⇒「サイドバー」を選び、ウィジェットを追加をクリックする

「プロフィール」、「サイドバー」、「ウィジェットを追加」がある場所

プロフィールを表示させる場所は、

  • サイドバー以外に
  • 本文中
  • 投稿関連記事付近

などにも設定できます。

STEP

サイドバープロフィールをプルダウンし、

  • タイトル
  • 肩書きラベル
  • 画像を円形にする
「タイトル」、「肩書きラベル」、「画像を円形にする」が表示される場所

の3つを設定⇒保存をクリックする

かめコンパス

画像の枠は円形か四角か選べるよ

「タイトル」、「肩書きラベル」、「画像を円形にする」がある場所

プロフィールをサイドバーに設置完了!

Cocoonプロフィール画像を準備する方法

Cocoonのプロフィールで設定する画像は、下記3つの中から準備します。

それぞれ詳しく解説します。

プロフィール画像を自分で用意・作成する

Cocoonのプロフィール画像を自分で用意・作成する場合、デザインツール「Canva」を使えばかんたんに準備できます。

Canvaでは、無料で

  • 自分の写真をデザインしたり
  • テンプレート画像やイラストを使えたり

できます。

かめコンパス

私もCanvaはよく使っているツールの1つだよ!

プロフィール画像を

  • 自分で用意した画像を使いたい!
  • 自分でデザインしたい!

という人は、Canvaを使ってみてください。

Canvaで作成する場合は、必ず商用利用ページに目を通しましょう。

Canvaで自分の画像やテンプレート画像の使い方は、下の記事を参考にしてください。

フリー素材をプロフィールに使う

自分でイラストを描けない…という人は、商用利用できるフリー素材を使ってみましょう。

おすすめのサイトは、下記2つです。

フリー素材を使うメリットは、

  • 誰でも無料で画像を使える
  • すぐにプロフィール画像を用意できる
  • 画像を加工できる

などがあります。

かめコンパス

私もフリー素材のサイトをお気に入り登録してるよ

自分でイラストを描けない人は、フリー素材のサイトをのぞいてみてください。

作成依頼したイラストをプロフィールに使う

オリジナル画像を用意したいが、自分では描けない…という人は、で作成依頼するのもおすすめできます。

ココナラでイラストを作れば、

  • 唯一無二のオリジナル画像を使える
  • 自分好みのイラストを描いてもらえる
  • 商用利用できるか気にしなくていい

などがあります。

2,000円~5,000円で作成依頼できるアイコン画像もある(2024年2月5日時点)ので、まずはご覧になってください。

\予算・ジャンル別/

/ランキング・おすすめ順\

Cocoonでプロフィール(画像)が表示されない原因の対処法

Cocoonでプロフィール(画像)が表示されない原因は、下記2つ考えられます。

  • ウィジェットで非表示設定している
  • Lazy Load機能が二重で働いている

それぞれの対処法を詳しく解説します。

ウィジェットで非表示設定している

プロフィールが表示されない場合、ウィジェットで非表示設定していることが考えられます。

STEP

WordPress管理画面で、外観ウィジェットの順にクリックする

「外観」、「ウィジェット」がある場所
STEP

プロフィールをプルダウンし、「ウィジェットの表示」を確認する

「プロフィール」、「ウィジェットの表示」がある場所

「チェック・入力したページで非表示」で任意の項目に✔していると、プロフィールが表示されないです。

ですので、✔を外すとプロフィールが表示されます。

かめコンパス

プロフィールを特定のページだけ非表示にできるよ

Lazy Load機能が二重で働いている

プロフィール画像が表示されない原因は、Lazy Load機能が二重で働いていることも考えられます。

Lazy Loadとは…サイトの画像を遅延読み込み表示させることです。

ですので、Lazy Loadが2つ以上有効になっている場合、無効にすればプロフィール画像が表示されます。

かめコンパス

プロフィール以外の画像が表示されない場合も、同じやり方で解決!

Lazy Load設定は、

  • WordPressテーマ「Cocoon」
  • プラグイン「EWWW Image Optimizer」
  • レンタルサーバー「ConoHa WING」

の3項目あります。

下記が、Lazy Loadを無効にする方法です。

ご自身が利用しているものだけ確認してください。

\タブの切り替え/

STEP

WordPress投稿画面で、Cocoon設定高速化の順にクリックする

「Cocoon設定」、「高速化」がある場所
STEP

Lazy Loadを有効にするの✔を外す

「Lazy Loadを有効にする」がある場所
STEP

変更を保存をクリックする

「変更を保存」がある場所

これでLazy Loadを無効に設定完了!

かめコンパス

Lazy Loadの有効は1つだけで十分だよ!

Cocoonプロフィール用の固定ページを設置する方法

Cocoonでプロフィール用のページを設置する方法は、下記の2ステップです。

設置手順
  • 固定ページで作成・公開する
  • ヘッダーやフッターに設置する

それぞれ詳しく解説します。

固定ページで作成・公開する

STEP1

プロフィールを固定ページで作成・公開する方法は、下記の通りです。

STEP

WordPress管理画面で、固定ページ新規固定ページを追加をクリックする

「固定ページ」、「新規固定ページを追加」がある場所
STEP

内容を入力し、公開をクリックする

「公開」がある場所

下記が、当ブログのプロフィールです。参考にしてください!

STEP

プロフィールを固定ページで作成・公開完了!

プロフィールを固定ページで作成・公開できた様子

ヘッダーやフッターに設置する

STEP2

プロフィールをヘッダーやフッターに設置する方法は、下記の通りです。

STEP

WordPress管理画面で、外観メニューの順にクリックする

「外観」、「メニュー」がある場所
STEP

「新しいメニューを作成しましょう」をクリックする

「新しいメニューを作成しましょう」がある場所
STEP
  1. 「メニュー名」を入力する
  2. 「メニューの位置」を設定する
  3. メニューを作成をクリックする
「メニュー名」、「メニューの位置」、「メニューを作成」がある場所

「メニューの位置」は、プロフィールを

\タブの切り替え/

  • ヘッダーメニュー
  • ヘッダーモバイルボタン

に✔を入れる

かめコンパス

PCとスマホ両方に設定できるよ

STEP

固定ページにある「プロフィール」を✔し、メニューに追加をクリックする

プロフィールをチェックしている様子と、「メニューに追加」がある場所
STEP

メニューを保存をクリックする

「メニューを保存」がある場所
STEP

プロフィール用の固定ページを設置完了!

PC表示でヘッダーにプロフィール用の固定ページが設置された様子
ヘッダーに設置(PC版)
スマホ表示でヘッダーにプロフィール用の固定ページが設置された様子
ヘッダーに設置(スマホ版)
PC表示でフッターにプロフィール用の固定ページが設置された様子
フッターに設置(PC版)
スマホ表示でフッターにプロフィール用の固定ページが設置された様子
フッターに設置(スマホ版)

Cocoonプロフィールにリンクを挿入する方法

Cocoonでプロフィールにリンクを挿入するには、

<a href="リンク先のURL">リンクを貼るテキスト</a>

をプロフィール情報に入力させます。

プロフィール情報にコードを入力している様子

例えば、

  • 記事のURLに「プロフィールページのURL」
  • 表示する文字に「》プロフィールはこちら」

を入力すると、下の画像のようにリンクを挿入できます。

プロフィールにリンクが挿入された様子
かめコンパス

かんたんにリンクを挿入できるよ!

Cocoonプロフィールに関してよくある質問

Cocoonのプロフィールに関してよくある質問

です。

プロフィールの画像サイズは?

プロフィール画像の推奨サイズは、幅240×高さ240pxです。

画像サイズを変更したい場合は、デザインツール「Canva」で変更できます。

Canvaで画像サイズを変更する方法は、下の記事を参考にしてください。

プロフィールのリンクを消す方法は?

プロフィールにある下記のリンクを消す方法を紹介します。

  • feedly・RSS購読リンク
  • ホームボタン・SNSリンク
プロフィールにリンクが設置されている様子
かめコンパス

リンクの消し方はそれぞれ異なるよ

feedly・RSS購読リンクを消す

STEP

WordPress管理画面で、Cocoon設定SNSフォローの順にクリックする

「Cocoon設定」、「SNSフォロー」がある場所
STEP

「feedlyフォローボタンを表示する」と「RSS購読ボタンを表示する」の✔を外す

「feedlyフォローボタンを表示する」、「RSS購読ボタンを表示する」がある場所
STEP

変更をまとめて保存をクリックする

「変更をまとめて保存」がある場所
STEP

feedly・RSS購読リンクが消えた!

プロフィールにeedly・RSS購読リンクが消えた様子

ホームボタン・SNSリンクを消す

STEP

WardPress管理画面で、ユーザープロフィールの順にクリックする

「ユーザー」、「プロフィール」がある場所
STEP

「サイト」と「SNS各種URL」に入力されているURLを消す

「サイト」、「SNS各種URL」がある場所
STEP

ホームボタン・SNSリンクが消えた!

プロフィールにホームボタン・SNSリンクが消えた様子

まとめ:プロフィール作成で信頼度UP

今回は、Cocoonでプロフィールを設置する方法を紹介しました。

プロフィール画像をフリー素材から探したい人は、イラストACいらすとやがおすすめ。

オリジナル画像をプロフィールに設定し、自分のブログだと実感するうれしさをより味わいたい人は、で作成依頼するのがおすすめです。

作ったプロフィール画像は、

  • 吹き出し
  • ファビコン
  • SNSアイコン

にも使いまわせます。

かめコンパス

当ブログの吹き出しです

検索結果のページタイトルに表示される当ブログのファビコン
当ブログのファビコン

作ったプロフィール画像を吹き出しやファビコンに使いたい!という人は、下の記事も読んでみてください。

オリジナル画像を作って、本格的にブログを始めましょう!

\まずは無料で会員登録/

/300円割引クーポンもらえる\

かめコンパス

ためになったという人は“コメント”してくれると嬉しいです!

プロフィールを設置する方法の記事

この記事が気に入ったら
フォローしてね!

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

コメント

コメントする

目次