« ブログ便利ツール:「RSSリーダー」利用のススメ | トップページ | 第24回:記事に挿入した画像に写真風の枠線と影を付けてみよう »

2006/03/21

第23回:サイドバーに掲示板を設置してみよう

ブログは記事ごとにコメント出来るのでWebサイトの掲示板よりも反応が早いし、書き込む側(閲覧者)も気楽だ、というのがブログのいいところだと(私は)思っているのですが、逆に記事に関係ない話題についてはどこに書き込めばいいのか困ることもあります。
そこで、記事に関係のない話題でも気軽に書き込めるミニ掲示板をサイドバーに付けてみました。

今回はこの設置方法についてご説明します。

※掲示板は実際に利用可能ですので、お気軽に書き込みして下さい。
※但し記入内容によっては管理人判断で削除させていただくこともありますのでご了承下さい。
※また、「テスト書き込み」もご遠慮下さい。

※申し訳ありませんが現在はこのブログでは利用していません。

手順

ミニ掲示板


ブログに設置する掲示板にはいろいろ種類があるようですが、私は今回「chobi(ちょび)」を使ってみました。
サイドバーにはこんな↑感じに表示されます。

書き込んだり、過去ログを読んだりする場合は「よむ/かく」ボタンを押すと、コメント入力画面(別ページ)が表示されます。


事前準備1:タグを入手する

「chobi(ちょび)」のサイトにて、掲示板設置用のタグを入手します。
※画面を下にスクロールすると作成ボタンが出てきます。

  1. ダウンリストから好きなデザインを選択し「掲示板を作る」ボタンを押す。
    ※ダウンリストの下の画像をクリックすると、そのデザインを使ったサンプル画面に飛びます。
  2. 別ページが表示されるので、このページの下方に記載してあるタグ(「下記のコードを、 掲示板を表示させたい場所に貼ってください。 」の下に書いてある2行)をコピーする。
    このページには「利用規約」もありますので、必ず読みましょう。
    ※また、同じページに「管理者パスワード」が赤字で記載されていますが、 これは後でデザインの変更や書き込みの削除などをするために 「管理画面」 に入る場合のキーになりますので必ず控えておいて下さい。

サイドバーに設置する

マイリストを使って、スクリプトをサイドバーに設置します。
マイリストの作成からサイドバーの設置についての詳細は別ページ、
「基本2: マイリストの作成→サイドバーへの設置」
にて確認して下さい。

基本項目を設定する

タイトルや表示件数など基本的な設定をします。

  1. サイドバーに表示された掲示板の「よむ/かく」ボタンをクリックする。
  2. 最初に選んだデザインの書き込み画面(別画面)が表示されるので、その画面の一番下にある「管理画面」のリンクをクリックする。
  3. 「管理画面ログイン」画面が表示されるので、タグの入手の際に発行された4桁の管理番号を入力してログインする。
  4. 「タイトル」を入力し、「トップページでの表示件数」を設定する。
    ※「タイトル」は全角で10文字まで入力可能です。
    ※「スタイル」を変更する場合も、ここでダウンリストから別なタイプを選択することが出来ます。
  5. 設定が終了したら「変更」ボタンをクリックする。
  6. 「■掲示板に戻る」で管理画面から退出する。
  7. サイドバーを確認して「タイトル」などが設定した通りに表示されているかどうか確認する。

以上です。
上手くできましたか?

応用:CSSでカスタマイズする

