レスポンシブBBSのカスタマイズ方法の解説

• 公開日 : 2018年3月20日
• 最終更新日 : 2018年4月3日

このページではレスポンシブBBSのカスタマイズ方法を解説いたします。

このページの内容は有料で販売していたバージョン2世代までの内容となります。
現在、無料で配布中のバージョン3.0の解説は近日公開いたします。

まずは初期状態のままサーバ上に設置し、表示・動作の確認をしてください。これがカスタマイズをする前の前提となります。
基本的な設置方法に関しては上記の配布ページ中の「基本設置方法」を参考にしてください。

カスタマイズに必要なスキル

HTMLやCSSのコードを最低限でも大まかに理解でき、テキストエディタで編集・保存できるスキルが必要になります。
PHPやJavaScriptのファイルはユーザーの人が編集する必要ありませんし、制作の際に想定しておりません。

また、保存の際の文字コードはUTF-8 BOMなしで保存してください。(すべてのファイル共通)
UTF-8 BOMなしでのファイル保存のやり方は「文字コードをUTF-8 BOMなし(UTF-8N)でファイル保存をする方法」のページを参考にどうぞ。

各入力項目の必須や任意を変更したい場合

各入力欄の必須や任意を変更したい場合は、htmlフォルダの中にあるform.htmlをテキストエディタで開いて編集をします。
例えば初期状態で以下のような表示になっているとします。

この「タイトル」の欄を必須ではなく任意にしたい場合、form.htmlで以下のようになっている部分を、

<dt>タイトル<span>Title</span></dt>
<dd class="required"><input type="text" id="title" name="title" value="" /></dd>
<dt>名前<span>Name</span></dt>
<dd><input type="text" id="name" name="name" value="" /></dd>
<dt>本文<span>Contents</span></dt>
<dd class="required"><textarea id="contents" name="contents" cols="40" rows="5"></textarea></dd>

以下のように変更します。(class=”required”を削除)

<dt>タイトル<span>Title</span></dt>
<dd><input type="text" id="title" name="title" value="" /></dd>
<dt>名前<span>Name</span></dt>
<dd><input type="text" id="name" name="name" value="" /></dd>
<dt>本文<span>Contents</span></dt>
<dd class="required"><textarea id="contents" name="contents" cols="40" rows="5"></textarea></dd>

するとページの表示は以下のように変わります。

つまり、その入力欄を包含しているdd要素にclass=”required”が付いていれば、その入力欄は必須となる仕組みです。

必須や任意のラベルを削除したい場合

必須や任意のラベル表示を削除したい場合は、cssフォルダにあるresponsive-bbs.cssを開き、181行目にある以下の部分を、

form#bbs-form dl dt span.required,
form#bbs-form dl dt span.optional{
  display : inline-block;
  float : left;
  color : #ffffff;
  line-height : 1;
  padding : 8px 9px;
  border-radius : 3px;
}

以下のように変更してください。

form#bbs-form dl dt span.required,
form#bbs-form dl dt span.optional{
  display : none;
}

するとページの表示は以下のようになります。

項目名を変更したい場合

初期状態では以下のように「タイトル」、「名前」、「本文」という項目名になっています。

例えば上記の「本文」を「コメント」という名称に変更したい場合は、htmlフォルダの中にあるform.htmlを開き、以下のようになっている部分を、

<dt>タイトル<span>Title</span></dt>
<dd class="required"><input type="text" id="title" name="title" value="" /></dd>
<dt>名前<span>Name</span></dt>
<dd><input type="text" id="name" name="name" value="" /></dd>
<dt>本文<span>Contents</span></dt>
<dd class="required"><textarea id="contents" name="contents" cols="40" rows="5"></textarea></dd>

以下のように変更してください。(名前をコメントに、ContentsをCommentに変更)

<dt>タイトル<span>Title</span></dt>
<dd class="required"><input type="text" id="title" name="title" value="" /></dd>
<dt>名前<span>Name</span></dt>
<dd><input type="text" id="name" name="name" value="" /></dd>
<dt>コメント<span>Comment</span></dt>
<dd class="required"><textarea id="contents" name="contents" cols="40" rows="5"></textarea></dd>

