Simplicityと「bbPressフォーラム作成プラグイン」を併用するときにstyle.cssに貼り付けるとデザインが整うスタイルシート

このサイトでは、bbPressを使ってフォーラムを作成しています。

ただ、Simplicity+bbPressプラグインでフォーラムを作成すると、ちょっとした事ではありますがデザインが崩れたり、文字が薄かったり小さくなりすぎたり(bbPressの仕様ですけど)してしまいます。

これを修正するスタイルを自分用に書きました。けどせっかく書いたので、「誰かbbPressインストール時に自分と同じ違和感を感じるかもしれない」ということで紹介したいと思います。

bbPressの設置方法は以下を参照してください。
意外と簡単に作れるWordPress掲示板「bbPress」プラグインの使い方

現在このスタイルは、Simplicityデフォルトのスタイルに組み込まれています。

スポンサーリンク

スタイルが崩れる例

例えば、bbPressフォーラムは、投稿ではないので作成日が表示されなくなります。あと、検索フォームの高さがおかしくなります。

SimplicityとbbPress

トピックをクローズすると、文字が薄すぎて読みづらいです。

クローズしたトピックの文字が薄すぎる

書き込んだ文章の文字が小さすぎて読みづらい。

文字が小さすぎる

なんて事になります。

Simplicity+bbPressのスタイル修正

上に書いたようなSimplicity+bbPressのスタイルを修正するには以下のスタイルをテーマ(子テーマ)のstyle.cssにコピペして追記するだけです。

/*SimplicityでbbPressのスタイルを整える*/
.bbp-breadcrumb-home,
.bbp-breadcrumb-home+.bbp-breadcrumb-sep,
.topic .post-date,
.topic .post-update,
.topic .footer-post-meta,
.post-0 .post-date,
.post-0 .post-update,
.post-0 .footer-post-meta,
.forum .post-date,
.forum .post-update,
.forum .footer-post-meta{
    display: none;
}

#bbp_search{
    font-size: 17px;
    height: 28px;
}

.post-0 .post-meta{
    height: 27px;
}

.bbp-reply-content{
    font-size: 16px;
    line-height: 170%;
}

.bbp-forum-title{
    font-size: 16px !important;
}

.bbp-topic-permalink{
    font-size: 14px !important;
}

#bbpress-forums .status-closed,
#bbpress-forums .status-closed a {
    color: #555 !important;
}

style.cssの編集は、Wordpress管理画面から「外観→テーマの編集」からでも行えます。

細かなスタイルの調整は、運営サイトを見ながら行ってください。

適用後のスタイルは、フォーラムを参照してみてください。

まとめ

そもそも、Simplicity+bbPressを使うことはあまりないので需要はないと思います。

けれどももし、bbPressをインストールしてみて、表示に違和感があったら上記のスタイルを試してみてください。

GitHubリポジトリ

不具合等ありましたらGitHubに、ご連絡いただけると幸いです。

yhira/simplicity2

スポンサーリンク
アドセンス(大)
アドセンス(大)

フォローする

スポンサーリンク
アドセンス(大)

コメント

  1. 小泉 より:

    わいひらさん。

    先日はアイキャッチの件、改めてありがとうございました!!(^^)

    ちょうど掲示板をいくつかの僕のサイトに設置することを検討していたところで、このSimplicityのサイトのフォーラムはどうやって作っているのか気になってた所なんです!!

    bbPress を使っていたんですね(^^)

    凄くリアルタイムで、ちょ~参考になる記事でした!!

    ありがとうございます(^^)/

  2. アバター画像 わいひら より:

    こちらこそ良い要望ありがとうございます!
    アイキャッチ結構需要があったみたいです。

    この記事は、「需要はないだろうな」と思いながらも投稿したんですけど意外に反応があってちょっと嬉しいです。

    ここのフォーラムの設置方法は、以下の記事に書いてあるので良かったらまた読んでみてください。
    意外と簡単に作れるWordPress掲示板「bbPress」プラグインの使い方

  3. まきあやや より:

    bbPressすごくいい感じなので、会員制で導入したいのですが、入力欄にある名前、メール、タイトル欄などは追加できるのでしょうか。
    例えば、年齢とか住所などの欄をフォームやチェックボタンなどで追加したいのですが、そういう機能はあるのでしょうか。

    大変お手数ですが、もしよろしかったらお教え下さい。
    よろしくお願いします。

  4. アバター画像 わいひら より:

    これまで、僕が使ってきた限りでは、そういった機能があるようには見えませんでした。
    おそらくそういったフォームを付けるには、カスタマイズをする必要があるのではないかと思います。