あちあち情報局

趣味や日曜プログラムなどを書いています

ユーザ用ツール

サイト用ツール


サイドバー

メニュー

現在リニューアル中

タグ一覧

dokuwiki:right_menu

📝DokuWiki サイドバーを右側表示

DokuWiki 右メニュー

DokuWikiの標準テンプレートは左側にサイドメニューが表示されますが、右側に表示したい場合はスタイルシートを書き換える事変更できます。


作業手順

注意事項

  • 作業前にサイドバーが左側に表示されていない場合は「📝DokuWiki初期設定(自分流)」のサイドバー表示を行いサイドバーを表示した状態にして下さい
  • 念のためシステムのバックアップして下さい
  • DokuWikiのバージョン・設定・プラグインの利用状況によって変更できない可能性があります(2018-04-22a “Greebo”にて確認)

サイドメニューの移動

dokuwikiインストール先の lib/tpl/dokuwiki/css/structure.less を開き、48行目~付近(行はDokuWikiのバージョンにより変わるかもしれません)にある IDセレクター「#dokuwiki__aside{}」 のfloatプロパティmarginプロパティ を次のように書き換えます。

#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 ;
    }
}

編集用メニューとページ名の移動

右サイドメニューの場合は、編集用メニューとページ名は左側に移動させた方が雰囲気がよくなるのでその変更方法です。(サイドメニューだけを右側にしたい場合は変更不要です)

編集用メニューはlib/tpl/dokuwiki/css/pagetools.less を開き、23行目~付近(行はDokuWikiのバージョンにより変わるかもしれません)にある IDセレクター「#dokuwiki__pagetools{}」 のrightプロパティ を次のように書き換えます。

#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 */

ページ名はlib/tpl/dokuwiki/css/design.less を開き、263行目~付近(行はDokuWikiのバージョンにより変わるかもしれません)にある Classセレクター「.dokuwiki .pageId {}」 のfloatプロパティ を次のように書き換えます。

.dokuwiki .pageId {
    /* ↓ float: right; 【変更】 */
    float: left;
    margin-right: -1em;

キャッシュクリア

編集してもページの表示が変わらない場合は、ブラウザのキャッシュにより古いデータを読み込んでいるのでキャッシュをクリアして下さい。

dokuwiki/right_menu.txt · 最終更新: 2018/12/05 09:55 by 管理者