Cocoonのサイトアイコン(ファビコン)の【作り方】と【設定方法】

WordPress
記事内に広告が含まれています。

Cocoonで自分のサイトのタブや、ブログカードにでてくるアイコンが卵みたいなアイコンのなんだけど設定ってできるの?

WordPressテーマのCocoonでは、サイトアイコン(ファビコン)を設定することでロゴやアイコンを表示することができます。設定をしていないと、Cocoon(繭)のアイコンが表示されています。

管理人
管理人

この記事では、Cocoonでサイトアイコンの作り方、作ったサイトアイコンの設定方法を紹介します。

自分のサイトを検索してもらったときにでてくるアイコンになるので、設定してない方は設定しておきましょう。

あきら
あきら
この記事を書いた人

・ライブ参戦300回以上
・30代パパ
・親子でフェス参戦
・会社員しながらブログ
・Webサイトいじるの好き

Cocoonのサイトアイコン(ファビコン)の【作り方】と【設定方法】

この記事では、無料でも使える「Canva」というデザイン作成ツールを使って下記のロゴを作っていきます。

ロゴ

Canvaで作ったロゴをサイトアイコンに設定していきます。

Cocoonのサイトアイコン【作り方】

「Canva」を使ってサイトアイコンを作っていきます。

サイトアイコンのサイズ

サイトアイコンに使う画像のサイズは

512px × 512px のサイズがおすすめです。

Canvaに登録

Canvaは公式サイトから登録します。

「無料で登録する」をクリックし、登録方法を3つの中から選んで登録していきます。

  • 「Facebookで登録」
  • 「Googleアカウントで登録」
  • 「メールアドレスで登録」

登録できたら、Canvaのアプリを使って作っていきます。

新しいデザイン

Canvaを開いたら「真ん中下の+」をタップします。

プラスタップ

「カスタムサイズ」をタップして画像サイズを指定することができます。

カスタムサイズタップ

「幅」と「高さ」を指定することができるので、「幅」→「512」「高さ」→「512」と入力します。「px」はそのままで大丈夫です。

入力したら「新しいデザインを作成」をタップします。

新しいデザインを作成

これで、土台となる白紙のデザインが完成です。

ベースのデザインを決める

白紙のデザインができたので、装飾していきます。

「左下の+」をタップします。

土台

「テンプレートを検索」の欄があるので、「ロゴ」と入力します。

テンプレートを検索

入力すると、デザインがたくさんでてきます。

自分のイメージにあったデザインを探していきます。

デザインの右下に「プロ」と表示されているデザインは有料のデザインになるので注意しましょう。

ベースのデザイン

今回は、このデザインをベースに装飾を変更していきます。

使わない素材を削除

使わない素材を削除していきます。

下記のフォークとスプーンのところをタップすると、枠とゴミ箱マークがでてくるのでゴミ箱マークをタップします。

フォークとスプーンの素材が削除されます。

素材を削除

同じように文字のところをタップすると、枠とゴミ箱マークがでてくるのでゴミ箱マークをタップします。

文字のところが削除されます。

文字削除

これで、使わない素材を削除できました。

丸だけ

文字を入力 バランスを整える

文字を入力して、バランスを整えていきます。

「左下の+」をタップします。

プラスタップ

下の欄の「テキスト」をタップします。

テキストタップ

上の方の「見出しを追加」をタップします。

見出し追加タップ

デザインに「見出しを追加」とでてくるのでタップします。青色の枠がでてくるのを確認します。

青色の枠あります

青色の枠がでてると、文字の入力ができるようになるので自分にあった文字を入力します。

文字入力

文字の入力ができたら、そのまま文字のバランスを整えていきます。

下記の黄色の矢印を動かすと「フォントサイズ」が変更できます。赤い矢印を動かすと「文字の幅」が変更できます。

バランスを整える

これでロゴの完成です。

ロゴ完成

ダウンロードする

ロゴが完成したので、ダウンロードします。

デザインの右上にある「⬇」をタップしてダウンロード開始になります。

ダウンロード

これでロゴの準備ができました。

Cocoonのサイトアイコン【設定方法】

WordPressの管理画面から「外観」→「カスタマイズ」をクリックします。

カスタムサイズクリック

「サイト基本情報」をクリックします。

サイト基本情報をクリック

「サイトアイコンを選択」をクリックします。

画像が選べるので先程Canvaで作ったロゴを選びます。

サイトアイコンを選択

ロゴを選択すると、先程の画面に表示されます。

表示されたのを確認して「公開」をクリックします。

公開をクリック

「公開済み」に表示が変わったら設定完了になります。

完了

これで、Cocoonのサイトアイコンの作り方と設定方法の紹介を終わります。

サイトアイコンが「公開済み」になっていても、実際に反映されるまで時間がかかることがあります。

 


まだ、アイキャッチ画像の作り方がわからない方はこちら

コメント

タイトルとURLをコピーしました