【Cocoonカスタム】アイコンフォントをすべてGoogle製アイコンに置き換える方法【コピペOK】【WordPress】CocoonカスタマイズTwitterはてブPocketLINE2019.12.19この記事は約3分で読めます。WordPress高性能無料テーマCocoonで、使用されているアイコンフォントをすべてGoogle製アイコンに置き換えるCSSを用意しましたので紹介できればと思います。V2.0以降に対応しています。Iconsに差し替えたいと思います。Iconsに差し替えるという記事を上げました。Iconsに変えていきたいと思います。Iconsのデザイン的な違いについては、先程紹介した記事こちらの章で紹介しています。基本的には以前の記事のコードをベースにしていますので、すべての編集をCSSのみで完結できるようになっています。CocoonのCSSクラス周りがバージョン2.0以降で変わっていますので、本TipsはCocoonバージョン2.0以降に対応しています。最終的なコードは以下になります。こちらを(小テーマを使っていれば子テーマの)style.cssの最後もしくはメディアクエリーごとに貼り付れば動作するかと思います。sponsoredコードの解説ざっくりとコードを解説していきます。はじめにマテリアルアイコンフォントを読み込んでいます。今回は、アウトラインとフィルの両方を読み込んでおきます。Iconsを適用します。Iconsを当て直しています。オリジナルのCocoonの設定方法が、疑似要素「:befiore」アイコンを挿入している形なので、style.cssでマテリアルアイコンのアイコン名を上書きしています。Iconsは単語名でアイコンを設定できるので分かりやすいかと思います。アイコンと単語の対応は公式サイトの一覧表で確認できます。今回、意味がなるべく合致するアイコンを選んでいます。そのほうが人にもウェブにもロボットにも優しいのではないか?というセマンティックウェブ的な発想からです。個人的好みというのもあるので、そこは単語を変えれば好きな文字、カタチに変更できます。sponsored実例を画像で紹介どんなふうに変わったか、画像でご紹介します。アイコンモバイルのフッターアイコンがご覧のように変わっています。記事下部を見てみます。カテゴリアイコン、タグアイコンオーサーのアイコンを変更しています。タグアイコンは、ここではアイコンフォントではなく、文字のシャープ「#」としてツイッターなどのタグ表記と合わせています。以上、CocoonでアイコンフォントをすべてGoogle製アイコンに置き換える方法でした。Mini」が届いていましたので、早速開封していきたいと思います。Cocoonカスタマイズ【WordPress】Cocoonテーマを使うことによるデザイン的な既視感をなくしたい。無料で高機能のワードプレステーマ、Cocoonのカスタマイズについて、個人的なカスタイマイズの方針を書いておこうと思います。いわゆるデザインガイドラインというものになります。先日の記事でのアドセンスに引き続き、Googleサーチコンソールのスマホ表示を確認していたところ、意外な発見がありましたのでご紹介します。壁紙をランダムに表示する方法を紹介します。【SSL化】「このサイトへの接続は完全には保護されていません」の原因を特定した話。【WordPress】SSL化している本サイトに、「このサイトへの接続は完全には保護されていません」のエラーが出たので、原因を特定しました。本サイトは開設当初よりSSL化を実装しているのですが、昨日、ふと...sponsoredスターウォーズ最新作エピソード9は、予想外な結末に!?【ネタバレなし】【スカイウォーカーの夜明け最速レビュー】レイをあの人に見間違えた。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメントデータの処理方法の詳細はこちらをご覧ください。【Nontitle】カドレヘアドライヤーが届いたので開封してみた。【Tips】216件のビューサウロンの正体ついに。