bbPressのデザインカスタマイズ【WPで本格掲示板サイト構築】

2019-09-252020-06-1425分

クロサイくん

デフォルトの画面

まず、当記事でカスタマイズしていく画面一覧ですが

フォーラム（カテゴリ）一覧画面
トピック（スレッド）一覧画面
トピック（スレッド）詳細画面

これらのデフォルト画面を順番に紹介します。

注意

当然ですが、使用するテーマによって下画像とデザインはやや異なります。

1.フォーラム（カテゴリ）一覧画面

bbpressのカスタマイズする画面一覧

この画面はフォーラム一覧ですが、要はカテゴリ一覧です。今ここにはtestというカテゴリがあるんだというような感じですね。

2.トピック（スレッド）一覧画面

bbpressのカスタマイズする画面一覧

これはtestというカテゴリにあるトピック（スレ）一覧画面です。「test」カテゴリに「あ」というスレがある状態ですね。（名前適当すぎた）

3.トピック（スレッド）詳細画面

bbpressのカスタマイズする画面一覧

そんで「あ」スレのコメント一覧画面です。今回は、この「フォーラム一覧」、「トピック一覧」、「トピック詳細画面」の3つを編集していきます。

下準備

FontAwesomeを使えるようにする

FontAwesomeを使うので、CDNコードをheadに差し込みます。

【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう

CDNコードがピンとこなかったり難しかったら、プラグインでも大丈夫です。インストール&有効化します。

Font Awesomeのプラグイン

フォームの出力制御

先ほどデフォルトのフォームを見てもらいましたが、大抵の要件ではHTMLタグなんか使えなくて大丈夫だと思います。なので、bbPressの設定からこの出力を制御します。

設定 > フォーラム

bbpressカスタマイズ

上画像に合わせれば大丈夫です。むしろ合わせないと表示がおかしくなるところもあるかも。この下にも項目は続きますが、全てデフォルト値で大丈夫です。

デモとコード各種と注意

デフォルトでは情報量が多いのでスッキリさせました。外観 > カスタマイズ > 追記CSS　から下記のコードを追記するか、外観 > テーマの編集 > style.css の最後に下記コードを追加することでカスタマイズ完了です。

一応いくつかテーマを入れ替えてみて動作確認は行なっていますが、自己責任でお願いします。また、カスタマイズは子テーマで行いましょう。

シンプル（青）

カスタマイズ案イメージ

style.css

/* ##配色
 * 
 * - white: white
 * - gray: whitesmoke
 * - black: slategray
 * - sub: #EEF9FF
 * - main: #AAD6EC
 * 
 * 上のカラーコードで検索かけて一括変換すればお好みの色に変えられます。cssの辛いとこね、これ
 *
*/

/*bbPressフォーラム一覧画面*/

#bbpress-forums ul.bbp-forums {
  border: none;
}

#bbpress-forums li.bbp-header, #bbpress-forums li.bbp-footer, #bbpress-forums li.bbp-body li.bbp-forum-reply-count, #bbpress-forums li.bbp-body li.bbp-forum-freshness {
  display: none;
}

#bbpress-forums li.bbp-body ul.forum {
  border-top: none;
  background: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

#bbpress-forums li.bbp-forum-info {
  -webkit-box-flex: 2;
  -ms-flex-positive: 2;
  flex-grow: 2;
}

#bbpress-forums .bbp-forum-info .bbp-forum-content {
  position: relative;
  display: inline-block;
  padding: .5em 1em .5em 5px;
  min-width: 200px;
  max-width: 100%;
  border-radius: 3px;
  color: slategray;
  background: whitesmoke;
}

#bbpress-forums .bbp-forum-info .bbp-forum-content::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 30px;
  margin-left: -15px;
  border: 10px solid transparent;
  border-bottom: 10px solid whitesmoke;
}

#bbpress-forums .bbp-forum-info a.bbp-forum-title {
  display: block;
  font-size: 1.2em;
  font-weight: 900;
  color: #AAD6EC;
  /*カテゴリー名の文字色*/
  text-decoration: none;
  padding: 15px 15px 15px 0;
}

#bbpress-forums li.bbp-body li.bbp-forum-topic-count {
  text-align: center;
  vertical-align: middle;
  margin-top: 15px;
  width: 25px;
  min-width: 25px;
  height: 25px;
  line-height: 25px;
  border-radius: 50%;
  background: whitesmoke;
  color: slategray;
}


/*bbPressトピック一覧画面*/

.bbp-template-notice, #bbpress-forums li.bbp-topic-title p.bbp-topic-meta, #bbpress-forums li.bbp-topic-voice-count, #bbpress-forums li.bbp-topic-freshness, #bbpress-forums .bbp-pagination {
  display: none;
}

