スポンサーリンク
今回と次回で、今使っているスキンのカスタマイズ記事は終了の予定です。このシリーズの次はネットショップ開店篇をメインに、JavaScriptなどもやります。
女性が楽しめるエロサイトも作りたいので、やることはいっぱいです。とりあえず、今日のお題「コメント欄のカスタマイズ」です。
トラックバックとコメントのタイトルを加工する
スタイルシートの中から、次の部分を探します。
/* トラックバック */
h3#trackbackTitle {
border: 1px solid #eee;
margin-top:15px;
padding: 6px;
background:#eee;
color:#666;
font-weight:bold;
}
#trackbackText {
padding: 5px;
}
/* コメント */
h3#commentTitle {
border: 1px solid #eee;
margin-top:15px;
padding: 6px;
background:#eee;
color:#666;
font-weight:bold;
}
h3#commentPosts {
border: 1px solid #eee;
margin-top:15px;
padding: 6px;
background:#eee;
color:#666;
font-weight:bold;
}
これのbackground（背景）、border（枠）、color（文字色）を自分の好きなように変更します。
このスキンではこうしました。
/* トラックバック */
h3#trackbackTitle {
//border: 1px solid #eee;
border: 1px solid #0f0;
margin-top:15px;
padding: 6px;
//background:#eee;
//color:#666;
background:#efe;
color:#0c0;
font-weight:bold;
}
#trackbackText {
padding: 5px;
}
/* コメント */
h3#commentTitle {
//border: 1px solid #eee;
border: 1px solid #0f0;
margin-top:15px;
padding: 6px;
//background:#eee;
//color:#666;
background:#efe;
color:#0c0;
font-weight:bold;
}
h3#commentPosts {
//border: 1px solid #eee;
border: 1px solid #0f0;
margin-top:15px;
padding: 6px;
//background:#eee;
//color:#666;
background:#efe;
color:#0c0;
font-weight:bold;
}
青い文字が追加です。
元々書いてあったものは、行頭に//（スラッシュ２個）をつけて、コメント（注釈）扱いにしています。もし、元に戻したい時はこのコメントを復活させてください。
コメント本文の表示をカスタマイズ
今のままでは、タイトルだけが加工されています。次はコメント本文の領域をいじります。
場所はさっき直した部分のすぐ下です。
正直に言います。この下は訂正後の状態、つまり今の状態です。
が、直す前がどうだったか忘れちゃった！ゴメン
.comment_layer {
padding:4px 4px 0 4px;
border-top:1px solid #ff0;
border-right:1px solid #ff0;
border-left:1px solid #ff0;
border-bottom:none;
background:#ffe;
color:#888;
}
.posted2 {
border-top:none;
border-right:1px solid #ff0;
border-left:1px solid #ff0;
border-bottom:1px solid #ff0;
background:#ffe;
color:#fb0;
margin-bottom:10px;
padding:3px 2px 4px 0;
text-align:right;
}
この記事のとおりにやると、このスキンと同じになるはずなんですが、忘れて抜かしているところがないとは限りませんのです！おかしくなったら教えてね！
次回最終回！
関連コンテンツ
スポンサーリンク
ちなみにコメント本文の表示はこんな感じです。
何とか加工してみましたが、できたかな？
やはり加工しましたが、コメントの黄色いところが下側しか出なくて
どうしたらいいのか・・
こんばんは
おいそがしいなかありがとうございます。
書かれたとおりにしてみました。
また、もう一度見直してみますが、まだ、おか強いようなのでみなおしてみます。
ごていねいにありがとうございました。
ありがとうございました。
コメントらんはできました。
続くはｈｔｍｌはかくにんしました。
/* 記事表示部分 */
#entries {
margin-bottom: 20px;
}
#entries .entry {
margin-bottom: 30px;
}
#entries .entryDate {
font-size:120%;
//color: #FF6077;
color: #00f;
}
/*記事情報*/
#entries .entryInfo {
//background: #FFF;
padding:3px;
font-size: x-small;
//color: #FF6077;
border-bottom:1px dashed #FF6077;
background:#fcc;
}
#entries .entryInfo a {
text-decoration: none;
//color: #FF6077;
color:#f00;
}
#entries .entryInfo a:hover {
//background: #FFD4E3;
background:#fcc;
}
#entries h2.entryTitle a {
text-decoration:none;
//border-left: 5px solid #aaa;
//background: #eee;
border-left: 5px solid #fof;
background:#efe;
background:#fcc;
}
#entries h2.entryTitle a:hover {
//background: #333;
background:#f88;
color:#fff; //追加
text-decoration:underline;
}
#entries .entryBody {
color: #665785;
padding: 10px 5px 10px 5px;
}
#entries .entryContinue {
margin:10px;
text-align:left;
}
にすスタイルシートなっています。が変更できません
またもういちどかくにんします
。
何度もすいません
なぜか、タイトルとはじめの下の記事の投稿者 コメント トラックバックだけがぴんくになりました。
お忙しいのに、お手間かけてすいません。
はじめの下の記事の投稿者 コメント トラックバックだけがぴんくになりました。
これは、「続きを読む」があるときだけ、HTMLの中身が違っているからです。
スキンが間違っているので「続きを読む」があるときと、ないときで別の表示が
されています。
スキンの「メイン」と「アーカイブ」を直してください。
スキンの中の<BlogEntries>から</BlogEntries>までを次のようにします。
<BlogEntries>
<div class=”entry”>
<div class=”entryDate”>{$BlogEntryDateformat=”%Y年%m月%d日” language=”jp”$}</div>
<h2 class=”entryTitle”><a href=”{$BlogEntryPermalinkUrl$}”>{$BlogEntryTitle$}</a></h2>
<div class=”entryBody clr”>{$BlogEntryBody$}</div>
<BlogEntryIfExtended>
<div class=”entryContinue”><a href=”{$BlogEntryPermalinkUrl$}#BlogEntryExtend”>続きを読む…</a></div>
</BlogEntryIfExtended>
<div class=”entryInfo”>
投稿者：<a href=”{$BlogEntryWriterUrl$}” target=”_blank”>{$BlogEntryWriterName$}</a>｜{$BlogEntryDate format=”%H:%M”$}
<BlogEntryIfCategory>｜<a href=”{$BlogEntryCategoryLink$}”>{$BlogEntryCategory$}</a></BlogEntryIfCategory>
<BlogEntryIfAllowComments>｜<a href=”{$BlogEntryPermalinkUrl$}#commentTitle”>コメント({$BlogEntryCommentCount$})</a></BlogEntryIfAllowComments>
<BlogEntryIfAllowPings>｜<a href=”{$BlogEntryPermalinkUrl$}#trackbackTitle”>トラックバック({$BlogEntryTrackbackCount$})</a></BlogEntryIfAllowPings>
</div>
</div><!– entry –>
</BlogEntries>
こうすると、全部の記事の投稿者 コメント トラックバックがピンクになります。
そこまでやってから、次の作業に進んでください。
このように修正しましたがかわらないです。
なんだかぱにくになってしまい、すいません。
コメント欄また同じようにきいろにさせていただきました。
ありがとうございます。