FC2ブログ

トラックバックエリアのカスタマイズ

2006年07月31日
まゆびのブログの中で以前から気になっていた
トラックバックを表示するエリア。
文字は大きいし、余白も大きかったのです。
そこでまずはトラックバックを表示する記述を探しました。
まゆびのテンプレではこうなっていました。

<!--trackback-->
<div class="entry_title"><a href="<%tb_url>" name="trackback<%tb_no>"><%tb_title></a></div>
<div class="entry_text">
<%tb_excerpt>
<%tb_blog_name>【<%tb_year>/<%tb_month>/<%tb_day> <%tb_hour>:<%tb_minute>】
</div>
<!--/trackback-->


トラックバックのタイトル、テキストは記事のタイトル、テキストと同じ設定に
なっているのでトラックバック用に新たなクラスを作成します。
まずは上記の赤字部分の
entry_title→tb_title
entry_text→tb_text
に変更します。
その後CSSに以下の記述を付け加えました。

/*トラックバックエリア*/

.tb_title{
font-size: 16px;
font-weight: bolder;
color: #000000;
margin: 10px 20px 0px 20px;
padding-bottom: 10px;
border-bottom: 0px dotted white; }

.tb_text {
font-size: 12px;
color: #505050;
margin: 0px 20px 10px 20px;
line-height : 150%;}


もともとの.entry_title .entry_textの部分をコピーして
下のほうに貼り付けます。
それから名前を変更。
文字の大きさ、文字の周りの余白を調節しました。
(赤字部分が今回の変更部分です。)
margin:の後のサイズは左から順に上、右、下、左の余白の大きさを表します。
上下の余白が30pxなどすごく大きい設定になっていたので
少なめにしました。

これでかなりスッキリしたのですが、トラバが複数入ったときのために
各トラバの間に線で区切りを入れます。(下の記述の緑字の部分を追加)
<hr>は非常に便利なのでいろいろ使えますよ。
<hr>だけで横線が入ります。簡単!!
線の色を変えたい場合はcolor="#******"と言う記述を入れればOKです。
まゆびの記述にwidthが入っているのは少し短めにして左右に余白をいれるためです。
(入れない場合は左から右までビシッとつながります!!)

そしてトラバの最後にブログ名とトラバの入った時間などを表示する部分があります。
内容の続きにくっついていると分かりにくいので
まずブログ名の前に<br>を入れて改行。
そしてブログ名、時間の部分の文字色を変更しました。(下の記述の赤字の部分です。)

<!--trackback-->
<div class="tb_title"><a href="<%tb_url>" name="trackback<%tb_no>"><%tb_title></a></div>
<div class="tb_text">
<%tb_excerpt><br>
<font color="#FF8000"><%tb_blog_name>【<%tb_year>/<%tb_month>/<%tb_day> <%tb_hour>:<%tb_minute>】</font>
</div><hr width="510px" align="center" color="#ffe4af">
<!--/trackback-->



これで少しは見やすくなったでしょうか?

次に記事の投稿日時の横にupという画像を出していましたが、
こちらの画像も変更しました。今まで黒字だったので、
今回はブログに合わせてオレンジ色の画像に変更です。
こちらは「A Trial Product's 素材置き場」さまよりお借りしました。

最後に7月のカレンダーを8月のカレンダーに変更しておきました。
こちらのカレンダーは「柚莉湖♪風と樹と空と♪」さまよりお借りしました。
ブログの壁紙とおそろいなのでピッタリですね♪(*^-゚)v

はぁぁぁ。時間かかったなぁ。。。
思い通りにカスタマイズ出来るようになるまでには
まだまだ修行が必要ですね!!頑張ります!!

↓ポチッとしてくれると励みになります♪d(*⌒▽⌒*)b ニコニコッ
スポンサーサイト



スレッドテーマ:ブログ:ブログ

メイン

トラックバックURL


トラックバック

- from
管理人の承認後に表示されます [Read More]

コメント

