コメント欄のカスタマイズ

スポンサーリンク


今回と次回で、今使っているスキンのカスタマイズ記事は終了の予定です。このシリーズの次はネットショップ開店篇をメインに、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;
}

青い文字が追加です。
元々書いてあったものは、行頭に//(スラッシュ2個)をつけて、コメント(注釈)扱いにしています。もし、元に戻したい時はこのコメントを復活させてください。

コメント本文の表示をカスタマイズ

今のままでは、タイトルだけが加工されています。次はコメント本文の領域をいじります。
場所はさっき直した部分のすぐ下です。

正直に言います。この下は訂正後の状態、つまり今の状態です。
が、直す前がどうだったか忘れちゃった!ゴメン

.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;
}

この記事のとおりにやると、このスキンと同じになるはずなんですが、忘れて抜かしているところがないとは限りませんのです!おかしくなったら教えてね!

次回最終回!


関連コンテンツ

スポンサーリンク

「コメント欄のカスタマイズ」への9件のフィードバック

  1. やはり加工しましたが、コメントの黄色いところが下側しか出なくて

    どうしたらいいのか・・

  2. こんばんは

    おいそがしいなかありがとうございます。

    書かれたとおりにしてみました。

    また、もう一度見直してみますが、まだ、おか強いようなのでみなおしてみます。

    ごていねいにありがとうございました。

  3. ありがとうございました。

    コメントらんはできました。

    続くはhtmlはかくにんしました。

    /* 記事表示部分 */
    #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;
    }

    にすスタイルシートなっています。が変更できません
    またもういちどかくにんします

  4. 何度もすいません

    なぜか、タイトルとはじめの下の記事の投稿者 コメント トラックバックだけがぴんくになりました。

    お忙しいのに、お手間かけてすいません。

  5. はじめの下の記事の投稿者 コメント トラックバックだけがぴんくになりました。

    これは、「続きを読む」があるときだけ、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>

    こうすると、全部の記事の投稿者 コメント トラックバックがピンクになります。
    そこまでやってから、次の作業に進んでください。

  6. このように修正しましたがかわらないです。

    なんだかぱにくになってしまい、すいません。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください