dokuwiki_right_menu
差分
この文書の現在のバージョンと選択したバージョンの差分を表示します。
| 両方とも前のリビジョン 前のリビジョン | |||
|
dokuwiki_right_menu [2018/09/18 08:39] 管理者 |
dokuwiki_right_menu [2018/09/18 08:49] (現在) 管理者 [手順] |
||
|---|---|---|---|
| ライン 1: | ライン 1: | ||
| + | ====== DokuWiki サイドメニューを右側に表示====== | ||
| + | DokuWiki標準テンプレートのサイドメニューを右側表示に変更する方法 | ||
| + | ---- | ||
| + | ===== 概要 ===== | ||
| + | DokuWikiの標準テンプレートは左側にサイドメニューが表示されますが右側に表示したい場合はスタイルシートを書き換える事変更できます。（事前に編集するファイルやシステム本体のバックアップはして下さい） | ||
| + | |||
| + | ---- | ||
| + | ===== 手順 ===== | ||
| + | dokuwikiインストール先の ''lib/tpl/dokuwiki/css/structure.less'' を開き、48行目～付近(行はDokuWikiのバージョンにより変わるかもしれません)にある IDセレクター「''%%#dokuwiki__aside{}%%''」 の''floatプロパティ'' と ''marginプロパティ'' を次のように書き換えます。 | ||
| + | |||
| + | <code css> | ||
| + | #dokuwiki__aside { | ||
| + | width: @ini_sidebar_width; | ||
| + | /* ↓ float: left 【変更】 */ | ||
| + | float: right; | ||
| + | position: relative; | ||
| + | display: block; | ||
| + | |||
| + | > .pad { | ||
| + | /* ↓ margin: 0 1.5em 0 0 ; 【変更】 */ | ||
| + | margin: 0 0 0 1.5em ; | ||
| + | } | ||
| + | } | ||
| + | </code> | ||
| + | ---- | ||
| + | ===== キャッシュクリア ===== | ||
| + | 編集してもページの表示が変わらない場合は、ブラウザのキャッシュにより古いキャッシュが読み込まれているのでキャッシュをクリアして下さい。 | ||
| + | ===== おまけ ===== | ||
| + | 編集用のメニューとページ名も左側に移動させた方が雰囲気がよくなるのでその変更方法 | ||
| + | |||
| + | 編集用メニューは''lib/tpl/dokuwiki/css/pagetools.less'' を開き、23行目～付近(行はDokuWikiのバージョンにより変わるかもしれません)にある IDセレクター「''%%#dokuwiki__pagetools{}%%''」 の''rightプロパティ'' を次のように書き換えます。 | ||
| + | |||
| + | <code css> | ||
| + | #dokuwiki__pagetools { | ||
| + | @ico-width: 28px; | ||
| + | @ico-margin: 8px; | ||
| + | @item-width: (@ico-width + @ico-margin + @ico-margin); | ||
| + | @item-height: (@ico-width + @ico-margin); | ||
| + | |||
| + | position: absolute; | ||
| + | /* ↓right: (-1 * @item-width); 【変更】*/ | ||
| + | left: (-1 * @item-width); | ||
| + | /* on same vertical level as first headline, because .page has 2em padding */ | ||
| + | </code> | ||
| + | |||
| + | ページ名は''lib/tpl/dokuwiki/css/design.less'' を開き、263行目～付近(行はDokuWikiのバージョンにより変わるかもしれません)にある Classセレクター「''%%.dokuwiki .pageId {}%%''」 の''floatプロパティ'' を次のように書き換えます。 | ||
| + | |||
| + | <code css> | ||
| + | .dokuwiki .pageId { | ||
| + | /* ↓ float: right; 【変更】 */ | ||
| + | float: left; | ||
| + | margin-right: -1em; | ||
| + | </code> | ||
| + | |||
| + | |||
dokuwiki_right_menu.txt · 最終更新: 2018/09/18 08:49 by 管理者
