• 解決済 wilsher

    (@wilsher)


    各ボタンの幅が字数によって異なりますが、幅を揃えることは可能ですか?

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • おそらく直接触る形となりますが、CSSを変更すれば可能です。
    閲覧環境によっては設定した幅をはみ出してしまうケースもあるため、余裕を持った数値がよろしいかと思います。

    トピック投稿者 wilsher

    (@wilsher)

    jmbluesさん、ありがとうございます。
    具体的には、どの場所でしょうか?

    travelifyのグローバルメニューの各ボタンという表現について

    Travelify テーマ
    https://wordpress.org/themes/travelify

    についてグローバルナビゲーション(最上部ロゴの下にある緑の帯)のそれぞれのリンクの幅を一定間隔に調整ということでOKでしょうか。

    対応としては jmbluesさんも回答されている通り、CSSでの対応となるかと思います。こういった作業は、Webサイトを作成する上での必須技術となりますので、是非学んでいただければ、今後、他の部分で修正が出た場合にも対応ができるようになって良いと思います。

    学んでいく方法として、Chromeが提供するChromeデベロッパー・ツールを利用すると、修正したい場所について、どのCSSファイルの、どの箇所を直すと良いかが、すぐにわかるのでオススメです。詳しくは下記などの解説サイトを御覧ください。

    Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能
    http://www.buildinsider.net/web/chromedevtools/01

    さて、前置きが長くなりましたが、本題の箇所です。言われているテーマと修正希望箇所が私の認識とあっている場合、ちょっと調べた所、

    style.cssの660行目付近に

    #main-nav a {
    color: #fff;
    display: block;
    float: left;
    font-size: 14px;
    padding: 8px 12px 0 10px;
    height: 32px;
    }

    というところがあります。これが実際のメニューの幅を指定していますので。
    たとえばこれに

    width:100px;

    などと追加すれば、すべて100pxになるはずです。ただ、ドロップダウンで表示されるメニューやレスポンシブ時(実際にこのテーマを使ったことがないので、レスポンシブするかどうかも不明です。)にどうなるかまでは検証していません。

    この辺りは、先にご紹介したChromeデベロッパー・ツールとにらめっこしながら、調整の挑戦を指定だければと思います。

    トピック投稿者 wilsher

    (@wilsher)

    megane9988さん、ありがとうございます!
    無事に解決しましたm(__)m

    そうですね、必要な技術になりますよね。
    ご指摘、ありがとうございます。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「travelifyのグローバルメニューについて」には新たに返信することはできません。