アメブロ用サイドバーのデザイン変更CSS【コピペで簡単おしゃれに】

アメブロ用サイドバーデザインのカスタマイズを紹介します。

CSSをコピペするだけで変更できるので、気に入るデザインがあれば使ってください。

簡単な色変更の方法も説明していますので、自身でカスタマイズしたいという方も見てみてください。

参考になれば幸いです。

【アメブロカスタマイズまとめ】CSSコピペでできるおしゃれアレンジアメブロカスタマイズ記事をまとめていきます。 コピペするだけでできるものがほとんどなので「Webとか全然わかんない！」という方も簡...

アメブロ用サイドバーデザインカスタマイズ一覧

アメブロのサイドバーのデザイン変更方法を解説します。CSSをコピペするだけでマネできます。

シンプルボックスデザイン

見出しをシンプルなボックスタイプにしたデザインです。色合わせさえ外さなければ、どんなブログの雰囲気でも落ち着きます。

タイトル下点線デザイン

シンプルかつミニマルなデザイン。

左右に線デザイン

サイドバータイトルの左右にラインを配置したデザイン。

インスタ風グラデーション下線デザイン

インスタ風のグラデーションカラーでタイトルにアンダーラインを引いたデザイン。

コピペでOK！サイドバーデザイン変更用CSS

各デザインのCSSを紹介します。編集用CSSエリアにコピペするだけで簡単に変更できます。

変更方法がわからない方はこちら

サイドバー①：シンプルボックスデザイン

シンプルなボックスデザイン。6色用意しました。

別の色にカスタマイズしたい方はこちら

ピンク

/* ---サイドバーデザインのカスタマイズここから--- */
.skin-widgetTitle{
    background-color: #E5A8BB;
    padding: 12px 15px!important;
    margin-bottom:10px!important;
    color: #fff;
    border-radius: 2px;
    font-size: 1rem;
    font-weight: 500;
}
/* ---サイドバーデザインのカスタマイズここまで--- */

変更方法がわからない方はこちら

グリーン

/* ---サイドバーデザインのカスタマイズここから--- */
.skin-widgetTitle{
    background-color: #5DA797;
    padding: 12px 15px!important;
    margin-bottom:10px!important;
    color: #fff;
    border-radius: 2px;
    font-size: 1rem;
    font-weight: 500;
}
/* ---サイドバーデザインのカスタマイズここまで--- */

変更方法がわからない方はこちら

イエロー

/* ---サイドバーデザインのカスタマイズここから--- */
.skin-widgetTitle{
    background-color: #F0BC08;
    padding: 12px 15px!important;
    margin-bottom:10px!important;
    color: #fff;
    border-radius: 2px;
    font-size: 1rem;
    font-weight: 500;
}
/* ---サイドバーデザインのカスタマイズここまで--- */

変更方法がわからない方はこちら

ブラック

/* ---サイドバーデザインのカスタマイズここから--- */
.skin-widgetTitle{
    background-color: #2D2D2D;
    padding: 12px 15px!important;
    margin-bottom:10px!important;
    color: #fff;
    border-radius: 2px;
    font-size: 1rem;
    font-weight: 500;
}
/* ---サイドバーデザインのカスタマイズここまで--- */

変更方法がわからない方はこちら

ライトグレー

/* ---サイドバーデザインのカスタマイズここから--- */
.skin-widgetTitle{
    background-color: #EFEFEF;
    padding: 12px 15px!important;
    margin-bottom:10px!important;
    border-radius: 2px;
    font-size: 1rem;
    font-weight: 500;
}
/* ---サイドバーデザインのカスタマイズここまで--- */

変更方法がわからない方はこちら

リッチ（黒×金）

/* ---サイドバーデザインのカスタマイズここから--- */
.skin-widgetTitle{
    background-color: BLACK;
    padding: 12px 15px!important;
    margin-bottom:10px!important;
    color: #dbc66b;
    border-radius: 2px;
    font-size: 1rem;
}
/* ---サイドバーデザインのカスタマイズここまで--- */

変更方法がわからない方はこちら

サイドバー②：タイトル下点線デザイン

タイトル下に点線を引いたデザイン。こちらも6色。

別の色にカスタマイズしたい方はこちら

ピンク

/* ---サイドバーデザインのカスタマイズここから--- */
.skin-widgetTitle, h3.skin-widgetTitle {
    padding: 10px 0px!important;
    margin-bottom:10px!important;
    font-size:1rem;
    color:#E5A8BB;
    border-bottom: 2px #E5A8BB dotted!important;
    background: transparent;
    letter-spacing: 0.2em;
}
/* ---サイドバーデザインのカスタマイズここまで--- */

変更方法がわからない方はこちら

グリーン

/* ---サイドバーデザインのカスタマイズここから--- */
.skin-widgetTitle, h3.skin-widgetTitle {
    padding: 10px 0px!important;
    margin-bottom:10px!important;
    font-size:1rem;
    color:#6abfc4;
    border-bottom: 2px #6abfc4 dotted!important;
    background: transparent;
    letter-spacing: 0.2em;
}
/* ---サイドバーデザインのカスタマイズここまで--- */

変更方法がわからない方はこちら

ブルー

/* ---サイドバーデザインのカスタマイズここから--- */
.skin-widgetTitle, h3.skin-widgetTitle {
    padding: 10px 0px!important;
    margin-bottom:10px!important;
    font-size:1rem;
    color:#A8BBE6;
    border-bottom: 2px #A8BBE6 dotted!important;
    background: transparent;
    letter-spacing: 0.2em;
}
/* ---サイドバーデザインのカスタマイズここまで--- */

変更方法がわからない方はこちら

レッド

/* ---サイドバーデザインのカスタマイズここから--- */
.skin-widgetTitle, h3.skin-widgetTitle {
    padding: 10px 0px!important;
    margin-bottom:10px!important;
    font-size:1rem;
    color:#FF6969;
    border-bottom: 2px #FF6969 dotted!important;
    background: transparent;
    letter-spacing: 0.2em;
}
/* ---サイドバーデザインのカスタマイズここまで--- */

変更方法がわからない方はこちら

パープル

/* ---サイドバーデザインのカスタマイズここから--- */
.skin-widgetTitle, h3.skin-widgetTitle {
    padding: 10px 0px!important;
    margin-bottom:10px!important;
    font-size:1rem;
    color:#B8B2EA;
    border-bottom: 2px #B8B2EA dotted!important;
    background: transparent;
    letter-spacing: 0.2em;
}
/* ---サイドバーデザインのカスタマイズここまで--- */

変更方法がわからない方はこちら

ブラック（濃灰）

/* ---サイドバーデザインのカスタマイズここから--- */
.skin-widgetTitle, h3.skin-widgetTitle {
    padding: 10px 0px!important;
    margin-bottom:10px!important;
    font-size:1rem;
    color:#666666;
    border-bottom: 2px #666666 dotted!important;
    background: transparent;
    letter-spacing: 0.2em;
}
/* ---サイドバーデザインのカスタマイズここまで--- */

変更方法がわからない方はこちら

サイドバー③：左右に線デザイン

タイトルの左右に中央線を引いたデザイン。3色用意しました。

別の色にカスタマイズしたい方はこちら

ブラック（濃灰）

/* ---サイドバーデザインのカスタマイズここから--- */
.skin-widgetTitle {
    background: 0 0;
    font-size: 16px;
    letter-spacing: 2px;
    display: inline-block;
    position: relative;
    width: 100%;
    margin: 16px 0!important;
    border-radius: 2px;
    padding: 0;
    color:#666666;
    text-align: center;
    border-bottom: none;
}
.skin-widgetTitle::before,.skin-widgetTitle::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 20%;
    border-top: 2px solid #666666;
}
.skin-widgetTitle::before{
    left: 0;
}
.skin-widgetTitle::after{
    right: 0;
}
/* ---サイドバーデザインのカスタマイズここまで--- */

変更方法がわからない方はこちら

ネイビー

/* ---サイドバーデザインのカスタマイズここから--- */
.skin-widgetTitle {
    background: 0 0;
    font-size: 16px;
    letter-spacing: 2px;
    display: inline-block;
    position: relative;
    width: 100%;
    margin: 16px 0!important;
    border-radius: 2px;
    padding: 0;
    color:#3b4675;
    text-align: center;
    border-bottom: none;
}
.skin-widgetTitle::before,.skin-widgetTitle::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 20%;
    border-top: 2px solid #3b4675;
}
.skin-widgetTitle::before{
    left: 0;
}
.skin-widgetTitle::after{
    right: 0;
}
/* ---サイドバーデザインのカスタマイズここまで--- */

変更方法がわからない方はこちら

グリーン

/* ---サイドバーデザインのカスタマイズここから--- */
.skin-widgetTitle {
    background: 0 0;
    font-size: 16px;
    letter-spacing: 2px;
    display: inline-block;
    position: relative;
    width: 100%;
    margin: 16px 0!important;
    border-radius: 2px;
    padding: 0;
    color:#5DA797;
    text-align: center;
    border-bottom: none;
}
.skin-widgetTitle::before,.skin-widgetTitle::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 20%;
    border-top: 2px solid #5DA797;
}
.skin-widgetTitle::before{
    left: 0;
}
.skin-widgetTitle::after{
    right: 0;
}
/* ---サイドバーデザインのカスタマイズここまで--- */

変更方法がわからない方はこちら

サイドバー④：インスタ風グラデーション下線デザイン

インスタ風のグラデーションカラーでタイトル下にアンダーラインを引いたデザイン。

/* ---サイドバーデザインのカスタマイズここから--- */
.skin-widgetTitle {
    background: none;
    padding: 0px;
    font-size: 1rem;
    letter-spacing: 2px;
    border-bottom: none;
}
.skin-widgetTitle:after { 
    content:"";
    display:block;
    height:3px;
    width:100%;
    background: -webkit-linear-gradient(to right, #F26939 -10%,#CF2E92 14%,#4C64D3 130%);
    background: linear-gradient(to right, #F26939 -10%,#CF2E92 14%,#4C64D3 130%);
    margin-top:7px;
    margin-bottom:10px!important;
}
/* ---サイドバーデザインのカスタマイズここまで--- */

変更方法がわからない方はこちら

アメブロのデザイン変更方法（CSS）

各デザインのCSSをデザイン設定の「編集用CSS」にコピペします。

「ブログ管理」→「デザインの設定」→「CSSの編集」と進み「編集用CSS」に変えたいデザインのCSSをコピーします。

色を変えたい場合

「このデザインにしたいけど色だけ変えたい」

そんなときは自分でカスタマイズしましょう。簡単です。

各コードの中に色を指定するカラーコードというものがあります。

この部分を変えたい色のカラーコードに変えればOK。

カラーコードの調べ方

「アイボリー カラーコード」「ゴールド カラーコード」など「好きな色＋カラーコード」のワードでググると一発です。

「WEB色見本 原色大辞典」のようなサイトでも見つかります。

他にもアメブロカスタマイズあります

サイドバーデザインについては、またどこかでデザインを追加したりするかもしれません。

「こんなデザインにしたい」と要望があれば、ぜひぜひコメントください。

【アメブロカスタマイズまとめ】CSSコピペでできるおしゃれアレンジアメブロカスタマイズ記事をまとめていきます。 コピペするだけでできるものがほとんどなので「Webとか全然わかんない！」という方も簡...

最後まで読んでいただき、ありがとうございました。