#bbpress-forums ul.bbp-topics, #bbpress-forums li.bbp-header {
  border: none;
}

#bbpress-forums div.odd, #bbpress-forums ul.odd {
  background: white;
}

#bbpress-forums li.bbp-body ul.topic {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

#bbpress-forums li.bbp-body ul.topic li.bbp-topic-title {
  -webkit-box-flex: 2;
  -ms-flex-positive: 2;
  flex-grow: 2;
}

#bbpress-forums li.bbp-body ul.topic li.bbp-topic-title a.bbp-topic-permalink {
  display: block;
  font-weight: 900;
  color: #AAD6EC;
  /*カテゴリー名の文字色*/
  text-decoration: none;
  padding: 15px 15px 15px 0;
}

#bbpress-forums li.bbp-body ul.topic li.bbp-topic-reply-count {
  text-align: center;
  vertical-align: middle;
  margin-top: 15px;
  width: 25px;
  min-width: 25px;
  height: 25px;
  line-height: 25px;
  border-radius: 50%;
  background: whitesmoke;
  color: slategray;
}


/*トピック作成フォーム*/

#bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form {
  background: white;
  border: none;
  padding: 0;
}

#bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form legend {
  position: relative;
  padding: 10px 40px 10px 10px;
  margin: 0 0 1em;
  line-height: 20px;
  background: #EEF9FF;
  border-left: 40px solid #AAD6EC;
}

#bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form legend::before {
  content: "\f5ad";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 2em;
  color: white;
  position: absolute;
  left: -32px;
}

#bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form label, #bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form select, #bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form br {
  display: none;
}

#bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form>div>p:nth-of-type(1)::before{
  content: "タイトル";
}

#bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form>div>div.bbp-the-content-wrapper::before {
  content: "本文";
}

#bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form>div>p:nth-of-type(1)::before,
#bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form>div>div.bbp-the-content-wrapper::before {
  color: slategray;
  line-height: 50px;
  background: #EEF9FF;
  padding: .5em 1.5em;
  border-radius: 30px;
}

#bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form input#bbp_topic_title, #bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form textarea#bbp_topic_content {
  width: 100%;
  background: whitesmoke;
  border: none;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

#bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form .bbp-submit-wrapper {
  float: none;
  text-align: center;
}

#bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form .bbp-submit-wrapper button#bbp_topic_submit {
  width: 100%;
  max-width: 600px;
  margin: auto;
  background: #AAD6EC;
  color: white;
  border: none;
  border-radius: 3px;
}


/*トピック詳細画面*/

#bbpress-forums ul.bbp-replies {
  border: none;
}

#bbpress-forums div.bbp-reply-header {
  background-color: white;
  border-top: none;
}

#bbpress-forums div.bbp-reply-author {
  width: 20%;
}

#bbpress-forums .bbp-author-role, #bbpress-forums .bbp-reply-ip, #bbpress-forums .bbp-reply-permalink, #bbpress-forums span.bbp-admin-links {
  display: none;
}

#bbpress-forums .bbp-meta {
  text-align: right;
}

#bbpress-forums .bbp-body span.bbp-reply-post-date {
  color: #ccc;
}

#bbpress-forums div.bbp-reply-author img.avatar {
  margin: 0 auto;
  border-radius: 50%;
}

#bbpress-forums div.bbp-reply-author a.bbp-author-name {
  color: slategray;
  text-decoration: none;
}

#bbpress-forums div.bbp-reply-content {
  position: relative;
  display: inline-block;
  padding: 30px;
  margin-left: 20px;
  min-width: 200px;
  max-width: calc( 80% - 20px);
  border-radius: 3px;
  color: slategray;
  background: whitesmoke;
}

#bbpress-forums div.bbp-reply-content::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 30px;
  border: 10px solid transparent;
  border-right: 10px solid whitesmoke;
}

@media(max-width:480px) {
  #bbpress-forums .bbp-body div.bbp-reply-author {
    margin: 0;
    min-height: 85px;
  }
  #bbpress-forums .bbp-body div.bbp-reply-content {
    margin: 0;
  }
  #bbpress-forums .bbp-body div.bbp-reply-content p {
    padding: .5em 1em;
    margin: 0;
  }
  #bbpress-forums div.bbp-reply-content::before {
    top: -20px;
    left: 20px;
    border: 10px solid transparent;
    border-bottom: 10px solid whitesmoke;
  }
}


/*返信フォーム*/

#bbpress-forums div.bbp-reply-form form#new-post fieldset.bbp-form legend {
  position: relative;
  padding: 10px 40px 10px 10px;
  margin: 0 0 1em;
  line-height: 20px;
  background: #EEF9FF;
  border-left: 40px solid #AAD6EC;
}

