見出し画像

【Jimdo】ジンドゥークリエイターでファビコンを設置する方法(ファビコン後編)

ジンドゥークリエイターのサイトにファビコンを設置したくてうずうずしている皆さんこんにちは。早速あなたのJimdoサイトに「ファビコン」を設置しましょう。

※「ファビコンてなあに?」「ファビコンを設置する意味あるの?」という方は前編をお読みください。


Jimdoでファビコンを設置する手順


ファビコンを設置するために、まずはファビコン画像を作成しなければなりません。手順は次の通りです。

  1. ファビコンの元になるアイコン画像を調達(またはオリジナルで作成)

  2. ファビコンの元になるアイコン画像を指定のサイズとファイル形式に変換

  3. ジンドゥークリエイターの設定画面でファビコン画像をアップロード


Jimdoで設置できるファビコン画像のサイズ

ジンドゥークリエイターに設置できるファビコン画像のサイズは
16px × 16px / 32px × 32px の2種類です。

※48x48ピクセルのファビコン画像は設置できません。

Jimdoで設置できるファビコン画像のファイル形式

ジンドゥークリエイターに設置できるファビコン画像のファイル形式は .png / .ico / .bmp の3種類です。

※ .jpg(JPEG)/ .gtf(GIF)は非対応です。他のサイトではともかくジンドゥークリエイターのファビコンとしては設定できません。


ファビコンの元になる画像を調達する方法


<素材サイトからファビコンの元画像を調達する>

ぼくは素材サイト(イラストACやシルエットAC)でイメージに合う画像を探してファビコンに使用させてもらうことが多いです。無料会員でも大量の広告を見せられながら無料で探すことができます。

イラストACやシルエットACのダウンロードでは、JPEG、PNG、EPSのファイル形式を選択できますが、PNG(.png)でダウンロードしてください。JPEGやEPSのファイル形式だとジンドゥークリエイターでファビコンを設置できないためです。

※利用に際しては権利上の問題がないことをご自身で確認してくださいね。


<オリジナルでファビコン画像を作成する>

少し手間がかかりますがオリジナルでファビコンを作成することもできます。画像ソフトを使って自分で作成するか、専門家に依頼しましょう。

  • ペイント等のお絵描きソフトで正方形サイズの画像を作成する(無料)

  • favicon.cc (↓)のようなファビコン作成サイトを利用する(無料)

  • ココナラ(↓)等でファビコン作成を依頼する(1,000円程度~)


ファビコンの元になるアイコン画像を指定のサイズとファイル形式に変換する方法

ファビコン専用のサイズ変換サイトがあります。よくお世話になるのが「fabicon.ico」です。理由は「ファビコン 作成」でGoogle検索すると最上位に表示されるから。早くて便利です。いつもお世話になっております。

fabicon.icoでは 48px × 48px を指定できますが、ジンドゥークリエイターで48x48ピクセルのファビコン画像は使用できないので注意。


Jimdoの設定画面でファビコン画像をアップロードする方法

ジンドゥークリエイターの設定画面を開きます。
基本設定 > 共通項目 > ファビコン
を選択してファビコン画像をアップロードすれば完了です。このあと詳述します。


実際にJimdoで使うファビコンを作成してみます


ジンドゥーカフェとはまったくの無関係で1ユーザーが勝手に運営している「ジンドゥー茶屋」のホームページをジンドゥークリエイター(無料プラン)で作成するので、ファビコンを設置してみます。

下記の手順で行います。

  1. イラストACでお茶画像を検索してPNG形式でダウンロード

  2. サイズ変換サイト「fabicon.ico」で32x32ピクセルのサイズに変換

  3. ジンドゥークリエイターの設定画面でファビコンを設置

イラストACでファビコンの元になるお茶の画像を調達

今回お借りしたのがこちらの画像です。美味しそうなお茶です。

お茶のまわりにある余白をカットする

ダウンロードした画像は周囲にある「余白」部分の面積が大きく、このままだとお茶本体の面積が小さくなっています。なのでWindows付属の画像編集ソフト「フォト」で余白部分をカットします。

余白がでかいのでお茶本体が小さく目立たない
ギリギリまで余白をカット(縦横比は1:1で)


