メニューの幅、均一

  • このトピックには11件の返信、2人の参加者があり、最後にHidekichiにより10年、 6ヶ月前に更新されました。
11件の返信スレッドを表示中
  • 投稿者
    投稿
    • #34280
      山田
      ゲスト

      こんにちは、

      以下の点について回答いただきたいです。

      ・ヘッダーメニューの高さを変更
      ※一度試して変更できたのですが、PCでは画面幅を小さくすると
      メニューが出てこなくなりました。

      ・ヘッダーメニューがデフォルトで左寄りなっているが、均一(中央揃え)にする方法

      ・アドセンスの広告表示位置について
      投稿上に短いアドを張ったが、スポンサーリンクの文字が表示されない
      また、3つの広告が表示されているので、投稿上に表示すると規約違反になる(広告4つ表示)
      関連下の広告をなくしたい

      以上、お手数ですがよろしくお願いします。

    • #34283
      Hidekichi
      ゲスト

      > PCでは画面幅を小さくするとメニューが出てこなくなりました。

      これはそういう仕様です。タブレットサイズの時は多分メニューは出てこなかったかと思います。
      子テーマstyle.cssなどに、タブレットのサイズでもメニューを表示するようなメディアクエリを書く事で表示されるようになります。

      > ヘッダーメニューの高さを変更

      だいたいどれぐらいに変更したいですか?(目安として何も自分ぐらいの高さみたいな感じで)
      仕様が分かればサンプルを提示することもできます。

      > ヘッダーメニューがデフォルトで左寄りなっているが、均一(中央揃え)にする方法

      これは、均一にできるんですけれどもメニューの数とメニュー自体の文字数と言うか横幅によって方法が異なります。目安として、メニュー数と、だいたい何文字ぐらいが最大かの仕様が欲しい所です。
      あわせて、高さを変更すると言う質問があるぐらいですから、高さも考慮されているのかと思うんですけれども、サブメニューがある場合の表示方法で問題が出る場合があります。※ サブメニューがなければサックリイケます。

      例えば、メニューの文字数が多い場合、均一に並べるためメニューアイテムの横幅を設定するとします。そうすると、一部はそのまま表示され、長いメニューは折り返されるため2行になったりします。
      サブメニューはマウスホバーによって表示されるのですが、うまく調整しないと表示されたサブメニューが他のメニューに干渉してしまったりすることがあります。また縦中央にメニューを揃えるのも現状のままでは難しいかも知れません(cssで対応可能…と思います)。

      メニューのセンタリング自体は簡単にできますが、それをするためには一定の仕様を決めないといけなかったり、jQueryを使用したりする必要もあったりするので、そのあたりをどうするかの仕様を考えてみて下さい。

      メニューアイテムが、例えば6つぐらいしかなく、かつ1行で納まる程度の長さ(折り返しが発生しない場合)であればcssだけでさっくりイケます。

      > アドセンスの広告表示位置について

      >> 投稿上に短いアドを張ったが、スポンサーリンクの文字が表示されない

      これは何をどのようにしてはったかがわからないと原因特定が難しいかと思います。短いアドとはどういったものでしょうか?

      >> 3つの広告が表示されているので

      どの位置にどのウィジェットで貼り付けてあるかと、関連下の広告はカスタマイザーで「コンテンツ上部にバナー表示」や「サイドバートップ」と選べますが、この部分はどうのようになっているか、あるいはサイドバートップにしたけれども、それも必要ないとかと、もう少し詳細が必要かと思います。

    • #34360
      山田
      ゲスト

      > PCでは画面幅を小さくするとメニューが出てこなくなりました。
      メニューをクリックしても、全てのカラムが表示されないということです。

      >だいたいどれぐらいに変更したいですか?(目安として何も自分ぐらいの高さみたいな感じで)
      デフォルトの1.5倍ぐらいです。

      >目安として、メニュー数と、だいたい何文字ぐらいが最大かの仕様が欲しい所です。
      メニュー数は6ですが、今後、増やすかもしれません。
      文字数は短いので3文字、長いので14文字

      >どの位置にどのウィジェットで貼り付けてあるかと、関連下の広告はカスタマイザーで「コンテンツ上部にバナー表示」や「サイドバートップ」と選べますが、この部分はどうのようになっているか、あるいはサイドバートップにしたけれども、それも必要ないとかと、もう少し詳細が必要かと思います。

      336 x 280、300×250、を張っています。
      320×20の広告をウジェットの投稿上に追加しました。

      336×280を1つ減らしたいです。(理由は300×250、を消すとスマホで表示されないからです。)
      また、投稿上にスポンサーリンクの表示がされていない解決方法がしりたいです。
      ※デフォルトで336 x 280、300×250、にはスポンサーリンクの文字があります。

      よろしくお願いします。

    • #34363
      Hidekichi
      ゲスト

      メニュー均一について

      サンプル: flexでメニューをリデザイン | codepen

      aタグの中のテキストを縦中央に寄せるため、一部jQueryを利用してます。内容としてはテキストをspanで囲むだけ。

      こんな感じでどうでしょうか?

      広告の件については、ワイひらさんの方がサックリと解答できると思いますので、ひとまず割愛しますが、ひとつだけ。320×20ってサイズはGoogleのですかね?

    • #34373
      アバター画像わいひら
      キーマスター

      ウィジェットでの広告設定については、以下に書いてあります。
      Simplicity広告用ウィジェットの設定方法

      ラベルが表示されてない場合は、CSSのdisplayでラベルを表示設定にすれば表示されるかと思います。
      ラベルの、CSSの調べ方については、以下のデベロッパーツールを使った方法などを参考にしてください。
      WordPressテーマのCSSカスタマイズ向けChromeデベロッパーツールの使い方

    • #34620
      山田
      ゲスト

      >サンプル: flexでメニューをリデザイン | codepen

      試してみました。
      スマホで見ると、多少の画面幅に余裕がでて
      指で左右に動く部分があります。

      モバイルフレンドリーの観点からも
      よろしくはないと思います。

      お手数ですが、改善策をご提示いただけないでしょうか?

    • #34625
      アバター画像わいひら
      キーマスター

      修正方法を見るには、実際のページのURLを貼っていただいて、ソースを見るのが最も手っ取り早いかと思います。
      サイトのURLを貼っていただいて良いですか?
      サイトの状態によっても、修正方法も変わってくると思うので。

    • #34627
      Hidekichi
      ゲスト
      *,*;;before,*::after {
        box-sizing-border-box;
      }

      でどうでしょう?

    • #34628
      Hidekichi
      ゲスト

      あ、つなげてしまった。

      *,*::before,*;;after {
        box-sizing: border-box;
      }
    • #34629
      Hidekichi
      ゲスト

      ぶ、afterの所は、*::afterです。

    • #34630
      山田
      ゲスト

      変わりなく、改善されません

    • #34632
      Hidekichi
      ゲスト

      フォーラムの一覧に、わいひらさんが書いているルールの中にアップローダーのアドレス等がありますので、今どうなっているかの画像を上げてもらうか、サイトアドレスを公開してもらったらわかるかと思うんですが、基本的に、僕が提示しているサンプルに隙間はでないはずですので、box-sizingが違うとなると、おそらくはどっかにpaddingやらmarginやらが指定してあって、その隙間が押し広げているんだろうと思うんですけれども。
      あるいは、box-sizing: content-boxが指定してある何かしらがあるとか。

      ちなみにサンプルの上下どちらで試されてますか?

      あと、「多少の画面幅に余裕がでて、指で左右に動く部分があります。」ここをもう少し具体的に詳しく説明おねがいします。どの部分の何がどうなっているみたいな感じで。

11件の返信スレッドを表示中
  • フォーラム「Simplicityについての質問」には新規投稿および返信を追加できません。
スポンサーリンク
アドセンス(大)
アドセンス(大)