031

 

お好みのメニューをサイドバーに表示させる方法です。

 

①フリースペースに下記テキストをコピペします。
タイトル・メニュー名・#のリンク先をお好みに変更してください。

<div class="sidemenu-original">
<p>メニュータイトル</p>
<ul>
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
<li><a href="#">メニュー4</a></li>
<li><a href="#">メニュー5</a></li>
</ul>
</div>

 

②設定・管理 > 配置設定
メニューを表示させたい位置に、フリースペースを移動します。
032

 

③下記をCSSの一番下にコピペします。

/*改行無効*/
.sidemenu-original br {
display:none;
}

/*メニュータイトル*/
.sidemenu-original p {
color: #ffffff;
padding: 7px;
background-color:#999999;
font-weight: 700;
}

/*メニュー内容*/
.sidemenu-original li {
padding: 7px;
font-size: 14px;
border-bottom: 2px dotted #cccccc;
}

/*メニュー内容*/
.sidemenu-original li a {
text-decoration: none;
color:#888888;
}

 

④プレビュー確認後、保存して完了です。

 

以下解説

 

/*改行無効*/
.sidemenu-original br {
display:none; ←アメブロではフリースペースの改行が反映されてしまうので、それを無効にします。
}

/*メニュータイトル*/
.sidemenu-original p {
color: #ffffff; ←メニュータイトルの文字色
padding: 7px;
background-color:#999999; ←メニュータイトルの背景色
font-weight: 700;
}

/*メニュー内容*/
.sidemenu-original li {
padding: 7px;
font-size: 14px;
border-bottom: 2px dotted #cccccc; ←メニューの下にドット線表示
}

/*メニュー内容*/
.sidemenu-original li a {
text-decoration: none; ←リンクのアンダーバー等初期化
color:#888888; ←メニューの文字色
}

 

 

以上でおわりです。おつかれさまでした^^