twenty fifteen,sixteenに追加でヘッダーをつけたい

解決済 saito
(@paddock-gate)

8年、 1ヶ月前

ワードプレス純正テーマのTwenty FifteenとTwenty Sixteenの上部にヘッダーを追加したいです。
付けたいもののイメージとしてはアメブロの上部に表示される、「マイページ」「ピグ」などが記載されているブラウザの幅いっぱいに広がるバーです。
ためしに両テーマともheader.phpの body タグ直下に適当に30文字程度を入力してみたのですが、Fifteenの場合は初めの数文字分がサイドバーに隠れ見えず（スマホレベルまでブラウザを狭めると表示されます）、Sixteenに至っては外枠の上部が厚くなるだけで、ドラッグしても文字が表示されません。
top.phpなどの適当なヘッダーフォルダを作成し、bodyタグ直下にget_template_part(‘top’)を使って呼び出せば表示できるかなと考えているのですが、少なくともFifteenの場合はサイドバーの表示位置を少し下げなければいけなさそうです。が、やり方がわかりません。

ちなみに表示したいヘッダーはアメブロほど高度なものでなく、横一直線で左端にサイトロゴが表示され、スクロールしたら隠れてしまうもので十分です。

8件の返信を表示中 - 1 - 8件目 (全8件中)

천궁 메텔
(@digitmaetel)

8年、 1ヶ月前

ちょうど、新規サイトを Twenty Sixteenのテーマで準備中だったので、試みました。
メニューをインナー・コンテナに入れるか入れないかの違いではないかしら。
（暫定試用、本運用まで頻繁に変更します）

トピック投稿者 saito
(@paddock-gate)

8年、 1ヶ月前

Twenty Sixteenでインナーコンテナに入れずに表示する分には簡単にできるんですが、その外となるとどうも外枠上部が常に表示される設定となっているようで、表示させたいバーと外枠がかぶってしまいます。

천궁 메텔
(@digitmaetel)

8年、 1ヶ月前

外枠上部の分、マージンを取り直しました。

トピック投稿者 saito
(@paddock-gate)

8年、 1ヶ月前

私もまったく同じことを考えてmargin-topでやってみたのですが、やはり枠の外にバーを表示させることはできませんでした。同じくTwenty Fifteenもサイドバー上部にマージンを指定したのですが、タイトル文字などが下がるだけで解決ならずです。
仕方がないのでTwenty FifteenはPCでは左側にサイトロゴ、スマホでは右側にサイトロゴと指定、Twenty Sixteenは枠内にバーを設置しようと思います…。

천궁 메텔
(@digitmaetel)

8年、 1ヶ月前

Twenty Sixteen は body のスタイルで外枠を制御しているようですね。
saito さんのアイデアを取り込んで、両幅もマージンを取ってテーマ自体のレイアウトを活かす方向で、わたしは進めます。

同じく Twenty Fifteen も全体の上に置くと、ヘッダーが位置調整をしようと動きますね。再計算の速度を短めれば良いかもしれないですね。

トピック投稿者 saito
(@paddock-gate)

8年、 1ヶ月前

Twenty Fifteenの場合サイドバーが追加したヘッダーを隠してしまうんですけど、これはどうやって前面に表示させているんですか？

トピック投稿者 saito
(@paddock-gate)

8年、 1ヶ月前

何度も申し訳ないです。Twenty Sixteenのマージンを取り直した件ですが、具体的にどういう値を入れたのですか？どうも枠ピッタリに追加ヘッダーをつけるのができなくて。
トピック投稿者 saito
(@paddock-gate)

8年、 1ヶ月前
Twenty Fifteen,Sixteen双方ともに追加したヘッダーのCSSに
```
position: relative;
z-index: 100;
```
を付け加えることでbodyタグ直下に置いても表示されるようになりました。
ただしFifteenはサイト表示時にサイドバーがつつつ・・・と下がっていきますが…。
一応解決とします。
ありがとうございました。

8件の返信を表示中 - 1 - 8件目 (全8件中)

トピック「twenty fifteen,sixteenに追加でヘッダーをつけたい」には新たに返信することはできません。

トピックタグ

表示