アメブロサイドバーのタイトル(見出し)デザインを変更する

アメブロのサイドバーの
タイトル(見出し)デザインを変更する 方法を解説します。

コピペで簡単にデザインを変更する方法から
「コピペ囲み枠サンプル集」
「お好みのデザイン枠を作る方法」
までをご紹介します。

上図のように、CSS編集用デザインの初期状態では、タイトル(見出し)はシンプルなデザインとなっています。
 

 

1.ブログ管理

①【デザインの変更】をクリックしてください。

 

2.デザイン変更

②【CSSの編集】をクリックしてください。

 

3.画面スクロール

③ デザインCSS画面を一番下までスクロールしてください。

 
次に、CSSタグをコピー&ペーストします。

 

4.サンプルタグをコピーする

④ 以下のCSSタグをコピーしてください。

/* サイドバーのタイトルデザイン
——————————————–*/
.skin-widgetHead{
padding: 10px;
border-bottom: 4px double #ffa3d1;
border-top: 4px double #ffa3d1;
}

.skin-widgetTitle{
padding: 0;
border: 0;
margin: 0;
}

 
 

5.タグをペーストする

⑤ CSSタグの一番最後にタグをペースト(貼り付け)してください。

 

6.保存

6.【保存】をクリックしてください。

 

8.変更完了

サイドバーのタイトル(見出し)デザインの変更が完了しました。

 

 

その他のデザイン

 
 
icon-pencil デザインを変更する方法

サンプルタグ内の
.skin-widgetHead{ ****** } のタグを変更してください。

例)
.skin-widgetHead{

※サンプルタグを変更する

}

 
≫変更後
.skin-widgetHead{
 padding-left: 10px;
 border-color: #666666;
 border-width: 0 0 1px 0;
 border-style: solid;
 background:#FFFFFF;
}

 


icon-pencil 枠線の太さを変更する方法

サンプルタグ内の
border: ★px; の数値を変更してください

例)
 border: ★px;

≫変更後
 border: 3px;

 


icon-pencil 枠線の色を変更する方法

サンプルタグ内の
border: ★; の数値を変更してください

例)
 border: 1px solid  ★;

≫変更後
 border: 1px solid #7fffd4;

 カラーコードの見本はこちら

 


icon-pencil 背景の色を変更する方法

サンプルタグ内の
background: ★; のカラーコードを変更してください

例)
 background: ★;

≫変更後
 background: #afeeee;

 カラーコードの見本はこちら

 

以下にサンプルタグまとめましたのでご活用ください。

 
 

サンプルタグ

 

◆タイトル1

 
タイトル1のタグ(↓)

.skin-widgetHead{
padding: 0 0 5px 10px;
border-color: #161b1a;
border-width: 0 0 1px 0;
border-style: solid;
background:#FFFFFF;

}

 
 
 

◆タイトル2

 
タイトル2のタグ(↓)

.skin-widgetHead{
padding: 0 0 5px 10px;
border-color: #161b1a;
border-width: 0 0 1px 0;
border-style: dotted;
background:#FFFFFF;

}

 
 
 

◆タイトル3

 
タイトル3のタグ(↓)

.skin-widgetHead{
padding: 0 0 5px 10px;
border-bottom: 4px double #161b1a;
background:#FFFFFF;

}

 
 
 

◆タイトル4

 
タイトル4のタグ(↓)

.skin-widgetHead{
padding: 10px;
border-bottom: 2px solid #161b1a;
border-top: 2px solid #161b1a;
background:#FFFFFF;

}

 
 
 

◆タイトル5

 
タイトル5のタグ(↓)

.skin-widgetHead{
padding: 10px;
border-color: #161b1a;
border-width: 0 0 2px 0;
border-style: solid;
background: #F2F2F2;

}

 
 
 

◆タイトル6

 
タイトル6のタグ(↓)

.skin-widgetHead{
padding: 10px;
border-color: #2E2E2E;
border-width: 2px 0 0 0;
border-style: solid;
background: #F2F2F2;

}

 
 
 

◆タイトル7

 
タイトル7のタグ(↓)

.skin-widgetHead{
padding: 10px;
border-bottom: 4px double #161b1a;
border-top: 4px double #161b1a;
background:#FFFFFF;

}

 
 
 

◆タイトル8

 
タイトル8のタグ(↓)

.skin-widgetHead{
padding: 10px;
background: #F2F2F2;

}

 
 
 

◆タイトル9

 
タイトル9のタグ(↓)

.skin-widgetHead{
padding: 10px;
border: 2px solid #161b1a;
background: #F2F2F2;

}

 
 
 

◆タイトル10

 
タイトル10のタグ(↓)

.skin-widgetHead{
padding: 10px;
border: dashed 2px #161b1a;
background:#FFFFFF;

}

 
 
 

◆タイトル11

 
タイトル11のタグ(↓)

.skin-widgetHead{
padding: 10px;
border-color: #161b1a;
border-width: 2px 2px 2px 15px;
border-style: solid;
background:#FFFFFF;

}

 
 
 

◆タイトル12

 
タイトル12のタグ(↓)

.skin-widgetHead{
padding: 10px;
border: 5px double #161b1a;
background:#FFFFFF;

}

 
 
 

◆タイトル13

 
タイトル13のタグ(↓)

.skin-widgetHead{
padding: 10px;
border-color: #161b1a;
border-width: 0 0 0 15px;
border-style: solid;
background:#FFFFFF;

}

 
 
 

◆タイトル14

 
タイトル14のタグ(↓)

.skin-widgetHead{
padding: 10px;
border-left: 10px double #161b1a;
border-width: 0 0 0 15px;
background:#FFFFFF;

}

 
 
 

◆タイトル15

 
タイトル15のタグ(↓)

.skin-widgetHead{
padding: 10px;
border-color: #161b1a;
border-width: 0 0 2px 15px;
border-style: solid;
background:#FFFFFF;

}

 
 
 

◆タイトル16

 
タイトル16のタグ(↓)

.skin-widgetHead{
padding: 10px;
border-left: 10px solid #161b1a;
border-bottom: 4px double #161b1a;
background:#FFFFFF;

}

 
 
 

◆タイトル17

 
タイトル17のタグ(↓)

.skin-widgetHead{
padding: 10px;
border-left: 10px double #161b1a;
border-bottom: 4px double #161b1a;
background:#FFFFFF;
color:#ffffff;

}

 
 
 

◆サンプル18

 
タイトル18のタグ(↓)

.skin-widgetHead{
padding: 10px;
border:3px solid #161b1a;
border-radius:15px;
background:#F2F2F2;

}

 
 
 

◆サンプル19

 
タイトル19のタグ(↓)

.skin-widgetHead{
padding: 10px;
border:3px solid #161b1a;
border-radius:15px;
background:#FFFFFF;

}

 
 
 

◆サンプル20

 
タイトル20のタグ(↓)

.skin-widgetHead{
padding: 10px;
border-radius: 15px;
border: 5px double #161b1a;
background:#FFFFFF;

}

 
 
 

◆サンプル21

 
タイトル21のタグ(↓)

.skin-widgetHead{
padding: 10px;
border-radius: 15px;
border: 3px dotted #161b1a;
background:#FFFFFF;

}