こんにちは、パソコンインストラクターの川上雄大です。
プロフィール画像が丸いデザインの場合の
サイドバーの見出しの色を変える方法を書きますね。
あ、プロフィール画像が丸いCSS編集デザインとは、この↓3種類のCSS編集用デザインを選んだ場合、ということになります。
ちなみに、プロフィール画像が四角いCSS編集用デザイン↓を選んだ場合は、
すでに、こちらの記事で書いております↓
『記事やサイドバーの枠を丸くしたり、背景をグラデーションにするには』
『アメブロの左右の枠を丸くしたり影付けたりグラデーションにするには』
『CSS編集用デザインってどこにあるのですか？（サイドバーの色変更）』
でも、今回は、プロフィール画像が丸いデザイン（CSS編集用デザイン）で、
サイドバーの見出しを変える方法を。
まずは、なにもついていない状態かと思います↓
そこで、CSSの一番下に、次のコード↓を追加して、保存して、ブログを更新してみます。
/* ■サイドバーの枠指定■ */
/*サイドメニュー枠の角を丸くする */
/*サイドメニューのブロックの色を変更 */
/*メニューの枠*/
#profile.skin-widget,#recentEntries.skin-widget,#readers.skin-widget,#theme,#favorites.skin-widget,#bookmarks.skin-widget,#calendar.skin-widget,#archive.skin-widget{
border-radius:6px;/*角を丸く */
background-color:#ffffff;/*白色*/
border: 1px solid #333333; /* タイトル領域の枠線－黒色 */
width: auto;
margin-right: 6px;
box-shadow: 6px 6px 6px #AAA;
padding:0px;
}
/*メニューのヘッダー*/
.skin-widgetHead {
border-top-left-radius :6px;
border-top-right-radius :6px;
padding: 6px 0px; /* タイトルと枠の間の余白 */
background-image:linear-gradient(#ffffff,#333333,#000000,#000000);/* 黒のグラデーション */
background-color: #000000; /* タイトル領域の背景色－黒色 */
width: auto;
}
/*サイドメニュータイトル文字*/
.skin-widgetTitle{
color:#ffffff;/*白色*/
font-size: 12px; /* タイトル文字サイズ */
font-weight: bold; /* タイトル文字を太字に */
border-bottom: none;
margin:0px;
padding:10px;
}
.skin-linkList ul{
list-style: none;
padding: 10px;
}
.skin-widgetBody{
padding: 10px;
}
すると、こんな感じになります↓
こんな感じのピンクにしたければ、
/* ■サイドバーの枠指定■ */
/*サイドメニュー枠の角を丸くする */
/*サイドメニューのブロックの色を変更 */
/*メニューの枠*/
#profile.skin-widget,#recentEntries.skin-widget,#readers.skin-widget,#theme,#favorites.skin-widget,#bookmarks.skin-widget,#calendar.skin-widget,#archive.skin-widget{
background-color:#FFDFEA;/*ピンク色*/
width: auto;
padding:0px;
}
/*メニューのヘッダー*/
.skin-widgetHead {
padding: 6px 0px; /* タイトルと枠の間の余白 */
background-color: #FF6699; /* タイトル領域の背景色－薄いピンク色 */
width: auto;
}
/*サイドメニュータイトル文字*/
.skin-widgetTitle{
color:#ffffff;/*白色*/
font-size: 12px; /* タイトル文字サイズ */
font-weight: bold; /* タイトル文字を太字に */
border-bottom: none;
margin:0px;
padding:10px;
}
.skin-linkList ul{
list-style: none;
padding: 10px;
}
.skin-widgetBody{
padding: 10px;
}
こんな感じのピンクのグラデーションにしたければ、
/* ■サイドバーの枠指定■ */
/*サイドメニュー枠の角を丸くする */
/*サイドメニューのブロックの色を変更 */
/*メニューの枠*/
#profile.skin-widget,#recentEntries.skin-widget,#readers.skin-widget,#theme,#favorites.skin-widget,#bookmarks.skin-widget,#calendar.skin-widget,#archive.skin-widget{
border-radius:6px;/*角を丸く */
background-color:#ffffff;/*白色*/
border: 1px solid #F96BA2; /* タイトル領域の枠線－pink色 */
width: auto;
margin-right: 6px;
box-shadow: 6px 6px 6px #AAA;
padding:0px;
}
/*メニューのヘッダー*/
.skin-widgetHead {
border-top-left-radius :6px;
border-top-right-radius :6px;
padding: 6px 0px; /* タイトルと枠の間の余白 */
background-image:linear-gradient(#F72C7D,#F96BA2,#F7B4CF,#F7D9E5);/* pinkのグラデーション */
background-color: #F96BA2; /* タイトル領域の背景色－pink色 */
width: auto;
}
/*サイドメニュータイトル文字*/
.skin-widgetTitle{
color:#ffffff;/*白色*/
font-size: 12px; /* タイトル文字サイズ */
font-weight: bold; /* タイトル文字を太字に */
border-bottom: none;
margin:0px;
padding:10px;
}
.skin-linkList ul{
list-style: none;
padding: 10px;
}
.skin-widgetBody{
padding: 10px;
}
＜追記 2017/9/14＞
サイドバーで、囲み枠がかかっていない項目がありましたので、
#profile.skin-widget,#recentEntries.skin-widget,#readers.skin-widget,#theme.skin-
widget,#favorites.skin-widget{
のところを、
#profile.skin-widget,#recentEntries.skin-widget,#readers.skin-widget,#theme,#favorites.skin-widget,#bookmarks.skin-widget,#calendar.skin-widget,#archive.skin-widget{
に修正させていただきました。
以上、アメブロカスタマイズでした。
LIDS札幌・ライフデザインスクール
川上 雄大
