テンプレート掲示板がらみです。
モブログをした場合のみ、タイトルの前にある画像を入れたいのですが、このようなことは可能でしょうか？モブログしたときのカテゴリーが、“携帯”というものなので、これを利用できるかと、いろいろ試してみたのですが、うまくいきません。
という質問に、うちの記事が紹介されていたので張り切っていきます。質問者の使用テンプレートがblue-plate3ということなので、それにそって説明します。
何はともあれ表示するアイコンを用意します。自分でお絵かきソフトで描いてもよし、素材屋さんから借りるのもよし。CSSのタイトル部.postttleのフォントサイズとパディングから、アイコンの高さは24pxくらいが良いでしょう。ハイ、描きました。 → ケータイのアイコン
あらかじめ自分のサーバにアップロードして、ファイルのアドレスを控えておきましょう。
まず、HTMLを改造します。以下がblue-plate3のエントリタイトル部分です。
<div class="postttle <%topentry_category>"><a name="<%topentry_no>"></a><%topentry_title></a></div>class="postttle" を class="postttle <%topentry_category>"
のようにカテゴリ名でclassを識別できるようにします。postttle との間に半角スペースを入れてください。これでHTMLは終わりです。
次に、CSSにカテゴリ名”携帯”のclassを作り、アイコンを背景画像に設定します。classを記述する場所はCSSの末尾でかまいません。
.\643a \5e2f {background: url("アイコンのURL") no-repeat 0 50%;padding-left: 26px;}.\643a \5e2f の部分は携帯という2バイト文字を数値文字参照したもので、Mac Safariでの文字化けを防ぐためです。アイコンのURLの部分を控えておいたアイコンファイルのアドレスに書き換えます。
以上で改造完了。（動作確認 IE6 Firefox1）モブログしたときのカテゴリー名が“携帯”、その名前をそのままHTMLでclass名に当てはめ、CSSの”携帯”classでアイコンファイルを背景画像に設定する、という流れになります。
興味ある方はこの辺も読んでみてください。
< iPod shuffle 1 | 更新のお知らせ・テンプレ選択支援ブックマークレット > | 表紙へ戻る |
→ http://sug.blog2.fc2.com/blog-entry-106.html#comments-23日20時
私のやりたかったことが、ばっちりできました☆彡 *.:*:.｡.: (人 *)
いろいろ、いじってはみたものの、まだまだ勉強不足。。
がんばります♪
((携帯のアイコン、お借りいたしました。。よかったでしょぉか？))-23日20時
早いですね！投稿して30分も経ってませんよ（ｗ
うまくできて良かったですね。アイコンは記念に差し上げます。-23日21時
本来であれば自分で説明するべきでしたが、日本語が不自由（汗）ですので^^:
事後報告になりました事をお詫びしておきます。-23日23時
マスさま、ＣＦＤＮさまに感謝しておりますｗ
次は、ここのコメント欄のようにコメントしてくださる人によって背景を変えるワザに挑戦してみようと思ってます。
<%comment_name> がポイントのようですね♪
本当にありがとうございました♪-24日08時
あの記事を客観的に読んでみると、やっぱりわかりづらいと思います。
そのあたりを注意して書いたんで緊張しました。
あんまり難問はアレですけど、ヒマなサイトですから誘導は歓迎です。
＞雛乃さん
他にどんなカテゴリーをお持ちでしょうか？
”携帯”と同じ方法で、全部アイコン化することもできると思いますよ。
ワザが決まると結構感動ものです(笑)-24日19時
ＦＣ２で書かせてもらってるのは、息子なので、
他のカテゴリははずかしくて、お教えできません（爆）
いろいろ勉強して、すっばらしく納得いくものができれば、自分専用でつかいますｗ
((ここにこんなことを書いてて、よいのでしょぉかぁ？))-24日22時
そんな大きなお子様がいらっしゃるとは！てっきり女子高生くらいかと･･･
（よこしまな気持ちで回答したのではありません、ありませんとも）
＞ここにこんなことを書いてて、よいのでしょぉかぁ？
なんでも書いていってください。このサイト、コメント過疎問題が深刻なんですぅ。-26日23時
また来ました(^^ゞ昨日に引き続き〜こちらの真似っこしたくて…
＞コメントのボックス単位を<%comment_name>でclass付けすることで、管理人とお客さんを分けたりすることもできる。
これ↑って何回読んでもMichiyoにはピントこなくて(/。＼)
もうチョット具体的に教えて頂きたいのですが…お暇な時にでも
お願い致しますm(_ _)m-02日09時
例：マス（つまりワシね）とお客さんとのコメントの背景色を分けています（昔のテンプレ）
→ http://sug.blog2.fc2.com/?style2=koharu8&no=110#comment_no531
具体的にMichiyoさんの現在のテンプレでやるとすると、
HTMLの方は
<!--comment-->
<dl class="section post-by<%comment_name>" id="cm<%comment_no>"> ← classに半角スペース＋post-by<%comment_name>を追加
<dt class="cm_header"><アイコンイメージ><%comment_title></dt>
<dd class="cm_body" id="c<%comment_no>"><%comment_body></dd>
<dd class="cm_footer"><ul class="state">
<スクリプトなど>
<li><%comment_month>月<%comment_day>日 </li>
<li><%comment_name></li>
<li><%comment_url+str></li>
<li class="admin"><a href="<%url>?mode=edit&no=<%comment_no>" title="コメントの編集">Edit</a></li>
</ul></dd>
</dl>
<!--/comment-->
さらに、CSSの方に
dl.section dt {
background: #ccf;
}
dl.section.post-byMichiyo dt {
background: #fcc;
}
と設定すると、お客さんのコメントタイトル欄の背景は水色、Michiyoさんのコメントタイトル欄の背景はピンク色になります。
また、個別アイコンのアイディアとしては、
dl.section dd.cm_body {
background-image: url(アイコン１のアドレス); ← 全部のコメントに付くアイコン
background-repeat: no-repeat;
background-position: 0 0;
padding-left: XXpx; ←アイコンの幅＋α
}
dl.section.post-byMichiyo dd.cm_body {
background-image: url(アイコン２のアドレス); ← Michiyoさん専用アイコン
}
dl.section.post-bysug dd.cm_body {
background-image: url(アイコン３のアドレス); ← sug専用アイコン
}
以下、同様にいくつでも･･･
のようにすると、コメント本文の頭に常連さんごとのアイコン（実際には同じ大きさの背景画像）をつけることもできます。
これは、先日のツリーの背景画像の分別のやり方と同じです。
これは、常連さんにはウケルかもしれませんが、一見さんには優しくない気がします（エコヒイキになっちゃうし）
すべてのお客さんにアイコンを選んでもらえるようには、FC2の機能だけではできません。
管理人がアイコン一覧（のページ）を作り、各自に選んでもらい、管理人がCSSに記述する、という手続きが必要になります（書いててなんか実装されそうな気が･･･）
どうやるのか？はあまり難しくありません（単に知識の差だけです）でも、
なぜそうするのか？（しないのか？）はとても難しい問題だと思います。
-02日20時
こんなに丁寧に、本当にありがとうございます。すっかり他力本願で
わがまま聞いて頂けるなんて…足を向けて寝られません！？
とか云いながら…
コメントに Michiyoさん、○○さんで、マス＠管理人の区別は
アイコンと同じように設定してもいいのでしょうか？！
＞書いててなんか実装されそうな気が･･･
ある意味では、頭をポリポリしてコーヒーがぶ飲みしながら、カスタマイズしてるのが楽しいんですけど（笑）
実装される可能性大有りですね。
＞どうやるのか？はあまり難しくありません
初めて見た時、とても難しそうだったので、じっと我慢で見てるだけ〜♪だったんです。
いまこうして見ると…やっぱり難しい〜自分じゃ無理です〜！！進歩が無いMichiyoでした┐('〜`;)┌
が・・・これからも、どうぞよろしくお願い致します。-02日21時
この場合はCSS2の
contentプロパティを使います。（が、IEでは解釈されないので呼び捨てになりますｗ）
まず、コメント投稿者の名前の部分を見分けなければならないので
前略
<li><%comment_month>月<%comment_day>日 </li>
<li class="commentator"><%comment_name></li> ← 投稿者名のclassを作る
<li><%comment_url+str></li>
後略
dl.section li.commentator:after {
content: "\3055 \3093"; /* さん の数値参照 */
}
dl.section.post-byMichiyo li.commentator:after {
content: "\ff20 \7ba1 \7406 \4eba "; /* ＠管理人 の数値参照 */
}
という感じです。
＞じっと我慢で見てるだけ〜♪だったんです。
自力でツリー背景を作れたのですから、素養充分かと。
やっぱり、考えていじくりまわしてみるというのが、失敗しても財産になる気がします（オレは校長先生か？）-02日23時
＞失敗しても財産になる気がします
うぅっ…失敗というのか、例のMacOSXの「外部スタイルの文字化け」ってやつです(/。＼)
回避したくてもやり方がよく解らなくてUCS-2でって事なんですけどねぇそれがイマイチで「ん？！」
このdl、li、を使わずspan classを使うとコメントツリーやフッター、タイトルなど複数で適用出来ないでしょうか？昨日一日中色々試してみましたが…上手く出来たのは、ピンクとブルーの背景設定だけです┐('〜`;)┌
それは、コピペしたからなんですけどねf^_^;
sectionにはどんな意味合いがあるのか解らなくて…自分とお客さんを区別するためのclassですよね？
それと.commentatorこのclassの方だけじゃダメかしら？！どちらか一方だけを
span classであちこちに適用するのは邪道？？出来ないのかなぁ〜？脳みそBonb!です。
何か適切な事が理解出来てないんですね、いい解決法はありますか？何度もごめんなさいm(_ _)m
度々どうかよろしくお願いいたします。-04日08時
＞いい解決法はありますか？
個別背景と敬称付け、まずはどちらかひとつだけに集中するのが良いです。
＞例のMacOSXの「外部スタイルの文字化け」ってやつです(/。＼)
これに関しては、紹介させてもらったツールを利用してください。
→ http://www.eris.ais.ne.jp/~haza/html/
＞このdl、li、を使わずspan classを使うとコメントツリーやフッター、タイトルなど複数で適用出来ないでしょうか？
例えば敬称付けに関しては
<li><span class="commentator"><%comment_name></span></li>
と
<li class="commentator"><%comment_name></li>
は、ほとんど同じ結果になります。（記述が簡単な分だけ下の方が好みなので）
＞sectionにはどんな意味合いがあるのか解らなくて…自分とお客さんを区別するためのclassですよね？
sectionはテンプレに元からあるオリジナルのクラスです（コメント欄の見映えを決めているものと思われ）。
post-by<%comment_name>が投稿者の名前を含んだ、誰のコメントか見分けるためのクラスになります（個別コメントの見映えを決めるのに使用）。
＞span classであちこちに適用するのは邪道？
うーん、邪道といえば邪道だし、この辺は実際に作ってみて自分で解りやすい方を選べば良いと思います。spanはインラインでしか使えないので
<!--comment-->
<dl class="section" id="cm<%comment_no>">
<dt class="cm_header"><span class="post-by<%comment_name>"><%comment_title></span></dt>
<dd class="cm_body" id="c<%comment_no>"><span class="post-by<%comment_name>"><%comment_body></span></dd>
<dd class="cm_footer"><ul class="state">
<スクリプトなど>
<li><%comment_month>月<%comment_day>日 </li>
<li><span class="post-by<%comment_name>"><span class="commentator"><%comment_name></span></span></li>
<li><%comment_url+str></li>
<li class="admin"><a href="<%url>?mode=edit&no=<%comment_no>" title="コメントの編集">Edit</a></li>
</ul></dd>
</dl>
<!--/comment-->
と、こんな感じになります。
先日の例と同じスタイルにするとすれば
dl.section dt span {
display: block;
_width: 100%;
background: #ccf;
}
dl.section dt span.post-byMichiyo dt {
background: #fcc;
}
のようになります。先日の例の方が記述量が少なくて済むのがわかるでしょうか？
CSSやスクリプトは、すでにあるHTMLだけで（余計な記述をしないで）作りこむほうが望ましいと思ってます。僕も実現できてませんが。逆にいえば、余分な<div>や<span>を取り除いても読める（見える）ものが、そのページで本当に伝えたいことになるわけです。
飾りは飾りと割り切り、気楽にいきましょう。-04日12時
WEBページを改造してゆくと、どこかで必ず壁にぶち当たります。絶対に実現できないこともありますけど、多くの問題は基本をナイガシロにしているからだと思います。
実際問題として、HTMLを基本から勉強してからページを作る人というのは極少数でしょう。僕も小手先のワザから入り「コレはおもろい」ってやってました。（どんな趣味にだって当てはまるよね）
ベテランの人から見ると、こういうのはWWW近所迷惑でしかないでしょうけど、そこから興味をもち基本から覚えようという流れにうつる人だっているはず。そこで、今までやっていたことの間違いを直すとか、簡単によりシンプルにHTMLを書くやり方が少しづつ理解できてゆく。
洗練される、というのはそういうことだと思います。（うちのサイトを指してるんじゃないよ）HTMLの基本をお教えできるレベルじゃないですけど、WWWには勉強になるサイトがゴマンとあります。眺めているだけでも感じることはあるはず。
毎度、なにが言いたのかわからないんだけど「とりあえずやってみる」ってのは全然OKだと思う。ただそこで「なぜそうするのか」とちょっと省みると、また違った何かに気付くんじゃないかと（しりすぼみ）-04日13時
大変な状況のなか、ややこしい〜質問やら、アドバイスを求めてしまって…ごめんなさい！
やっと出来ました〜（*´▽｀*）/コメントツリー部分に＠管理人と○○さんを
設定しました！リスト(UL LI)が設定されていたんですけど、どうしても上手く表示出来なかったので
spanを使ったらどうかなぁ〜？！と思って昨日こちらにお邪魔したんですけど、簡潔にする方法が
いいんでしょうけど結局はsupanを使ったんです(/。＼)これってダメですかねぇ〜？
<!--rcomment-->
<li class="comtree"><span class="section post-by<%rcomment_name>" id="comment<%rcomment_no>">
<a href="<%rcomment_link>#comment<%rcomment_no>"
title="【<%rcomment_etitle>】"></a>
<a href="<%rcomment_link>#cm<%rcomment_no>" title="<%rcomment_name>＠コメント"><img src="（アイコンgif）" border="0"><%rcomment_title><br />
<span class="commentator"><%rcomment_name></span></a></li>
<!--/rcomment-->
</ul>
<script type="text/javascript">
tree();
</script>
それとバックスラッシュも￥もテンプレートの編集で更新すると消えちゃうんです┐('〜`;)┌
そのまま日本語を使うとネスケもFirefoxもOKなんですけど、Safariは？のパレードです（汗
地道に対策考えて、と云うか調べてみます、本当に色々教えて頂いてありがとうございます。
まずは、ご報告でした！-05日16時
OK。形になってます。ここから先は興味が出てきたときにやれば良いと思います。僕らは趣味でやってるのですから、楽しむこと優先で。
＞それとバックスラッシュも￥もテンプレートの編集で更新すると消えちゃうんです
バックスラッシュと￥は同じ物（変わってしまった、という現象はフォントフェイスによるもの）なのですが、消えるというのは謎ですね。複数のブラウザがあるなら両方で試してみましたか？-05日22時
＞消えるというのは謎ですね。
そうなんですよ！(￥3055 ￥3093、\3055 \3093)で入力してちゃんと表示されているんですけど、
更新してからCSSの編集を開くと、どうしたもんだか？！消えちゃうんです( 3055 3093 3055 3093 )こんな
感じになってしまうんです、だからぁ〜「○○ 3055 3093」こう表示されちゃうんですo(;・。・;)o
そのうち解決策が見つかるかも…？？？
殆どのブラウザでやってみたんですけど、Safariは最悪でした、
ツリー化スクリプトVer,2がバックスラッシュたくさんあるから…全部化け化けで（汗
今は、Firefoxがメインで使ってますが、表示速度はSafariが速い(軽い)んですよねv
足して二で割りたいです〜（笑）-06日06時
\\3055 \\3093
半角バックスラッシュ2個重ね。
-06日21時
台風が通り過ぎたら、試してみます！！
北海道も直撃らしいので、愛犬とオカメインコ、Macを連れて
避難準備です〜家は河川の側なのでヤバイかも…
ps
何だか、このテンプレ…違う所に来たみたいです('〜`;)
-07日08時
違うテンプレにすると、元テンプレの悪い点とかも見えてきますよ。裏でこっそり直してます。
どうですMichiyoさんも、いっぱつ推薦してみませんか？-07日20時