最新のデザインでサイドバーをカスタマイズする方法 | パソコンが好きになるブログ〜表技・裏技・便利技伝授!

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

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

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

 

このようなご質問いただきました。

 

「アメブロをカスタマイズしてるのですが、

川上先生のサイドバーの枠を丸くしたり、背景をグラデーションにする方法を見てCSS編集用デザインでコピペしたものを貼り付けてはみたものの表示されず、何度もやってみたのですが・・・。
新CCS書式だから、また設定が異なるのでしょうか?」

 

 

こちらの過去記事でチャレンジされているのですね↓

 

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

 

 

はい~!このアメブロデザインですね↓

 

 

 

このデザインは、今一番新しいデザインになっています。

プロフィール画像が丸くなっているので、わかります。

 

また、横幅が大きいです!

 

旧デザイン→800px
新デザイン→980px
最新デザイン→1120px

 

だんだんと増えています。

 

私が書いたアメブロカスタマイズの記事は、「新デザイン→980px」対応のものでして、一番新しいのには対応していないのですm(__)m

 

あ、最近、ぽつらぽつら書いていこうと思っていますが(汗)↓


最新デザインでメニューバーを設置するには(既存のデザインの場合)

 

ちなみに、一番新しいデザインのサイドバーをこのようにカスタマイズするのであれば↓

 

 

 

 

.skin-widgetHead {
    background-image:linear-gradient(white,pink,pink);
    padding: 5px 5px;
    background-color: pink;
    border-radius: 10px 10px 0px 0px;
}
ul.skin-linkList{
    padding: 10px;
    border: 1px solid pink;
    border-radius: 0px 0px 10px 10px;
}

 


または、

 


.skin-widgetHead {
    background-image:linear-gradient(white,pink,pink);
    padding: 10px 5px 0px 5px;
    background-color: pink;
    border-radius: 10px 10px 0px 0px;
}
ul.skin-linkList{
    padding: 10px;
    border: 1px solid pink;
    border-radius: 0px 0px 10px 10px;
}

 

 

こちら↑のCSSコードを、CSS編集内の一番最後にコピペしてみてくださいませ~!

 

「.(ピリオド)」や「}(終わり中括弧)」をお忘れなく!!





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

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

■最強のパーソナル発信セミナー■

【日 時】:6月5日(日) 10:00~17:00
【場 所】:わくわくホリデーホール
      (札幌市民ホール) 第2会議室
      札幌市中央区北1条西1丁目
【受講料】:12,000円
【定 員】:先着50名
 

詳しくはこちら