パソコンが好きになるブログ〜表技・裏技・便利技伝授!

北海道札幌市中央区 大通駅徒歩7分のパソコンスクール「リズ札幌・ライフデザインスクール」パソコンインストラクター川上雄大によるパソコン・IT・ワンポイントレッスン。
スクールでのいろんな方のパソコンレッスンだったり、パソコンとは関係ない話だったり…


テーマ:

こんにちは、パソコンインストラクターの川上雄大です。

 

 

プロフィール画像が丸いデザインの場合の

 

サイドバーの見出しの色を変える方法を書きますね。

 

 

あ、プロフィール画像が丸い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札幌・ライフデザインスクール
川上 雄大

 

 

 

 

川上雄大

 

いいね!した人  |  コメント(2)  |  リブログ(0)

川上雄大・パソコンインストラクターさんの読者になろう

ブログの更新情報が受け取れて、アクセスが簡単になります

SNSアカウント