前の記事、、
“フッターメニューを作ってみた”からの続きなのですが、
フッターを作るだけでなく、
メニューの文字フォントを変えられるかカスタマイズすべく…記事にしたいと思います。
書体は“M PLUS 1p”
PCにダウンロードしてたフリーフォントからの反映です。
変えたいところは、
❶キャッチフレーズのフォント
❷グローバルメニューのフォント
❸フッターメニューのフォント
でっす。
PCのサイト上で右クリックし、
⇨ ページのソース表示から
コードに当たりをつけ注目…classクラス指定でコード記入していってます。
※ブラウザはEdge使用ですのでご了承ください。
❶キャッチフレーズのフォント
ココはPCだけに表示し、
スマホは非表示にしてるので、、PCだけチェックする感じですね。
外観のカスタマイズから ⇨ 追加CSSをクリック。以下のコードを入力します。
/*PCキャッチフレーズの書体*/
.tagline {
font-family: "M PLUS 1p", sans-serif;
}
❷グローバルメニューのフォント
ここも上に同じく、
ソースの表示から該当するコードを見つけ、コード記入していきます。
/*グローバルメニューの書体*/
li.menu-item {
font-family: "M PLUS 1p", sans-serif;
}
結果…PCは反映OK、
でんも？スマホは反映されてないようです🫠
❸フッターメニューのフォント
上に記した、
❷グローバルメニューのコード記入後、
PCのフッターメニューも同時にフォントが反映されており。
見るとコードが同じですなw
ここでは4つのフッターメニューと、
その下に著作表示があるわけで・す・が…
著作表示の部分だけ…スマホはもちろん、
PCですら変わっておらず💧
フッターメニューはフッターで、
コピーライトには、また別のclass指定がついてるようです。。
ソース上で、
コピーライト部分が出てますけどね😅
開発者ツールでも見てみます。
サイト上で右クリックし、開発者ツールで調査するから入ると、
違うクラス名が出てきたので、
これを記入してみると…
/*PC・スマホの著作反映部分*/
div.source-org.copyright {
font-family: "M PLUS 1p", sans-serif;
}
PCとスマホとも反映しましたです👌
ちなみに
ページのソース表示、開発者ツールともに出てくる以下を記入すると、、
div.footer-bottom-content {
font-family: "M PLUS 1p", sans-serif;
}
フッター全体のエリアなのですが、
PCだけフッター全部（コピーライト含め）が変わり、でもスマホはフッターメニュー反映せず🫠
なので、
スマホの著作表示を強行にw反映するときは、、
コピーライト単独のコードが効く…ってことでしょか。
PCはたいてい反映するも、、
スマホがナゾ状態。。。まだまだカスタマイズにトライです💦
スマホでは
フォントのサイズは指定反映できても、
フォントの種類は指定が無効の様子。。。
どなたか方法がおわかりでしたら、ご教示願いたいと思います。
コメント