ﾒﾆｭｰﾊﾞｰorﾍｯﾀﾞｰをｾﾝﾀﾘﾝｸﾞする方法を教えていただきたいです｡現在使用中のﾃｰﾏは Nakedです｡色々な方のｻｲﾄを参考にしてみてもなかなかできずに左寄…

人力検索はてな

ﾓﾊﾞｲﾙ版を表示しています｡PC版はこちら

ﾒﾆｭｰﾊﾞｰ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つにまとめて
ﾄﾞﾛｯﾌﾟﾀﾞｳﾝﾒﾆｭｰにしたいのですがどうすればできるのでしょうか

ﾚｽﾎﾟﾝｼﾌﾞﾃﾞｻﾞｲﾝ対応のﾒﾆｭｰ表示を導入する
ﾒﾆｭｰを2つ(PC用/ｽﾏｰﾄﾌｫﾝ用など)用意して､画面ｻｲｽﾞで表示を切り替える

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

素人さんのｺﾒﾝﾄ
ご丁寧にありがとうございました(；；) そちらの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までの端末で適用したいﾃﾞｻﾞｲﾝ */ } << 手元の環境では､どの部分が意図していないのか確認できませんでしたので､お手持ちの端末にて確認しながら調整を行うと良いかと思います｡

素人さんのｺﾒﾝﾄ
ぽけっとしすてむさんのおかげで色々な事が解決しています！！ありがとうございました(；；)