携帯からもOK!豊富なデザイン!究極のカスタマイズ性!無料・有料レンタル掲示板【大宇宙】
レンタル掲示板・レンタル日記・レンタルブログ【大宇宙】
HOMEボードカウンター素材の街サポート・FAQお知らせ






CosmicBordを更に多彩にご利用頂くため、
カスタマイズのTipsをご紹介します。

はじめに
ボードをレンタルした直後はサンプルと同じデザインになっています。そのまま使っても問題ありませんが、場合によって部分的に気に入らない所があったり、追加したい項目があると思います。他のレンタル屋さんでは「タイトル」や「フォントカラー」「アイコン」など決まった部分しか変更出来ない場合がほとんどです。しかしCosmicBoardなら、全てが思うがままです。

構造を理解しよう
デザイン設定は[設定1]〜[設定7]までの項目があり、設定1<html>で始まり、設定7</html>で終わっています。このことから、設定は単なるHTMLだということが解ります。設定1〜設定7で、1本のHTMLファイルを作るイメージです。実際に各設定がボードのどの部分に反映されるのか図に示しました。今回はシンプルな作りのCOBOARD-Aタイプで説明を行っていますが原理は基本的に他のタイプでも全て同じです。

ボード画面 デザイン設定画面

【入門編】まずは簡単な所から…
●壁紙の追加
壁紙(background) は通常HTMLではbody内に記述します。今回はCOBOARD-Aタイプで説明を行っていますが原理は基本的に他のタイプでも全て同じです。以下のような記述が[設定1]にあります。早速この部分を変更しましょう。
<body bgcolor="#FFFFFF" text="#444444" link=・・・以下省略
この部分に「background="壁紙画像のURL"」という記述をするだけです。以下のようになります。
<body background="壁紙画像のURL" bgcolor=・・・以下省略
画像のURLは必ず「http://」から始って「.gif」や「.jpg」で終わるようにしましょう。もちろん画像はあなたのサーバーにアップロードされていることが前提となります。

●タイトルの変更
タイトルには2種類あります「お気に入りに追加された時のタイトル」と「実際にボード内に表示されるタイトル」です。お気に入りに追加された時のタイトルは[設定1]にあります。
<title>シンプルボード</title>という部分を変更しましょう。ボード内に表示されるタイトルは[設定2] にあります(COBOARD-Cタイプ以外では[設定3]にあったりします。)<font size="6" color="#808080">*シンプルボード*</font>という部分を好きなようにに変更してください。また、この部分のタイトルに画像を使うことも簡単です。その場合は<img src="タイトル画像のURL" border="0" >としましょう。

【中級編】name値と文字列を理解しよう…
●アイコンの追加
COBOARD-Aタイプでアイコン投稿出来るように改造しましょう。アイコン設定に関しては「マニュアル」の方でも詳しく紹介していますので宜しければ御覧下さい。さて、アイコンで投稿出来るようにするためには投稿フォーム内にアイコン選択の項目が必要になってきます。まずこの部分を取り付けてみましょう。投稿フォームのデザインは必ず[設定3]で行います。
アイコン選択項目追加
<select name=icon>・・・</select>のタグを使い以下のように記述します。今回は「名前」と「削除キー」の間に記述しましたが、基本的にどこに記述しようが自由です。

名前 <input type=text name=name size="18">

<select name=icon>
<option value="http://www.bigcosmic.com/board/s/016/puti_toma.gif">とまと
<option value="http://www.bigcosmic.com/board/s/016/puti_cup.gif">カップ
<option value="http://www.bigcosmic.com/board/s/016/puti_10y.gif">10えん
<option value="http://www.bigcosmic.com/board/s/016/putipan.gif" >ぱんだ
<option value="http://www.bigcosmic.com/board/s/016/putikero.gif">かえる
</select>
[<a href="<!--ICON_LOOK-->" target="_blank">Icon View</a>]<br>

削除キー <input type=password name=key size=8 maxlength=8>

名前の前にアイコン表示
アイコンにはname値「icon」を使います。<select name=icon>の「icon」部分がname値というものです。御覧頂ければ解ると思いますが名前にはname値「name」、削除キーにはname値「key」が使われています。このように投稿フォームから送信される情報には必ずmame値を使い指定する必要があります。利用可能なname値は20種類以上あります。詳しくはこちらを御覧下さい。また、今回は「icon View」も追加しました。これを追加するとすると登録されたアイコ一覧が別ウインドウで開き閲覧可能になります。これは以下のように記述しています。
<a href="<!--ICON_LOOK-->" target="_blank">Icon View</a>

この部分にちょっと変わった記述<!--ICON_LOOK-->があります。これは一体何なんでしょう?これは「文字列」といって大宇宙が決めた呪文のようなものです。<!--ICON_LOOK-->はアイコンの一覧を表示しろ!という命令です。このような文字列は他にも沢山あり、その数は30種類以上にもなります。文字列の一覧もこちらにあります。是非参考にして下さい。

