サイドバーのブロックをメニューバーに変更するCSS

目的

muragonのカスタマイズ。

サイドバーのブロックをメニューバーとしてヘッダーの下に配置する。
  • カスタムタグを用い、ヘッダー下に新にブログパーツブロックを追加。メニューバーとしないブロックをCSSで消す。
  • Javascriptを用い、ヘッダー下にメニューバーとするサイドバーのブロックを移動する。

CSS

サイドバーに配置した新着記事、カテゴリー・タグ、アーカイブの内、カテゴリー・タグ、アーカイブをメニューバーとする場合。

/* メニュー配置 */
.topmenu {
display : flex;
justify-content : center;
}

/* メニューバーとしないブロックを非表示(JSなら不要) */
.topmenu [data-part-type="recent"] {
display : none;
}

/* メニューバーとしたサイドバーのブロックを非表示(JSなら不要) */
.sub-inner [data-part-type="category"],
.sub-inner [data-part-type="monthly"] {
display : none;
}

/* メニュー */
.topmenu a {
text-decoration : none;
color : #333;
}

.topmenu .aside-module {
width : 323px;
margin-bottom : 10px;
text-align : center;
}


.topmenu .aside-module-body {
display : none;
position : absolute;
width : 323px;
}

.topmenu .aside-module:hover .aside-module-body {
display : block;
}

.topmenu .aside-module-title-body,
.topmenu .aside-module-list li {
margin : 0;
padding : 10px;
background : linear-gradient(#ffffff 0%, #e3e3e3 100%);
}

.topmenu .aside-module-title-body:hover,
.topmenu .aside-module-list li:hover {
background : linear-gradient(#ffffff 0%, #FFCDD2 100%);
}

Javascript

/* メニューバーへブロックを移動 */
$(function() {
$("[data-part-type=category]").appendTo(".topmenu");
$("[data-part-type=monthly]").appendTo(".topmenu");
});

HTML

<div id="contents" class="contents">の下に追加。
Javascriptを用いる場合、<!--{include:widgets}-->は不要。

<div class=topmenu>
<div class="aside-module">
<div class="aside-module-title-body">
<div class="aside-module-title"><a href="/">ブログトップ</a></div>
</div>
</div>
<!--{include:widgets}-->
</div>