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カスタマイズ

STINGER3のアーカイブの記事表示数を変更してみよう

 STINGER3のアーカイブの記事表示数を変更してみよう。  前に書いたとおり、このブログは

記事を読む

wordpressテーマSTINGER3カスタマイズ

STINGER3のSNS追尾ボタンを削除

 STINGER3のSNS追尾ボタン(ツイッターとかのボタン)を削除しよう。  ページに浮き上がっ

記事を読む

wordpressテーマSTINGER3カスタマイズ

カテゴリー一覧の親カテゴリーの文字サイズを変更する

 サイドバーのPC表示の親カテゴリーのみフォントサイズを大きくした。  使っているテーマはSTIN

記事を読む

タグ関数wordpress

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

 Wordpressの無料テンプレート(テーマ)Gush2はすっきりしたデザインで管理人の好みの

記事を読む

wordpressテーマSTINGER3カスタマイズ

STINGER3のトップページの記事表示数を変更してみよう

 このブログの表示件数の設定は3記事になっている。  TOPページやアーカイブなども基本的には

記事を読む

wordpressカスタマイズ

WordPressテーマPrincipleのサイト幅とアイキャッチ画像の大きさを変える

 PrincipleというWordPressのテンプレートを使い始めた。  Principle

記事を読む

wordpressテーマSTINGER3カスタマイズ

STINGER3の固定ページにもSNSボタンを設置

 SNSボタン(ツイッターとかのボタン)を追加しよう。  STINGER3の固定ページにもSN

記事を読む

no image

タグ一覧を作ろう1

 タグ一覧を作ろうと思う。   タグクラウドでなくタグ一覧。   何でタグ一覧を作りたいかといえ

記事を読む

wordpressテーマSTINGER3カスタマイズ

wordpressのナビゲーションバーに項目を追加

 wordpressのナビゲーションバーに項目を追加しよう。  タイトルやキャッチフレーズの下に追

記事を読む

wordpressテーマSTINGER3カスタマイズ

サイドバーのウィジェットをNEW ENTRYの上に移動させる

 STINGER3のサイドバーはphpにNEW ENTRYが設定されていて、その下にウィジェットが設

記事を読む

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 ↑