2017.12.29FontAwesomeは絵文字のようなウェブフォントです。画像ではなくテキストとして表示されるので、色やサイズをテキストと同じようにcssで設定できます。使っているテーマで導入されてるバージョンが古い場合FontAwesomeの使い方htmlで使う場合cssで使う場合font-familycontentfont-weightFontAwesomeの導入方法FontAwesomeはダウンロードして使う方法と、サーバー上に公開されているcssを読み込む方法があります。この記事ではサーバー上のcssを読む方法を紹介します。(簡単なので!)下記のコードをhead要素内に書くだけです。rel=”stylesheet”>WordPressの場合WordPressの場合はheader.phpに上記のコードを記載するか、function.phpに下記のコードを記載します。);使っているテーマで導入されてるバージョンが古い場合WordPressのwp_enqueue_style関数は、同じIDで既にcssが読まれている場合は後の処理は無効になる仕様になっています。親テーマで使われているIDを調べ、子テーマで先に使ってしまえば親テーマの処理を無効にできます。(子テーマのfunction.phpは親テーマのfunction.phpより先に実行される)FontAwesomeの使い方FontAwesomeの公式ページにアクセスして使いたいアイコンを探します。使いたいアイコンのページにある<i>~</i>をコピーする。コピーしたタグを表示したい位置に張り付ける。Awesomeのアイコンを使う場合は決まった書き方があります。Awesomeのアイコンが表示されない(四角になってしまう)場合は下記のポイントをチェックしてみてください。Free”を指定します。途中で仕様変更があったので間違えやすいです。contentcontentにはバックスラッシュと、使いたいフォントのUnicodeを記述します。font-weightこちらも途中の仕様変更で指定しなければならなくなりました。freeのアイコンにはsolidとbrandsがあり、solidの場合は900を、brandsの場合は400を指定します。私はここの設定で躓いていました。Awesomeのアイコンが表示されないトラブルが起きました。コピーニケッチャニケッチャメモ関連記事ブログ運営サーティワンアイスクリームみたいな色見本カラフルポップなサーティワンのアイスクリーム。にぎやかな配色を探している方におすすめです。定番のフレーバーをイメージしてカラーコードを集めました。#FAE...ブログ運営コピペでOKプラグインなし!押したくなる...かもしれないシェアボタンアイキャッチ画像を背景に使ったシェアボタンボックスを作ってみました。こちらがイメージです。FontAwesomeを既に導入している方はそのままコピペでOKです。FontAwesomeの導入がまだ...ブログ運営ブラウザサイズを基準に高さや幅を指定したいときにはvwやvhが使える!画面いっぱいに画像を表示したいな~とか思ったとき、%で指定する手法がよく使われます。この%は、親要素のサイズに対する割合を指定するものなので、うまく動作してくれないことがあります。そんなときに使えるのがvwやvhという単位です。vw...ブログ運営スクロールしても固定表示されるサイドバーで誤作動が1番少なかったのはこれ!サイドバーを固定する方法を色々なサイトで調べて試してみたのですが、そのほとんどが何かしら誤作動するものばかりでした。途中でサイドバーが消えてしまったり、サイドバーの横位置がずれたり幅が変わってしまったり、固定する範囲がおかしくなったり。...ブログ運営ミルクペイントっぽい色見本ターナーのミルクペイントをご存知でしょうか。アンティークな風合いが手軽に出せる、DIY女子に大人気のペンキだそうです。くすんだ感じの風合いがとても素敵です。色とりどりのマカロンをイメージした色のコード一覧です。ポップなイメージに仕上げたい方におすすめです。ゲーム、読書、食べることや自然と触れ合うことが好きです!楽しいことや美味しいものの情報を発信していきたいと思います。Twitterではブログ運営に役立ちそうな情報をツイートしてます。ニケッチャメモ.メニューゲーム読書ブログ運営プロフィールホーム検索トップタイトルとURLをコピーしました。