約1年前にワードプレスでサイトを開設した生徒さんが久しぶりに横浜ワードプレス教室へお越しになりました。サイドバーに設置しているメニュー(Simple Linksワードプレス・プラグイン使用)の表示が最近おかしくなったとのことです。
授業内で調査してみました。問題の直接のきっかけは不明ですが、現状にはスタイルの設定で対応できそうでした。
次のHTMLに対して;
<aside id=”simple-links-7″ class=”widget sl-links-main”>
<h1 class=”widget-title”>XXXXXXX</h1>
<ul class=”simple-links-list sidebar-1″ id=”sidebar-1″>
<li class=”simple-links-item simple-links-widget-item” id=”link-1413″><a href=” http://xxxxxx/?page_id=5758″ target=”” title=””>XXXXXXXXX</a></li>
<li class=”simple-links-item simple-links-widget-item” id=”link-1415″><a href=”http://xxxxxx/?page_id=3047″ target=”” title=””>XXXXXXXXXX</a></li>
<li class=”simple-links-item simple-links-widget-item” id=”link-1417″><a href=”http://xxxxxx/?page_id=784″ target=”” title=””>XXXXXXXXXXXXXX</a></li>
<li class=”simple-links-item simple-links-widget-item” id=”link-3660″><a href=”http://xxxxxx/?page_id=5759″ target=”” title=””>XXXXXXXXXXXXXX</a></li></ul>
<!– End .simple-links-list –></aside>
次のスタイルがかかっているのですが、これが悪さをしているようです。
#sidebar-1 {
float: left;
width: 221px;
}
次のスタイルを定義して問題を回避することができました。
.sl-links-main #sidebar-1 {
float: none;
}