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

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

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

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

尚、このページ内のBBS画像は各アドオンを組み込んだ状態となっておりますが、アドオンなしの初期状態でも同様のカスタマイズが可能です。

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

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

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

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

各入力欄の必須や任意を変更したい場合は、htmlフォルダの中にあるbbs-form.htmlをテキストエディタで開いて編集をします。

例えば初期状態で以下のような表示になっているとします。

この「タイトル」の欄を必須ではなく任意にしたい場合、bbs-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の以下の部分を、

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

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

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

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

項目名を変更したい場合

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

例えば上記の「本文」を「コメント」という名称に変更したい場合は、htmlフォルダの中にあるbbs-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で以下のようになっている部分を、

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

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

form.form-area dl dt span{
  display : none;
}

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

検索機能アドオンを追加している場合は、上記のやり方と同様に検索フォームの英語表記部分(search.cssのform#search-form dl dt span)もdisplay : none;に変更しておきましょう。

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

  padding : 15px 0;

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

  padding : 25px 0;

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

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

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

ここから「名前」の入力欄をなくしたい場合はhtmlフォルダの中にあるbbs-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の以下のようになっている部分を、

form.form-area{
  width : 960px;
  margin : 40px auto;
  padding : 5px 0;
  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.form-area{
  width : 600px;
  margin : 40px auto;
  padding : 5px 0;
  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 );
}

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

上記のやり方と同様に、投稿表示エリア(div.bbs-post)のwidthも以下のように同じ数値に変更すると良いでしょう。

div.bbs-post{
  width : 600px;
  margin : 40px auto;
  padding : 20px 0 25px;
  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 );
}

また、検索機能アドオンを追加している場合はsearch.cssで検索フォームエリア(form#search-form)のwidthを以下のように同じ数値に合わせ、

form#search-form{
  width : 600px;
  margin : 40px auto;
  padding : 5px 0;
  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 );
}

ページネーションリンクを追加している場合はpagenation.cssでページネーションリンクのエリアのwidthを以下のように同じ数値に合わせると良いでしょう。

ul.pagenation{
  width : 600px;
  margin : 40px auto;
  list-style-type : none;
}