WordPressテーマSANGOの質問

サイドバーの背景画像の上側に30pxくらいの隙間ができます。

アバター
MINOCAME

初めまして。一昨日からSANGOの使用開始して調整中です。
サイドバーの背景画像とウィジェットのタイトルの間に30pxくらいの隙間が出来ます。サイトでご確認頂けます。この隙間を消す方法を教えて下さい。子テーマのstyle.cssの記述は、以下のご指定の通りで手を加えていないです。Jetpack はまだ入れていないです。

.yourprofile {
padding: 10px 0;
}
.yourprofile .profile-img {
margin: 10px auto 0;
}

——
昨日、サイドバーの背景画像の上側に30pxくらいの隙間が出来るとご連絡したMINOCAMEです。昨日と今朝、いろいろCSSの書き方を変えながらトライ&エラーを繰り返した結果、以下のようにしたら、一応背景画像上部の隙間がようやく消えてくれました。
暫くこの状態で使い続けてみます。プラグインやSANGOのアップデータの後に問題が再発しないことを祈ります。

プロフィールを表示する
記事下にプロフィール(この記事を書いた人)を設置する
コメントへの回答
サルワカくん
サルワカくん
2019/08/19

自己解決していただき、ありがとうございます。
おそらく原因がわかったため、参考までに回答をさせていただきます。
拝見したところ、HTMLまわりに余計な空白コードが入っているようです。

<div class="profile-content">
 &nbsp;<p>紹介文…</p>
</div>

nbsp;というあたりが空白コードになります。
たしかWordPressでは2連続スペースが入るとがnbsp;になってしまうと思われるため、タグとタグの間の空白を詰めていけば問題は解消すると思われます。
よろしくお願いします。

アバター
MINOCAME
2019/08/24

サポート感謝いたします。

空白コードと思われる部分を全部除外した結果、背景画像の上側にあった隙間は半分以下になりました。しかし、

.yourprofile {
padding: 10px 0;
}
.yourprofile .profile-img {
margin: 10px auto 0;
}

を適用すると依然としてまだ少し隙間が空きます。よって、以下のように背景画像に対して

.yourprofile .profile-background {
margin: -15px 0px 0px 0px;
padding: 0px;
}

を適用したら隙間は消えました。以前は、-15pxのところが-32pxにしてようやく隙間が消えましたので空白コードを排除したことで隙間は減りましたが、私が気が付いていないだけで、まだ何か隙間の原因となる空白コードが残っているのかもしれないです。

いずれにしましても、サポート有難うございます。

サルワカくん
サルワカくん
2019/08/24

丁寧なご報告ありがとうございます。
再度調べたところ、

<p class="profile-background"><img src="~" alt="~"></p>

の部分を

<div class="profile-background"><img src="~" alt="~"></div>

というように
pタグからdivタグに書き換えることで無駄な隙間がなくなるかと思われます。
(ドキュメント内のHTMLもdivタグを使うように書き換えました)

お手数をおかけしますが、もし余裕があれば、

.yourprofile .profile-background {
  ~
}

を削除したうえで、上記部分をdivタグに書き換えていただければと思います。
よろしくお願いします。

アバター
MINOCAME
2019/08/24

 サルワカさん、迅速なる追加支援有難うございます。

 有難うございます。解決しました。

 私はこの13年くらい一人で週末に時々HTMLやCSSの本を読んで見様見真似で適当にホームページとか作っていました。JUGEMブログからワードプレスに移行する作業も何もわからない中なんとかやってきました。今回の問題は、HTMLとCSSの基礎を分かっているみなさんなら難なく解決できるのでしょうね。ご迷惑おかけしました。でも、CSSとHTMLのお勉強は、53歳になった私には、将来のボケ防止という意味でもよいかもです(笑)

 有料テーマとしてSANGOを選んで良かったです。今回頂いたサポートで、サルワカさんのテーマが凄く人気がある理由の一端を垣間見た思いです。

 これからも、なにか不具合に遭遇したら質問させてもらうかもしれないです。引き続き、宜しくお願いします。

サルワカくん
サルワカくん
2019/08/24

そう言っていただけると嬉しい限りです。
作った甲斐がありました。
今後ともよろしくお願いいたします。