アメブロのサイドバーをおしゃれにカスタマイズする方法

   

アメブロ サイドバー カスタマイズ

アメブロを運営していると、「色々な部分のデザインをカスタマイズしてオリジナル感溢れるブログにしたい」という欲求が高くなってきます。

しかし、WEBデザインの初心者にとっては敷居が高く、中々ブログのデザインのカスタマイズに踏み込めないのが、現状ではないでしょうか?

そこで今回は、アメブロのサイドバーを初心者の方でも簡単に、かつ、おしゃれにカスタマイズする方法を紹介していきます。

ぜひ、参考にして下さい。

スポンサーリンク

今回カスタマイズする場所

今回カスタマイズするのは、こちらです。

ameburo-saido1-min

アメブロのサイドバーは、確かにシンプルで良いデザインなのですが、いかにもアメブロと言う感じがして、安っぽく見えたりします。なので、今回のカスタマイズで、サイドバーをプロブロガーが運営しているブログっぽいデザインに変えていきます。

あなたがそのためにやることは、以下紹介するコードをコピーして、ブログの所定の位置に貼り付けるだけなので、安心して下さい。

サイドバーのカスタマイズ方法

まずは、ブログの管理画面に行き、左下にある「デザインの変更」をクリックします。

ameburo-saido2-min

そして、「デザインの変更」という画面が出てくるので、「CSSの編集」をクリックします。

ameburo-saido3-min

もし、「CSSの編集」というリンクがない人は、今使っているデザイン(テンプレート)を変更しなければいけません。そのためにも、今の画面の下に行き、「カスタム可能」のボタンをクリックしましょう。

ameburo-saido4-min

そして、数多くあるデザインがありますが、その中でも「CSS編集用デザイン」というものを選びましょう。アメブロで色々カスタマイズしたいと思ったら、この「CSS編集用デザイン」でしか自由にカスタマイズできません。

これからブログを育てて大きくしたいと言う人は、この機会に「CSS編集用デザイン」を使っていくことをオススメします。

ameburo-saido5-min

デザインを変えた後に、先ほど紹介した「CSSの編集」をクリックすると、ローマ字のコードがずらっと書かれている場所があるので、そのコードの一番下までスクロールしましょう。

ameburo-saido6-min

今回は、「その他、拡張があれば記述」という文字の下の方に、これから紹介するコードをコピーして貼り付ければ、カスタマイズ完了です。

それでは、アメブロのデザインをおしゃれにするコードを紹介していきます。

ボックス型のメニュー

ameburo-saido7-min

黒を基調したシンプルなデザインになっています。アメブロガーの方で、このようなボックス型のメニューにしたかった、と言う人も多かったのでは。

.skinSubList li {
background: linear-gradient(to bottom, #6B6B6B 0%, #6B6B6B 4%, #333333 1%, #2B2B2B 100%) repeat scroll 0 0 transparent;
border: 1px solid;
border-radius: 6px 6px 6px 6px;
float: left;
font-size: 116%;
list-style: none outside none;
margin: 2px;
padding: 4px;
transition: all 0.3s ease 0s;
}
.skinSubList li:hover {
transform: scale(1.03);
}
.skinSubList a {
color: #fff;
text-decoration: none;
}
span.skinMenuTitle{
font-size:16px;
font-weight:700;
color:#000000;
border-bottom:1px solid #000000;
display:block;
}
.skinMenuHeader{
background-color:#ffffff;
}
.skinMenu2{
background-color:#ffffff;
}

カーソルを当てると背景色が変わるメニュー

ameburo-saido8-min

こちらのデザインの方が、シンプルだし、色々なブログでも良く見かけるので気に入る人が多いかもしれません。

.skinSubList li {
padding: 10px;
}
.skinSubList li:hover {
transform: scale(1.03);
background-color:#ff9900;
}
.skinSubList a {
color: #000000;
text-decoration: none;
display:block;
}
span.skinMenuTitle{
font-size:15px;
font-weight:600;
color:#ffffff;
border-bottom:1px solid #000000;
background-color:#0083da;
display:block;
padding:4px;
padding-left:15px;
}
.skinMenuHeader{
background-color:#ffffff;
}
.skinMenu2{
background-color:#ffffff;

}

スポンサーリンク

この記事をシェアする

スポンサーリンク

この記事と関連がある記事

スポンサーリンク