ファビコンを設置しよう stinger3
公開:
: 更新:2014/12/13
WordPressカスタム
スポンサーリンク
ファビコンとは、
一応暗黙の決まり事なので言いますがファミコンじゃないですよ。
ブラウザのタブや(IEの場合アドレス前も)ブックマーク/お気に入りに付けられるブログやホームページのマークのようなものです。(上記画像の赤丸部分)
STINGER3の標準では
こちらのファビコンになっていると思います、
これを自分のサイトだけのオリジナルファビコンに変更しようと思います。
無料でこんなに良いWordPressテーマSTINGERを作成されたENJILOGさんには感謝です、
感謝ですが変えさせてもらおうと思います。^^;
このファビコンの作成・設置方法を説明しますが
毎度の事ながらコードの書き換えは自己責任でお願いします。
ファビコンの作成・設置方法
ファビコンに使われる画像はJPG/GIF/PNG/BMPなども使用できますがブラウザによって表示されないなどもあるのでWindow標準フォーマットのicon形式(.ico)で作成しましょう。
ファビコンに使うicon形式画像の作成
「 favicon.icoを作ろう」などのサイトを使うと簡単に作成できます。
上記サイトで画像を選択して「favicon.ico作成」ボタンを押せば見本が表示されるのであとはダウンロードするだけです。
※画像サイズは全て同じでも縮小してくれます。
※ファビコンは1つのファイルの中に複数の画像サイズが入れれるので大中小とも選択して下さい。(表示される場所によって自動で適したサイズが表示されます)
もっと綺麗なファビコンを作りたい方は「アイコンウィザード」などのフリーソフトを使うとできます。
※対応OSがXPまでしか書かれていませんが私はWin7で問題なく利用できてます。
- 写真など細かい画像を使いたい。
- 角を丸めたり文字だけの切り抜きなど背景を透明にしたい。
- Retinaディスプレイレベルの解像度でも綺麗に表示させたい。
などの場合アイコンウィザードを使ったほうがいいです。
左:「favicon.icoを作ろう」で作成
右:「アイコンウィザード」で作成
綺麗なファビコンを作っておけば大きめに表示されるデスクトップなどのショートカットを置かれても見た目がいいです。
個人のサイトが他人のデスクトップに置かれるような事はあまりないと思いますけど・・・
ファビコンを設置する stinger3
作成したファビコン画像ファイルをWordPressのメディアに保存する。
保存したファビコン画像URLをコピーしておく。
stingerのimagesフォルダに直接ファビコン画像をアップロードできる方は下のコード38行「?>/images/rogo.ico”/>」の「rogo」部分をアップロードしたファイル名に変更するだけで完了です。
外観→テーマ編集→ヘッダー(header.php)
35 36 37 38 39 40 41 |
</title> <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/rogo.ico" /> <!---css切り替え---> <?php if(is_mobile()) { ?> |
上記コードの38行の一部を
35 36 37 38 39 40 41 |
</title> <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <link rel="shortcut icon" href="ここにファビコン画像URLを入れる" /> <!---css切り替え---> <?php if(is_mobile()) { ?> |
ファビコン画像URLに書き換える。
完成。
38 |
<link rel="shortcut icon" href="https://profitable-price.info/〇〇〇/△△△/□□□/※※※.ico" /> |
参考:このブログの場合
無料ブログなどにファビコンを設置する
同じ方法で無料ブログなどでもファビコンを設置できます。
HTMLなどが編集できる無料ブログサービスが前提です。
1 2 3 4 5 6 7 8 9 |
<head> aaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa ・ ・ ・ <link rel="shortcut icon" href="ファビコン画像URL"> ※この行を追加※ </head> |
上記のようにheadから/head間に記入すればOKです。
もし最初から別のファビコンが設定してあるようならheadから/head間にあるはずですので探してURL部分のみ変更すれば変えれます。
※画像ファイルは個々のブログへ保存して下さい。
ad
関連記事
-
-
プラグイン無しでスムーズスクロール stinger3
スムーズスクロールはこんな感じのやつです。 スムーズスクロールを体験する
-
-
WordPressのJetpack共有に追加したSNSボタンの高さを合わせる
この記事は個人的なメモです。 プラグインJetpackの更新で追加した共有ボタンの高さが合わな
-
-
追従するSNSボタンを消す stinger3
PCページに表示される追従型SNSボタンを消す (スマホページは上記現バー
-
-
WordPressの投稿作成画面にタグボタン(クイックタグ)を追加する
WordPressの投稿記事を作成や編集する画面にあるクイックタグは便利ですが正直もう少し色
-
-
追従するSNSボタンを縦型にする stinger3
PCページに表示される追従型SNSボタンを縦型にする 外観→テーマ編集→ス