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

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

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

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

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


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

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

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

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

例えば初期状態で以下のような表示になっているとします。
レスポンシブBBSの初期状態

この「タイトル」の欄を必須ではなく任意にしたい場合、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.cssform#search-form dl dt span)もdisplay : none;に変更しておきましょう。

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

  padding : 15px 0;

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

  padding : 25px 0;

と変更すれば、ページの表示は以下のようになります。
項目名の位置調整

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

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

これらの横幅を縮めたい場合は、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;
}

サポートBBS

サポートBBS

サイト内を検索
アップデート情報

この「アップデート情報」欄はコンテンツ・メーカーを使用して更新・表示しています。

サイト運用事例
提供サポートなど
メールフォーム

ダウンロード一覧へ

カレンダー

これはビジネスカレンダーのサイト組み込みサンプルです。
サンプル管理画面から定休日の変更操作ができます。
ご自由にお試しください。(ユーザ名はtani、パスワードは0000です)

ダウンロード一覧へ

新着情報欄の更新

ダウンロード一覧へ

BBS

ダウンロード一覧へ

その他おすすめ

ダウンロード一覧へ

Web制作のブログ

ブログ記事一覧へ

カテゴリ別
制作者の詳細
  • 谷元博のブログ
  • Google+