書きたい記事を書きたいように書くFreeブログ

かきてぃーのプロフィールはこちらをクリック!

wordpressテーマ『Seal』スマホ表示のフッターメニューを修正する

 
 
スポンサーリンク
スポンサーリンク
この記事を書いている人 - WRITER -
かきてぃー
21歳に社会へ出て荒波に揉まれ逃げること数回。 2013年にネットビジネスに出会い色んなことに挑戦。無料ブログ系・物販アフィリエイト・ブログアフィリエイト。が、2度挫折し3度目再始動中。 現在の管理サイトはメイン4つのサブ20で合計24サイト運営しています。 主な稼ぎはWEBコンサルやHP制作、FXで月数十万の稼ぎです。 IT業界で学んだスキルを活かしたツールの紹介やテーマ・プラグインのカスタマイズ、実体験を元にした体験記事をメインに書いています。
詳しいプロフィールはこちら

スマホ表示でサイトをチェックしている時に気づいたのですが…

フッターメニューが中央寄せになっていない!?

中央寄せというよりは、決められた幅の中で左寄せになっていますね。

メニューの数が少なければ問題ないのですが、文字数が多かったりすると、折り返しが優先され位置がイマイチです。

今回の記事は左寄せになっているメニューを中央寄せに修正します。

まずは解析をして原因を突き止める

いつものようにデベロッパーツールで解析していきます。

各メニューを囲う親の<ul>は「left:50(左に50%ズラす)」をやっていて子の<li>は「left:-50%(左にマイナス50%ズラす)」をやっています。

かきてぃー
ん?これだと左にズレて、また戻るだけだから意味ないのでは…。

と考えました。

試しにleft:50%を二つとも解除してみます。

 

うん。変わらないね!!!

他に不要なcss、不足しているcssがあるか、「消したり、追加したり」して確認していきます。

全体の<ul>はfloat:leftにする必要なし

全体のメニュー達を囲う<ul>からみていきます。

こいつらは複数あるわけではないので、「float:left」は不要ですね。

追加したいcssとして「displayinline-table」を追加します。

今の状態だとまだ何も変わらないので、次の子要素を修正していきます。

子の<li>はfloat:leftにしない

子要素を左に習う(float:left)をすると、結局左に並んでしまうので、同じ結果になります。

こいつを変えるには左寄せではなく、同じブロック体であることを示す必要があるので、

こんな感じで修正します。

「float:left 、 left:-50%」を削除してdisplayを「inline-block」に変更しています。

変更した結果がこちら。

OK!中央に寄りました。

ちなみに、<ul>に「displayinline-table」を追加しないと、こうなります。

これは、<li>に左右の罫線を指定しているので、そのまま表示されてしまうことにあります。

一番ベストな修正は
この罫線を削除して:first-childなどの擬似クラスで罫線を追加すれば綺麗に表示されるんですけどね…。

displayinline-table」はちょっと無理矢理な方法になります。

スポンサーリンク

今回のまとめ

子テーマのcssには親テーマのfloatやleftを上書きする必要があるため、以下のように設定する必要があります。

追加してサイトを確認すると…

中央に揃って表示されていればOKです。

子テーマcssの追加
親テーマのcssを削除するのはリスクが高いので、削除するというよりは親テーマのfloatやleftを

上書きするってイメージを忘れないで下さい。

念のため、PCサイズのディスプレイも確認しましょう。

かきてぃー
うん!全て綺麗に表示されていれば修正完了です!
かきてぃー
今日の修正はここまで!明日もよろしくお願いします!

テーマを変更しました

人気が高いテーマ「Seal」です!
使い勝手はもちろん、高機能 + SEOに強いテーマとなっているので大満足のかきてぃーです。
気になる方はデモ画面でもみてチェックしてみて下さい!
この記事を書いている人 - WRITER -
かきてぃー
21歳に社会へ出て荒波に揉まれ逃げること数回。 2013年にネットビジネスに出会い色んなことに挑戦。無料ブログ系・物販アフィリエイト・ブログアフィリエイト。が、2度挫折し3度目再始動中。 現在の管理サイトはメイン4つのサブ20で合計24サイト運営しています。 主な稼ぎはWEBコンサルやHP制作、FXで月数十万の稼ぎです。 IT業界で学んだスキルを活かしたツールの紹介やテーマ・プラグインのカスタマイズ、実体験を元にした体験記事をメインに書いています。
詳しいプロフィールはこちら
スポンサーリンク











コメントはこちらです

Copyright© 書きタレ , 2013 ~ 2018 All Rights Reserved.