アメブロでサイドバーや記事タイトルの文字と下線の色を変える方法

アメブロカスタマイズ サイドバーの文字と下線の色

アメブロのカスタマイズを自分でしたい!
そんな方向けに必要最低限なカスタマイズ方法をご紹介します。

アメブロにオリジナルヘッダー画像を設定する方法【2016年度新CSS対応】

2016.08.22
↑こちらの記事で、
ヘッダー画像の編集が終わったら・・・

 

あとは、
サイドバーのタイトル文字やその下の線の色、

記事タイトルの文字やその下の線の色を変更してみたいと思います。

色の変更

こちらも、
ヘッダー画像の設置同様に、

CSSの最後にコードを貼り付けるだけです!

ちょっと大変なのは、
色選びでしょうか?

手順は以下となります。

①CSS編集可能デザインを設定する

②コードを貼り付ける

③カラーコードを指定する

それでは、順番にみていきましょう。

CSS編集可能デザインを設定する

管理画面からCSS編集可能デザインの設定をします。
詳しい方法は、

アメブロにオリジナルヘッダー画像を設定する方法【2016年度新CSS対応】

の手順をご覧ください。

コードを貼り付ける

サイドバーのタイトル文字とラインの色を編集するのに、以下のコードをCSSの一番下に貼り付けてください。

 

/* サイドバータイトル */
.skin-widgetTitle {
color:#DC4748;
border-bottom: 1px solid#DC4748;
}

このままだと、
こんな感じになります。

サイドバー

記述内容の意味は・・・
color:#DC4748;
→文字の色はカラーコード#DC4748
border-bottom: 1px solid#DC4748;
→線は、1ピクセルの実線でカラーコードは#DC4748

ということ。

なので色を変えたい場合、

この#で始まるコードを指定していきます。

 

カラーコードを貼り付ける

では、カラーコードを変更してみますね。
/* サイドバータイトル */
.skin-widgetTitle {
color:#C5631F;
border-bottom: 1px solid #61C41F;
}

サイドバーの文字とラインの色

と、このように変わります。

※わかりやすいように変な配色になってますが(汗)

 

カラーコードに関しては、
↓こちらの記事を参考にしてください。

アメブロカスタマイズに必須!色に関する便利ツール

2016.07.31

 

記事のタイトルと下線を変更する

記事タイトルと下線の色を変更する場合も同じです。

コードは以下となります。

 

/* 記事タイトル */
.skin-entryTitle {
color: #333333;
border-bottom: 1px solid #e5e5e5;
}

 

同じようにカラーコードを設定してください。

サイドバーと同じ配色にするとよいと思います。

 

下線の太さや種類を変更

慣れてきたら、
下線の太さや種類も変更してみましょう。

border-bottom: 1px solid #e5e5e5;
ここを変えます↑

下線の太さを変える

例えばこんなコードだと・・

/* 記事タイトル */
.skin-entryTitle {
color: #878787;
border-bottom: 1px solid #F0435A;
}

タイトルサンプル1

このように表示されます。
ピクセル数を3pxにしてみると・・・

タイトルサンプル2

このように変更できます。

 

下線の種類を変える

下線の種類は、solidを変更します。
solid→1本線
double→2本線
dashed→破線
dotted→点線

例えば、

border-bottom: 2px dotted #F0435A;

とすると、

下線サンプル

こんな感じになります。
サイドバー、記事タイトルも同じ設定なので、
ヘッダーに合わせてお好みを見つけくださいね。

 

以上です!

 

まとめ

・アメブロカスタマイズでサイドバーや記事の文字色、下線の種類は、それぞれ指定したコードをCSSの最後に貼り付けるだけで変更が可能です。
・線の種類も点線や破線に変更が可能です。
・色の指定はカラーコードで設定します。