CSS編集用デザインってどこにあるのですか?(サイドバーの色変更) | パソコンが好きになるブログ〜表技・裏技・便利技伝授!

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

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

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


自分のアメブロをあの人みたいにカッコ良くしたな、と思って調べていたら、私のこのブログに「たどり着きました!」といメッセージをたくさんいただいております。

ほんとにたどり着いていただきまして、ありがとうございます。

で、たどり着いたのはいいのだけど…

このブログでよく、
はい、それでは、次のコードをCSS編集用デザインで、コピペしてくださいね、と書いていたりします。

その「CSS編集用デザイン」にするには?
をお伝えいたします。
(というのも、アメブロさん、けっこうあっちこっち変えますので^^;)

まず、「マイページ」内から「デザインの変更」を選択します。
 

 

 


そして、ずーっと、ずーっと下の方へスクロールします。
すると、「カスタム可能」というリンクがありますので、クリックします。

 

 

 

 

 

 

 

 


カスタム可能なデザインが表示されるのですが、下の方の「次へ」をクリックして、次の画面を表示します。

 

 

 

 

 

 

 

 

 


すると、左上にありました!!!(下記にある<追記>をご覧くださいませ!場所が変わっております。)

 

 

 

 

 

 

 

 


この「CSS編集用デザイン」に変更すると、このように↓殺風景なデザインになります。

 

 

 

 

 

 

 

 


この殺風景なデザインから、ご自分のお好みのデザインに変えていくのですね!


すぐに、サイドバーの色をグレーから別の色に変えたい方は、次のCSSコードを一番に下にコピペするとよいです。


ピンクにしたい方は、

 

 

 

 

 

 

 

 

 

 

 

/* サイドバー・ピンク */

 

 

.skinMenuHeader {
    padding: 5px 10px;
    background: #FF6699;/*ピンク*/
}
 
.skinMenu {
    margin-bottom: 10px;
    background: #FFDFEA;/*薄いピンク*/
}
 
.skinMenuBody {
    margin: 10px;
    padding: 10px;
    background: #fff;/*白*/
}
 


赤色にしたい方は

 

 

 

 

 

 

 

 

/* サイドバー・赤 */

 

.skinMenuHeader {
    padding: 5px 10px;
    background: #ff0000;/*赤色*/
}
 
.skinMenu {
    margin-bottom: 10px;
    background: #ffcccc;/*薄い赤*/
}
 
.skinMenuBody {
    margin: 10px;
    padding: 10px;
    background: #fff;/*白*/
}
 

 


緑色にしたい方は

 

 

 

 

 

 

 

/* サイドバー・緑 */

 

.skinMenuHeader {
    padding: 5px 10px;
    background: #00cc00;/*緑*/
}
 
.skinMenu {
    margin-bottom: 10px;
    background: #c7f8c7;/*薄い緑*/
}
 
.skinMenuBody {
    margin: 10px;
    padding: 10px;
    background: #fff;/*白*/
}

 

 


黄色にしたい方は

 

 

 

 

 

 

 

 

 

/* サイドバー・黄色 */

 

 

.skinMenuHeader {
    padding: 5px 10px;
    background: #ffff00;/*黄色*/
}
 
.skinMenu {
    margin-bottom: 10px;
    background: #ffffcc;/*薄い黄色*/
}
 
.skinMenuBody {
    margin: 10px;
    padding: 10px;
    background: #fff;/*白*/
}

 


紫にしたい方は

 

 

 

 

 

 

 

/* サイドバー・紫色 */

 

 

.skinMenuHeader {
    padding: 5px 10px;
    background: #e4007f;/*紫色*/
}
 
.skinMenu {
    margin-bottom: 10px;
    background: #e3b6cf;/*薄い紫色*/
}
 
.skinMenuBody {
    margin: 10px;
    padding: 10px;
    background: #fff;/*白*/
}
 


青色にしたい方は

 

 

 

 

 

 

 

 

 

 

/* サイドバー・青色 */

 

.skinMenuHeader {
    padding: 5px 10px;
    background: #3B5998;/*青色*/
}
 
.skinMenu {
    margin-bottom: 10px;
    background: #b5ccfe;/*薄い青色*/
}
 
.skinMenuBody {
    margin: 10px;
    padding: 10px;
    background: #fff;/*白*/
}

 


オレンジ色にしたい方は

 

 

 

 

 

 

/* サイドバー・オレンジ色 */

 

.skinMenuHeader {
    padding: 5px 10px;
    background: #ff4500;/*オレンジ色*/
}
 
.skinMenu {
    margin-bottom: 10px;
    background: #ffdacc;/*薄いオレンジ色*/
}
 
.skinMenuBody {
    margin: 10px;
    padding: 10px;
    background: #fff;/*白*/
}

 


どれかペタンと貼ると、すぐにサイドバーの見出しの色が変わりますので!


あ、どこにペタンと貼ればいいかがわからない方は、過去記事こちらをご覧くださいませ~↓

CSSコードを自分で追加したり、修正したり、削除したりするには


<追記1>
2016年3月の時点で、「CSS編集用デザイン」場所が変わっています。

2ページの左上から4番目に移っています。

 

 

 

 


これは、
新しく1ページ目に

「CSS編集用デザイン-スタンダード」
「CSS編集用デザイン-タイル」
「CSS編集用デザイン-リスト」

の3つが増えているからです。

この3つのCSS編集用デザインは、今までの新デザインとは異なりますのでご注意くださいませ。
ただ、間違えて、このリニュアル版のCSS編集用デザインにしたとしても、2ページ目のCSS編集用デザインにすれば、戻りますので。
(ただし、CSSソースはバックアップしておいてくださいませ!)

 

 

 

 

 

 

 

 

 


<追記2>
2017年1月の時点で、「CSS編集用デザイン」場所が変わっています。

1ページ目の真ん中の一番下、にあります。

 

 

 

 

 

 

 

 

 


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


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