キャリコおすすめ
本日の人気記事
- 忍者 AdMax が Google AdSense よりも稼げる理由
- 【 ドレッドヘアのお手入れ方法 】よく聞かれる7つの質問にお答えします
- 缶詰ができて48年後に缶切りが発明されるという衝撃の事実w
- ソフトバンクの157で即オペレーターにつなぐ方法
- SimCity BuildIt(シムシティ ビルドイット)の美しい街の景観30選
- わずか1分28秒でハッキング可能!Wi-Fi 自動接続してるスマホは格好のカモ
- iPhone のテザリングでデスクトップパソコンをインターネットに接続する方法
- LAN ケーブルを変えるだけで通信速度が速くなるのは本当なのか?
- エスニックファッションの激安通販サイトまとめ
- 次の13日の金曜日はいつ?2016年から20年先までの一覧
header.php を子テーマに作ってファビコンをオリジナル画像に設定する
2016/05/28
絶賛入院中のキャリコ( @calicocatxyz )です。
入院中の何がイヤって1日3回ある採血… 注射は苦手じゃないからいいんだけど、イラッとする痛みにストレスを感じてます。
そんな気分を変えるためにファビコンをオリジナル画像に変えました。
※WordPress ならこんなに面倒な作業がなくなりました!
リンクWordPress でのファビコンやブックマークアイコンの設定方法
Ads by Google
ファビコンとは?
favicon( ファビコン )は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。favorite icon( フェイバリット・アイコン:お気に入りアイコン )という英語の語句を縮約したものである。
普段インターネットをしてるときに見かける、タブやブックマークの先頭に表示されるアイコンのことです。
ファビコンと聞いてピンと来なくても、このアイコンをみたら『 これか! 』と思う人も多いのではないでしょうか?今回はこれをオリジナル画像に変更します。
アイコンにしたい画像を用意する
ファビコンは『.ico 』という拡張子の画像ファイルフォーマットです。用意する画像の拡張子は何でも構わないのですが、ファビコンに設定する際には拡張子を変換する必要があります。
変換ツールを使う
Favicon Converter
http://favicon.qfor.info/c/
.jpg 画像や .gif 画像などを .ico 画像に変換してくれるサイトです。
自作する
Favivon Editor
http://favicon-generator.org/editor/
簡単なものでよければ自作することも可能です。キャリコはシンプルなものが良かったので、リンクと同じ色にしてここでファビコン画像を作成しました。
作成したファビコンを設定する
ファビコン画像をアップロードする
WordPress のダッシュボードから『 メディア 』→『 新規追加 』を選んで作成したファビコン画像をアップロードします。画像がアップロードされたら『 編集 』をクリックしてメディアの編集画面を開きます。
後で画像の URL が必要になるのでファイルの URL を保存しておきましょう。
子テーマに header.php を作成する
ファビコンの設定は head 内に記述する必要があるので、子テーマに header.php を作ります。これは CSS をカスタマイズするときに作った子テーマの作り方と一緒です。
キャリコ
STINGER5 で CSS をカスタマイズ可能にする子テーマの作成
header.php というファイルを style.css と同じフォルダ内に作成したら親テーマの header.php を丸ごとコピーします。貼り付けたら以下のコードを探して書き換えます。
1 |
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/logo.ico" /> |
↓ このように書き換える
1 |
<link rel="shortcut icon" href="**********" /> |
『 ********** 』の部分は先ほど保存した画像の URL を入力します。以上でファビコンの設定は終了です。
追記
まとめ
ファビコンを設定したら自分で作ったアイコンがタブやブックマークに表示されるので、何だか嬉しくなってニヤニヤしちゃいますね 笑
オリジナルの画像が表示されることで満足感を得られますし、より一層の愛着が湧くと思うので、ぜひチャレンジしてみてください。
この記事が気に入ったら
いいね!しよう
キャリコの最新情報をお届けします
Twitter でキャリコをフォローしよう!
おすすめ記事
【キ】 アドセンス用336px
【キ】 アドセンス用336px
関連記事
-
-
STINGER5 の誰にも気づかれない自己満足カスタマイズ
Hello, キャリコ( @calicocatxyz )です。 そろそろ STI …
-
-
STINGER5 の記事公開日の後ろに「 あとで読む 」の Pocket リンクを挿入する方法
体重がどんどん落ちていく、キャリコ( @calicocatxyz )です。 何も …
-
-
STINGER5 で CSS をカスタマイズ可能にする子テーマの作成
病院で出される食事が日本食で驚いてるキャリコ( @calicocatxyz )で …
-
-
STINGER5 の h3 タグにアイコンを付けて、h4 タグに背景を指定する
○○する方法しかネタがないキャリコ( @calicocatxyz )です。 っと …
-
-
STINGER5 のカテゴリ名と件数をカスタマイズする方法
ちょいちょい英語の勉強をしてるキャリコ( @calicocatxyz )です。 …
-
-
STINGER5 で各 SNS のフォローボタンを美しく綺麗に配置する方法
Instagram デビュー迷い中のキャリコ( @calicocatxyz )で …
-
-
キャリコの誰にも気づかれない3つの自己満足カスタマイズ
STINGER5 のカスタマイズも終わって手持無沙汰のキャリコ( @calico …
-
-
これでスッキリ!SNS ボタンのデザインをコピペだけで綺麗に統一する方法
イビサの夏が恋しいキャリコ( @calicocatxyz )です。 EDM を聴 …
-
-
STINGER5 のブログ説明文の重要性について
誰にも気づかれない自己満足カスタマイズ続行中のキャリコ( @calicocatx …
-
-
STINGER5 でアドセンスを記事内に導入するときの注意点
アドセンスの最適なレイアウトを導入したキャリコ( @calicocatxyz ) …