【Cocoon】グローバルナビメニューのアイコンフォントだけ色を変える方法!
2021.03.21

ちょここ
こんにちは、ちょここです☆
今回はヘッダーメニューのアイコンフォントだけ色を変える方法です!
【パターン①】
【パターン②】
このようにアイコンフォントの色だけ変えることができます。
色を変えるコードをコピーするだけで簡単にできますので、ぜひ試してみてください!
アイコンフォントをカスタマイズする方法はこちらの記事をどうぞ!!
アイコンフォント パターン①
WordPressを開く
【外観】→【メニュー】の順にクリック
タブをクリック
カラーコードをコピー
こちら↓をコピーする。
style="color: #FF6565"
コードを貼り付け
半角スペースを必ずいれてください。
そして【#FF6565】のところにお好きな色のカラーコードを入力してください。
保存をクリック
これで完成です。完成図がこちらになります。
ワンポイントアドバイス
アイコンフォントとカテゴリー名の間がなんだか近く感じた方!!
文字の前に【半角スペース】をいれてください。
完成図がこちら
隣のカテゴリーと見比べてどちらが好みでしょうか?
アイコンフォント パターン②
style="color: #FF9999"
やり方はパターン①と一緒です。
【#FF9999】のところにお好きな色のカラーコードを入れてください。
あとは保存をクリックして完成です!!
このようにちょっとした工夫でブログの見栄えが変わりますので、いろいろと試してみてくださいね☆
【Cocoon】グローバルナビメニューのアイコンフォントだけ色を変える方法!
"+t+""+v+""+">"}var u,c=e(42),f=e(64),a=e(59),p=e(48),s=e(66),l=e(39),y=(e=e(47),"prototype"),v="script",d=e("IE_PROTO"),b=function(){try{u=new ActiveXObject("htmlfile")}catch(t){}var t;b="undefined"==typeof document||document.domain&&u?function(t){t.write(i("")),t.close();var n=t.parentWindow.Object;return t=null,n}(u):((t=l("iframe")).style.display="none",s.appendChild(t),t.src=String("javascript:"),(t=t.contentWindow.document).open(),t.write(i("document.F=Object")),t.close(),t.F);for(var n=a.length;n--;)delete b[y][a[n]];return b()};p[d]=!0,n.exports=Object.create||function(n,r){var e;return null!==n?(o[y]=c(n),e=new o,o[y]=null,e[d]=n):e=b(),r===t?e:f(e,r)}},function(t,n,r){var e=r(5),o=r(41),i=r(42),u=r(10),c=r(65);t.exports=e?Object.defineProperties:function(t,n){i(t);for(var r,e=u(n),f=c(n),a=f.length,p=0;p
タイトルとURLをコピーしました