#bbpress-forums div.bbp-reply-form form#new-post fieldset.bbp-form legend::before {
  content: "\f5ad";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 2em;
  color: white;
  position: absolute;
  left: -32px;
}

#bbpress-forums div.bbp-reply-form form#new-post fieldset.bbp-form {
  border: none;
  padding: 0;
  background: white;
}

#bbpress-forums div.bbp-reply-form form#new-post fieldset.bbp-form textarea#bbp_reply_content {
  width: 100%;
  background: whitesmoke;
  border: none;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

#bbpress-forums div.bbp-reply-form form#new-post fieldset.bbp-form .bbp-submit-wrapper {
  float: none;
  text-align: center;
}

#bbpress-forums div.bbp-reply-form form#new-post fieldset.bbp-form .bbp-submit-wrapper button#bbp_reply_submit {
  width: 100%;
  max-width: 600px;
  margin: auto;
  background: #AAD6EC;
  color: white;
  border: none;
  border-radius: 3px;
}

/*匿名投稿を可能にする時用*/
fieldset.bbp-form p.form-allowed-tags,
fieldset.bbp-form>div>fieldset.bbp-form {
  display: none;
}

シンプル（赤）

カスタマイズ案イメージ

style.css

/* ##配色
 * 
 * - white: white
 * - gray: whitesmoke
 * - black: slategray
 * - sub: #FCECEA
 * - main: #EE817B
 * 
 * 上のカラーコードで検索かけて一括変換すればお好みの色に変えられます。cssの辛いとこね、これ
 *
*/

/*bbPressフォーラム一覧画面*/

#bbpress-forums ul.bbp-forums {
  border: none;
}

#bbpress-forums li.bbp-header, #bbpress-forums li.bbp-footer, #bbpress-forums li.bbp-body li.bbp-forum-reply-count, #bbpress-forums li.bbp-body li.bbp-forum-freshness {
  display: none;
}

#bbpress-forums li.bbp-body ul.forum {
  border-top: none;
  background: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

#bbpress-forums li.bbp-forum-info {
  -webkit-box-flex: 2;
  -ms-flex-positive: 2;
  flex-grow: 2;
}

#bbpress-forums .bbp-forum-info .bbp-forum-content {
  position: relative;
  display: inline-block;
  padding: .5em 1em .5em 5px;
  min-width: 200px;
  max-width: 100%;
  border-radius: 3px;
  color: slategray;
  background: whitesmoke;
}

#bbpress-forums .bbp-forum-info .bbp-forum-content::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 30px;
  margin-left: -15px;
  border: 10px solid transparent;
  border-bottom: 10px solid whitesmoke;
}

#bbpress-forums .bbp-forum-info a.bbp-forum-title {
  display: block;
  font-size: 1.2em;
  font-weight: 900;
  color: #EE817B;
  /*カテゴリー名の文字色*/
  text-decoration: none;
  padding: 15px 15px 15px 0;
}

#bbpress-forums li.bbp-body li.bbp-forum-topic-count {
  text-align: center;
  vertical-align: middle;
  margin-top: 15px;
  width: 25px;
  min-width: 25px;
  height: 25px;
  line-height: 25px;
  border-radius: 50%;
  background: whitesmoke;
  color: slategray;
}


/*bbPressトピック一覧画面*/

.bbp-template-notice, #bbpress-forums li.bbp-topic-title p.bbp-topic-meta, #bbpress-forums li.bbp-topic-voice-count, #bbpress-forums li.bbp-topic-freshness, #bbpress-forums .bbp-pagination {
  display: none;
}

#bbpress-forums ul.bbp-topics, #bbpress-forums li.bbp-header {
  border: none;
}

#bbpress-forums div.odd, #bbpress-forums ul.odd {
  background: white;
}

#bbpress-forums li.bbp-body ul.topic {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

#bbpress-forums li.bbp-body ul.topic li.bbp-topic-title {
  -webkit-box-flex: 2;
  -ms-flex-positive: 2;
  flex-grow: 2;
}

#bbpress-forums li.bbp-body ul.topic li.bbp-topic-title a.bbp-topic-permalink {
  display: block;
  font-weight: 900;
  color: #EE817B;
  /*カテゴリー名の文字色*/
  text-decoration: none;
  padding: 15px 15px 15px 0;
}

#bbpress-forums li.bbp-body ul.topic li.bbp-topic-reply-count {
  text-align: center;
  vertical-align: middle;
  margin-top: 15px;
  width: 25px;
  min-width: 25px;
  height: 25px;
  line-height: 25px;
  border-radius: 50%;
  background: whitesmoke;
  color: slategray;
}


