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

PAGE itiran 固定ページテンプレート (page-itiran.php)を使って全記事一覧を作る

 STINGER3には「PAGE itiran 固定ページテンプレート (page-itiran

記事を読む

no image

タグ一覧を作ろう1

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

記事を読む

wordpressテーマSTINGER3カスタマイズ

スマートフォン表示でTOPページのアイキャッチ画像を表示させないようにする

 STINGER3のスマートフォン表示のTOP画面のアイキャッチ画像を表示させないようにしてみる。

記事を読む

wordpressテーマSTINGER3カスタマイズ

STINGER3にSNSボタンを追加

 SNSボタン(ツイッターとかのボタン)を追加しよう。  STINGER3のSNS追尾ボタンを

記事を読む

wordpressカスタマイズ

記事一覧完成!

  wordpressの記事一覧ページ作成も最終段階。  ようやく思い通りの記事一覧ができた!

記事を読む

wordpressカスタマイズ

記事一覧を更新日順に表示する方法

 記事一覧を更新日順に並べる方法。  すごく簡単に記事一覧を更新日順に並べ替えて表示することが

記事を読む

wordpressカスタマイズ

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

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

記事を読む

リンクボタン

フィードリーダーfeedlyの登録ボタンをブログに付けてみた

 Rss(フィード)は使ってる人には便利な機能らしい。  RSSを利用するといろいろなサイトの

記事を読む

wordpressカスタマイズ

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

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

記事を読む

wordpressカスタマイズ

プラグインを使わない記事一覧

 プラグインなしの記事一覧をあきらめ切れなかったので、今度はこんな風にしてみた。  更新日時順

記事を読む

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 ↑