【Jimdo】ジンドゥークリエイターでファビコンを設置する方法(ファビコン後編)
ジンドゥークリエイターのサイトにファビコンを設置したくてうずうずしている皆さんこんにちは。早速あなたのJimdoサイトに「ファビコン」を設置しましょう。
※「ファビコンてなあに?」「ファビコンを設置する意味あるの?」という方は前編をお読みください。
Jimdoでファビコンを設置する手順
ファビコンを設置するために、まずはファビコン画像を作成しなければなりません。手順は次の通りです。
ファビコンの元になるアイコン画像を調達(またはオリジナルで作成)
ファビコンの元になるアイコン画像を指定のサイズとファイル形式に変換
ジンドゥークリエイターの設定画面でファビコン画像をアップロード
Jimdoで設置できるファビコン画像のサイズ
ジンドゥークリエイターに設置できるファビコン画像のサイズは
16px × 16px / 32px × 32px の2種類です。
Jimdoで設置できるファビコン画像のファイル形式
ジンドゥークリエイターに設置できるファビコン画像のファイル形式は .png / .ico / .bmp の3種類です。
ファビコンの元になる画像を調達する方法
<素材サイトからファビコンの元画像を調達する>
ぼくは素材サイト(イラストACやシルエットAC)でイメージに合う画像を探してファビコンに使用させてもらうことが多いです。無料会員でも大量の広告を見せられながら無料で探すことができます。
イラストACやシルエットACのダウンロードでは、JPEG、PNG、EPSのファイル形式を選択できますが、PNG(.png)でダウンロードしてください。JPEGやEPSのファイル形式だとジンドゥークリエイターでファビコンを設置できないためです。
<オリジナルでファビコン画像を作成する>
少し手間がかかりますがオリジナルでファビコンを作成することもできます。画像ソフトを使って自分で作成するか、専門家に依頼しましょう。
ペイント等のお絵描きソフトで正方形サイズの画像を作成する(無料)
favicon.cc (↓)のようなファビコン作成サイトを利用する(無料)
ココナラ(↓)等でファビコン作成を依頼する(1,000円程度~)
ファビコンの元になるアイコン画像を指定のサイズとファイル形式に変換する方法
ファビコン専用のサイズ変換サイトがあります。よくお世話になるのが「fabicon.ico」です。理由は「ファビコン 作成」でGoogle検索すると最上位に表示されるから。早くて便利です。いつもお世話になっております。
Jimdoの設定画面でファビコン画像をアップロードする方法
ジンドゥークリエイターの設定画面を開きます。
基本設定 > 共通項目 > ファビコン
を選択してファビコン画像をアップロードすれば完了です。このあと詳述します。
実際にJimdoで使うファビコンを作成してみます
ジンドゥーカフェとはまったくの無関係で1ユーザーが勝手に運営している「ジンドゥー茶屋」のホームページをジンドゥークリエイター(無料プラン)で作成するので、ファビコンを設置してみます。
下記の手順で行います。
イラストACでお茶画像を検索してPNG形式でダウンロード
サイズ変換サイト「fabicon.ico」で32x32ピクセルのサイズに変換
ジンドゥークリエイターの設定画面でファビコンを設置
イラストACでファビコンの元になるお茶の画像を調達
今回お借りしたのがこちらの画像です。美味しそうなお茶です。
お茶のまわりにある余白をカットする
ダウンロードした画像は周囲にある「余白」部分の面積が大きく、このままだとお茶本体の面積が小さくなっています。なのでWindows付属の画像編集ソフト「フォト」で余白部分をカットします。
余白カット後がこちらです。
余白部分をカットすることで、お茶本体が大きくなりました。これでファビコン画像のちっちゃなサイズにしてもお茶だと認識してもらえます。
「fabicon.ico」でファビコン画像サイズに変換
ジンドゥークリエイターでは16x16ピクセルまたは32x32ピクセルのファビコン画像を使用できます。32x32用画像ファイルを選択をクリックして、元になる画像をアップロードします。
だいたいのダウンロード画像はサイズがめちゃくちゃでかいので、アップロードするとパソコン画面いっぱいに広がり一瞬なにが起こった分からなくなりますが、冷静に下にスクロールしましょう。
作成ボタンがあります。クリックするとサイズ変換してくれます。
できました!サイズ変換された画像を保存します。ダウンロードボタンをクリックしてもよいですし、右クリックして名前を付けて保存してもOKです。
できたファビコン画像(32x32)がこちらです。ちっちゃくてかわいい。
なお、余白カットしなかった画像がこちら。上と比べると印象が弱いです。
Jimdoの設定画面でファビコン画像をアップロード
ジンドゥークリエイターの設定画面を開きます。
基本設定 > 共通項目 > ファビコン を選択します。
ファビコン画像を選択してアップロードしてください。
よく見ると、ページ内の画像もジンドゥーロゴの【J】から【茶】に変更されています。右下の保存ボタンを押せば完了です。
Jimdoホームページでファビコンを設定した後は
正しく設定されているかチェックしてみてください。ブラウザのタブやブックマークでファビコンが表示されていればOKです。
「Google」「Yahoo!」「note」「Instagram」といった大手有名サイトのファビコンと並んで「ジンドゥー茶屋」が存在しています。
名もなき数多のサイトのひとつから、存在を認識してもらえるサイトの第一歩を踏み出した感じがします。一目で分かりますよね。嬉しいです。
しかし、色遣いがくっきりしたデザインの大手有名サイトのファビコンたちと並べてみると、ぼやけた印象で存在感が負けていますね。。。
ファビコンの役割は存在を示してブランディングやユーザビリティの役に立つことでした。ファビコンの色遣いを調整してメリハリのある目立つデザインで作り直そうと思います。
最後までお読みいただきありがとうございました。
さっそくファビコンを作成して設置してみてください!
+ + + + + おすすめのJimdo本 + + + + +
いちばんやさしいJimdoの教本 人気講師が教える本格ホームページの作り方 「いちばんやさしい教本」
ジンドゥークリエイター 仕事の現場で使える! カスタマイズとデザイン教科書 (Webデザイナー養成講座)
以下の6冊は、いずれもJimdoに精通した先生方の書籍です。どれも分かりやすく初心者向けに書かれています。順不同です。肌にあうものを選択してマスターしてください。
今すぐ使えるかんたん ジンドゥー Jimdo 無料で作るホームページ[改訂5版]
10日で作るかっこいいホームページ Jimdoデザインブック 改訂新版
小さなお店&会社のホームページ Jimdo入門
見た目にこだわる Jimdo入門 Kindle版
はじめてのホームページらくらく作成ガイド〈改訂版〉: 15分×7日間 無料でできる
今すぐ使えるかんたん ぜったいデキます! ホームページ作成 超入門