グローバルメニュー下にスペースを作る。

Simplicityの特徴 フォーラム Simplicity2に関する話題何でも グローバルメニュー下にスペースを作る。

このトピックには12件の返信が含まれ、2人の参加者がいます。4 ヶ月、 3 週間前 Hidekichi さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #48952 返信

    カエル

    お世話になります。
    グローバルメニューの下(=メインカラムとサイドカラムの上)に、全体のwidthと同じ幅のスペースを作ることは可能でしょうか。可能でしたら、方法をご教授いただけると幸いです。TOP画面、記事画面どちらでも表示されたままでいてくれれば最高です。

    リンク1:サイト
    リンク2:参考までに記事化したもの

    サイト来訪者に見せられる情報量を多くしたいので、リンク付き画像を貼る予定です。関連した質問は、これが成功した後に改めてさせていただければと。(スマホ表示への影響/画像を指定してスマホのタイトル下にも表示/など)

    イメージ

  • #48963 返信
    わいひら
    わいひら
    キーマスター

    Simplicityでは、そういった時用に子テーマにbefore-main.phpテンプレートが用意してあります。
    before-main.phpにHTMLコード(例えばdiv)を書けば、おそらく全体のカラム幅と同じ要素が挿入されると思います。

  • #49138 返信

    カエル

    ご教授有難うございます。特別なファイルがあったのですね。

    さて、とりあえずリンク付き画像を入れ込んでみたところうまくいきました。しかし、本日見てみると急に1カラムのような表示になり、サイドカラムが下に。なにがあったのでしょうか。。。
    cssでは、widthを624pxと336pxに設定しております。

    明けましておめでとうございます。
    昨年はsimplicity2と素敵な出会いができました。本年はいくつか質問をさせていただくこととなりそうです。お忙しいとは存じますが、何卒よろしくお願いいたします。

  • #49139 返信

    Hidekichi

    #body-inのサイズと #main + #sidebar + その間隔 の関係がおかしいためカラム落ちしているだけです。

  • #49140 返信

    Hidekichi

    今の#mainのサイズだと600pxぐらいにしないとダメでしょう。

    あるいは、

    #main { width: calc(100% - (300px + 20px)); }

    とか。サイドバーとその間隔を足したものを100%(#body-inのwidth)から引きます。
    このように#mainを可変にするということは、その中身もレスポンシブにしないといけないということです。ここらを考慮してpxで固定値にするなら#body-inのサイズ調整なり、#mainのサイズ調整が必要です。

  • #49141 返信

    カエル

    ひできちさんありがとうございます。
    ただ先程カラムがおかしくなった時に変更するまでは設定をいじってはなくて、1週間ほど普通に2カラム表示されていたので不思議です。さらに、いまwidthを540、560、570と試してみたのですが変わりません。

    年の変わり目になにがあったんだろう。。。

  • #49155 返信

    みき

    明けましておめでとうございます

    わいひらさん(#48963)
    before-main.phpで出来るんですね
    https://wp-simplicity.com/suport/topic/%E3%82%B5%E3%82%A4%E3%83%88%E3%81%8B%E3%82%89%E3%81%AE%E9%87%8D%E8%A6%81%E9%80%9A%E7%9F%A5%E3%81%8A%E7%9F%A5%E3%82%89%E3%81%9B%E3%82%A6%E3%82%A3%E3%82%B8%E3%83%83%E3%83%88/
    上のときはheader.phpに書いたので

    そしてreCAPTCHAがついていますね

    私はロボットではありません

    私(僕)はロボットではないですよー 笑

  • #49158 返信
    わいひら
    わいひら
    キーマスター

    #49155
    before-main.phpについては、一応説明記事があります。

    before-main.php

    その他にも、メインカラムの手前に何かを挿入したいときに利用するためbefore-main.phpテンプレートが用意してあります。

    before-main.phpを利用したカスタマイズ例を挙げるとすれば、「3カラムの左サイドバーなどをカスタマイズで作りたい」なんて時や「メインカラム手前にウィジェットを新しく設置したい」なんて時などのカスタマイズ用に利用します。
    Simplicity子テーマ内に入っているファイルの役割について解説

    ただ、カスタマイズ方法は、どのようにしても自由ですし、必ず before-main.phpを使わないといけないというわけではなく間違っているというわけではないので。

    私(僕)はロボットではないですよー 笑

    存じているのですが、reCAPTCHAがそういう仕様なもので。。

  • #49159 返信

    みき

    カスタマイズ方法は、どのようにしても自由ですし、必ず before-main.phpを使わないといけないというわけではなく間違っているというわけではなかったので。

    そうですね
    ただheader.phpに書くとアップデートのときにまた記述しないといけないので
    子テーマのphpで出来ればだいぶ楽になるなと思いまして…
    そして詳しい説明ありがとうございます

    存じているのですが、reCAPTCHAがそういう仕様なもので。

    ネタのつもりで書いたのですが…
    すみません
    そして僕がロボットだった場合私(僕)はロボットではないですよー 笑なんて書き込みません 笑
    仮に書いたとしても
    私はロボットではありませんとなる気がします 笑

    でもなぜ質問が私はロボットではありませんなのでしょうかね?
    どちらかといえばあなたは(reCAPTCHAは)ロボットだと思います 笑

    また変なことを長く書いてしまったー
    すみません

  • #49162 返信

    Hidekichi

    とりあえず、サイドバーの336pxにpadding10px(*2)とボーダー幅1px(*2)でトータル358pxになってますから、#body-inが960pxなので、

    960 – 358 = 602

    というのは計算できると思います。#mainは570pxが今設定されていていますがbox-sizing: border-boxが設定されているのでwidthはまんま570pxが適用されますが、#sidebarはbox-sizing: border-boxではないので358pxであるというのは理解しておいてください。
    また#sidebarがfloat: leftになっているので左寄せになってますが、float:rightにすれば32pxの間隔ができると思います。

    > 1週間ほど普通に2カラム表示されていたので不思議です

    1週間ぐらい前の状態がわからないのであれですが、#body-inがデフォルトの1070pxで内容物が入っていたとかではないでしょうか?

  • #49186 返信

    カエル

    何もしていないのに表示が変わるという理解できない現状にうんざりしたので、『Simplicity2_child2』を作り1からやり直してみることにしました。

    しかし今度はカスタム画面でお手軽に変更可能なはずのグローバルメニュー背景色や文字色が変更反映されないなど、ちょっと私のPCは年越しができなかったようです。CSS側からグローバルメニューの箇所のbackground-color:#F7F7F7を変更してもダメでした。

    ホントに意味がわからん。年始からぐったりです。
    Simplicity2が破損でもしたかな。親テーマを1度再インストールしてみることにします。。。

  • #49192 返信

    カエル

    結果。
    自サーバーからSimplicity2を削除し、安定板2.4.0iを再インストールして反映させてみましたが何も変わりませんでした。

  • #49197 返信

    Hidekichi

    before-main.phpを利用せずともjQueryで挿入する方法もあります。
    before-main.phpでももちろん同じことができます。

    サンプル: #body-inの前に何かしら入れ込む | codepen

    before-main.phpに書く場合は、

    <div class="before-main-wrapper"> <div class="inner"></div> </div>

    これだけです。これをサンプルではjQueryで実現しています。

    css欄はscssで書いてあります。css欄の右側下向き三角からview compiled cssでcssに変換したものを利用しますが、基本的に#body-inと#main、#sidebarの内容をそれぞれcssで書けば良いだけです。before-mainの中は好きなようにスタイルしてください。

    before-mainに当たる部分は画像がレスポンシブでアスペクト比維持で高さが可変になります。他はレスポンシブには対応させていません。

    このように特別難しいことは何もなく、極普通のcssで実現できると同時に、このサンプルはSimplicityのデフォルトの親テーマのstyle.cssを読み込んでいるので、実質子テーマstyle.cssに書いてるのと同じです。

    これを適用しても尚問題がある場合は他の要因で問題が出ている可能性があります。例えば、不要なスタイルが書いてあるとか、何かしらのタグの閉じ忘れ等の過不足など。

    サンプルでは、jQueryで処理が行われた時に初めて差し込みが行われるためチラツキのようになりますが、これはやり方次第で何とかなります。

返信先: グローバルメニュー下にスペースを作る。
あなたの情報:




スポンサーリンク
アドセンス(大)
アドセンス(大)