「chobi(ちょび)」の既存のデザインのまま利用するなら上記の作業までで終わりですが、別画面で開くコメントの入力画面をCSSを使って自分の好きなようにデザインすることも出来ます。
但し、このシステムのデザイン変更(CSS編集)は難解で、私には手に負えないというのが正直なところです。
実際、自分ではまともな記述が出来なかったため 「ブログパーツをさがせ」様のsatokotoさんが公開して下さっているCSSファイルをダウンロードして、その中を修正しながら使っているというのが現状です。
なので今回、satokotoさんのCSSを参考にさせていただいて私が理解できた範囲のCSSの該当箇所を書いていきますが、 この内容についてのお問い合わせにはお答えできないことをあらかじめご了承下さい。
(自分でも一箇所ずつ直しながら「ここがこれに対応するのか」と確認している状態ですので^^;)
また、「ブログパーツをさがせ」様でも「 (ダウンロードしたCSSの内容については)サポート外」と明記されていますので、その点も充分理解した上でご利用下さい。
※「chobi(ちょび)」のマニュアルページは下記になりますので、詳細の確認やお問い合わせはこちらにお願いします。
chobiマニュアル

  1. CSSファイルを準備する。
    ※「ブログパーツをさがせ」様のCSSファイルはこのページでダウンロード出来ます。
  2. CSSファイルの内容を書き換える。
    ※そのまま利用してもOKです。
  3. CSSファイルをココログにアップロードする。
    ※アップロードの方法は別ページ、
    『基本1:ファイルのアップロード』
    を参照して下さい。
  4. 【基本設定】で書いた手順で管理画面にログインする。
  5. 「スタイル」で『CSSを指定』を選択する。
  6. 「スタイル」の下にある空欄に、 上記でアップロードしたCSSファイルの保存先urlを入力する。
  7. 「変更」ボタンを押す。

CSSが正しく記述されていればこれで反映するはずです。
思った通りの結果にならない場合は、上記の2.以降を繰り返して下さい。

■各セレクタに対応している部分は次の通りです
※私がはっきり判る部分のみ書いてあります。
※これ以外は各自でご確認下さい。

  • html : スクロールバー
  • body : 全体の背景
  • a : リンク部分
  • h1,h2,h3 : 見出し
  • #advertise : 広告
  • #form : コメント記入欄の背景
  • .commentBody : 投稿されたコメント欄

■ヒント

  • このブログの入力画面では3箇所画像を設定していますが、それぞれ「body」、「#form」、「.commentBody 」 の部分です。
  • カラーコードが入力されている部分は何らかの形で色の指定がされているので(当たり前ですね(笑))、 そこを少しずつ変えていくと 「どこがどこに対応しているか」判ってくると思います。

ここがポイント

  • 「ブログパーツをさがせ」 様ではその他にもいろいろな掲示板が紹介されていますので、お好みに合わせて選んでみて下さい。
    ※カテゴリで「掲示板・チャット」に分類されています。
    ※設定方法は確認していませんが、タグが提供されるタイプのものならマイリストへの入力で大抵はOKだと思います。
  • 特に内容をサイドバーへ表示することにこだわらないのであれば、通常のレンタル掲示板を借りてそのアドレスへのリンクのみサイドバーに表示しておく、 という方法もあります。
  • また、自分のブログの中に掲示板用の記事を一つ作って、 そのコメント欄を利用して書き込んでもらうという方法も手軽ですね。
    ※この方法だとココログの「コメント通知」が使えますので管理しやすいと思います。

お世話になりました

■素材サイト 「PRISM」様<記事内のボタン素材>
「chobi(ちょび)」
「ブログパーツをさがせ」


*この記事にコメントを書く*


|

« ブログ便利ツール:「RSSリーダー」利用のススメ | トップページ | 第24回:記事に挿入した画像に写真風の枠線と影を付けてみよう »

カスタマイズ」カテゴリの記事

サイドバー」カテゴリの記事

ウェブログ・ココログ関連」カテゴリの記事

コメント

CSSについてはいわゆる「やっつけ」で作ったままで放置しててお恥ずかしい限りです。
それにしてもなんて親切丁寧な説明なんでしょう。紹介いただいて本当にありがとうございます。うちのブログに来てくれる方でココログの方もいらっしゃるかもと思うので設置方法にこちらの紹介を追記させていただきました。
今後ともどうぞよろしくお願いします。

投稿: ブログパーツをさがせ | 2006/03/23 00:50

