Favoriteを設置しよう

公開日: : 最終更新日:2014/08/20 wordpressカスタマイズ , ,

 wordpressにファビコンを設置してみよう。

 ファビコンはブラウザのタブに表示されるアイコン(画像)のこと。

ファビコンの見本

 ブックマークしたときにも表示されるので、ほかのサイトと区別するのに役立つかも。

 Windowsのペイントと無料ウェブサービスで簡単にファビコンを作ることができる。

スポンサーリンク

ファビコン画像を作る

ファビコン画像の大きさ・形などの注意

・16px×16px

・正方形にすること

・あまりこったものは作らない。

*ファビコンはサイズが小さいので凝った物を作っても表示されたときによくわからなくなる。

*ほかにもいろいろサイズがあるが、とりあえずブラウザのタブに表示するためのファビコンならこれ。

画像の拡張子

「JPG」「GIF」「PNG」。

 お勧めは「GIF」。

 ファイルサイズが少なくすむ。

1、【スタート】⇒【アクセサリ】⇒【ペイント】をクリック。

2、【サイズ変更】⇒「縦横比重を維持する」のチェックをはずす。

3、作成サイズを正方形になるように指定。

4、画像を作ったら、【サイズ変更】⇒で16px×16pxで再指定する。

5、名前をつけて拡張子を「JPG」「GIF」「PNG」にして保存。

画像をファビコンの拡張子に変更する

 ファビコンの拡張子icnに変換するサイトはたくさんあるのだが、やはりわかりやすいのは日本語のサイト。

1、http://ao-system.net/favicon/index.phpにアクセス。

2、【参照】ボタンで作った画像を指定。

3、【Favorite iconを作成】をクリック。

4、【ダウンロード】をクリックしてFavorite iconを保存する。

wordpressにファビコンアイコンを設置する

1、【メディア】⇒【新規追加】をクリック。

2、保存したファビコンアイコンクリックしたまま【新規追加】の画面上にもっていく。

3、【編集】をクリック。

4、【ファイルの URL:】のボックス内のURLをコピー。

5、[外観]→[テーマの編集]→[ヘッダー (header.php)]をクリック。

6、【shortcut icon】がほかに無いか調べて、もしあった場合は、<link rel="shortcut icon" href="URL">を削除。

 うちのサイト(STINGER3)の場合<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/rogo.ico" />を削除した。

7、</head>の直前に以下の記述を追加。

<link rel="shortcut icon" href="コピーしたURL">

 このサイトの場合↓

<link rel="shortcut icon" href="http://wordpress.0hs.org/wp-content/uploads/2014/08/favicon.ico">

8、[ファイルを更新]を押して保存。

ファビコンの問題点

 ファビコンの問題点は、サイトの表示が遅くなること。

 元の画像をGIFで作ると一番画像の容量が少なくすむ。

  • にほんブログ村 ブログブログ ブログノウハウへ
    にほんブログ村
  • FC2ブログランキング
  • このエントリーをはてなブックマークに追加

関連記事

wordpressテーマSTINGER3カスタマイズ

記事のh2見出しのスタイルシートを編集してみた

 サイトの表示を高速化するプラグインをいろいろ入れたら、記事内のh3などの見出しタグの装飾が崩れ

記事を読む

wordpressテーマSTINGER3カスタマイズ

STINGER3のスマートフォン表示のパンくずリストをスタイルシートでリンクボタン化

 wordpressテーマSTINGER3のスマートフォン表示のパンくずリストをスタイルシートで

記事を読む

wordpressテーマSTINGER3カスタマイズ

STINGER3のフッターに「月間アーカイブ」、「最新のコメント」、「メタ情報」を表示

 STINGER3のフッターに「月間アーカイブ」、「最新のコメント」、「メタ情報」を表示してみよう。

記事を読む

wordpressテーマSTINGER3カスタマイズ

カテゴリー一覧とNEW ENTRYに背景色をつけてブロック分け

 wordpressテーマSTINGER3のサイドバーのカテゴリー一覧とNEW ENTRYに背景色を

記事を読む

wordpressテーマSTINGER3カスタマイズ

STINGER3のナビゲーションバー「TOP」のアンカーテキストにブログタイトルを含める

 SEO対策をかねてSTINGER3タイトル下のナビゲーションバーの「TOP」にブログネームを入れて

記事を読む

wordpressカスタマイズ

プラグインを使わずにソースコードを表示させる方法

 ソースコードを表示させるのに便利なのはプラグインの利用。  でも、プラグインには「開発や更新

記事を読む

wordpressカスタマイズ

特定のカテゴリーのカテゴリー名とカテゴリーに含まれる記事の一覧を作る

 特定のカテゴリーのカテゴリー名とカテゴリーに含まれる記事の一覧を作ってみよう。  このコード

記事を読む

wordpressカスタマイズ

記事一覧を更新順位に並べ替えるカスタマイズ

 プラグインを使わない記事一覧シリーズ。  前回のコードでは更新日順に記事一覧を並べることがで

記事を読む

wordpressカスタマイズ

wordpressの固定ページを使って全記事一覧を表示させる方法

 wordpressの固定ページを使って、全記事一覧を表示させる方法。  wordpressの

記事を読む

wordpressテーマSTINGER3カスタマイズ

STINGER3のサイドバーの【NEW ENTRY】を日本語にする

STINGER3のサイドバーの【NEW ENTRY】を日本語にする。  wordpressテーマS

記事を読む

Message

メールアドレスが公開されることはありません。


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)


follow us in feedly

応援してね⇒にほんブログ村 ブログブログ ブログノウハウへにほんブログ村

ワードプレスのテキストとビジュアルのタブの切り替えができない

 しばらくぶりにブログを更新しようと思ってみたら、ワードプレスの更新や

プラグインを使わずにソースコードを表示させる方法

 ソースコードを表示させるのに便利なのはプラグインの利用。  で

ソースコードの解説にCrayon Syntax Highlighter

 Webサイト上でHTML/CSSやプログラミングのコードを解説す

ウィジェットが豊富で使いやすいWordPressテーマSimplicity

 SimplicityというWordpressテーマを使ってみた。

お客様のホームページがアップロードされていない状態です

 Wordpressの手動インストールで無事インストールできたのに

WordPressテーマGush2のTOPページアーカイブページに要約を表示する

 Wordpressの無料テンプレート(テーマ)Gush2はすっき

FC2ブログとWordPressのURLの構造法則と変数

 記事数の多いFC2ブログを変数を使ってWordpressに引越し

記事数の多いFC2ブログの引越しは変数で作業時間短縮

 FC2ブログからWordpressへの引越し第二段。  FC2

プラグインの内容をメモできるWordPressプラグイン

 Wordpressのプラグインは便利だが、説明文が英語のせいで中

WordPressのカテゴリーの管理画面にIDを表示できるようにするカスタマイズ

 Wordpressのカテゴリーの管理画面に記事のIDを表示できる

海外スパムをシャットアウト「Throws SPAM Away」日本産プラグイン

 Wordpressでブログを運営していると英語のスパムコメントが

→wordpress初心者・STINGER3カスタマイズ中の記事をもっと見る

Googleでブログを作ろう 
 Googleの無料ブログサービスBloggerで作っているブログ。
 Bloggerの設定やカスタマイズ方法などを載せている。

使える無料ソフト&無料サービス
 高いパソコンに入ってるようなソフトは必要ない!をコンセプトに無料ソフトや無料のWEBサービスをご紹介。

  • コメントテスト

  • PAGE TOP ↑