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

WordPressで掲示板やSNSもどきを構築する最も簡単な方法が、プラグインのbuddyPressとbbPressを使用する方法です。

buddyPressは、会員登録やマイページ、フォロー、呟き機能などが使えるようになります。

bbPressでは、インストールして有効化するだけで掲示板機能が使えるようになります。

少しだけ厄介なのが、スレッドはトピック、カテゴリはフォーラムと表されるところですが、慣れればそうでもないのかな。

詳しくはゾノさんのブログを見ると早いかと。

では、大雑把な説明はここら辺で切り上げて、この記事では導入面のあれこれでなく、デザイン面のあれこれを。

デフォルトの画面

まず、カスタマイズする画面を認識しておきます。WPテーマについてですが、僕はなるべくbbPressやbuddyPressに干渉しなそうなシンプルなものを選びたかったのでStorefontというのを使っていますが、なんでも大丈夫です。

使うテーマによっては下の各画像と異なる部分(入力フォームやボタンなど)もあるかと思いますが問題なし。

フォーラム(カテゴリ)一覧画面

この画面はフォーラム一覧ですが、要はカテゴリ一覧です。

今ここにはtestというカテゴリがあるんだというような感じですね。

トピック(スレッド)一覧画面

これはtestというカテゴリにあるトピック(スレ)一覧画面です。

「test」カテゴリに「あ」というスレがある状態ですね。(名前適当すぎた)

トピック(スレッド)詳細画面

そんで「あ」スレのコメント一覧画面です。

今回は、この「フォーラム一覧」、「トピック一覧」、「トピック詳細画面」の3つを編集していきます。

下準備

FontAwesomeを使えるように

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

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

フォームの出力制御

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

設定 > フォーラム

上画像に合わせれば大丈夫かと思います。(合わせないと表示がおかしくなるところもあるかも)

この下にも項目は続きますが、全てデフォルト値で大丈夫です。

デモとコード

デフォルトでは情報量が多いのでスッキリさせました。

外観 > カスタマイズ > 追記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;
}

シンプル(赤)

/* ##配色
 * 
 * - 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;
}

シンプル(緑)

/* ##配色
 * 
 * - 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;
}

シンプル(黒)

/* ##配色
 * 
 * - 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;
}

コードに関して「こうした方が良い」とか「こうして欲しい」などアドバイスやご意見ご要望ありましたらコメントいただけたら、対応できそうなものは対応します〜。

ただ、圧縮化と重複コードは敢えてです。(後からどこにどのコードがあるか見やすくするよう画面ごとに分けることを最優先しました)

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

上でご紹介したのは匿名投稿ができない状態ですが、これからご紹介する方法を行えば匿名(非登録)ユーザーでも投稿になります。

匿名ユーザーでも投稿可能にする方法は過去に記事にしていますが、

匿名投稿可能な掲示板の構築方法【bbPress】

記事を見るの面倒だって人向けにやることを箇条書きすると、

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

の2つだけです。

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

完成品デモ

https://takasaki.work/bbpress-demo/forums/

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

コメントを残す

メールアドレスが公開されることはありません。