WordPressのテーマ
cocoonでブログを作ったけど
ファビコンやサイトアイコンは
どのぐらいのサイズで
どうやって作ればいいんだろう、、、
cocoonなら
サイトアイコンとして
512px × 512px
で画像を準備すればよいぞ！
512px × 512pxですね！
でも、アイコンの画像を
自分で作るスキルは無いし
誰かに作成をお願いするか、、、
スキルなどいらん！
アイコン作成のツールも色々あるし
誰でもイイ感じのアイコンを
作成することができるぞ！
ここではCanvaという
基本無料のサービスを利用して
アイコンを作る流れを
紹介しよう！
ファビコン作成の流れ
まずは、ファビコン作成の流れを説明します。
なお、ファビコンと言うと一般的にはブラウザのタブやブックマーク一覧に表示される小さいアイコンのことを指します。
スマホではサイトのページをホーム画面に追加するとアプリのようにアイコンが表示されますが、こちらのアイコンとひっくるめてサイトアイコンと呼ぶことにします。
以下がサイトアイコン作成の流れです。
アイコン作成まで３ステップ
WordPressの設定に４ステップです！
- Canvaの無料登録をする
- Canvaでアイコンをデザインする
- 作成したアイコンをダウンロードする
また、作成したアイコンをcocoonで登録するには続けて以下の流れで行います。
- アイコンをWordPressにアップする
- 「外観」＞「カスタマイズ」へ進む
- 「サイト基本情報」へ進む
- 「サイトアイコン」にアイコンを登録する
それでは１つずつ詳しく説明していきましょう！
Canva（キャンバ）の無料登録を行う
Canva（キャンバ）の登録方法は、
大きく２通りあります。
１つは、webページから
もう１つは、アプリから
登録する方法です。
それぞれの登録方法を紹介します！
Canvaのサイトから登録する
まずはCanvaのページに行って
無料登録を行います。
以下の流れで登録しましょう！
- 「無料で登録する」をクリック！
- メールアドレス等で登録完了！
※メールアドレスの他にも
GoogleアカウントやAppleアカウント、
Facebookアカウントで登録することもできます。
お好きな方法をお選びください！
スマホアプリから登録する
Canvaは、iPhoneアプリも
Androidアプリも
どちらも準備されています。
まずは、App StoreやGoogle Playから
Canvaアプリをダウンロードしましょう！
その後は以下の流れで登録します！
- アプリをダウンロード！
- メールアドレス等で登録！
※スマホアプリ版もサイトと同様
メールアドレスの他にも
AppleアカウントやGoogleアカウント
Facebookアカウントで登録することが可能です！
【参考】Canva（キャンバ）とは
無料で使えて誰でも手軽に
ロゴやポスターなどをデザインできる
オンラインのビジュアルツールキットです。
webブラウザだけでなく
スマホアプリも提供されているので、
好みの方法でデザインを作成することができます。
基本的には無料でいろいろなデザインを
作成することができますが、
有料のProプランにアップグレードすれば
Canvaの機能をフルに活用することができます。
とりあえず、
サイトアイコン作成にあたっては、
無料プランで十分です！
Canva（キャンバ）でアイコンを作成する
webブラウザ版とスマホアプリ版
それぞれのサイトアイコンの作成方法を記載します！
webブラウザ版canvaでのアイコン作成
- 「デザインを作成」をクリック
- 「カスタムサイズ」をクリック
- 「幅」「高さ」ともに「512」を入力
- 単位は「px」を選択
- 「新しいデザインを作成」をクリック
- 「指定したサイズの描画エリア」が表示される
- 好きにデザインする
あとは好きにデザインすればイイのですが、
ガジェットユートピアではシンプルに
「背景黒」「ガ」一文字を白抜きで
サクッと作成しました。
簡単なアイコンの作成手順を記載しておきます。
- 描画エリアをクリック
- 「背景色」で好きな色を選択
- 「テキストボックスを追加」
- 「テキスト」を入力
- 「フォント」「サイズ」「色」を調整
- アイコン完成！
スマホアプリ版canvaでのアイコン作成
スマホアプリ版も作成の流れはwebブラウザ版とほぼ同じです。
- 「＋」アイコンをタップ
- 「カスタムサイズ」をタップ
- 「幅」「高さ」ともに「512」を入力
- 単位は「px」を選択
- 「新しいデザインを作成」をタップ
- 「指定したサイズの描画エリア」が表示される
- 好きにデザインする
以下はガジェットユートピアのサイトアイコン作成の流れです。
参考にしてください！
- 「描画エリア」をタップ
- 「カラー」をタップ
- 「好きな背景色」を選択
- 「テキスト」をタップ
- 「テキスト」を入力
- 「フォント」「サイズ」「色」を調整
- アイコン完成！
作成したアイコンをダウンロードする
アイコンが完成したらダウンロードアイコンからダウンロードします。
ファイル形式は「PNG」にしておきましょう。
※スマホアプリ版はデフォルトPNGで保存されます。
webブラウザ版canvaでは、
「ファイル」＞「ダウンロード」
からダウンロードできます。
スマホアプリ版canvaでは、
「ダウンロードアイコン（下矢印）」
からダウンロードできます。
作成したアイコンをWordPressにアップする
ダウンロードしたアイコンは、
WordPressのメディアライブラリに
追加しておきましょう。
画像のアップロード方法は、
通常の画像と同じ方法で
アップロードします。
- WordPress管理画面に入る
- 「メディア」＞「ライブラリ」
- 「新しいメディアファイルを追加」
- 作成したアイコンをアップ！
「外観」＞「カスタマイズ」へ進む
WordPress管理画面から
「外観」＞「カスタマイズ」へと進みます！
- WordPress管理画面に入る
- 「外観」＞「カスタマイズ」
「サイト基本情報」へ進む
外観メニューから「サイト基本情報」へ進みます。
- 「サイト基本情報」をクリック
「サイトアイコン」を登録する
「サイトアイコン」にて
アップロードしたサイトアイコンを設定する！
- 「サイトアイコンを選択」をクリック
- アップロードしたサイトアイコンを設定する
まとめ
サイトアイコンは、
Canvaを利用することによって
誰でも簡単にサクッと作成することができます！
また、Canvaでアイコンを作成したら
応用してサイトロゴやアイキャッチ画像も
同じようにサクッと作成することができます！
ぜひCanvaを利用して
手間を掛けずに
イイ感じのロゴを作成してみましょう！
