1. TOP
  2. アメブロカスタマイズ
  3. (3-10) コメント欄、トラバ欄、記事一覧などの一覧のアメブロカスタマイズ 

(3-10) コメント欄、トラバ欄、記事一覧などの一覧のアメブロカスタマイズ 

お知らせ(2016年3月8日追記) 2016年3月より、「CSS編集用デザイン」テンプレートが新たに3つ追加されました。そちらのカスタマイズでは以下のカスタマイズが使えないものも多いため、「新CSS編集用デザイン徹底解剖」と題して新たに目次を設けてカスタマイズの方法を公開中です。2016年3月前の従来のCSS編集用デザインについてのカスタマイズは、当ページでカスタマイズができますので、ご利用状況に応じて使い分けてください。 新CSS編集用デザインでのカスタマイズがご希望のかたは、こちらの目次をご覧くださいませ→新CSS編集用デザイン目次

>>こちらもどうぞ

このコラムは連載コラムです。今回はCSS編集用画面の中の

「(3-10) コメント欄、トラバ欄、記事一覧などの一覧」エリアのカスタマイズの解説を行います。
ゴールイメージは?

コメント欄とは以下の部分のことです。

_3ca

上のイメージの部分がコメント欄です。この部分の背景色と文字のサイズをカスタマイズする方法を紹介します♪

では早速解説です。

スタイルシートのコードの解説

まずCSS編集用画面を開いていただき、「(3-10) コメント欄、トラバ欄、記事一覧などの一覧」を見てください。まずは以下のコードをまるまるコピーして「(3-10) コメント欄、トラバ欄、記事一覧などの一覧」の箇所を書き換えてください。赤字の部分がカスタマイズで修正する部分です♪

/* (3-10) コメント欄、トラバ欄、記事一覧などの一覧
--------------------------------------------*/

/* 背景色 */
.skinBgColor,.skinBaseBgColor,.skinBlock{
background-color:#ffffff;
}

/*コメント全体の背景色の設定*/
.commentArea.skinBlock{background-color:#ffffff;/*①コメント欄全体の背景色の設定*/
font-size:1.0em;}/*②コメント欄全体の文字サイズの設定*/

/* 弱い背景色 */
.skinWeakBgColor,.skinBaseWeakBgColor{
background-color:#f7f7f7;
}

/* 強い背景色 */
.skinStrongBgColor,.skinBaseStrongBgColor{
background-color:#f7f7f7;/*③あなたのコメント返信欄の背景色の設定*/
}

/* 枠線の色 */
.skinBorderColor,.skinBaseBorderColor,.skinBlock{
border-color:#dddddd;/*④コメント欄全体の枠線の色の設定*/
}

/* 境界線の色 */
.skinBorderHr,.skinBorderList li{
border-color:#b3b3b3;/*⑤コメントとコメントの間のドットの線の色の設定*/
}

これでカスタマイズする準備は整いました。

コードにある①から⑤の解説をしましょう。

解説
①コメント欄全体の背景色の設定

background-color:#ffffff

この部分は赤字の部分「#ffffff」を変更すると、コメント欄の背景色を変えることができます。#ffffffはカラーコードと言いこのコードを変更して、背景色を変えます。コードの一覧は以下のコラムを参照してください

②コメント欄全体の文字サイズの設定

font-size:1.0em

この部分でコメント欄の文字サイズを設定します。数字を大きくすれば、文字サイズを大きくすることができます。

③あなたのコメント返信欄の背景色の設定

background-color:#f7f7f7

こちらはあなたが読者様に頂いたコメントに返信したときの返信欄のの背景色の設定になります。①同様カラーコードを修正して背景色を変更します。

④コメント欄全体の枠線の色の設定

border-color:#dddddd

ここでコメント欄を囲う枠線の色を指定します。赤字部分のカラーコードを変更すれば、枠線の色を変えることができます。

⑤コメントとコメントの間のドットの線の色の設定

border-color:#b3b3b3

この部分はコメントとコメントの間にあるボーダーの線の色を変更する部分です。赤字の部分のカラーコードを変更して、色を変更します。border-color:#b3b3b3

いろいろ試してみましょう♪

文字サイズ、カラー、をいろいろ変えてみてあなたの独自のブログにしてみてくださいね♪

最後までありがとうございました

 

こちらを押してアメブロカスタマイズガイドを見てみる

>>ページのトップへ

おすすめ

無料メルマガ
optin
自分で作るアメブロカスタマイズ