余白カット後がこちらです。

余白部分をカットすることで、お茶本体が大きくなりました。これでファビコン画像のちっちゃなサイズにしてもお茶だと認識してもらえます。

「fabicon.ico」でファビコン画像サイズに変換


ジンドゥークリエイターでは16x16ピクセルまたは32x32ピクセルのファビコン画像を使用できます。32x32用画像ファイルを選択をクリックして、元になる画像をアップロードします。

繰り返しますが48x48はダメよ

だいたいのダウンロード画像はサイズがめちゃくちゃでかいので、アップロードするとパソコン画面いっぱいに広がり一瞬なにが起こった分からなくなりますが、冷静に下にスクロールしましょう。

でかっ!

作成ボタンがあります。クリックするとサイズ変換してくれます。

できました!サイズ変換された画像を保存します。ダウンロードボタンをクリックしてもよいですし、右クリックして名前を付けて保存してもOKです。

できたファビコン画像(32x32)がこちらです。ちっちゃくてかわいい。

なお、余白カットしなかった画像がこちら。上と比べると印象が弱いです。

画像サイズは同じ32x32だけど余白部分が大きいので印象が弱い。


Jimdoの設定画面でファビコン画像をアップロード

ジンドゥークリエイターの設定画面を開きます。
基本設定 > 共通項目 > ファビコン を選択します。

ファビコン画像を選択してアップロードしてください。

よく見ると、ページ内の画像もジンドゥーロゴの【J】から【茶】に変更されています。右下の保存ボタンを押せば完了です。

Jimdoホームページでファビコンを設定した後は


正しく設定されているかチェックしてみてください。ブラウザのタブやブックマークでファビコンが表示されていればOKです。

「Google」「Yahoo!」「note」「Instagram」といった大手有名サイトのファビコンと並んで「ジンドゥー茶屋」が存在しています。

名もなき数多のサイトのひとつから、存在を認識してもらえるサイトの第一歩を踏み出した感じがします。一目で分かりますよね。嬉しいです。

茶&茶

しかし、色遣いがくっきりしたデザインの大手有名サイトのファビコンたちと並べてみると、ぼやけた印象で存在感が負けていますね。。。

ファビコンの役割は存在を示してブランディングやユーザビリティの役に立つことでした。ファビコンの色遣いを調整してメリハリのある目立つデザインで作り直そうと思います。

最後までお読みいただきありがとうございました。
さっそくファビコンを作成して設置してみてください!



+ + + + + おすすめのJimdo本 + + + + +

いちばんやさしいJimdoの教本 人気講師が教える本格ホームページの作り方 「いちばんやさしい教本」

以前、Jimdoのホームページ講座を開催した際に、講座後の自己学習のためにお配りした本です。とても分かりやすく書いてあるので受講者さん(全員初心者)からも評判でした。「この本を知っていれば(僕の開催した)講座を受ける必要はなかったです」という貴重な受講者コメントをいただきました。泣きたいです。ありがとうございました。


ジンドゥークリエイター 仕事の現場で使える! カスタマイズとデザイン教科書 (Webデザイナー養成講座)

僕がとてもお世話になった教科書です。著者の服部先生は神です。ジンドゥークリエイターを活用したWebデザイナーを目指す方には必須です。Jimdoの標準機能を十分にマスターした上で、CSS・htmlをある程度理解してからでないとちょっと難しいかもしれません。ジンドゥーの標準機能では不足を感じるようになったら、ぜひカスタマイズにチャレンジしてみてください。



以下の6冊は、いずれもJimdoに精通した先生方の書籍です。どれも分かりやすく初心者向けに書かれています。順不同です。肌にあうものを選択してマスターしてください。

今すぐ使えるかんたん ジンドゥー Jimdo 無料で作るホームページ[改訂5版]

10日で作るかっこいいホームページ Jimdoデザインブック 改訂新版

小さなお店&会社のホームページ Jimdo入門

見た目にこだわる Jimdo入門 Kindle版

はじめてのホームページらくらく作成ガイド〈改訂版〉: 15分×7日間 無料でできる

今すぐ使えるかんたん ぜったいデキます! ホームページ作成 超入門


いいなと思ったら応援しよう!