サポート » テーマ » カスタマイズ:メニュー部分にSNSアイコン

  • 解決済 megumi

    (@smegumi)


    こんにちは。
    twenty thirteen カスタマイズについてです。
    メニュー部分右端にSNSアイコンを表示させたいです。
    (アイコンフォントを用いてHTML+CSSで記述したもの。)

    どういう方法で行えば良いのか、ご指導ください。よろしくお願いいたします。

    ヘルプの必要なページ: [リンクを見るにはログイン]

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • CG

    (@du-bist-der-lenz)

    header.php の「#navbar」にコードを挟む。またはメニューでリンクしてアイコン表示にする2つの方法がありませんか。

    スレッド開始 megumi

    (@smegumi)

    ありがとうございます。
    header.php の「#navbar」にコードを挟む方法では動作を確認できました。

    (左端)メニュー_________検索(右端)

    あとは調整。元はこのように一行に収まっていますが
    コードなりテキストなり挟むと改行されメニューバーが、二行分になってしまいます。
    コードの挟む場所を<nav>の中、外、に試してみましたが、いずれも同じでした。

    どこをどう触れば一行で収まるでしょうか?
    お手数をおかけしますが、お手数をおかけしますが、アドバイスお願いいたします。

    ◎メニューでリンクしてアイコン表示にする方法
    落ち着いた色にしたいので画像を用意する必要があるのですが、リンク記入欄でできるのですか
    「#navbar」の方法が複雑になりすぎそうなら試してみます。

    色々と方法はあると思いますが、一番簡単そうなのは、.web-logo-font を <nav> 内に移動し、CSS で <nav> に display: flex をつけてしまうことでしょうか。

    ただこの方法だと幅の細いモバイル端末で検索アイコンとソーシャルアイコンがかぶっちゃうと思うのでそのへんの調整は必要になっちゃいますね。

    スレッド開始 megumi

    (@smegumi)

    ありがとうございます。
    display: flex でうまくいきました。
    SNSアイコンを右寄せから左寄せに変更してから微調整して、モバイル端末で検索アイコンとかぶる問題を回避しました。

    なんとかなってホッとしました。
    お二方とも、ありがとうございました。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「カスタマイズ:メニュー部分にSNSアイコン」には新たに返信することはできません。