メニューバーorヘッダーをセンタリングする方法を教えていただきたいです。

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

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

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

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

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2017/03/05 18:00:03

ベストアンサー

id:psne No.1

回答回数605ベストアンサー獲得回数334

はてなブログ デザイン設定 の「デザイン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つにまとめて
ドロップダウンメニューにしたいのですがどうすればできるのでしょうか

  • レスポンシブデザイン対応のメニュー表示を導入する
  • メニューを2つ(PC用/スマートフォン用など)用意して、画面サイズで表示を切り替える

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

他11件のコメントを見る
id:psne

レスポンシブデザインの設定があるため、携帯版の変更も「デザインCSS」から調整する事ができます。
メディアクエリという追加の設定をする事で、携帯版(画面の幅がスマートフォンサイズ)のみ表示を変更できるようになります。
メディアクエリの利用 - MDN
一例として以下のような記述となります。

@media screen and (max-width: 680px) {
/* 画面表示 横幅680pxまでの端末で適用したいデザイン */
}


手元の環境では、どの部分が意図していないのか確認できませんでしたので、お手持ちの端末にて確認しながら調整を行うと良いかと思います。

2017/02/27 18:28:12
id:bsksbsks

ぽけっとしすてむさんのおかげで色々な事が解決しています!!ありがとうございました(;;)

2017/02/27 22:14:14

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません