【超簡単】Simplicity2カスタマイズ②（小見出し、ウィジェット編）

当ブログで変更したタイトル（小見出し、ウイジェット）カスタマイズの備忘録。

シンプルさと見易さと簡単さを重視しました。

ごりら

今回も基本的にコピペするだけです

小見出し

まずは記事本文の小見出しをカスタマイズしましょう。

＜完成見本＞

以下のコードを、style.cssの一番下にコピペしてみてください。（見出し２）

/* 見出し2装飾 */
.article h2 {
    background-color: #848484; /*背景色*/
    border-left: 0 none;
    color: #ffffff;  /*文字色*/
    padding: 15px 30px;
}

/* 見出し2装飾 */

.article h2 {

background-color: #848484; /*背景色*/

border-left: 0 none;

color: #ffffff; /*文字色*/

padding: 15px 30px;

}

（見出し３）

/* 見出し3装飾 */
.article h3 {
    font-size: 23px;
    border-bottom: 5px solid #8491c3;
    padding: 10px 0;
}

/* 見出し3装飾 */

.article h3 {

font-size: 23px;

border-bottom: 5px solid #8491c3;

padding: 10px 0;

}

これだけです。

サイドバーの装飾

タイトル

本文の見出し同様、サイドバーの見出しのデザインも変更していきます。

こちらも同じくstyle.cssにコピペでOK。

/* ウィジェットタイトル部分 */
#sidebar h3{
    text-align:center;
    line-height: 24px;
    font-size: 18px;
    color: #ffffff;    /*文字色*/
    background-color: #848484;    /*背景色*/
    border-radius: 10px;
    padding: 2px 10px;
}

/* ウィジェットタイトル部分 */

#sidebar h3{

text-align:center;

line-height: 24px;

font-size: 18px;

color: #ffffff; /*文字色*/

background-color: #848484; /*背景色*/

border-radius: 10px;

padding: 2px 10px;

}

するとこのような感じになります。

リンク文字

細かいところですが、サイドバーのタイトルではない文字の部分を少しだけ大きくしました。

/*サイドバーリンク文字サイズ*/
#sidebar a{ font-size:18px; }

1 2	/サイドバーリンク文字サイズ/ #sidebar a{ font-size:18px; }

これで完成です。

色の変更

色を変更させたいという方は、コードを少しだけ変更させてみましょう。

コード中の

#〇〇〇〇〇〇

の部分が色を変更させる役割をしているので、そこを変更させることでお好みの色にカスタマイズすることが出来ます。

例えば

#ffffff;　を　#000000;　に変更すると、

白だった部分が黒に変わります。（※半角で入力）

色によって対応する英数字が異なるので、その辺りは以下の記事を参考にしてみてください。

CSS色見本

参考記事

カスタマイズにあたって、以下の記事を参考にさせて頂きました。