18 May

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

05 June

PC用のfaviconとスマホ用のウェブクリップアイコンを作る　ワードプレス

http://shirose.jp/2013/10/wordpress-add-favicon/
このサイトのかたは他の記事でも説明が丁寧でわかりやすいのでとても参考になります。

1枚の画像から一括で色んなサイズを書き出してくれるという
外国のサイトがエラー吐いて使えませんでした。
http://www.allthefavicons.com/

しょうがないので日本の有名なサイトを使います
http://ao-system.net/favicon/index.php

始めは1枚の作った大きなアイコン画像で全部のサイズに当てはめましたが、
やっぱり縮小で汚くなるので、写真とかじゃない限り各サイズ作ったほうが綺麗です。

16x16
32x32
48x48
150x150（スマホ）

を作りました。
16、32、48は上記サイトの「参照」ボタンのところへドラッグドロップでいけます。
favicon.icoが簡単に仕上がりました。
スマホウェブクリップアイコンは「任意の名前.png」で使います。

favicon.icoのアップロード場所ですが、通常のサイトの場合は「index.htmlと同じ階層に置く」、
とよく言われてます。今までもそういうふうに作ってきました。
しかしWPで検索すると「imagesフォルダに入れます」なんてのがたくさんでてきました。
どっちが正解なのかわからない･･･。
結局私は　theme/自テーマ名/favicon.ico　にしました。
なんか不具合起こったら　theme/自テーマ名/images/favicon.ico　にします。
ウェブクリップアイコンもルートさえあってればどこでもいいんじゃないでしょうか
私はテーマのimagesフォルダにいれました。

次にコードをheader.phpの<link rel=”～～”>が各種並んでるところに貼り付けます。
スマホサイトは別テーマでやってるため、スマホテーマheader.phpに
スマホウェブクリップアイコンコードを貼り付けました

PC用faviconコード
親テーマ使用
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/favicon.ico">

子テーマ使用

<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico">



スマホ用ウェブクリップコード

<link rel="apple-touch-icon" href="<?php echo get_template_directory_uri(); ?>/images/任意のファイル名.png">

<link rel="apple-touch-icon" href="<?php echo get_stylesheet_directory_uri(); ?>/images/任意のファイル名.png">

アイコンに光沢あり　rel="apple-touch-icon" 

アイコンに光沢なし　 rel="apple-touch-icon-precomposed"

光沢ありだと色合いが薄くなるので、それ前提に作ってないのでナシにしてます



 

これ見てふと思いました。

今まで　<?php bloginfo( ‘stylesheet _url’ ); ?>　を見てきて書いてました
http://mypacecreator.net/blog/archives/642/2
bloginfoは古い記述だそうです。WPのタグの変遷なんて知らなかったです･･･
htmlのタグレベルの長期間に渡る変遷ならともかく、WPは短期間でこういうふうに
非推奨に変わるから嫌です。