いつもお世話様になります。
恐れ多くもtakoさんのサイドバーにBlog peopleとして置いて頂き、感謝感激雛あられです。
が、私が未熟なため更新が通知されてません(泣)
pingというのも送信するように設定したつもりなのですが・・・・
なんででしょう?
他にリンクさせて頂いてる方のサイトでは、私のブログ名のヨコにnew!ってくっついてたりするんですが・・・。
出来の悪い大人でごめんなさい。
努力の足りない大人にどうか愛の手を・・。

投稿: しっぽ社長 | 2006/03/23 21:35

■ブログパーツをさがせ様
CSSへのリンクを快諾いただきありがとうございました(^^)
その上、この記事へのリンクをそちらのページに貼って頂けるとは…!
思いがけないことで感激です!ありがとうございます♪

今回はわざわざコメントをありがとうございました。
今後もパーツ探しでいろいろとお世話になると思いますので宜しくいお願いいたします。

投稿: tako→ブログパーツをさがせ様 | 2006/03/23 22:13

■しっぽ社長さん
こんにちは。コメントありがとうございます。

お問い合わせの件ですが、
「管理画面」→「ブログ」タブ→「設定」→「公開用設定」
で、「通知するサービス」には全てチェックが入っている、ということですよね?
だとしたら、「BlogPeople」はこの中の「www.weblogs.com」か「ping.blogger.jp」の更新情報を受けて更新されるはずですので何故それが受け取られていないかは、残念ながら私には判りません。