以上で投稿フォーム部分にアイコン選択項目が追加されました。しかし、これだけではまだアイコンは投稿出来ません。何故でしょう?それは、まだ記事の部分にアイコンを表示させる記述がないためです。それでは早速その記述をしてみましょう。記事のデザインは[設定4]で行います。今回は名前の前にアイコンを表示させたいと思います。名前の部分は<font color="#ffffff"><b><!--NAME--></b></font>という部分です。見つけたらここの前に<img src="<!--ICON-->" border="0" >を加えてみましょう。前後の記述を含め以下のようになれば完了です。

<tr><td bgcolor="#808080">
<img src="<!--ICON-->" border="0" >
<font color="#ffffff"><b><!--NAME--></b></font></td>

既にお気付きだと思いますが、やはりここでも文字列が登場していますね。今回はアイコンを表示させる文字列<!--ICON-->を使っています。ここでは同様に名前を表示させる文字列は<!--NAME-->だということも解ります。

少し「name値」と「文字列」の関係をまとめましょう。投稿フォームからname値「icon」で送信されたアイコン情報は、記事部分に文字列<!--ICON-->で表示されます。同様にname値「name」で送信された名前情報は、記事部分に文字列<!--NAME-->で表示されます。このように「送信するname値」と「表示させる文字列」は必ず対にしなければいけないことが解ります。基本的に文字列とは <!-- と --> の間にname値を大文字にしたものが入ると思って頂ければ良いです。すなわち、iconと<!--ICON-->や、nameと<!--NAME-->・・・のように対なります。少し難しいかもしれませんがCosmicBoardで勉強するのはこの部分だけですので、是非マスターして楽しくカスタマイズして頂ければと思います。少しお話が脱線してしましましたが、アイコン設定はこれで全て完了です。試しにアイコンで投稿してみましょう!

※レス部分のアイコン表示も全く同じ手順で設定出来ます。レス記事部分は[設定6]で行います。同じように名前の前に<img src="<!--ICON-->" border="0" >を追加してみましょう。

●重要!「デザイン設定のバックアップ」
ある程度デザインが出来てきたらバックアップをしましょう。デザイン設定に致命的な記述があるとボードが壊れてしまうことがあります。壊れてしまったら「デザインチェンジ」で復旧可能できますが、いままで自分がデザインしたものは復旧されず、また最初からとなってしまいます。このようなことを未然に防ぐために、[設定1]〜[設定7]をメモ帳やシンプルテキストなどのテキストエディタにコピー&ペーストし、保存しておきましょう。これで何があっても大丈夫です。

【上級編】他の技術を取り込もう 〜Javascript〜
●JavaScriptを使おう
1. 時間帯ごとに違ったメッセージを表示 2. 日付のカウントダウン
3. メッセージを一定時間ごとに切り換える 4. 訪問回数の表示
5. テキスト入力欄にテロップを流す 6. リロードするたびに表示内容が変わる
他にも沢山の応用が可能です!google等の検索エンジンで「Javascript」と入力し検索すると良いでしょう。

●WEB作成ソフトを使おう
WEB作成ソフト 作業風景日頃、WEB製作にソフトを使っている方は是非はそれを利用しましょう。DreamweaverやGoLiveといったソフトが有名です。このようなソフトを使えば直感的にデザインが行え、画像の配置やテーブルのレイアウトなどが容易に行えます。画面はGoLiveでの作業風景です。このようなソフトは便利ですが注意点もあります。それはHTML内に思わぬゴミが発生することです。最後にはやっぱり実際のソースを見て確認することをお勧めいたします。

最後に
これまで説明してきたことは基本的にHTMLがある程度理解出来た上での説明ですので、全く理解出来なかった方は、少しHTMLを勉強した方が良いかもしれません。HTMLは慣れてしまえばとても簡単ですし、WEB上にはHTMLに関する参考文献も沢山あり、初心者向けのものから上級者向けのものなど多彩で、解らないことは探せば必ず見つかります。
大宇宙のサポート掲示板でもある程度はお教え出来ますが、限界はあります。解らないことはgoogle等の検索エンジンで調べると良いでしょう。例えば画像を貼るタグが解らない場合、「タグ 画像」などと入力して検索してみると何千、何百もの参考サイトが表示されるはずです。


サイトマップ会社概要プライバシーポリシーライセンス一覧リンクについてお問合せ
無料ホームページ 無料ブログ 無料レンタル掲示板 無料レンタルレビュー 無料ノベル 無料レンタルギャラリー 無料プロフ 無料レンタルリンク集 無料メールフォーム 無料カウンター 無料アクセス解析  (C) Bigcosmic All Rights Reserved. Since 2001-7-7