アプリ版:「スタンプのみでお礼する」機能のリリースについて

今、【てぃーだブログ】を使ってるのですが、
ブログのコメント表示が見にくいので
テンプレートをカスタマイズして、
HTMLで表示変更をしたいのです。


(1)コメント投稿者の名前が 右に表示されてるのを左に!

(2)コメントとコメントの間に線を引いて、
 コメントに仕切りをつけて見やすく。


としたいのですが、
色々なサイト見ながら変更方法を探しましたが、
分かりませんでした。

HTML初心者の為、
説明下手で分かりにくいかもしれませんが、
変更の仕方を宜しくお願いします。

A 回答 (1件)

てぃーだブログを使用していないので、以下は下記のFAQを見て推測した事です。


これによると、スタイルシートを直接編集できる事になっています。
http://faq.ti-da.net/e412044.html

であれば、ブログのソースを見ると、コメントの部分は以下の様にマークアップされている様ですので、

<div class="comments-body">コメント本体</div>
<div class="comments-post">Posted by <a class="aposted" href="#">投稿者名</a> at yyyy年mm月dd日 hh:mm</div>

<div class="comments-post">~</div>のブロックが、質問者様がスタイルを変更したい箇所に相当します。で、ブログのスタイルシート"style.css"を見ると、その中に、".comments-post"というクラス・セレクタがあるので、ここのスタイルの指定を変更すれば良い事になります。
現在、この部分のスタイルの指定はこうなっています:

.comments-post{
margin-top: 0px;
margin-right: 20px;
margin-bottom: 15px;
margin-left: 20px;
padding-top: 3px;
font-size: 82%;
text-align: right;}

> コメント投稿者の名前が 右に表示されてるのを左に!

"text-align: right;"が右寄せにしている指定ですので、これを削除する、または"text-align: left;"とすれば、このブロック全体が左寄せになります。

> コメントとコメントの間に線を引いて

このブロックがコメントエリアの最後の部分になりますので、このブロックの下に線を引いてやればいいかと思います。スタイルに、以下の指定を追加します。以下は一例です。

.comments-post{
(省略)
border-bottom: solid 1px #000;←追加
}

上記の指定は、「プレーンな形状(solid)の1pxの太さ(1px)の黒い色(#000)の線(border)」をコメントエリアの「下(bottom)」に引くという意味します。なので、border-bottom:に対する3つのそれぞれの値を(ルールに則って)変更する事で、線の形状・太さ・色はお好みにできます。

また、線とコメントの間の余白を調整したければ、paddingやmarginを調整する事でこれも任意の値にできます。
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!