bbpressのスマホでの表示崩れについて

新しいバージョンではどちらも改善されていると思うんですけれども、アップデートできない事情もあるかと思うんで対処方法を。

以前にどちらも僕が答えたやつなんですけれども、
iPhone6plusでトピックスを見るとレイアウトが崩れている部分があるでは、該当の画面サイズの時に、display:blockを追加するという感じでした。ただ、これだけでは直らない場合もあります。状態がわかればどのように修正すればよいのかわかるのでアドレスを公開してもらえると助かります。

改行がクリアされるのは、
スマホで見た場合の改行がおかしいこんな感じです。
確か、新しいバージョンでは、brの動作の有無を選択できたかと思います。

やってないのでわからないんですけれども、例えば質問のテンプレートの何かしらのような場合は前後にpreタグを入れたら改行されるのではないかなぁと思ったりもします。いやムリかも知れませんけどね。
レスポンシブデザインは様々な画面サイズに対応するというものなので、極力brによる改行をしないというのがベターとされています。
短い単語や文章の場合は、br改行が必要な場合もあります。しかし、文章の途中で改行があると画面サイズによっては変な所で改行が入ったりする場合もあるのです。brタグががdisplay:noneになっていると言うわいひらさんの対応はこれらを意図してのことかと思います。

他の対応方法としては、あるクラスの中のbrのみ改行すると言うことも可能です。

.test br {
  display: block;
}

このようにしておけば、例えば

[div class=”test”]
英語 32点[br]
国語 40点[br]
[hr]
平均 60点
[/div]

今回のテストは全体的によくありませんでした。[br]
もっとがんばりましょう

このようなhtmlの構造があったとして(〈〉でタグをくくると実際にこのページに反映されてしまうので[]でタグを書いてます)、各教科の後ろのbrは.testの中なのでbrが効きます。しかしtestの外にある「今回の…」の所のbrはデフォルトで無効化してあるので「今回の…ましょう」と1行で表示されるようになります。
こういう使い方が良いのではないかなぁとも思ったりも。MTBさんの場合であれば、

.tmpl br {
  display: block;
}

などとして、.tmpl(テンプレ(笑))の中のbrは改行すると子テーマcssに追記するのも方法かと。で、記事を書く時にテンプレ部分の前後に.tmplを入れれば該当部分だけ有効なbrの設定ができます。

Hidekichiさん

丁寧でわかりやすいご説明ありがとうございます。
改行についてアドバイスを参考にやってみましたが、なかなか上手く行かなかったので、テーマを最新版にアップデートすることにしました。

アップデート後表示を確認したところ、改行問題は無事解決致しました！

ただアバター問題は変化が無く表示が崩れていました。

【URL】http://matchthebait.com/forums/topic/%e3%81%8a%e9%9a%a3%e3%81%95%e3%82%93%e3%81%ae%e3%83%95%e3%83%88%e3%82%a2%e3%82%b4%e4%ba%8b%e6%83%85-%e9%a3%bc%e8%82%b2%e7%92%b0%e5%a2%83%e7%b7%a8

どのレイアウトが正しい表示なのかわからないのでアレなんですけど

@media only screen and (max-width: 480px){
	#bbpress-forums .bbp-body div.bbp-reply-author {
	    margin: -15px 10px 10px; /*打ち消したい*/
	    min-height: 100px;
	    padding-left: 80px; /*打ち消したい*/
	    position: relative;
	    text-align: center;
	    width: auto; /*追記*/
	    display: block; /*追記*/
	    float: left; /*追記*/
	    margin: 0 20px 8px 5px; /*打ち消しのため追記*/
	    padding:left: 0; /*打ち消しのため追記*/
	}

	#bbpress-forums .bbp-body div.bbp-reply-author a {
	    width: 100%;
	    margin: 0;
	}

	#bbpress-forums div.bbp-reply-author img.avatar {
	    position: absolute;
	    top: 15px;
	    left: 0;
	    width: 60px;
	    height: auto;
	    display: block; /*追記*/
	    top: 5px;  /*打ち消しのため追記*/
	    width: 100%; /*打ち消しのため追記*/
	    margin: 0 0 5px 0 !important; /*打ち消しのため追記*/
	    padding: 0 !important; /*打ち消しのため追記*/
	}

	#bbpress-forums .bbp-body div.bbp-reply-author br {
	    display:none; /*特に要らないので消す!!*/
	}

	/* アバターの画像に回りこませるために */
	#bbpress-forums .bbp-body div.bbp-reply-content {
	    clear: both;
	    margin: 10px;
	    padding: 0;
	    clear: none: /*追記*/
	}
}

