MENU

AIで文字起こし・議事録を効率化!Nottaの本音レビューを見る >>

AI文字起こしNottaは実際どう?本音レビュー >>

クリック

タップ

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

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

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

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

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

かめコンパス

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

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

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

できるようになります。

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

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

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

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

本記事はWordPressテーマ「」で作成しているので、デザインが抜群にオシャレです!

WordPressテーマ「SWELL」
  • 初心者でもおしゃれなサイトを作りやすい!デザイン知識なしでも楽しく始めやすい
  • 独自ブロックを多数搭載!プログラミング不要で記事作成をラクに進めやすい
  • 記事装飾が豊富で読みやすい!回遊率アップを狙いやすく収益化しやすい
  • 表示速度を意識した設計!SEO対策しながら快適に運営しやすい
  • 買い切り型で複数サイトに使える!追加費用を気にせず長く使いやすい

\初心者でもおしゃれなブログを作れる!/

/デザインや機能をチェック!\

>>SWELLの口コミ・評判・レビューを見る

>>CocoonとSWELLの比較9つを見る

この記事を書いた人

かめコンパス

  • 副業で210記事以上を公開し、月1万PVを達成したWordPressブロガー
  • 記事品質が企業にも評価され、27社から掲載依頼を受託
  • 利用歴1年以上のCocoonからへ移行し、オシャレなブログを実現

詳しいプロフィールを見る

𝕏(@kamecompass)を見る

目次

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円割引クーポンもらえる\

かめコンパス

ためになったという人は“𝕏フォロー”や“ブックマーク”してくれると嬉しいです!

本記事はWordPressテーマ「」で作成しているので、デザインが抜群にオシャレです!

WordPressテーマ「SWELL」
  • 初心者でもおしゃれなサイトを作りやすい!デザイン知識なしでも楽しく始めやすい
  • 独自ブロックを多数搭載!プログラミング不要で記事作成をラクに進めやすい
  • 記事装飾が豊富で読みやすい!回遊率アップを狙いやすく収益化しやすい
  • 表示速度を意識した設計!SEO対策しながら快適に運営しやすい
  • 買い切り型で複数サイトに使える!追加費用を気にせず長く使いやすい

\初心者でもおしゃれなブログを作れる!/

/デザインや機能をチェック!\

>>SWELLの口コミ・評判・レビューを見る

>>CocoonとSWELLの比較9つを見る

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

コメント

コメントする

目次