アイコンフォントTwitterFacebook0Google+LinkedInPocket0最近はアイコンフォントを使ったサイトを多くなりました。「feedly」だけアイコンフォントがなかった為画像を使っていました。べつに画像でも良かったのですが、「feedly」だけ装飾があわず困っていました。それなら「feedly」のアイコンフォントを作ってみようと言うことで、作成からブログに貼り付けるやり方を備忘録として残しました。まとめここで紹介するgush2のカスタマイズは、私の備忘録です。gush2は素でも使える。個性を出すためにカスタマイズしようバックアップは忘れずに!!!以下記事はワードプレス(WP)や、テーマのgush2をカスタマイズしたやり方等を忘れないために書き留めた備忘録ですこれらを参考にカスタマイズする時は、自己責任でお願いいたします。ソースコードを変更する場合は、FTPソフトを使ってサーバーにアップ。各サーバーのオプション(ファイルマネージャー)等(例はさくらサーバーです)でカスタマイズを行ってください。元になる「feedly」の画像を用意した。この画像でよろしければクリックしてから、マウスの右クリックでこの画像をファイルとして保存して使ってください。使用する画像をSVG形式に変換しないとアイコンフォントは作成できないようなのでここで変換作業をする。ラスタ画像svg化スクリプトのサイトへ行く。(上の所にドロップでもいいみたいですね)次にとなりの「出力設定」のところで、「色2」を黒に選択してから「実行」ボタンをクリックする。[svg]ボタンをクリックする。するとブラウザで画像が出てくるので、マウスの右クリックで名前を付けて保存する。この時、拡張子を確認して必ず「svg」にする。これでSVG形式の画像が出来ました。Generatorのサイトを開きます。Icons」のボタンをクリックする。先ほど「svg」形式で保存したファイルを指定して呼び出します。Set」箇所に指定の画像が表示されるのでクリックする。F」タブをクリックする。Usage」のところに、表示されているコードをコピーしておきます。href=”http://i.icomoon.io/public/temp/c999a4a9e6/UntitledProject/style.css”>[/php]自分のブログを開いてヘッダー(header.php)を開く。「<head>」~「</head>」の間に先ほどコピーして置いたコードを貼り付ける。rel=”stylesheet”>[/php]の下にコードを貼り付けました。Code」が出現するのでクリックする。画面中央に上図のような画像が表示されるので、「HTML」内に記述されているコードをコピーする。class=”icon-feedly-taka”></i>[/php]ブログに戻ってサイドバー(sidedar.php)を開く。前回「feedly」で取得したコードがあるので、そこを修正する。height=’42’>」まで削除して、そのところに下記コードを記述した。class=”icon-feedly-taka”></i>[/php]最終的に私の場合、以下のコードに変更した。class=”icon-feedly-taka”></i></a>[/php]ファイルを更新ボタンをクリック後、ブログを確認して下記画像のようになっていたら成功です。あとはcssで装飾するのみです。スタイルシート(style.css)で装飾する私の場合は子テーマに記述スタイルシート(style.css)を開く。前回は「feedly」以外を装飾していました。今回はすべて同じ装飾が使えるようになったので、下記コードを子テーマのスタイルシート(style.css)に追記した。}[/css]まとめ下の画像はカスタマイズ後の画像です。なんか「feedly」ボタンだけ位置がずれている気がします。それと下のマージン(余白)が広くなってしまった。「下のマージン(余白)が広くなってしまった。」対策として、下記コードを子テーマのスタイルシート(style.css)に追記した。-12px;}[/css]まあ~これで良しとします。それと更新のたびなのか?時々アイコンフォントが消える時がある。そのたびに「ヘッダーの追記コード」を再度入れ直さないとダメみたい。使えないかな?以上でした。...カテゴリとタグを区別して分かりやすくしたgush2のカテゴリとタグ標記が同じところに並んで表示されています。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。Librariesと言う物がインストールされてました。ブログのカスタマイズに挑戦13,542ビューNTT代理店の株式会社ワイズからインターネット開通を申し込みました。10,421ビューデスクトップに変なメッセージが入るようになりました。