これらは、子テーマmobile.cssのが良いかも知れませんね。
多分修正したcssは書きだしたと思うんですけど、足りない箇所があるかも知れません。今回修正したcssで表示される完成形は以下の画像みたいな感じです。もしこんな感じにならなかったらレス下さい。足りない部分を見つけます。

以下の部分に間違いを発見してしまいました(笑)

#bbpress-forums .bbp-body div.bbp-reply-author {
☓ padding:left: 0;
◯ padding-left: 0;

最後の #bbpress-forums .bbp-body div.bbp-reply-content {

☓ clear: none:
◯ clear: none;

Hidekichiさん

ありがとうございます。
早速頂いたコードを子テーマmobile.cssへ書いてみたのですが、何故か全くレイアウトに変化はありませんでした。キャプチャで頂いたレイアウトが理想なのですが。。

わいひらさん

このページは同じiPhoneから見てもレイアウトは崩れておらず、何故か自分のサイトのみ崩れています。
影響がありそうなプラグインも使用していませんが、念のため一つずつ停止して全て確認してみましたがレイアウトに変化はありませんでした。

http://matchthebait.com/forums/topic/environment

bbpressのcssがだいぶ後で読み込まれているので反映されなかったのではなかろうかと思います。

matchthebait.com/wordpress/wp-content/plugins/bbpress/templates/default/css/bbpress.css

このアドレスで読み込んでいるんですけれども、プラグインフォルダのbbpressを探して、templates/default/css/と辿り、bbpress.cssの一番最後に、今回紹介したスタイルを追記すれば、おそらくcssが効くはずです。

pluginのアップデートで消えると言うことから、管理がしにくいなぁと感じたら、子テーマのheader-insert.phpに直接書いても良いんですが、今回のスタイルを例えばbbress_custom.cssなどとして別ファイルで保存し、子テーマのcssフォルダにアップロード、header-insert.phpには以下のように書いておけば、headタグのほぼ最後でcssを読み込むので反映されるはずです…おそらく。

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>/css/bbress_custom.css">

※ 以下表示テスト。タグがどうなるかをテストします。うまく行けば上のアドレスのエンティティ(クォート等の実体参照がうまく表示されるはず)

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>/css/bbress_custom.css">

あれ？コードがエンティティされてない？
むむむ、何かしら手が入ったのか(笑)

Hidekichiさん

ありがとうございます。

bbpress.cssに直接cssを記入する事で解決致しました!
おっしゃる通り、プラグインのアップデートの事を考えると他ファイルから引っ張る方が良いのですが、こちらは試してみましたが上手くいかなかったので、アップデートごとに手動で書き込む事にます。

ご丁寧にありがとうございましたm(__)m

