コメントの枠飾り♪



こんなブログにお越し下さりありがとうございます。_o_
いろんな方々からコメントを頂いたり、こちらからコメントを書き込んだり、ブログって楽しいですよね。(^^)
でも、blog@naturum のコメント欄って、コメントとコメントの区切りがよくわからなくてちょっと見にくいかも…、 という気がしませんか?


そこで、みなさまから頂戴したコメント一つ一つに枠飾りを付けるようにカスタマイズしてみました。
自分がやったことの備忘録みたいなものですが、みなさまの参考になれば…。


まず、コメント欄をいじるには、どこをカスタマイズすればいいのか、確認してみましょう。

  1. 自分のブログの管理画面に入って下さい。
  2. テンプレートを開いて下さい。
  3. そして、個別記事の中にある、CommentsLoopというワードを探して下さい。
    < CommentsLoop > ~ < /CommentsLoop > の範囲内がコメント表示部です。ちなみに、
    < TrackBacksLoop > ~ < /TrackBacksLoop > の範囲内がトラックバックです。

次に、当ブログの枠飾り例を見てみましょう。

  1. 当ブログの記事で、コメントが付いている記事を一つ開いて下さい。どれでもいいです。
  2. ブラウザのメニューから、ソースを表示して下さい。
  3. そして、コメント枠飾りというワードを探して下さい。
    < !-- ◆コメント枠飾り開始 -- > ~ < !-- ◇コメント枠飾り終了 -- > の範囲内が、当ブログの枠飾りです。

当ブログでは、コメント文に枠飾りを付けたように見せる一つの方法として、< TABLE > という方法を使っています。


図のように9つのエリアから構成されており、周囲の①~⑧に対応した GIF ファイルを貼付ける事で、枠っぽい見た目になるようにしています。
ちなみに、角①③⑤⑦の GIF は固定サイズで使用しているのに対し、辺②④⑥⑧の GIF は可変サイズとして使っています。これは、コメントの長さや幅の長短に適応させるためです。


そんな理屈はおいといて、とにかく枠飾りをやってみたい方は、

  • 上記、ソースコード内の< !-- ◆コメント枠飾り開始 -- > ~ < !-- ◇コメント枠飾り終了 -- > の範囲内の < TABLE > に関連する部分だけを、自分のテンプレートにコピる。
  • ①~⑧の *.gif ファイルを自分の画像置き場にアップロードする。
    あとで、自分流に GIF 画像をカスタマイズしてみるとよいでしょう。

  • < TABLE > 内の GIFファイルの URL と ファイル名を、必要に応じてメンテする。
  • 自分のブログのウィンドウサイズに合わせて、WIDTH などを調節する。

というかんじでトライしてみて下さい。
ざっくり説明だったので、理解不能なところがあるかと思います。<ゴメンナサイ
でも、これはあくまで例として、ご自分でいろいろお試し下さいまし~。(^^)/



ABOUTこの記事をかいた人

9bota

The 9th trail. のあるじです。右往左往しています。