FCafe  コメント装飾追加

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 今月前半は暑さでボーっと過ごした管理人ですがユーザーフォーラムはチェックしておりまして、
中でも こんな御質問 が印象に残っております。
FC2ブログのコメント中ではHTMLタグが使用できないのですが、「何とかシステム標準機能(load.js)以外の装飾(タグ)を使いたい」 というもの。 私の解答の骨子は「システム標準機能でコメント文中の文字列に付加できる装飾タグのプロパティをCSSで異なる形態に変更して用いる」、というものだったのですが 単にそれのみですと  [1] 標準機能本来の装飾(の一部)が使用不能となる  [2] 来訪者が意図した装飾結果を得られない   という問題が生じてしまう訳です。  ( 実際の解答では 「各コメントに投稿者HNでクラス付けをし、管理人HNのクラスのみに指定する」 ことで [2] については回避可能としたのでしたが )、
今回は 上記の2点の問題を共に回避する方法について御紹介させていただきます。

 load.js で可能な文字装飾は 「太字体」・「斜字体」・「下線」・「打消し線」 及び色指定ですが、
これらの内前四者は投稿時に [太字] [斜体] [下線] [打消] という独自タグが挿入され、投稿後にそれらはFC2のシステムにより <b>  <i>  <u>  <s> というHTMLタグに変換され出力されます。 (コメント編集時のログには独自タグの形のまま表示される)
単独でも複合でも使用可能なその選択性を損なう事無しに、どうすればこれら同じ独自タグで新たなプロパティを指定可能とできるのか。  以下のようにすれば良いのです。


【 設定法 】 CSSに以下の様な設定を追加します ( 文字サイズを追加する場合の一例 )

i>i   { font-style:normal; font-size:9px; }
i>i>i { font-style:normal; font-size:20px; }

コメント投稿時以下のように装飾タグを付けます 当記事のサンプルコメントを御参照下さい

[斜体][斜体]小さい文字[/斜体][/斜体]
[斜体][斜体][斜体]大きい文字[/斜体][/斜体][/斜体]
 

【 解 説 】   『同種装飾タグを入れ子にし それを Child selector としてCSSでプロパティを定める』  というもの。  思い付いて直に記事を書いた為に当初は認識が不十分で Descendant selector 形式で指定していたのですが、それですと 使用したタグ自体のプロパティを設定したプロパティと併用(サンプルコメントのソース参照)し辛く(不可能ではない)なってしまいますので IE(6まで)の対応に難がありますがこのように改めました。 
(デフォルトのプロパティと併用しない場合はDescendantでも良いでしょう)
<i> タグを使用したのは <b> タグと異なりgatewayに「非推奨」と言われませんし <u> <s> タグは何故かCSSの text-decoration でデフォルトプロパティを解除出来なかったからです。  ( この辺り詳しい方御教示を )

・・・原理的には本来の装飾機能を損なう事無く 幾つでも装飾オプションを増やせる訳ですが如何でしょうか

Comment

daniel daniel Edit
08/26 13:41

 このコメントはデモ用のサンプルです
.
大きい文字 小さい文字   大きい斜文字 小さい斜文字
.


.  
HN Title URL PW secret

TrackBack http://pcafe.blog3.fc2.com/tb.php/583-8e390d98

Shown after Admisson
.

≫ Google Chrome 襲撃! The Daily Public 休刊 ≪

2008 / 08 / 26  Tue
Comment/TB   
Comment 1 / TB 0 / Edit
Designed by Daniel Corporation . all rights renounced
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。