, , ,

DokuWiki Bootstrap3 テンプレートのナビゲーションバーメニューを右寄せする

DokuWiki のページとして :navbar コンテンツを作成すると、その中身がナビゲーションバー内のコンテンツとして配置されます.
このとき、通常ではロゴとサイトタイトルのすぐ右隣りに表示されるのですが、PC レイアウトでは右寄せしたい場合の対応方法です。

DokuWiki の記法を生かしたまま、特殊なスタイル調整を行う場合、Wrap Plugin が便利です。

上記のように 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>