Life-edge ~iPhone・Mac・デジモノ系情報発信ブログ~

iphone・Mac・デジモノ・webサービス・ゲームなど、管理人の僕が気になるモノを紹介しているブログです。

*

「stinger5」でファビコンの設定をする為の5つの手順書

      2015/02/10

 

favicon-maker

wordpressのテーマを「stinger5」にするとディフォルトのファビコン(favicon)が設定されていますので、オリジナルのファビコンに変更する方法を紹介します。

ファビコン(favicon)とは、サイトの管理者が他のサイトと差別化を図るために配置するアイコンの俗称です。ちなみに、favorite icon( フェイバリット・アイコン:お気に入りアイコン )という英語の語句を略語にしたものです。ファビコンの設定は直接SEOなどに影響ありませんが、自分のブログに愛着が湧き、ブログを見に来てくれた人にも覚えてもらえ、ブログ完成度も上がるのでオススメですよ。

目次

1.ファビコン(favicon)のデザインを決める。

2.ファビコン(favicon)を作成する。

3.wordpressにfaviconをアップロードする

4.テーマ編集でHTMLの修正

 

1.ファビコン(favicon)のデザインを決める。

ファビコンのデザインを決めます。ファビコンには色々なデザインがあり、単色でシンプルなものからドット絵のような凝ったものまで様々です。

デザイン素人がプロデザイナーの様なおしゃれなファビコンを作るには、他のサイトのオシャなファビコンを参考にするとオシャレなファビコンを作成する事ができるのでオススメです。

お手本ファビコンの見つけ方は、下の関連記事で紹介していますので参考にしてみて下さい。

関連記事:デザイン初心者向けの手本にするオシャレなファビコンの5つの見つ方

2.ファビコン(favicon)を作成する。

おすすめのファビコン作成サイトをいくつか紹介します。

 

favicon.iconを作ろう! http://ao-system.net/favicon/

スクリーンショット 2015-02-10 1.06.56

 

Favicon Converter http://favicon.qfor.info/c/

スクリーンショット 2015-02-10 1.07.34

 

favicon.cc http://www.favicon.cc

スクリーンショット 2015-02-10 1.07.42

 

Favicon Generator http://www.degraeve.com/favicon/

スクリーンショット 2015-02-10 1.07.53

 

3.wordpressにfaviconをアップロードする

ファビコンの作成が終わったらwordpressにファビコンのデータをアップロードします。

①「ダッシュボード」ー「メディア」ー「新規追加」をクリック。

スクリーンショット 2015-02-10 1.40.12

②アップロード画面が開きますので「ファイルを選択」をクリックしファビコンのデータを選択します。

スクリーンショット 2015-02-10 1.33.20

 

4.STINGER5のテーマ編集でCSSの編集

ファビコンのアップロードが終わったら、STINGER5のCSSを編集を行いファビコンの設定を行います。

①先ほどアップロードしたファビコンのURLを覚えます。テキストなどにコピーしておくと良いでしょう。ファビコンのURLは、「メディア」ー「ライブラリ」内のファビコンのデータをクリックすると、下の様なウインドウが開きます。そののURLという部分がURLとなります。

スクリーンショット 2015-02-10 1.55.14

②CSSの編集を行います。

スクリーンショット 2015-02-10 2.13.04

<link rel=”shortcut icon” href=”<?php echo get_template_directory_uri(); ?>/images/logo.ico” />

赤文字の部分をファビコンのURLに置き換えて、下の方にある「ファイルの更新」をクリックすると完成です。

 

確認してみましょう。

<画像>

おおぉ!今回はシンプルに一文字だけのファビコンを作ってみましたが、また時間がある時に凝ったファビコンを作ってみたいと思います。

ファビコンを作ると自分のブログに愛着が湧き、ブログ更新のやる気にもなるので、ぜひオススメですよ!

 

 - wordpress ,

        

Message

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

  関連記事

g1219940476
ファビコンを作る時に参考になる!オシャレなファビコン5つの見つけ方

1.Gooleの画像検索で探す 簡単に多くのファビコンを探す方法に、Google …

google_analytics_b
Google AnalyticsをSTINGER5に設定する5つの手順

あなたのブログはアクセス解析をしていますか?もし、アクセス解析をしていなのでした …