ろっくにっと-RockniT.netコンテンツへスキップハンドメイドとうるさいロックが好きながんサバイバーがWordPressで遊んでます。旅行記BLOG検索:全カテゴリ最新記事5件サイトを2年間放置していました。ついて本サイトで使用しているWordPressをカスタマイズしたりテーマを自作したり、いろいろ試行錯誤した履歴を記録しています。これで飯を食えるくらいのレベルになれたらいいなという夢だけは大きく、ゆるーく更新しています。Twentyfifteenからテーマ作成-webフォントを取り換えるTweetTwentyfifteenには、あらかじめGenericonsというwebフォントが組み込まれています。内容もデザインもベーシックなものが揃っているので、どんなジャンルのサイトにも使えると思いますが、残念ながら自分が必要としているアイコンがなかったので、別のwebフォントに変えることにしました。Genericonsの提供元サイトを確認すると、汎用性の高い176個のwebフォントが用意されています。GenericonsそれぞれのアイコンをクリックするとCSSやHTMLタグが簡単に取得できます。提供元はAkismetやJetpackと同じAutomatticで、ライセンスはGPLです。このリストにはない自分が使いたいアイコンというのが、feedlyでした。RSSのアイコンをつけておけば事足りるんですが、なんとなくfeedly愛を主張したかったのでwところが、世界のwebフォントを探しても、feedlyのアイコンが用意されているものって、あんまりないんですね。これでfeedlyがなければおかしい!って数。この膨大なアイコンをwebフォントとして利用することもできますし、PNGファイルとしてダウンロードすることもできます。License(個人・商用利用可)、PNGファイルがCC3.0(表示-非営利)でトップページへのリンク要です。2075個もあればイロイロあります。ようなどことなくデジャヴュ感のある面白系もあります。こちらのページでは上部にbootstrapのwebフォントと同名にしているアイコン、下部にその他のアイコンのリストがあります。アルファベット順になってますが、zの後にも追加されたらしきアイコンがあり、さらにダウンロードするとこれ以外にも追加されたものがあって混沌としてますwあまりにもアイコンが増えすぎて整頓を挫折したっぽい。feedlyアイコンを使いたいのでこのwebフォントを導入することにしました。トップページからwebフォントをダウンロードして、テーマフォルダ直下に格納。functions.phpで設定されているwebフォントを変更します。);webフォントの設定場所はもう1箇所あります。);以下のように変更。);そうすると、いままでGenericonsのアイコンを表示していた箇所が無効になってしまうので、styles.cssに新しいフォントを入れていきます。Genericonsにあるので、ここにあるfont-familyを変更。"webhostinghub-glyphs";あとはwebフォントを1個1個入れ替えます。"\f307";}と指定されています。入れ替えたいアイコンをwhhgフォルダの中のexample.htmlから見つけ、アイコン名をコピーしたらwhhg.cssで検索をかけます。すると、CSS.icon-calendarthree:before{content:'\f4d0'}1.icon-calendarthree:before{content:'\f4d0'}となっているのでf4d0を既存の番号と入れ替えます。"\fd40";}この作業を全部のアイコンで行いました。CSSの設定は上記のように面倒ですが、記事やウィジェットのアイコンなどは以下のように指定すれば表示されます。記事内のiにCSSを指定すれば、このサイトのように表示色やサイズを一定にできます。class="icon-feedly"></i>とはいえ2075個からいちいち探すのは面倒なので、今はサイトで使うであろうアイコンのみをリストアップしてコピペで使えるようにしています。post:Twentyfifteenからテーマ作成-上に戻るボタンをつけるプロフィール管理人:rocknitter身体は虚弱、性格は暴虐。曲がった事が大嫌いなヘソ曲がり。ゆえに基本ぼっち人生。このサイトでは日頃気づいたことなどを記録しています。日常生活を送るだけで精いっぱいの体力しかないので基本的にコメント機能はオフにしています。