参照サイト1:FC2テンプレート用 変数一覧

00_20131121104340746.jpg
一部の投稿者に対応した背景画像がつくようになりました。
投稿者名(<%comment_name>)をクラス名に設定するだけの安易な方法です。

一方で。
投稿者名を使った「なりすまし」が安易に行えてしまうという欠点があります。
周知できるのであればトリップ(<%comment_trip>)をオススメします。

04_20131121102619d8d.jpg
 
背景画像については40%透過したものを使用しています。

0_201311211026369d5.jpg

これをファイルにアップロードし、URLを控えておきましょう。
URLを仮に「画像URL.png」とします

<HTMLの設定>

<!--comment-->~<!--/comment-->の中をDIVで囲います。
<!--comment-->
<div class="<%comment_name>">
</div>

<!--/comment-->
現在のテンプレートのHTML設定はこちら(URL)。
注:クラス(nameimage)が1つ追加してあります。

<CSSの設定>

クラス名「.(投稿者)」、必要な要素を記述します。

例えば「銀行。」が投稿した場合。
.銀行。{background-image: url(画像URL.png);}
投稿者名が複数存在する場合は「,」で区切ってあげましょう。
「銀行。」「銀行1」という投稿者に画像がつきます。
.銀行。,.銀行1,{background-image: url(画像URL.png);}
実際のCSS画像はこちら。
これらは画像URLを書き換えることで。

01_20131121102621830.jpg
通常服だって。

02_20131121102623c2f.jpg
スク水だって。
思いのままです。

30数名分あったため、共通の設定は別のクラス名を用意しました。
それが(nameimage)です。
/***■■(全体の設定用)■■ */
.nameimage{
background-repeat: no-repeat;
background-position: right;
}

画像は繰り返さず、右に配置。

今回は画像を使用しましたが、background-colorで背景の色だけでも。

0000.jpg
これで自分の発言がより分かりやすくなりますね。


コメント

    コメントの投稿

    (コメントの編集・削除時に必要)



    最新記事