/*トピック作成フォーム*/

#bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form {
  background: white;
  border: none;
  padding: 0;
}

#bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form legend {
  position: relative;
  padding: 10px 40px 10px 10px;
  margin: 0 0 1em;
  line-height: 20px;
  background: #FCECEA;
  border-left: 40px solid #EE817B;
}

#bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form legend::before {
  content: "\f5ad";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 2em;
  color: white;
  position: absolute;
  left: -32px;
}

#bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form label, #bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form select, #bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form br {
  display: none;
}

#bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form>div>p:nth-of-type(1)::before{
  content: "タイトル";
}

#bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form>div>div.bbp-the-content-wrapper::before {
  content: "本文";
}

#bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form>div>p:nth-of-type(1)::before,
#bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form>div>div.bbp-the-content-wrapper::before {
  color: slategray;
  line-height: 50px;
  background: #FCECEA;
  padding: .5em 1.5em;
  border-radius: 30px;
}

#bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form input#bbp_topic_title, #bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form textarea#bbp_topic_content {
  width: 100%;
  background: whitesmoke;
  border: none;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

#bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form .bbp-submit-wrapper {
  float: none;
  text-align: center;
}

#bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form .bbp-submit-wrapper button#bbp_topic_submit {
  width: 100%;
  max-width: 600px;
  margin: auto;
  background: #EE817B;
  color: white;
  border: none;
  border-radius: 3px;
}


/*トピック詳細画面*/

#bbpress-forums ul.bbp-replies {
  border: none;
}

#bbpress-forums div.bbp-reply-header {
  background-color: white;
  border-top: none;
}

#bbpress-forums div.bbp-reply-author {
  width: 20%;
}

#bbpress-forums .bbp-author-role, #bbpress-forums .bbp-reply-ip, #bbpress-forums .bbp-reply-permalink, #bbpress-forums span.bbp-admin-links {
  display: none;
}

#bbpress-forums .bbp-meta {
  text-align: right;
}

#bbpress-forums .bbp-body span.bbp-reply-post-date {
  color: #ccc;
}

#bbpress-forums div.bbp-reply-author img.avatar {
  margin: 0 auto;
  border-radius: 50%;
}

#bbpress-forums div.bbp-reply-author a.bbp-author-name {
  color: slategray;
  text-decoration: none;
}

#bbpress-forums div.bbp-reply-content {
  position: relative;
  display: inline-block;
  padding: 30px;
  margin-left: 20px;
  min-width: 200px;
  max-width: calc( 80% - 20px);
  border-radius: 3px;
  color: slategray;
  background: whitesmoke;
}

#bbpress-forums div.bbp-reply-content::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 30px;
  border: 10px solid transparent;
  border-right: 10px solid whitesmoke;
}

@media(max-width:480px) {
  #bbpress-forums .bbp-body div.bbp-reply-author {
    margin: 0;
    min-height: 85px;
  }
  #bbpress-forums .bbp-body div.bbp-reply-content {
    margin: 0;
  }
  #bbpress-forums .bbp-body div.bbp-reply-content p {
    padding: .5em 1em;
    margin: 0;
  }
  #bbpress-forums div.bbp-reply-content::before {
    top: -20px;
    left: 20px;
    border: 10px solid transparent;
    border-bottom: 10px solid whitesmoke;
  }
}


/*返信フォーム*/

#bbpress-forums div.bbp-reply-form form#new-post fieldset.bbp-form legend {
  position: relative;
  padding: 10px 40px 10px 10px;
  margin: 0 0 1em;
  line-height: 20px;
  background: #FCECEA;
  border-left: 40px solid #EE817B;
}

#bbpress-forums div.bbp-reply-form form#new-post fieldset.bbp-form legend::before {
  content: "\f5ad";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 2em;
  color: white;
  position: absolute;
  left: -32px;
}

#bbpress-forums div.bbp-reply-form form#new-post fieldset.bbp-form {
  border: none;
  padding: 0;
  background: white;
}

#bbpress-forums div.bbp-reply-form form#new-post fieldset.bbp-form textarea#bbp_reply_content {
  width: 100%;
  background: whitesmoke;
  border: none;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

#bbpress-forums div.bbp-reply-form form#new-post fieldset.bbp-form .bbp-submit-wrapper {
  float: none;
  text-align: center;
}

#bbpress-forums div.bbp-reply-form form#new-post fieldset.bbp-form .bbp-submit-wrapper button#bbp_reply_submit {
  width: 100%;
  max-width: 600px;
  margin: auto;
  background: #EE817B;
  color: white;
  border: none;
  border-radius: 3px;
}

