開発 デザイン

PCのグローバルナビとモバイルのサイドメニューをカスタマイズ

モバイル

基本形

文字を大きくして太字にする

行間を広げる

アイコンを付ける

FontAwesomeの場合

①FontAwesomeの公式サイトを開く。

https://fontawesome.com/

②Iconsから好きなアイコンをクリックする。

③アイコンの詳細ページからHTMLをコピーする。
(クリックするとクリップボードにコピーされる)

④(WordPressの場合)ダッシュボード→外観→メニューから「メニュー(ヘッダーメニュー)」を選択し、コピーしたコードをナビゲーションラベルに貼り付ける。

FontAwesomeのHTML + メニュー名になるようにする。

カテゴリーも同様

FontAwesomeアイコンの色を変更する

Web216色の中から好きな色を選び、色名を指定する。

<i class="fontawesomeのアイコン" style="color:◯◯◯◯;"></i> ←好きな色名を入れる

https://www.colordic.org/

アイコンとメニューの間隔を開ける

※まれにfasではなくfarになっているアイコンがあるので注意

モバイル→アイコン表示、PC→アイコン非表示にする

すべてのサイズでアイコンが表示される状態になっているので、画面サイズを指定してPCだけアイコンを非表示にする。

  • この記事を書いた人

やみみん

FGOの考察ブログです。 妄想9割、真面目な考察が1割なので基本当たりません。 Twitter→ @yamimiin

-開発, デザイン
-

© 2021 源氏画報 Powered by AFFINGER5