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

wordpress全記事一覧アレンジメント

 プラグインを利用しない全記事リストのコードを少しアレンジしてみた。  STINGER3の「P

記事を読む

wordpressカスタマイズ

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

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

記事を読む

wordpressカスタマイズ

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

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

記事を読む

wordpressテーマSTINGER3カスタマイズ

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

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

記事を読む

wordpressテーマSTINGER3カスタマイズ

STINGER3のトップページやアーカイブ(カテゴリ・タグ・月別)の1記事表示文字数を変える

 STINGER3のトップページやアーカイブ(カテゴリ・タグ・月別)はデフォルトでは要約が表示される

記事を読む

タグ関数wordpress

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

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

記事を読む

カテゴリーIDが追加されたWordpressカテゴリー管理画面

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

 Wordpressのカテゴリーの管理画面に記事のIDを表示できるようにしてみたい。  Wor

記事を読む

wordpressテーマSTINGER3カスタマイズ

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

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

記事を読む

wordpressテーマSTINGER3カスタマイズ

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

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

記事を読む

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 ↑