/*匿名投稿を可能にする時用*/
fieldset.bbp-form p.form-allowed-tags,
fieldset.bbp-form>div>fieldset.bbp-form {
  display: none;
}

シンプル（緑）

カスタマイズ案イメージ

style.css

/* ##配色
 * 
 * - white: white
 * - gray: whitesmoke
 * - black: slategray
 * - sub: #F0FAFA
 * - main: #60CAAD
 * 
 * 上のカラーコードで検索かけて一括変換すればお好みの色に変えられます。cssの辛いとこね、これ
 *
*/

/*bbPressフォーラム一覧画面*/

#bbpress-forums ul.bbp-forums {
  border: none;
}

#bbpress-forums li.bbp-header, #bbpress-forums li.bbp-footer, #bbpress-forums li.bbp-body li.bbp-forum-reply-count, #bbpress-forums li.bbp-body li.bbp-forum-freshness {
  display: none;
}

#bbpress-forums li.bbp-body ul.forum {
  border-top: none;
  background: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

#bbpress-forums li.bbp-forum-info {
  -webkit-box-flex: 2;
  -ms-flex-positive: 2;
  flex-grow: 2;
}

#bbpress-forums .bbp-forum-info .bbp-forum-content {
  position: relative;
  display: inline-block;
  padding: .5em 1em .5em 5px;
  min-width: 200px;
  max-width: 100%;
  border-radius: 3px;
  color: slategray;
  background: whitesmoke;
}

#bbpress-forums .bbp-forum-info .bbp-forum-content::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 30px;
  margin-left: -15px;
  border: 10px solid transparent;
  border-bottom: 10px solid whitesmoke;
}

#bbpress-forums .bbp-forum-info a.bbp-forum-title {
  display: block;
  font-size: 1.2em;
  font-weight: 900;
  color: #60CAAD;
  /*カテゴリー名の文字色*/
  text-decoration: none;
  padding: 15px 15px 15px 0;
}

#bbpress-forums li.bbp-body li.bbp-forum-topic-count {
  text-align: center;
  vertical-align: middle;
  margin-top: 15px;
  width: 25px;
  min-width: 25px;
  height: 25px;
  line-height: 25px;
  border-radius: 50%;
  background: whitesmoke;
  color: slategray;
}


/*bbPressトピック一覧画面*/

.bbp-template-notice, #bbpress-forums li.bbp-topic-title p.bbp-topic-meta, #bbpress-forums li.bbp-topic-voice-count, #bbpress-forums li.bbp-topic-freshness, #bbpress-forums .bbp-pagination {
  display: none;
}

#bbpress-forums ul.bbp-topics, #bbpress-forums li.bbp-header {
  border: none;
}

#bbpress-forums div.odd, #bbpress-forums ul.odd {
  background: white;
}

#bbpress-forums li.bbp-body ul.topic {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

#bbpress-forums li.bbp-body ul.topic li.bbp-topic-title {
  -webkit-box-flex: 2;
  -ms-flex-positive: 2;
  flex-grow: 2;
}

#bbpress-forums li.bbp-body ul.topic li.bbp-topic-title a.bbp-topic-permalink {
  display: block;
  font-weight: 900;
  color: #60CAAD;
  /*カテゴリー名の文字色*/
  text-decoration: none;
  padding: 15px 15px 15px 0;
}

#bbpress-forums li.bbp-body ul.topic li.bbp-topic-reply-count {
  text-align: center;
  vertical-align: middle;
  margin-top: 15px;
  width: 25px;
  min-width: 25px;
  height: 25px;
  line-height: 25px;
  border-radius: 50%;
  background: whitesmoke;
  color: slategray;
}


/*トピック作成フォーム*/

#bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form {
  background: white;
  border: none;
  padding: 0;
}

#bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form legend {
  position: relative;
  padding: 10px 40px 10px 10px;
  margin: 0 0 1em;
  line-height: 20px;
  background: #F0FAFA;
  border-left: 40px solid #60CAAD;
}

#bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form legend::before {
  content: "\f5ad";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 2em;
  color: white;
  position: absolute;
  left: -32px;
}

#bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form label, #bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form select, #bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form br {
  display: none;
}

#bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form>div>p:nth-of-type(1)::before{
  content: "タイトル";
}

#bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form>div>div.bbp-the-content-wrapper::before {
  content: "本文";
}

#bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form>div>p:nth-of-type(1)::before,
#bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form>div>div.bbp-the-content-wrapper::before {
  color: slategray;
  line-height: 50px;
  background: #F0FAFA;
  padding: .5em 1.5em;
  border-radius: 30px;
}

#bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form input#bbp_topic_title, #bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form textarea#bbp_topic_content {
  width: 100%;
  background: whitesmoke;
  border: none;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

#bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form .bbp-submit-wrapper {
  float: none;
  text-align: center;
}

#bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form .bbp-submit-wrapper button#bbp_topic_submit {
  width: 100%;
  max-width: 600px;
  margin: auto;
  background: #60CAAD;
  color: white;
  border: none;
  border-radius: 3px;
}


/*トピック詳細画面*/

#bbpress-forums ul.bbp-replies {
  border: none;
}

#bbpress-forums div.bbp-reply-header {
  background-color: white;
  border-top: none;
}

#bbpress-forums div.bbp-reply-author {
  width: 20%;
}

#bbpress-forums .bbp-author-role, #bbpress-forums .bbp-reply-ip, #bbpress-forums .bbp-reply-permalink, #bbpress-forums span.bbp-admin-links {
  display: none;
}

#bbpress-forums .bbp-meta {
  text-align: right;
}

#bbpress-forums .bbp-body span.bbp-reply-post-date {
  color: #ccc;
}

#bbpress-forums div.bbp-reply-author img.avatar {
  margin: 0 auto;
  border-radius: 50%;
}

#bbpress-forums div.bbp-reply-author a.bbp-author-name {
  color: slategray;
  text-decoration: none;
}

#bbpress-forums div.bbp-reply-content {
  position: relative;
  display: inline-block;
  padding: 30px;
  margin-left: 20px;
  min-width: 200px;
  max-width: calc( 80% - 20px);
  border-radius: 3px;
  color: slategray;
  background: whitesmoke;
}

#bbpress-forums div.bbp-reply-content::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 30px;
  border: 10px solid transparent;
  border-right: 10px solid whitesmoke;
}

@media(max-width:480px) {
  #bbpress-forums .bbp-body div.bbp-reply-author {
    margin: 0;
    min-height: 85px;
  }
  #bbpress-forums .bbp-body div.bbp-reply-content {
    margin: 0;
  }
  #bbpress-forums .bbp-body div.bbp-reply-content p {
    padding: .5em 1em;
    margin: 0;
  }
  #bbpress-forums div.bbp-reply-content::before {
    top: -20px;
    left: 20px;
    border: 10px solid transparent;
    border-bottom: 10px solid whitesmoke;
  }
}


/*返信フォーム*/

#bbpress-forums div.bbp-reply-form form#new-post fieldset.bbp-form legend {
  position: relative;
  padding: 10px 40px 10px 10px;
  margin: 0 0 1em;
  line-height: 20px;
  background: #F0FAFA;
  border-left: 40px solid #60CAAD;
}

#bbpress-forums div.bbp-reply-form form#new-post fieldset.bbp-form legend::before {
  content: "\f5ad";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 2em;
  color: white;
  position: absolute;
  left: -32px;
}

#bbpress-forums div.bbp-reply-form form#new-post fieldset.bbp-form {
  border: none;
  padding: 0;
  background: white;
}

#bbpress-forums div.bbp-reply-form form#new-post fieldset.bbp-form textarea#bbp_reply_content {
  width: 100%;
  background: whitesmoke;
  border: none;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

#bbpress-forums div.bbp-reply-form form#new-post fieldset.bbp-form .bbp-submit-wrapper {
  float: none;
  text-align: center;
}

#bbpress-forums div.bbp-reply-form form#new-post fieldset.bbp-form .bbp-submit-wrapper button#bbp_reply_submit {
  width: 100%;
  max-width: 600px;
  margin: auto;
  background: #60CAAD;
  color: white;
  border: none;
  border-radius: 3px;
}

/*匿名投稿を可能にする時用*/
fieldset.bbp-form p.form-allowed-tags,
fieldset.bbp-form>div>fieldset.bbp-form {
  display: none;
}

シンプル（黒）

カスタマイズ案イメージ

style.css

/* ##配色
 * 
 * - white: white
 * - gray: whitesmoke
 * - black: slategray
 * - sub: #DFDFDF
 * - main: #4C4C4C
 * 
 * 上のカラーコードで検索かけて一括変換すればお好みの色に変えられます。cssの辛いとこね、これ
 *
*/

/*bbPressフォーラム一覧画面*/

#bbpress-forums ul.bbp-forums {
  border: none;
}

#bbpress-forums li.bbp-header, #bbpress-forums li.bbp-footer, #bbpress-forums li.bbp-body li.bbp-forum-reply-count, #bbpress-forums li.bbp-body li.bbp-forum-freshness {
  display: none;
}

#bbpress-forums li.bbp-body ul.forum {
  border-top: none;
  background: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

#bbpress-forums li.bbp-forum-info {
  -webkit-box-flex: 2;
  -ms-flex-positive: 2;
  flex-grow: 2;
}

