Cocoonでは、パソコン画面上部に表示されるアイコン(サイトアイコン)を簡単に変更することができます。
上の画像はCocoonの初期状態です。
オリジナルにするとこんな感じにできます。
この設定をしておくと、タブのアイコン（ファビコン）だけでなく、スマホのホーム画面にページのショートカットを追加したときのアイコンにも反映されます。
小さなアイコンですが、一目でサイトの見分けがつくのでオリジナルのものに設定しておくのがよいでしょう。
この記事では、Cocoonのサイトアイコンをオリジナル画像に変更する方法を解説します。以下の手順で進めてみてください。
設定したい画像を用意する
画像のサイズは512×512ピクセル以上の正方形がベストです。
長方形だと一部カットすることになります。
よしくまは正方形の画像作成に、PhotoScape X(フォトスケープ)を使うことが多いです。まあまあ操作が簡単、無料でいろいろな編集もできます。
正方形の切り抜きをするだけなら、Windowsパソコンに導入されているペイント3Dも簡単でおすすめです。
画面がシンプルなので、画像編集にむずかしさを感じている人にも扱いやすいと思います。
軽く手順を説明しますと、
- メニューから正方形に切り抜きしたい画像を開く
- トリミングをクリック
- トリミングの比率から1:1を選択
- 幅か高さを決める
- 画像の上で切り抜きの範囲を決めて「完了」をクリック
というステップになります。
ペイント3Dは、画像やテキストの挿入もできますが、一度貼り付けるとドラッグで移動できなくなるので慎重に編集しましょう。
画像の切り抜きについては、以下の記事で詳しく解説しています。
サイトアイコンを設定する
正方形の画像が用意できたら、あとは簡単ですよ。管理画面から設定の手順に進みましょう。
「外観」⇒「カスタマイズ」をクリックします。
画面左側の「サイト基本情報」をクリックします。
「サイトアイコンを選択」をクリックします。
用意していた画像ファイルをアップロードして、右下の「選択」をクリックします。
プレビューを確認して、よければ「切り取らない」を選択します。
サイトを表示して確認してみましょう。
こんなふうに変更できたでしょうか？
Cocoonのサイドバーにプロフィール画像を設置している人は、同じ画像をサイトアイコンにするのもよいかと思います。
自分のブログっていうのが分かりやすくていいですね。
よしくまブログでは、ほかにもCocoonのカスタマイズを解説していますので、関連記事もチェックしてみてください。
コメント