komidoriの今が旬!!

暮らしの中での「はてな?」や「これスゴ~イ!」をアラカン主婦komidoriがリサーチしてお届けします。人生はこれからだ~!!

WordPressのファビコンを作って設定してみた~!

      2016/08/27

ずっと気になっててやってみたかったこと~

あの、ブラウザのアドレスバーやタブに表示されるファビコン(Favicon)を作ること!

難しいのかなと思ってたらデスネ、何だ~っていうほど簡単でした。

fav3
(^o^)ゞこんな感じ~

ま、初めて作ったものなので、またおいおいデザインかえてもいいしね・・・。

ということで、
今回はWordPressのファビコン(Favicon)を作って設定する方法~!!
忘れないうちにまとめときます。(^^♪

スポンサーリンク
まずは画像を作るところからいきますが、画像の説明はいらない方は、すっとばかして、設定方法まで進んでくださいね。

ファビコンの画像を作る~

画像は、自分の好みのモノを選べばよいですガ、後の設定のために512×512の大きさのものを準備します。

今回、komidoriは自分で作ることにしました。

使うのは『ペイント』と『フォトスケープ』です。

簡単で超便利な無料画像編集ソフト『フォトスケープ』のダウンロードと基本的な使い方については、こちらで詳しく説明してます~。

母の日は手作りカードを!パソコンで簡単にできる温かメッセージ!!

では、今回作ったファビコンで説明していきますね。

1. ペイントで土台の正方形を作る

ペイントを起動して、512×512の正方形を作ります。

今回のファビコンは、白の上に、緑の部分と吹き出しを重ねるので土台の正方形は白で作って保存しておきます。

r

同じやり方で、上にかぶせていく緑の正方形も作って保存しておきます。

2. フォトスケープでイラストを作る

フォトスケープを起動して、緑の正方形の画像を選択。
(ドラッグして引っぱってもOK !)

吹き出しをはみ出させたいので、一番下の城の土台より一回り小さくリサイズします。

mm

次に、オブジェクトの吹き出しをクリックして好きな吹き出しを選びます。

今回は、ちょっとアメリカンコミック風の吹き出しで!

mk

さて、次は文字を入れます。

komidoriなのでKを使うことにしました。

2016y06m22d_215257581

オブジェクトの『T(テキスト)』をクリックすると、色々な文字設定ができます。

で、傾きとか大きさを好みに合うように調整したら、保存しておきます。

3. 保存したイラストをアイコンにする

ここがポイント!
さっき保存した吹き出しイラストをアイコンにしていきます。

オブジェクトの所にハートマークがあるんですが、そこがアイコンです。

2016y06m22d_230025802

ここをクッリクするとこんな感じで開きます。

fd

一番下のページが空いてるので、そこを開いてイラストをドラッグで引っぱってきます。

そうすると、確認窓が出てくるので『続行』を選択。

2016y06m22d_231222922

ここでまた、「コンピューターの改変を了承しますか。」って確認が出てくるので、再び『続行』をクリックします。

これで、作ったイラストがアイコンとして登録されました~。

(但し、このあたりのことは、komidoriが、適当にやってることなんでもしかしたら、もっといい方法があるかもしれません。)

4. 土台にイラストを貼りつける

さて、いよいよ仕上げに入ります。

土台で作っておいた、白い画像をフォトスケープに出してきます。

2016y06m22d_213208599

そこへ『オブジェクトのハートマーク』をクリックして、先ほどアイコンにした、吹き出しイラストを選んで貼り付けます。

余白があるので、それに合わせて少しイラストの大きさを調節しましょう。

2016y06m22d_232852584

白の画像の部分がファビコンの画面の大きさになるので、はみ出さないようにします。

適当な位置と大きさになったら保存して出来上がりです。

fg

縦いっぱいに緑をとって少し縦長にしてみました。

komidoriって濃い緑のことなんですよ~。

その緑とイニシャルのK、これがデザインのもとなんですけど、まずまずの仕上がり。
d(∀)

さて、次は設定です。

スポンサーリンク

WordPress作ったファビコンを設定する方法

これが思ったより簡単で~

サイトのアイコンだけでなく、iPhoneやiPadのホーム画面用のアイコン:アップル タッチ アイコン(apple-touch-icon.)まで自動的に作れてしまうという素晴らしさ~!

ちょっと驚きでした!

WordPress凄~い!オオーw(゚o゚)w カンタン!!

では、設定スタートです。

1. 作ったファビコン画像をアップロード

WordPressの『メディアライブラリ』に、作ったファビコンの画像をアップロードしておきます。

2. 『サイトの基本情報』にアップする

次に、ダッシュボードの『外観』を開いて『カスタマイズ』をクリックします。

2016y06m22d_153441400

『カスタマイズ』の中の『サイトの基本情報』を開きます。

2016y06m22d_235121341

こんな画面になります。

2016y06m23d_095425433

ここで『画像を選択』をクリックすると、『メディアライブラリ』が開くので、先ほどアップロードしたファビコンの画像をクリック!!

2016y06m23d_095444307

512×512の画像の場合は、もうそのままで設定できました。

画像サイズが512×512より大きい場合は、切り取るための画面が出てきてくれますから、それに合わせて切り取ればOK!

上の方にある『保存して公開』をクリックして終了です。

で、できたぁ~!!

2016y06m23d_103757739

アップル タッチ アイコンもバッチリです~!!

DSCN0089

いや~、ウレシイ・・・。

ますます自分のブログが好きになってきますね~。

まとめ

私、パソコン関係の色々なこと、あまり詳しくないのですが、検索したり、つついたりしてると少しづつでも分かってきたリ、できることが増えてくるんですね~

それも嬉しい!

今回はファビコンに挑戦してみましたが、ファビコンって語源はfavorite icon(フェイバリット・アイコン)=『お気に入りアイコン』という英語の言葉を短く合体させたものなんだそうです。

なるほどね!

今まではスティンガー5のアイコンだったのを、自分仕様にしてみたら、これやっぱり愛着湧きますわ~。

作ってよかった~!

画像もいろいろ使えますよね。
ただ、アイコンって小さいので、あまり細かいのは、表示されたときに分かりにくいので注意が必要ですね。

今回、これ以外にもいろいろ作ってみてました。

komif

時間かかりましたが、楽しかった!

画像さえできれば、設定は超短時間ですよ~!

ぜひ、あなた好みのファビコン作ってみて下さいね。

スポンサーリンク

 - WordPressとかPCまわりのこと

この記事がお役に立ちましたら「いいね!」をお願いします~(*'v`d)

  関連記事

wordpress のコメントの画像表示にはGravatarが便利!

コメントを投稿した時、ちゃんとイラストや写真などの画像を設定されている方がいるじ …

windowsスクリーンショットのやり方!範囲指定も簡単~♪

あ~、この画面、画像として残しておきたいんだけどな~って思うことありますよね。 …

パソコンのスクリ-ンショット!このフリーソフトが便利すぎる~!

この前、Windowsのスクリーンショットの仕方をまとめたのですが・・・ さらに …

ブルーライトをカットするフリーソフト!効果に感動~♪

パソコンの画面、ずっと見てると目がチカチカ、ショボショボしてきちゃいませんか? …

wordpressのカテゴリー、並び替えと折りたたみが自由にできるプラグイン!

いろいろ分からないなりにも、アチコチつつきながら、やってるこのブログ。 で、やっ …

スマホのブルーライトをカットするアプリおススメは?

夜、遅くにスマホを使ったりしてると眼が冴えて眠れなくなったりしませんか? この目 …

iphone の三脚はゴリラポッドがいい!4つのおススメポイントとは!!

わ~い! やっと買いましたぁ~! iphone用のスタンド『ゴリラポッド(Gor …

画像の背景透過!!jpgが透過pngになる無料ツール~♪

うぅわ~っ、すっご~い!!!! 久しぶりに大感動中のkomidoriです。こんに …

画像の切り抜きが自由にできるフリーソフト!初心者でも簡単!!

わ~い! 自由な形に輪郭が切り抜けるフリーソフトみつけました~!! これ面白いわ …

wordpressにブログカードを付ける簡単プラグイン!

WordPressってこんなことができるんだ~!!って、日々感動することの多いk …

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です