PukiWiki改造 その3(Skin)
 

概要:ここではSKINを変更したのでその時の内容を説明する。その後SKINを新規作成したので、現在のSKINとは異なっている。この時の経験が新規SKINの作成に役立った。

1. Skinの変更
概要:PukiWikiの公式サイトのSkinの一覧からPukiwiki本体に影響のなさそうな、iridのcloudwalkを導入する。
上記HPの利用方法に従って導入・設定する。

  1. ) ダウンロード
    • 最新のファイル[ この時点050213irid.zip ] を上記HPからダウンロードし、/tmp/workディレクトリーに保存する。
  2. ) 導入
    # cd /tmp/work
    # unzip 050213irid.zip       ← 解凍するとiridディレクトリーができる。
    # cp -Rp irid /var/www/pukiwiki/skin/
    
  3. ) 設定
    # vi pukiwiki.ini.php   ← 編集する。
    
    // Skins / Stylesheets
    //define('SKIN_DIR', 'skin/');
    define('SKIN_DIR', 'skin/irid/');
    
  4. ) SiteNavigatorとPageNavigatorの名前で、通常のWikiページとして作成する。それぞれ、サイトのナビゲーションとして表示される。
  5. ) スタイルを変更する場合には、irid/pukiwiki.skin.phpをエディタで開き、使用するスタイル名の設定を行う。iridwire、cloudwalk、orangeboxの3種類から選べる。
    # vi irid/pukiwiki.skin.php
    
    // 使用するスタイル
    $irid_style_name = "cloudwalk"; ← ここを変更する。
    
  6. ) Pukiwikiにアクセスして表示が変更されているのを確認する。

2. Skinの改造

  1. ) 編集操作項目の追加
    Wikiサイトの作成のため編集操作項目に「名前変更」、「複製」、「一覧」があると便利なので追加する。
    1. plugin.cssの編集
      #vi /var/www/pukiwiki/skin/irid/orangebox/plugin.css
      
      @charset "Shift_JIS";
      
      /* PageAction
      ----------------------------------------------------------------------------- */
      /* 表示 */
      #page_action .pa_edit,
      #page_action .pa_attach,
      #page_action .pa_diff,
      #page_action .pa_rename, ← 追加
      #page_action .pa_template, ← 追加
      #page_action .pa_list, ← 追加
      #page_action .pa_backup{
              height:20px;
              background-repeat:no-repeat;
              padding-left:20px;
      }
      .pa_edit{
              background-image:url("../../../image/edit.png");
      }
      .pa_attach{
              background-image:url("../../../image/file.png");
      }
      .pa_diff{
              background-image:url("../../../image/diff.png");
      }
      .pa_rename{
              background-image:url("../../../image/rename.png"); ← 追加
      }
      .pa_template{
              background-image:url("../../../image/copy.png"); ← 追加
      }
      .pa_list{
              background-image:url("../../../image/list.png"); ← 追加
      }
      .pa_backup{
              background-image:url("../../../image/backup.png");
      }
      /* 非表示 */
      .pa_reload,
      .pa_newpage,
      .pa_freeze,
      .pa_unfreeze,
      /* .pa_list, */ ← 削除
      .pa_serch,
      .pa_whatnew,
      .pa_help{
              display:none;
      }
      
    2. pukiwiki.skin.phpの編集
      # vi /var/www/pukiwiki/skin/irid/pukiwiki.skin.php
      
      <?php if ($is_page) { ?>
       :
       :
             <li class="pa_edit"><a href="<?php echo $link_edit ?>">編集</a></li>
             <li class="pa_rename"><a href="<?php echo $link_rename ?>">名前変更</a></li> ← 追加
             <li class="pa_template"><a href="<?php echo $link_template ?>">複製</a></li> ← 追加
       :
      
      注:「一覧」は元々設定があるので追加は不要。
  2. ) メニューの欄の表示文字サイズの変更
    内容:メニューの欄に表示する項目が長く折り返して表示されるので、表示領域を広げて、文字サイズを小さくして、一行で表示されるようにする。
    1. サイドバーの幅の拡張
      # vi /var/www/pukiwiki/skin/irid/orangebox/base_3float.css
      
      div#wrap_content{
              float:right;
              width:75%;        ← 変更
      /*      min-width:74%;*/
      }
      div#wrap_sidebar{
              float:left;
              width:25%;        ← 変更
      }
      
    2. メニューバーの文字サイズの縮小
      1. メニューバーの変更部分のCSSを別ファイルとしてimportするようにする。
        # vi /var/www/pukiwiki/skin/irid/cloudwalk/cloudwalk.css
        
        @import url("../orangebox/base_3float.css");
        @import url("../orangebox/plugin.css");
        @import url("color_cloudwalk.css");
        @import url("../orangebox/menubar.css") screen;      ← 追加
        @import url("../orangebox/menubar_print.css") print; ← 追加
        
        # vi /var/www/pukiwiki/skin/irid/orangebox/orangebox.css
        
        @import url("base_3float.css");
        @import url("plugin.css");
        @import url("color_orangebox.css");
        @import url("menubar.css") screen;                  ← 追加
        @import url("menubar_print.css") print;             ← 追加
        
      2. メニューバーのフォントサイズを変更する。
        このスキンは領域の角が丸くなるようにしているためpaddingを.barの設定と同じにする。
        # vi /var/www/pukiwiki/skin/irid/orangebox/menubar.css  ← 新規作成
        @charset "Shift_JIS";
         
        div#menubar {
                padding:7px 15px 15px 15px; ← .barの設定と同じ
                word-break:normal;
                font-size:70%;        ← 70%に小さくした。
                overflow:hidden;
        }
        
  3. ) サイドバーの印刷時の除外
    PukiWikiの元々の仕様では印刷時にサイドバーは印刷されないようになっていたが、このスキンではその設定がないので、元々の仕様通り印刷時にはサイドバーは印刷されないようにする。
    注:FireFoxではこの設定は有効であるが、IEでは無効である。
    # vi /var/www/pukiwiki/skin/irid/orangebox/menubar_print.css  ← 新規作成
    @charset "Shift_JIS";
     
    div#wrap_sidebar {
            display:none;
    }
    div#attach {
            display:none;
    }
    div#toolbar {
            display:none;
    }
    div#related {
            display:none;
    }
    div#logo {
            display:none;
    }
    
  4. ) 画像の表示を左側に寄せる
    # vi /var/www/pukiwiki/skin/irid/orangebox/plugin.css
    
    div.img_margin{
            margin:1em;           ← 追加
    /*      margin-left:32px; */    ← コメントアウト
    /*      margin-right:32px; */   ← コメントアウト
    }
    

3. メニュー表示順番の変更
左サイドの欄の表示順番を変更する。検索を最上部にその下にメニューを表示する。編集操作をなくする。


最終更新のRSS
Last-modified: 2014-03-11 (火) 02:00:03 (2103d)