#bbpress-forums .bbp-forum-info .bbp-forum-content {
  position: relative;
  display: inline-block;
  padding: .5em 1em .5em 5px;
  min-width: 200px;
  max-width: 100%;
  border-radius: 3px;
  color: slategray;
  background: whitesmoke;
}

#bbpress-forums .bbp-forum-info .bbp-forum-content::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 30px;
  margin-left: -15px;
  border: 10px solid transparent;
  border-bottom: 10px solid whitesmoke;
}

#bbpress-forums .bbp-forum-info a.bbp-forum-title {
  display: block;
  font-size: 1.2em;
  font-weight: 900;
  color: #4C4C4C;
  /*カテゴリー名の文字色*/
  text-decoration: none;
  padding: 15px 15px 15px 0;
}

#bbpress-forums li.bbp-body li.bbp-forum-topic-count {
  text-align: center;
  vertical-align: middle;
  margin-top: 15px;
  width: 25px;
  min-width: 25px;
  height: 25px;
  line-height: 25px;
  border-radius: 50%;
  background: whitesmoke;
  color: slategray;
}


/*bbPressトピック一覧画面*/

.bbp-template-notice, #bbpress-forums li.bbp-topic-title p.bbp-topic-meta, #bbpress-forums li.bbp-topic-voice-count, #bbpress-forums li.bbp-topic-freshness, #bbpress-forums .bbp-pagination {
  display: none;
}

#bbpress-forums ul.bbp-topics, #bbpress-forums li.bbp-header {
  border: none;
}

#bbpress-forums div.odd, #bbpress-forums ul.odd {
  background: white;
}

#bbpress-forums li.bbp-body ul.topic {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

#bbpress-forums li.bbp-body ul.topic li.bbp-topic-title {
  -webkit-box-flex: 2;
  -ms-flex-positive: 2;
  flex-grow: 2;
}

#bbpress-forums li.bbp-body ul.topic li.bbp-topic-title a.bbp-topic-permalink {
  display: block;
  font-weight: 900;
  color: #4C4C4C;
  /*カテゴリー名の文字色*/
  text-decoration: none;
  padding: 15px 15px 15px 0;
}

#bbpress-forums li.bbp-body ul.topic li.bbp-topic-reply-count {
  text-align: center;
  vertical-align: middle;
  margin-top: 15px;
  width: 25px;
  min-width: 25px;
  height: 25px;
  line-height: 25px;
  border-radius: 50%;
  background: whitesmoke;
  color: slategray;
}


/*トピック作成フォーム*/

#bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form {
  background: white;
  border: none;
  padding: 0;
}

#bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form legend {
  position: relative;
  padding: 10px 40px 10px 10px;
  margin: 0 0 1em;
  line-height: 20px;
  background: #DFDFDF;
  border-left: 40px solid #4C4C4C;
}

#bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form legend::before {
  content: "\f5ad";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 2em;
  color: white;
  position: absolute;
  left: -32px;
}

#bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form label, #bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form select, #bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form br {
  display: none;
}

#bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form>div>p:nth-of-type(1)::before{
  content: "タイトル";
}

#bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form>div>div.bbp-the-content-wrapper::before {
  content: "本文";
}

#bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form>div>p:nth-of-type(1)::before,
#bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form>div>div.bbp-the-content-wrapper::before {
  color: slategray;
  line-height: 50px;
  background: #DFDFDF;
  padding: .5em 1.5em;
  border-radius: 30px;
}

#bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form input#bbp_topic_title, #bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form textarea#bbp_topic_content {
  width: 100%;
  background: whitesmoke;
  border: none;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

#bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form .bbp-submit-wrapper {
  float: none;
  text-align: center;
}

#bbpress-forums div.bbp-topic-form form#new-post fieldset.bbp-form .bbp-submit-wrapper button#bbp_topic_submit {
  width: 100%;
  max-width: 600px;
  margin: auto;
  background: #4C4C4C;
  color: white;
  border: none;
  border-radius: 3px;
}


/*トピック詳細画面*/

#bbpress-forums ul.bbp-replies {
  border: none;
}

#bbpress-forums div.bbp-reply-header {
  background-color: white;
  border-top: none;
}

#bbpress-forums div.bbp-reply-author {
  width: 20%;
}

#bbpress-forums .bbp-author-role, #bbpress-forums .bbp-reply-ip, #bbpress-forums .bbp-reply-permalink, #bbpress-forums span.bbp-admin-links {
  display: none;
}

#bbpress-forums .bbp-meta {
  text-align: right;
}

#bbpress-forums .bbp-body span.bbp-reply-post-date {
  color: #ccc;
}