イケるかどうかはウチに環境がないので試してないんですけど(作ればいいんですが(笑)、

function add_my_bbpress_custom_css (){
	wp_enqueue_style(
		'bbpress_custom_css',
		get_stylesheet_directory().'/css/bbpress_custom.css',
		array('bbp-default'),
		'20150902',
		'screen'
	);
}
add_action('wp_enqueue_scripts', 'add_my_bbpress_custom_css');

こんな感じのを子テーマfunctions.phpに追記します。bbpressのハンドルがわからないので、多分こんなだろうっていう当てずっぽうなんですが、正しければbbpressのdefaultのcssが読み込まれた後にカスタムしたcssが読み込まれるのではないかと思います。

‘bbpress_custom_css’が新しく追加したいファイルのハンドル名、array(‘bbp-default’)の部分が依存関係を示すハンドル名です。依存関係は例えばスクリプトで言うと「jQueryが読み込まれたら」と言う感じに何かそのファイルが読み込まれたら自分のファイルを読み込むという順番を示すものです。

wp_enqueue_style(script)()と言う関数は、勝手に<link href=””…>と言うようなタグを作ります。
#31713で書いたように手書きでもイケルはずなんですが、どこに挿入するかを考えなくてはならないわけです。レスではheader-insert.phpとしました。
しかし、このwp_enqueue_styleでは、その場所は考えなくてもよく、依存するファイル(ここではbbpressのデフォルトcss)が読み込まれたら良い感じの所で勝手にwordpressが挿入したいcssファイル(カスタムcssファイル)を読み込んでくれます。

問題は、カスタムしたcssファイルをどこに保存して、読み込める状態にあるかと言うことでしょうか。

#31713では、子テーマcssフォルダにカスタムしたcssファイルをbbress_custom.cssと言う名前を付けてアップロードしておくと書きました。それは、
get_stylesheet_directory_uri().’/css/bbpress_custom.css’,がやってます。
※ get_stylesheet_uri()は間違いでした。get_stylesheet_directory_uriは現在の利用しているテーマのスタイルシートのアドレスが返ってきます。

get_stylesheet_directory_uriは末尾にスラッシュが含まれません。なので、その後のピリオドで連結している残りのアドレスは’/css/…’とスラッシュから始まっているのです。

もし仮にアドレスがおかしいという場合はここらを調整します。例えばF12キーよりweb開発環境を開いて、headタグを見ます。おそらくアドレスが間違っていてもbbpressのデフォルトcssファイルの付近に読み込まれているはずです。そのアドレスを確かめてどこを読み込んでいるかを調べます。

もしそのアドレスが子テーマのスタイルシートを読み込んでいない場合は、おそらく親テーマの方を参照しているかと思うので、親テーマのcssにカスタムしたcssファイルをアップロードすればよいわけです。しかしそれは子テーマを利用していない時なんじゃないかなぁと思ったりも。

ひとまず試してないんですけれども、親テーマアップデートのたび、あるいはプラグインのアップデートのたびに色々するのは面倒なので、ここらを試してみてはいかがでしょうか？

こちらのトピックに続けていいものか迷いましたが、私も「bbPress」で作ったフォーラムでアバターの表示ずれが起きています。モバイル版のみです。

わいひらさんが返信の中で触れられているとおり、この「simplicity」のフォーラムは正常に表示されていますが、「寝ログ」のほうでは同じようなアバターの表示ずれが見受けられます。

どのような対策が考えられますか？

> アバターの表示ずれ

これは例えば画像に名前が食い込むみたいなやつですかね？

> これは例えば画像に名前が食い込むみたいなやつですかね？

はい。アバターの画像と名前がカブっているのと、MTBさんが最初に挙げられた画像のような位置にアバター画像が来ている感じなのですけど……。

名前のかぶっているのは、

サンプル: フォーラムをいじっていたやつ | codepen

これにscssを追記しましたので、css欄の最後の部分を適用できれば直るかと思います。

別の方法で。
#31678のスタイルでもイケるのかも知れません。前にchromeで実験した時はこれで行けていたのだろうと思うので。
で、#31741で記載したやり方で、bb-pressのcssの後にカスタムしたcssを読み込ませたらいじれると思うんですが、’20150902’の部分は今日の日付とかにしておくのがわかりやすいかも知れませんね。これは子テーマfunctions.phpにでも追記したら良いかと思います。
子テーマのcssフォルダにbbpress_custom.cssと言うのを独自に作っておいて、その中にスタイルのソースを書きます。

このレスの最初にあるサンプルのアバター画像のcssはcodepen上での話なので、実際にはどうなるのかはデベロッパーツールを見ながらになるかと思うんですけれども、名前の部分がかぶるのは、top:15pxが問題です。また、

画像
[br][br]
名前

と言うような意味のわからないbrが入っていて、jQueryで消してしまっても良いのですが、まぁcssでdisplay:noneしておけば良いかと思います。brも高さを持っているので普通に修正していけば、画像の下に余計なスペースが開いて名前となります。余白を作る場合は画像にmargin-bottomを入れればよいわけですからbrは非表示で。

画像自体はインライン要素でposition:relativeになっているのですがtop:15pxが入っているので、文字がズレているというよりは画像がずれています。なので、topを0に指定したり、前のレスでは5pxぐらいに設定していましたが、ここらは任意調整で。

codepenのサンプルは、Simplicity公式のhtmlと各cssを利用しているので、表示自体が同じ(同じhtml、css)であれば、カスタムcssを適用されいるbb-pressのcssより後で読みこめば自由にスタイルできると思います。

ちなみにサンプルのcodepen上のフォーラムは、#投稿IDをボタン化して、クリックしたらそのレスまでスライドするというしょうもないサンプルですので、今回の質問の内容とは何も関係ありません。しかも動作もいまいちなのでいつか修正しようとして何も修正していないという残骸です(笑)
またレスポンシブ化していないので、result画面を狭めた場合、アバター画像やその他設定してある範囲しかレスポンシブ表示しないのでその旨、予め書いておきます。

しかし、bb-pressのhtmlはものすごく汚いです。何のためにこんなに汚くなっているのかがいまいちわからないんですけれども、これ何かしらのスキンを当てたら直るんですかね(笑)

Hidekichiさん、丁寧なご返信に感謝します。
挙げていただいた対策をひとつずつ試していきたいと思います。
取り急ぎお礼まで。

ひと通り試してみましたが、私の技量ではbbpress.cssにスタイルを追記するやり方が一番合っているようです。もっと便利なやり方も挙げていただいたのに申し訳ありません。

本題であるアバターの表示ずれが解消したことをご報告するとともに、改めてお礼申し上げます。

わいひらさん、スタイルへの追記の件、了解しました。
ご対応いただきありがとうございます。