当サイトの掲示板

掲示板の設置

当サイトヘッダー画像の募集を行うかもしれない事等に備え、画像アップロードが出来る掲示板を設置する事にした。

正男界のサイトではチャットシステムを設置しているサイトも多いが、当サイトではチャットは設置しない方針だ。理由は、「設置すると管理の手間が増える」と「恐らく利用者が現れない」と「掲示板にチャットシステムの役割も持たせる」。

採用するサービスの条件は「無料」∧「提携広告設置可」∧「画像アップロード可」∧「JavaScript及びFlash等のプラグインが無くても利用出来る」だ。
この条件に最も適しているFC2を選んだ。FC2掲示板での提携広告設置の可/不可に就いては利用規約等で特に触れられていない。

WordPressのプラグインを使っても望みの掲示板を造る事が出来るのかも知れないが、サーバーの負担軽減を望んで外部サービスの利用を採用した。

掲示板のURI「*.bbs.fc2.com」の「*」に当たるID名は、最低でも3字が必要。アドレス手打ちが楽になる様に、3文字の「mgn」にした。由来:「『M』U『G』I’s 『n』ote」 掲示板登録は済ませたものの、管理画面に行けず、削除する事も出来ないという不具合が発生した。そこで平成25年1月27日、FC2に問い合わせ、修復するよう請願した。すると翌日、FC2は修復してくれた。対応が、意外な程に早かった。

掲示板改造

平成25年9月からテンプレート形式を採用し、HTMLやCSSを自分で改造するようになった。

【携帯デザイン設定】色の16進コードを6桁から3桁に変更。背景色を白から#b73(茶色)にし、PC版と統一。アクティブリンク色は”red”を設定。件名の文字色は赤⇒黄
【テンプレート】faviconを設定するHTMLタグ<link>」のrel属性の属性値を「icon」から「shortcut icon」に変更。アクセスカウンターとオンラインカウンタの見出しに「<dl>」を使っていたのを、「<figure><figcaption>」に変更した。
【テンプレート】TOPページに於ける各スレッドの見出しに、夫々のスレッドの固定ページをリンクした。
【テンプレート】TOPページに於けるスレッド題名とその返信の題名に、hタグを用いた。
【テンプレート】スレッド個別ページに於けるスレッド題名とその返信の題名に、hタグを用いた。
【テンプレート】「記事の編集/削除」ページ 見出しを付け、テキストボックスにrequired属性を付けた。
【テンプレート】メッセージ記入欄/検索窓の幅を、スタイルを用いて親幅の95%にした。検索窓では初めて属性セレクタを用いた。
【テンプレート】投稿者の名前/サイト/メールアドレスをaddress要素でマークアップした。
【テンプレート】夫々のセクション(h2~要素を含んでいる)にclass属性値”section”を入れ、階層毎に背景色を分ける様にした。これで階層毎の背景色の設定が楽になる。この方法は独自で発案した。第一階層で#0ff/背景色を第ニ階層で#ff0/第三階層で#0f0としている。
【テンプレート】編集/削除パスワードのinput要素から属性「size=”8″」を削除した。「●(伏字)」が見える数がGeckoエンジンだと4である為。
【テンプレート】パスワードのinput要素に属性「maxlength=”8″」を追加した。
【テンプレート】input要素の名前欄にmaxlength=”21″、件名欄にmaxlength=”42″を追加した。
【テンプレート】全体にフォントserifを適用。如何なる表示倍率でも「一(いち)」と「ー(長音符)」の区別を付けられるようにする為。
【テンプレート】スレッド画面のスレッド主題にアンカーを付けた。此れ迄は「自身のページなので付ける意味が無い」という理由で付けていなかったが、返信へのアンカーで指定されたページに於いてスレッド画面へのリンクが無いのは不便だと思ったので付けた。
【テンプレート】カラムのidを、左は”column1″から”main”へ、右は”column2″から”aside”へ変えた。
【テンプレート】レス毎にid属性値に%midを設定し、”<%top_url>reply/<%tid>/#<%mid>”でレス個別の参照を出来る様にした。 “>>n“でレスに個別に参照出来る様にしていたが、「nより前のレスが削除されると、n以降のレス番号がずれる」という問題が有った。スレッド個別の参照は、URIに%tidを用いる形式が定義されていて可能であったが、レス個別参照はURIに%midを用いる形式が無いので出来ず、苦慮していた。しかし、今回の発想が出て、解決出来た(アンカーの様にメッセージ中で用いるには向かない)。我乍ら妙案だと思う。
【テンプレート】メッセージの下部に%midを表示させるようにした。
【テンプレート】階層のpadding,marginをsectionクラスの入れ子で管理するようにした。これに伴い、HTMLとCSSから不要なid及びclassの記述を削除した。また、夫々の階層のmarginを少し大きくし、「第一階層>第二階層」になるようにした。
【テンプレート】画面により多くの記事が見えるようにしたかったので、h1~h4要素のmarginを”無指定”から11pxに指定して狭めた。
【テンプレート】「セクション階層の背景色」の候補を8色(0,fの組み合わせ)から27色(0,8,f)の組み合わせに増やし、第一階層を#0ffから#8ff、第二階層を#ff0から#ff8、第三階層を#0f0から#8f8に変えた。
【テンプレート】選べる文字色を#000,#008,#800,#808,#080,#088,#f00,#f08と見易いものに変えた。但し、色は似ない様にした。また、選択領域の背景色を投稿文の背景色(白)に合わせ、選び易くした。
【携帯デザイン設定】カウンターを撤去。ページ背景色を#C84、基本文字色を#fffにした。
【テンプレート】見出し「むぎの手記 掲示板」にリンクを付けた。
【テンプレート】利便性向上の為、新規スレッド投稿欄をスレッド一覧の下に移動した。
【CSS】URI等の文字列が枠に収まり切らない場合は改行するようにした。
【CSS】overflow:autoの全称指定でfooterが表示されなくなっていたので、この指定を”contents”classのみにして修正した。
【CSS】marginの指定について、従前は一つの値(2^m*n-1)だけで設定していたが、pageを拡大すると縦の相殺により投稿文の横幅が狭く読み難くなっていた。そこで縦と横の2つの値を「縦:横 = 2:1 = 2^m*n:2^(m-1)*n」で設定するようにした。
【CSS】指定する書体を「serif」から「"MS UI Gothic", sans-serif」へ変えた。ゴシック体の方が文章を読みやすいと思った為。最も読みやすいMS UI Gothic の次に、Mac 用にsans-serif を指定した。
見出しはserif の儘にしようとしたが、a 要素で包含するとゴシック体になる。見出しにはa 要素で包含している物とそうでない物があって、各見出しに依って書体が異なるという状態になった。これでは見栄えが悪いので諦めた。
カテゴリー: 当サイト パーマリンク

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <img localsrc="" alt="">