アメブロの左右の枠を丸くしたり影付けたりグラデーションにするには | パソコンが好きになるブログ〜表技・裏技・便利技伝授!

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

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

こんにちは、パソコンワンポイントレッスン!

PCインストラクターの川上です。


以前にも、似たような記事書いているんですが(苦笑)

記事やサイドバーの枠を丸くしたり、背景をグラデーションにするには

サイドバーって何?
といった方もいらっしゃるものでして・・・

サイドバーって、記事本文の左や右にあるとこなんです。


サイドバーの説明ついでに、
赤のグラデーションも追加しておきます~(笑)


あ、もちろん、デザインが「CSS編集デザイン」のかた向けですので^^;
(CSS編集って?という方は→『「CSSの編集」をクリックするとは』)


CSSソースの一番下に、次のソースを追加していただければ



/* ■サイドバーの枠指定■ */

/*サイドメニュー枠の角を丸くする */
/*サイドメニューのブロックの色を変更 */
/*メニューの枠*/
.skinMenu{
border-radius:6px;/*角を丸く */
background-color:#ffffff;/*白色*/
border: 1px solid #d94057; /* タイトル領域の枠線-赤色 */
width: auto;
margin-right: 8px;
box-shadow: 6px 6px 6px #AAA;
}

/*メニューのヘッダー*/
.skinMenuHeader{
padding: 6px 6px; /* タイトルと枠の間の余白 */
background-image:linear-gradient(#f7d7e4,#eca6b3,#de5c70,#d94057);/* 赤のグラデーション */
background-color: #d94057; /* タイトル領域の背景色-赤色 */
width: auto;
box-shadow: 6px 6px 6px #AAA;
}

/*サイドメニュータイトル文字*/
.skinMenuTitle{
color:#ffffff;/*白色*/
text-shadow: 1px 1px 3px #000;
font-size: 12px; /* タイトル文字サイズ */
font-weight: bold; /* タイトル文字を太字に */
}

/*枠内の色*/
.skinMenuBody{
background-color:#ffffff;/*白色*/
}



例えば・・・

現在、こうだとすると

川上雄大のワンポイントレッスン!


その後は、こうなります(笑)


川上雄大のワンポイントレッスン!






以上、アメブロカスタマイズでした。


LIDS札幌・ライフデザインスクール
川上 雄大