この記事では、記事内にナビゲーションバー（グローバルメニュー）
の文字サイズを変更、位置を右に寄せる方法を紹介しています
ナビゲーションバーとはブログ上部に表示される
横長のメニューバーの事です
HOME、Twitter、Instagram、フォーム、
プロフィール、お問い合わせ、サイトマップなどに
使っている人が多いようです
■更新履歴
・2023年4月2日…テンプレ作成
手順
①左メニューから「テーマ」をクリックします
②カスタマイズの右にある▼から「HTMLを編集」をクリックします
③コード内を適当に一度クリックした後、
Ctrl＋Fを押して「Serch：～」（検索窓）を出します
④「Serch：～」に以下のワードをコピペしてEnterキーで検索します
#navigation{ を探して以下のコードを変更します
⑤以下のコードが見つかるので
文字サイズを1.5から 1.2 へ変更しましょう
右に寄せたい場合は、赤色の行 を追加しましょう
右に寄せたい場合は、赤色の行 を追加しましょう
■変更前
#navigation{
padding: .2em 0 .2em 0;
font-size: 1.5rem;
background: $(brand.subcolor);
color: $(brand.subfont);
}
■変更後
#navigation{
padding: .2em 0 .2em 0;
font-size: 1.2rem; /* 文字サイズ変更：1.5 →1.2 */
background: $(brand.subcolor);
color: $(brand.subfont);
}
⑥「Serch：～」に以下のワードをコピペしてEnterキーで検索します
#navigation-content ul{ を探して以下のコードを変更します
⑦以下のコードが見つかるので
右に寄せたい場合は、赤色の行 を追加しましょう
■変更前
#navigation-content ul{
display: flex;
flex-wrap: wrap;
}
■変更後
#navigation-content ul{
display: flex;
justify-content: flex-end; /* 1行追加：右寄せ */
flex-wrap: wrap;
}
⑦成功するとこんな感じになります
お疲れさまでした
0 件のコメント:
コメントを投稿