#bbpress-forums div.bbp-reply-author img.avatar {
  margin: 0 auto;
  border-radius: 50%;
}

#bbpress-forums div.bbp-reply-author a.bbp-author-name {
  color: slategray;
  text-decoration: none;
}

#bbpress-forums div.bbp-reply-content {
  position: relative;
  display: inline-block;
  padding: 30px;
  margin-left: 20px;
  min-width: 200px;
  max-width: calc( 80% - 20px);
  border-radius: 3px;
  color: slategray;
  background: whitesmoke;
}

#bbpress-forums div.bbp-reply-content::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 30px;
  border: 10px solid transparent;
  border-right: 10px solid whitesmoke;
}

@media(max-width:480px) {
  #bbpress-forums .bbp-body div.bbp-reply-author {
    margin: 0;
    min-height: 85px;
  }
  #bbpress-forums .bbp-body div.bbp-reply-content {
    margin: 0;
  }
  #bbpress-forums .bbp-body div.bbp-reply-content p {
    padding: .5em 1em;
    margin: 0;
  }
  #bbpress-forums div.bbp-reply-content::before {
    top: -20px;
    left: 20px;
    border: 10px solid transparent;
    border-bottom: 10px solid whitesmoke;
  }
}


/*返信フォーム*/

#bbpress-forums div.bbp-reply-form form#new-post fieldset.bbp-form legend {
  position: relative;
  padding: 10px 40px 10px 10px;
  margin: 0 0 1em;
  line-height: 20px;
  background: #DFDFDF;
  border-left: 40px solid #4C4C4C;
}

#bbpress-forums div.bbp-reply-form form#new-post fieldset.bbp-form legend::before {
  content: "\f5ad";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 2em;
  color: white;
  position: absolute;
  left: -32px;
}

#bbpress-forums div.bbp-reply-form form#new-post fieldset.bbp-form {
  border: none;
  padding: 0;
  background: white;
}

#bbpress-forums div.bbp-reply-form form#new-post fieldset.bbp-form textarea#bbp_reply_content {
  width: 100%;
  background: whitesmoke;
  border: none;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

#bbpress-forums div.bbp-reply-form form#new-post fieldset.bbp-form .bbp-submit-wrapper {
  float: none;
  text-align: center;
}

#bbpress-forums div.bbp-reply-form form#new-post fieldset.bbp-form .bbp-submit-wrapper button#bbp_reply_submit {
  width: 100%;
  max-width: 600px;
  margin: auto;
  background: #4C4C4C;
  color: white;
  border: none;
  border-radius: 3px;
}

/*匿名投稿を可能にする時用*/
fieldset.bbp-form p.form-allowed-tags,
fieldset.bbp-form>div>fieldset.bbp-form {
  display: none;
}

まとめ

コードに関して「こうした方が良い」とか「こうして欲しい」などアドバイスやご意見ご要望ありましたらコメントいただけたら、対応できそうなものは対応します〜。圧縮化していないのと重複コードは敢えてなので（可読性を最優先しました）、必要に応じてよしなにやってください。

匿名投稿を可能にするには

上でご紹介したのは匿名投稿ができない状態ですが、これからご紹介する方法を行えば匿名（非登録）ユーザーでも投稿になります。匿名ユーザーでも投稿可能にする方法は過去に記事にしていますが、記事を見るの面倒だって人向けにやることを箇条書きすると、

こちらのプラグインをWPにインストールして有効化
設定 > フォーラム > 「アカウントを持たないゲストユーザーによるトピックの作成や返信を許可する」にチェックする

の2つだけです。これで匿名ユーザーでも投稿可能で、そこまで質素でないデザインになりました。

bbpressデザインカスタマイズデモイメージ

もしまたやる気と暇ができて需要あったら追加していきます〜。ではでは

SNSでコメントする

こちらもオススメ

bbPressのデザインカスタマイズ【WPで本格掲示板サイト構築】

目次

デフォルトの画面

1.フォーラム（カテゴリ）一覧画面

2.トピック（スレッド）一覧画面

3.トピック（スレッド）詳細画面

下準備

FontAwesomeを使えるようにする

フォームの出力制御

デモとコード各種と注意

シンプル（青）

シンプル（赤）

シンプル（緑）

シンプル（黒）

まとめ

匿名投稿を可能にするには

SNSでコメントする

こちらもオススメ

PlanetScaleを使用する時の注意点

特定のディレクトリに変更があるときだけhusky（prettier）を走らせる

Montereyのsocket周りでのエラー

Prismaのmigrateのエラーが出たときの対処法

Prismaのseedでimportのエラーが出たときの対処法

Liffをローカルで開発する方法