ただ、「blogpeople」には専用のping(「http://www.blogpeople.net/servlet/weblogUpdates」)がありますので、
ここあてに送信すれば多分更新が掛かるのではないでしょうか。
ココログのping送信先だけでなく他にも送りたい送信先がある場合、「BlogPeople」提供の「ぶろっぐぴんぴん」というツールを利用するのが便利かと思います。

このツールの使い方やpingについての情報は下記のページに詳しくまとまっていますので、参考になさって下さい。

http://www.boraro.gozaru.jp/blog_ping.html

※申し訳ないのですが、この件について私も特に詳しいわけではありませんので、これ以上は判りかねます。
あとはご自分でお調べ下さい。

投稿: tako→しっぽ社長さん | 2006/03/23 22:41

今晩は。初めまして。
私も記事の内容以外のコメントについて
悩んでいたのですが、tako様の記事を読んで
その手があった!と思い実行しました。
とりあえず、出来たのでよかったです。

tako様の記事は本当に分かりやすく、参考になります。
これからもお世話になると思いますが、どうぞよろしくお願いします。

投稿: 黒庵 | 2006/06/21 22:34

こんにちは。バナー設置ではお世話になりました。

バナーの件も解決したので、次は掲示板を!と
さっそくここの記事を読ませていただき、やってみたのですが
うまくいきません。

紹介されている「ちょび」の掲示板を使ったのですが
ブログ(サイドバー)には、「PR(広告)」しかでないのです・・・。

よろしければなにかよい解決方法を教えてください。

投稿: がねこ | 2007/03/01 09:56

■がねこさん
こんにちは。

ご質問の件ですが、質問文だけでは詳しい状況が判らないため原因の特定も出来ません。

ただ、質問を読んでいてふと思いついたのですが、もしかしてまだコメントを一つも投稿していない状態ではないでしょうか?
だとしたら、「PR」以外には表示する項目がないので表示されない、ということではないかと…。
その場合は(後で削除することも出来ますので)ご自分でテスト投稿してみて下さい。

もしテストしても何も出ない、ということであればまた別の原因かもしれませんが、がねこさんのブログを直接拝見することが出来ない状況では、申し訳ありませんが私にはこれ以上は判りかねます。
(拝見したからといって必ずしも原因が特定出来るわけではありませんが、「貼り付け方が合っているかどうか」くらいは判断出来るかと)
パーツの不具合だとすれば、私のところよりも提供元の「ちょび」さんに直接問い合わせるのが早いと思います。

せっかくコメントを頂いたのにこんな回答で申し訳ありませんが、宜しくお願いいたします。

投稿: tako→がねこさん | 2007/03/01 21:24

おはようございます。
回答ありがとうございます^^

「よむ・かく」ボタンも表示されず、
ただ広告の文字だけが表示されています。
これはちょびさんのほうでの問題発生でしょうか・・・。
(わたしの方法が悪い可能性も大ですが・・・。)

もう一度色々試行錯誤してみようと思います^^

一応ブログをみていただけるとうれしいです。
(左下にはってあります)

投稿: がねこ | 2007/03/02 08:35

■がねこさん
こんにちは。

ブログアドレスの提示ありがとうございます。
確かにPRしか表示されていませんね…。

で、私も新しく別の掲示板を作成して試してみました。
結果、がねこさんのところと同じ状態でした。

現在ここで使っている掲示板とタグを比較したところ、私が使っているものとは若干変化していました。
ここのはスクリプトタグの後ろのiframeタグ(これが広告を表示させてます)がありませんでした。
もちろん自分で削ったわけではないので、作成の時期によって生成されるタグが変化したのだと思います。
ただ、その上のスクリプトタグは基本的に(個別の数字以外は)同じように見えるんですよね。

念のためiframeタグを削ってみたり(ホントは禁止事項だと思います)、他のスクリプトと競合してしまうのかと思いスクリプトが入っていないテンプレで試してみたりしたのですが状況は変わらず、でした。

ということは、掲示板を表示するためのスクリプト自体に不具合がある可能性が高いと思われますので、やはり「chobi」さんに問い合わせてみることをオススメします。
問い合わせ先は下記のページに掲載されています。
http://bbs.chobies.jp/manual.html

結局解決出来ませんでした。ごめんなさい。
chobiさんからきちんとした回答があることを祈っております。

投稿: tako→がねこさん | 2007/03/02 23:08

こんばんは!

お返事ありがとうございます。
色々試していただいたようで、本当に感謝しています!

結論をだしていただいたので、(私ではわからなかったのでw)
ちょびさんに聞いてみることにしますね^^

色々お手数をおかけしてすみませんでした。

引き続き、色々チャレンジがんばってみます♪

それでは失礼します。

投稿: がねこ | 2007/03/02 23:36

こんばんは☆
私も早速、スクリプトを入手してサイドバーへ設置してみましたが、「がねこさん」と同じ現象でした。
問い合わせをしてみようかなーと思っていたところ
niftyで新たに掲示板サービスを始めたので
しばらくはこちらを利用してみようと思いました。
本当はシンプルな画像アップ可能なBBSを捜し求めていたので、リンクでサイドバーというのは、悲しいのですが・・・
(自分でスクリプトを作るには知識がなさ過ぎで・・・><)
続報で「chobi(ちょび)」の掲示板のトラブル等がわかりましたら教えていただけたら嬉しいです☆

投稿: mama | 2007/03/20 00:34

■mamaさん
こんにちは。

今、念のため再度タグを取得して設置してみたら、ちゃんと「よむ/かく」ボタンが表示されました。無事復旧したようですよ♪
私も安心しました(^^)

投稿: tako→mamaさん | 2007/03/24 10:35

tako様
ちょびさんに問い合わせをしても返信なく
もう諦めかけていたのですが、tako様からの
コメントをいただいて、無事に設置できました♪

わざわざ復旧の件を知らせていただいて
本当に感謝の気持ちでいっぱいです!!!

ここを訪れることができた私は
本当に幸せモノです。

ありがとうございました!!!!

投稿: がねこ | 2007/03/24 18:31

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/2654/1116147

この記事へのトラックバック一覧です: 第23回:サイドバーに掲示板を設置してみよう:

» コメントのツリー化と掲示板設置 [なまけもの雑記]
本館の「最近のコメント」をツリー化し、本館・別館ともに掲示板「ゲストブック」も設 [続きを読む]

受信: 2006/10/15 22:58

« ブログ便利ツール:「RSSリーダー」利用のススメ | トップページ | 第24回:記事に挿入した画像に写真風の枠線と影を付けてみよう »