するとページの表示は以下のように変化します。

必須の入力欄が未入力だった際に表示されるエラーメッセージも、上記の変更によって自動的に変わるようになっています。

各項目名の下にある英語表記をなくしたい場合

初期状態では各項目名の下に青色の文字で英語表記があります。

これらの英語表記を削除したい場合は、cssフォルダの中にあるresponsive-bbs.cssの41行目で以下のようになっている部分を、

form#bbs-form dl dt span{
  display : block;
  font-size : 80%;
  color : #3377ff;
}

以下のように変更してください。

form#bbs-form dl dt span{
  display : none;
  font-size : 80%;
  color : #3377ff;
}

するとページの表示は以下のようになります。

上記のやり方と同様に、286行目にある検索フォームの英語表記部分(form#search-form dl dt span)もdisplay : none;に変更しておきましょう。

また、英語表記が消えた影響で各項目名をもう少し下にずらしたいと思うかもしれません。
その場合は上記2つの各コードの10行ぐらい上あたりで、dt要素に対して以下のようになっている部分がそれぞれありますので、

  padding : 15px 0;

上記を以下のように変更すればOKです。

  padding : 25px 0;

と変更すれば、ページの表示は以下のようになります。

入力項目を減らしたい場合

このレスポンシブBBSは入力項目を増やすことはできませんが、減らすことは可能です。
例えば初期状態でのページの表示は以下のようになっています。

ここから「名前」の入力欄をなくしたい場合はhtmlフォルダの中にあるform.htmlを開き、以下のようになっている部分を、

<dt>タイトル<span>Title</span></dt>
<dd class="required"><input type="text" id="title" name="title" value="" /></dd>
<dt>名前<span>Name</span></dt>
<dd><input type="text" id="name" name="name" value="" /></dd>
<dt>本文<span>Contents</span></dt>
<dd class="required"><textarea id="contents" name="contents" cols="40" rows="5"></textarea></dd>

以下のように編集します。(名前の部分のdt要素とdd要素を丸ごと削除)

<dt>タイトル<span>Title</span></dt>
<dd class="required"><input type="text" id="title" name="title" value="" /></dd>
<dt>本文<span>Contents</span></dt>
<dd class="required"><textarea id="contents" name="contents" cols="40" rows="5"></textarea></dd>

すると、ページの表示は以下のようになります。

これと同じように「タイトル」や「本文」の入力欄も削除することが可能ですが、もしタイトルの入力欄を削除したとしても投稿表示の部分では「タイトルなし」として表示されますのでお気をつけください。

このタイトル表示部分に「返信する」や「削除する」のボタンなどを表示させる関係上で、削除することができないためです。

また、本文の入力欄を削除するとBBSとしての役割を果たさなくなるので、現実にはする必要がないでしょう。

各エリアの横幅を縮めたい場合

初期状態では入力フォームエリアや検索フォームエリア、投稿表示エリアなど、すべてのエリアの横幅は960px + 左右の罫線1pxずつ、つまり合計で962pxとなっております。

これらの横幅を縮めたい場合は、cssフォルダの中にあるresponsive-bbs.cssの5行目、以下のようになっている部分を、

form#bbs-form{
  width : 960px;
  margin : 40px auto;
  background : rgba( 255, 255, 255, 0.9 );
  border : 1px solid #cccccc;
  border-radius : 7px;
  box-shadow : 0 0 7px rgba( 0, 0, 0, 0.2 );
}

以下のように変更してください。(widthの行を600pxに変更)

form#bbs-form{
  width : 600px;
  margin : 40px auto;
  background : rgba( 255, 255, 255, 0.9 );
  border : 1px solid #cccccc;
  border-radius : 7px;
  box-shadow : 0 0 7px rgba( 0, 0, 0, 0.2 );
}

するとページの表示は以下のように変化します。

上記のやり方と同様に、256行目の検索フォームエリア(form#search-form)のwidthや、382行目の投稿表示エリア(div.bbs-post)のwidth、489行目のページングのリンク(ul.pagenation)のwidthも600pxにしてください。