DokuWiki Bootstrap3 テンプレートのナビゲーションバーメニューを右寄せする
DokuWiki のページとして :navbar コンテンツを作成すると、その中身がナビゲーションバー内のコンテンツとして配置されます.
このとき、通常ではロゴとサイトタイトルのすぐ右隣りに表示されるのですが、PC レイアウトでは右寄せしたい場合の対応方法です。
DokuWiki の記法を生かしたまま、特殊なスタイル調整を行う場合、Wrap Plugin が便利です。
- <WRAP navbar-right>...</WRAP> で囲めば、<div class="wrap_navbar-right">...</div> で囲んでくれます。
- <wrap navbar-right>...</wrap> で囲めば、<span class="wrap_navbar-right">...</span> で囲んでくれます。
上記のように Wrap プラグインの属性にクラス名を記述すると、先頭に “wrap_” を付与したクラスが HTML に出力されます。このクラスに対してスタイルを適用します。
<WRAP navbar-right>
* **SERVICE**
* [[services:start|Service]]
* **PRICE**
* [[prices:start|Price]]
* **BLOG**
* [[blogs:start|Blogs]]
* **ABOUT ME**
* [[about_me:start|About Me]]
</WRAP>
<html>
<style>
@media screen and (min-width:768px) {
nav div.wrap_navbar-right {
float: right !important;
margin-right: -15px;
}
}
</style>
</html>
<html><style>
h2.page-header {
font-weight: 600; font-size: 2.4rem; position: relative; padding: 10px 0 10px 16px; margin-top: 3rem !important; margin-bottom: 2rem !important;
}
h2:before {
content: ""; position: absolute; top: 0; left: 0; width: 6px; height: 100%; background: #ccc;
}
div#disqus__thread {
width: 100% !important;
}
</style></html>