読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 | フェリカテクニカルアカデミーWebサイト制作科サポートブログ

メニューのデザインを指定する

WordPress基礎

メニュー全体をグループ化する

  • class名を「blogmenu」と指定する
<div class="blogmenu">
<ul>
<?php dynamic_sidebar(); ?>
</ul>
</div><!-- /.blogmenu -->
リストマークは削除する
/* メニュー */
.blogmenu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

f:id:webmaster-web:20160711013122p:plain

背景色を指定

.blogmenu .widget {
  margin-bottom: 30px;
  padding: 20px;
  background-color: #E8E8E8;
}

見出しのデザインを指定する

.blogmenu .widgettitle {
  margin-top: 10px;
  margin-bottom: 20px;
  border-right: solid 10px #4A5F7E;
  color: #4A5F7E;
  font-size: 14px;
}

f:id:webmaster-web:20160722010302p:plain

リンクのデザインを指定する

.blogmenu li a {
  color: #666;
  font-size: 14px;
  text-decoration: none;
}
.blogmenu li a:hover {
  background-color: #FFF;
}

f:id:webmaster-web:20160722004905p:plain