Simplicityの特徴 › フォーラム › Simplicity2に関する話題何でも › グローバルメニュー下にスペースを作る。
- このトピックには12件の返信、2人の参加者があり、最後にHidekichiにより7年、 2ヶ月前に更新されました。
-
投稿者投稿
-
-
カエルゲスト
お世話になります。
グローバルメニューの下(=メインカラムとサイドカラムの上)に、全体のwidthと同じ幅のスペースを作ることは可能でしょうか。可能でしたら、方法をご教授いただけると幸いです。TOP画面、記事画面どちらでも表示されたままでいてくれれば最高です。サイト来訪者に見せられる情報量を多くしたいので、リンク付き画像を貼る予定です。関連した質問は、これが成功した後に改めてさせていただければと。(スマホ表示への影響/画像を指定してスマホのタイトル下にも表示/など)
Attachments:
-
わいひらキーマスター
Simplicityでは、そういった時用に子テーマにbefore-main.phpテンプレートが用意してあります。
before-main.phpにHTMLコード(例えばdiv)を書けば、おそらく全体のカラム幅と同じ要素が挿入されると思います。 -
カエルゲスト
ご教授有難うございます。特別なファイルがあったのですね。
さて、とりあえずリンク付き画像を入れ込んでみたところうまくいきました。しかし、本日見てみると急に1カラムのような表示になり、サイドカラムが下に。なにがあったのでしょうか。。。
cssでは、widthを624pxと336pxに設定しております。明けましておめでとうございます。
昨年はsimplicity2と素敵な出会いができました。本年はいくつか質問をさせていただくこととなりそうです。お忙しいとは存じますが、何卒よろしくお願いいたします。 -
Hidekichiゲスト
#body-inのサイズと #main + #sidebar + その間隔 の関係がおかしいためカラム落ちしているだけです。
-
Hidekichiゲスト
今の#mainのサイズだと600pxぐらいにしないとダメでしょう。
あるいは、
#main { width: calc(100% - (300px + 20px)); }
とか。サイドバーとその間隔を足したものを100%(#body-inのwidth)から引きます。
このように#mainを可変にするということは、その中身もレスポンシブにしないといけないということです。ここらを考慮してpxで固定値にするなら#body-inのサイズ調整なり、#mainのサイズ調整が必要です。 -
カエルゲスト
ひできちさんありがとうございます。
ただ先程カラムがおかしくなった時に変更するまでは設定をいじってはなくて、1週間ほど普通に2カラム表示されていたので不思議です。さらに、いまwidthを540、560、570と試してみたのですが変わりません。年の変わり目になにがあったんだろう。。。
-
みきゲスト
明けましておめでとうございます
わいひらさん(#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がついていますね
私はロボットではありません
私(僕)はロボットではないですよー 笑
-
わいひらキーマスター
#49155
before-main.phpについては、一応説明記事があります。before-main.php
その他にも、メインカラムの手前に何かを挿入したいときに利用するためbefore-main.phpテンプレートが用意してあります。
before-main.phpを利用したカスタマイズ例を挙げるとすれば、「3カラムの左サイドバーなどをカスタマイズで作りたい」なんて時や「メインカラム手前にウィジェットを新しく設置したい」なんて時などのカスタマイズ用に利用します。
Simplicity子テーマ内に入っているファイルの役割について解説ただ、カスタマイズ方法は、どのようにしても自由ですし、必ず before-main.phpを使わないといけないというわけではなく間違っているというわけではないので。
私(僕)はロボットではないですよー 笑
存じているのですが、reCAPTCHAがそういう仕様なもので。。
-
みきゲスト
カスタマイズ方法は、どのようにしても自由ですし、必ず before-main.phpを使わないといけないというわけではなく間違っているというわけではなかったので。
そうですね
ただheader.phpに書くとアップデートのときにまた記述しないといけないので
子テーマのphpで出来ればだいぶ楽になるなと思いまして…
そして詳しい説明ありがとうございます存じているのですが、reCAPTCHAがそういう仕様なもので。
ネタのつもりで書いたのですが…
すみません
そして僕がロボットだった場合私(僕)はロボットではないですよー 笑なんて書き込みません 笑
仮に書いたとしても
私はロボットではありませんとなる気がします 笑でもなぜ質問が私はロボットではありませんなのでしょうかね?
どちらかといえばあなたは(reCAPTCHAは)ロボットだと思います 笑また変なことを長く書いてしまったー
すみません -
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で内容物が入っていたとかではないでしょうか?
-
カエルゲスト
何もしていないのに表示が変わるという理解できない現状にうんざりしたので、『Simplicity2_child2』を作り1からやり直してみることにしました。
しかし今度はカスタム画面でお手軽に変更可能なはずのグローバルメニュー背景色や文字色が変更反映されないなど、ちょっと私のPCは年越しができなかったようです。CSS側からグローバルメニューの箇所のbackground-color:#F7F7F7を変更してもダメでした。
ホントに意味がわからん。年始からぐったりです。
Simplicity2が破損でもしたかな。親テーマを1度再インストールしてみることにします。。。 -
カエルゲスト
結果。
自サーバーからSimplicity2を削除し、安定板2.4.0iを再インストールして反映させてみましたが何も変わりませんでした。 -
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で処理が行われた時に初めて差し込みが行われるためチラツキのようになりますが、これはやり方次第で何とかなります。
-
-
投稿者投稿