まゆびさん、こんばんはー♪
またカスタマイズですね。特に『俳句を求めて三千里』のトラバ表示が、
はっきり見やすくなりました。(*^-゚)vィェィ♪
記事タイトルの右端の画像、かわいいじゃないっすか♪
yurikoさんのカレンダーもいいですね♪(゚-゚*)(。。*)ウンウン

>はぁぁぁ。時間かかったなぁ。。。
わっかりますよ。こまごましたことを色々とやっていると、
本当に時間かかっちゃいますもんね。でも出来上がったときの喜びは、
大きいですからね。やめられそうにないですね(*゚▽゚)*。_。)*゚▽゚)*。_。)ウンウン

まゆびちゃん、こんばんは^^
またまた進化ですね(^^)d
すごいですよ♪
勉強家のまゆびちゃんには、頭がさがります。
画像、イラストかな?
とっても素敵ですよ(*^o^*)
☆^v(*^∇’)乂(‘∇^*)v^☆ヤッタネ!!
まゆびさん(*・ω・)ノ~☆コンバンワ♪
すごいですねぇ。
まず記述されているものが、どういうことなのか・・・って理解してるのもすごいし
こうしたら、こうなるぞっていうのがわかるのがすごい!!!
尊敬ですー( ̄ω ̄*)ポー
あらためて、トラバのところと、まゆびさんが記述されてるものを
見比べてみても・・・・(☆ω☆)目が回るぅ~~。。。凹○コテッ(笑
いつかまゆびさんみたいに、ちゃんと理解出来るようになりたいなぁ・・・
yozoさん、こんばんは♪(*゚▽゚)ノ
トラバの部分すごーく気になっていたのですよ。
1つのトラバで異様に場所を取りますしね。
>特に『俳句を求めて三千里』のトラバ表示が、
>はっきり見やすくなりました。(*^-゚)vィェィ♪
O(≧▽≦)O ワーイ♪ ありがとうございます。
トラックバックピープルがあるからトラバからお出かけする方は
少ないかもとも思ったのですが、
折角の機会ですしね♪
>記事タイトルの右端の画像、かわいいじゃないっすか♪
これもずっと変えようと思っていて放置してました。(笑)
カレンダーは今回はたくさんあって悩んじゃいました。(*'ー')

本当にすごく時間がかかりました、今日のカスタマイズ。
ちょっとした調整にすごく時間をとられまして。。。
>でも出来上がったときの喜びは、大きいですからね。
それはいえますね♪(o^-^o) ウフッ
ゆうゆさん、こんばんは♪(*゚▽゚)ノ
頑張っちゃいました♪(o^-^o) ウフッ
>勉強家のまゆびちゃんには、頭がさがります。
いえいえ、ほとんどが前にやったことなのです。
しばらくやらないと忘れちゃってて。。。
もうちょっと勉強しなきゃと思います。
>画像、イラストかな?
そうなんです。以前のもイラストだったのですが、
黒い字だったので今回明るい色の画像を探してきました♪
オレンジ色があってよかった!!(o^-^o) ウフッ
褒めていただいてありがとうございます。<(_ _)>
モンビッケさん、こんばんは♪ヾ(=^▽^=)ノ
記述されているものが何か分かるようになってきたのは本当に最近です。
同じテンプレートを使ってカスタマイズしているのもありますが、
実際のブログとコードを見ているとなんとなくですが、
分かるようになってきました。人に説明は出来ませんが。(笑)
ちょっとずつでもいろいろ触ってみるとそのうち分かってくると思いますよ。
今日はここの部分の字を大きくしたいなぁとか、
ちょこっとした願望を実現されていけばいいと思います。(゚-゚*)(。。*)ウンウン
初めはまゆびも目が回りました!!(爆)
こんばんは!
まだまだ、全然わからないととろですが、すごく分かりやすい解説で自分でもできるんじゃないかと勘違いしそうになりましたよ。
どういう順番に変更して行くのか、そういうのも順番に説明されていてとても参考になります。
これもたくさんのトラックバックを受けるようになったおかげですかしら?すごくきれいにサイトごとに並んでいて、ラインは正解でしたね。

ととろも線はhrしか使った事ありません。でも、細かい設定をした事が無いので、私もこれくらいならば挑戦できるかな(笑)
まゆびさん、こんばんは。
ほんとだぁ・・・文字が小さくなってますね。すごく見やすいですよね。
まゆびさんの前向きな姿勢には、ほんと頭が下がります。
しかも。てるひがぼんやりしてる間に、たくさんの方が、俳句の旅をされたのね~
少しずつ、記事を読ませてもらいにいこっと。

8月のカレンダーも素敵ですね。
木漏れ日が夏してる。
漏れてくる光の下で、お弁当を食べるのって気持ちいいの。
今日も、外でランチしたくなっちゃいました。
こちらもこんにちはー。まゆびさん。
うんうん。見やすくなりました!!!
すごいですよーー!!!
私も色々試してみたいとは思いつつも、、、結局出来ないでいます。
でも、今回の記事も参考になりました。
そうして、やりたいと思ったときに役に立ちます♪
いろいろ勉強させていただいて、参考にしながら私もがんばっていきたいです。

PS:タグフレの朝顔とひまわり、育ってきましたねー♪
とってもかわいいです☆
ととろさん、こんばんは♪(*゚▽゚)ノ
どこの部分をどう変えたのか書いておくと自分でも後でやり直しやすいですし、
バックアップ代わりにもなるなぁなんて思っています。
そんな記事を参考になると言っていただけて本当に嬉しいです。
>これもたくさんのトラックバックを受けるようになったおかげですかしら?
そうですね。今までひとつの記事に10件以上ものトラバをいただいたことは
ないので、見たときに唖然としました。あまりにも下に伸びていて。(笑)
せめて字は小さくしなければなんてかなり焦ってました。
>すごくきれいにサイトごとに並んでいて、ラインは正解でしたね。
ありがとうございます。<(_ _)>
字を小さくしたら今度は切れ目が見づらかったのです。
>ととろも線はhrしか使った事ありません。
役に立ちますよね。まゆびも色を変えることが出来るのを知ったのは
つい最近です。このテンプレではグレーの線になるので、
困っていたのです。(笑)
てるひさん、こんばんは♪ヾ(=^▽^=)ノ
見やすくなりましたか!!ありがとうございます。<(_ _)>
>まゆびさんの前向きな姿勢には、ほんと頭が下がります。
ブログが趣味になってますからね。(笑)
イライラしながらカスタマイズしてますが、出来たときは本当に嬉しいのです♪
>しかも。てるひがぼんやりしてる間に、たくさんの方が、俳句の旅をされたのね~
そうなんですよ。ととろさんの狙い撃ち編がとっても好評で
気軽に参加していただいています♪嬉しいです♪d(*⌒▽⌒*)b ニコニコッ

>8月のカレンダーも素敵ですね。
そうなんです。他にも素敵なカレンダーがいっぱいあったのですが、
やっぱりこちらのブログはこれだなと即決でした♪
>漏れてくる光の下で、お弁当を食べるのって気持ちいいの。
ですよね!!(゚-゚*)(。。*)ウンウン
まゆびは最近屋内でばかり食事してますが、
お弁当を持って外で食事を楽しんでみたいです♪
今度行ってみようかなぁ?(o^-^o) ウフッ
enuさん、こんばんは♪(*゚▽゚)ノ
O(≧▽≦)O ワーイ♪ 見やすくなりましたか!!
ありがとうございます。<(_ _)>
>私も色々試してみたいとは思いつつも、、、結局出来ないでいます。
何か一つずつでもやってみれば勉強になると思いますよ。
まゆびも初めは文字の色を変えたり、
大きさを変えたりなどなど地味なところから始めました。(笑)
参考になったと言っていただけてよかったです。
ほとんど自分のためのメモみたいな記事になっていますからね。
また時間のあるときにでも挑戦してみてくださいね♪\(o⌒∇⌒o)/

朝顔と向日葵、すごいでしょ!!
そろそろ第2弾の観察日記、アップしなきゃね♪(o^-^o) ウフッ

コメントする

サイト管理者にのみ通知する
コメントをプレビューする?
ご利用のブラウザ、設定ではご利用になれません。

|

Copyright c 200x xxxxx. All Rights Reserved.

/for one column -->