人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

メニューバーorヘッダーをセンタリングする方法を教えていただきたいです。
現在使用中のテーマは Nakedです。
色々な方のサイトを参考にしてみてもなかなかできずに左寄せの状態になっています。
HTML、CSSなどの知識が皆無なので分かりやすく教えていただけると幸いです(;_;)

コピペで一発!みたいなものをやっても中に入れる文字や数字が分からなくて
結局変更できずにいる状態です・・よろしくお願いいたします;;

HTMLとCSSを記入したいのですが有料で購入したものなので貼りつけていいものか分からず…

2つ目は、 レスポンシブデザインに設定したのですが携帯からみると
タイトル画像が小さすぎるのですがサイズ変更はどのように設定したらいいのでしょうか;;
携帯から見るとメニューバーもズラッと表示されるので1つにまとめて
ドロップダウンメニューにしたいのですがどうすればできるのでしょうか;;
質問ばかりで申し訳ありませんがどなたか教えていただけると幸いです。



●質問者: 一重人間
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● ぽけっとしすてむ
ベストアンサー

はてなブログ デザイン設定 の「デザインCSS」に以下の設定を追加すると、どのように表示されますか?

※タイトル画像の設定とメニューの中央寄せの設定が含まれています。

#cssmenu ul {
 text-align: center;
}

@media (max-width: 768px) {
 .header-image-only #blog-title #blog-title-inner {
 height: 150px;
 background-size: contain;
 }

 #cssmenu ul {
 text-align: initial;
 }
}



携帯から見るとメニューバーもズラッと表示されるので1つにまとめて
ドロップダウンメニューにしたいのですがどうすればできるのでしょうか

などはいかがでしょうか。


一重人間さんのコメント
ご丁寧にありがとうございました(;;) そちらのCSSを追加してみたのですが何も変化はありませんでした・・;_;

ぽけっとしすてむさんのコメント
他の回答者の方も回答できるように、修正したいブログのURLは提示できますか? ※修正したいブログがメインブログであれば、現在の状況が分かるよう、上記のCSSも貼り付けた状態であると助かります。

一重人間さんのコメント
参考させていただいたCSS、HTMLはhttp://www.yukihy.com/entry/dropdown-toggle-menuです。 自分のブログはhttp://bsksbsks.hatenablog.com/ になります;_; 質問ばかりで申し訳ありません;_;

ぽけっとしすてむさんのコメント
[f:id:psne:20170226194406p:image] 質問投稿時と現時点で、ブログのHTMLが変更されているようですが、現在のHTMLでの質問で宜しいですか? カスタマイズとして導入されたHTMLとCSS(デザイン)はセットになるため、HTML側を変更すると、すべての回答が無意味なものになります。

一重人間さんのコメント
コロコロと変更して申し訳ありません;;できる事なら最初のHTMLで進めたかったのですが レスポンシブデザインがどうも難しいようなのでテーマ作者さんの方を試しにしていました;; 現在のテーマの方でお願いします;;

一重人間さんのコメント
メニューバーの中央揃えはなんとかできました!(なぜできたのかも不明なのですが・・)ありがとうございました。 しかしタイトル画像のサイズが携帯から見ると合っていません;;

ぽけっとしすてむさんのコメント
デザインCSSの最後に >> .header-image-only #blog-title #blog-title-inner { background-size: contain; } << こちらを追加して設定を保存すると、どのようになりますか?

一重人間さんのコメント
うわあああああああああああああああああああああああすいませんできました!!(´;ω;`) ありがとうございました;;本当に感謝しております。

一重人間さんのコメント
質問ばかりして本当に申し訳ないのですがタイトル画像とメニューバーの下にタイトル画像での 背景?余白が飛び出すのですが(メニューバーの縦幅を太くしても直りません) この場合はどうしたらいいのでしょうか;;

ぽけっとしすてむさんのコメント
[f:id:psne:20170226225006p:image] 下の余白部分でしょうか。(この画像ではオレンジ色に見えます。) 先ほどの方法と同じように、デザインCSSの最後に >> #menu{ margin: 10px auto 0 auto; } << こちらを追加して設定を保存すると、どのようになりますか?

一重人間さんのコメント
すごいです!!!解決しました!本当にありがとうございます(;_;)!! 携帯から見るとタイトル画像が幅が大きく感じメニューバーの幅が細く感じるのですが これもCSSで変更可能なのでしょうか?PCで見ると変更されているのですが 携帯版に反映されていないようなので・・本当に質問ばかりして申し訳ありません;; なんといっていいものか・・

ぽけっとしすてむさんのコメント
レスポンシブデザインの設定があるため、携帯版の変更も「デザインCSS」から調整する事ができます。 メディアクエリという追加の設定をする事で、携帯版(画面の幅がスマートフォンサイズ)のみ表示を変更できるようになります。 [https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_queries:title=メディアクエリの利用 - MDN] 一例として以下のような記述となります。 >> @media screen and (max-width: 680px) { /* 画面表示 横幅680pxまでの端末で適用したいデザイン */ } << 手元の環境では、どの部分が意図していないのか確認できませんでしたので、お手持ちの端末にて確認しながら調整を行うと良いかと思います。

一重人間さんのコメント
ぽけっとしすてむさんのおかげで色々な事が解決しています!!ありがとうございました(;;)
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