サイドバーのコメント一覧の名前の横ちょにアバターを表示させたいなーと思い立ちまして。
アバターを呼び出すコード＜？php get_abatar なんたら ；?＞ってのは分かったんだけど、実際リスト表示させてる部分がすでにphpのタグ内に埋め込まれてて、その中にもう一回タグ書くのは流石にだめだろうってphp読めなくても空気は読めた。
そしたらなんて書いたらいいのさよ・・・・さっぱりわかりません＼(^o^)／
で、げくに教えてもらったところー
”. で囲めばいいよ！的な？接続詞がどうこう言ってました。多分このままうっすら勉強していけばいつか分かる日がくるよね。さくっと”.get_avatar( $comment, 18 ).”とぶち込んで無事表示はできたんだけども、
<img class="avatar avatar-18 photo" alt="" src="http://1.gravatar.com/avatar/b79a649501be6bc7444fcac90a4a07ee?s=18&d=monsterid&r=G" width="18" height="18" />
てなぐあいにget_abatarさんは画像タグごと呼び出すもんだからテーマのCSSで設定されてるクラスまで一緒に出てきちゃってサイズは指定できたものの、位置表示とかその辺がままならない。
.avatar {
border-radius: 5px;
float: right;
margin: 0 0 10px 10px;
}
という事で、floatで右位置に表示させたりとか、下と左に10pxずつのmarginがあるCSSのクラス設定されてるからコメ一覧の方もリストの一番右に表示されちゃうしなんかバランス悪い。しかしCSSの方を変更したら今度は個別ページのコメント欄のところも変わっちゃうよね。
さてどうしよう。
げくは一覧表示部分のphp内部で画像のＵＲＬだけ抜き出せばいいんじゃない？って方法を提案してくれたんだけどそれもなんか力業ぽくてやだなぁと。んでちょろめさんの要素を検証でよくよくソースを見てたら
class=”avatar avatar-18 photo”ってなってる。
CSSで実際記述されてるのは .abatar なんだけど、残りのabatar-18って何？
18っていうのはget_abatar内で指定した表示サイズの事かなあ。
でもそういうclassはCSSファイル内には実際無い。じゃぁこのclassをCSS内に追加で記述しちゃえばいいじゃんって事になり .avatar-18 で書き直した。
けどやっぱり右側ですよ？
あれー？って一人で首かしげてたら、げくがまた教えてくれた。元々float:rightがあるならそれを上書きしてくれるようにちゃんともう一回float:なんたらを書かないとだめだは。との事。そいえばmarginを0にしただけで何も書いてなかった。
rightの反対はleftでしょ！ってleftにしてみ・・・・るけど多分これ違うと思う。。
予想通り行の一番左にでてこた。違う！そうじゃなくて名前の横に出したいんだよ！
というわけでfloat:noneにすることで落ち着きました。
.avatar-18 {
border-radius: 5px;
margin: 0px;
float : none;
vertical-align:middle;
}
めでたしめでたし。
なかなか楽しかった。
