サイト構築 覚書 の履歴(No.3)

• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• サイト構築 覚書 へ行く。
  • 1 (2025-09-29 (月) 18:51:21)
  • 2 (2025-09-30 (火) 05:49:39)
  • 3 (2025-09-30 (火) 09:23:49)
  • 4 (2025-10-05 (日) 17:10:20)

---

わたしの忘備録 > 忘備録 > サイト構築 覚書

サイト構築覚書2†

　 php8.X に対応するため pukiwiki 1.5.4 でサイトを再構築する

pukiwiki-1.5.4-utf8 でサイト構築†

• 今後のバージョンアップに備え、変更箇所はできるだけ少なくする。
  
• 色のトーンを全体的にグレー・薄いグレー系にする。以下、行数はオリジナルを基準とする
  
• 標準でレスポンシブルデザインに対応しているので、1.5.2 のこの項目は対応不要
  

PukiWiki 1.5.4 の設置†

• 前準備
  ・PukiWiki-1.5.4-utf8.zip のダウンロード
  ・インストール手順
  

1. ファイルを解凍
   

   $ unzip pukiwiki-1.5.4_utf8.zip

2. /var/www/html 配下にコピーしてフォルダ名を「wiki_bs」とする
   

   $ sudo cp -r PukiWiki-XXXXXX /var/www/html/
   $ cd /var/www/html/
   $ mv PukiWiki-XXXXXX/ wiki_bs/

3. 所有権変更
   ・ユーザー：グループ（mizutu:mizutu）
   

   $ sudo chown -R mizutu:mizutu wiki_bs

4. ファイル・ディレクトリのパーミッション設定
   

   sudo chmod 777 attach

   ファイル・ディレクトリ	属性	内容
   ディレクトリ パーミッション
   attach	777	添付ファイル格納ディレクトリ
   backup	777	バックアップファイル格納ディレクトリ
   cache	777	キャッシュファイル格納ディレクトリ
   counter	777	カウンタファイル格納ディレクトリ
   diff	777	差分ファイル格納ディレクトリ
   image	755	画像ファイル
   image/face	755	(画像ファイル)フェイスマーク
   lib	755	ライブラリ
   plugin	755	プラグイン
   skin	755	スキン、CSS、JavaScirptファイル
   wiki	777	データの格納ディレクトリ
   ファイル パーミッション
   .htaccess	644
   .htpasswd	644
   */.htaccess	644
   ファイル パーミッション
   *.php	644
   */*.php	644
   attach/*	666	(はじめは存在せず)
   backup/*.gz	666	(インストール時は存在せず)
   backup/*.txt	666	(多くの環境では存在せず)
   cache/*	666	(一部のプラグインはバイナリファイルを保存します)
   counter/*	666	(はじめは存在せず)
   diff/*.txt	666	(はじめは存在せず)
   wiki/*.txt	666
   image/*	644
   image/face/*	644
   lib/*	644
   plugin/*	644
   skin/*	644

アップロードサイズ拡張†

アップロードサイズはデフォールトでは 1MB
対象ファイル名: plugin/attach.inc.php

• サイズを拡張する。
  ・変更前 ↓↓ 20行目
  

   define('PLUGIN_ATTACH_MAX_FILESIZE', (1024 * 1024)); // default: 1MB

  ・変更後 ↓↓

   define('PLUGIN_ATTACH_MAX_FILESIZE', (1024 * 1024) *30); // default: 1MB

アップロード権限変更†

ログインユーザーはアップロード許可。削除は管理者のみとする
対象ファイル名: plugin/attach.inc.php

• ログインユーザーが添付ファイルをアップロードできるようにする
  ・23行目変更
  

  define('PLUGIN_ATTACH_UPLOAD_ADMIN_ONLY', TRUE); → FALSE

• 管理者が添付ファイルを削除するときは、バックアップを作らない
  ・30行目変更
  

  define('PLUGIN_ATTACH_DELETE_ADMIN_NOBACKUP', FALSE);  → TRUE

• アップロード/削除時にパスワードを要求する
  ・ 33行目変更
  

  define('PLUGIN_ATTACH_PASSWORD_REQUIRE', FALSE);  → TRUE

画像一覧の表示†

対象ファイル名: skin/pukiwiki.css

• 画像表示のとき左と下に空白を開ける
  ・427行目に挿入
  

  div#body img {
    margin: 0px 0px 8px 8px;
  }

画像表示の時の左右の空白†

対象ファイル名: skin/pukiwiki.css

• 空白を詰める
  ・665-666行目変更
  

  /* ref.inc.php */
  div.img_margin {
    margin-left:8px;
    margin-right:8px;
  }

外部リンクを別窓にする†

参考サイト: ロンさん非公式ウイキ
対象ファイル名: lib/make_link.php

• 外部ページのリンクの際、http:// の先頭に + を付ける(+http:) と別窓でリンクするようにした
  ・変更前 ↓↓ 403行目
  

   (?:(?:https?|ftp|news):\/\/|mailto:)[\w\/\@\$()!?&%#:;.,~'=*+-]+

  ・変更後 ↓↓
  

  (                 # (4) url
   (?:(?:\+?https?|\+?ftp|\+?news):\/\/|mailto:)[\w\/\@\$()!?&%#:;.,~'=*+-]+
  )

  ・変更前 ↓↓ 428行目
  

          return '<a href="' . $this->name . '"' . $rel . '>' . $this->alias . '</a>';

  ・変更後 ↓↓
  

          if (preg_match("/^(\+)(.*)/", $this->name, $regs)) {        # 2020/0121
              return '<a href="' . $regs[2] . '" target="_blank" ' . $rel . '>' . $this->alias . '</a>';
          }else{
              return '<a href="' . $this->name . '"' . $rel . '>' . $this->alias . '</a>';
          }

  ・InterWikiでも別窓に
  ・変更前 ↓↓ 591行目
  

              $this->name . '" rel="nofollow">' . $this->alias . '</a>';

  ・変更後 ↓↓
  

      function toString()
      {
          return '<a href="' . $this->url . $this->anchor . '" title="' .
              $this->name . '" target="_blank rel="nofollow">' . $this->alias . '</a>';
      }

外部リンクにマークを付ける†

対象ファイル名: skin/pukiwiki.css

• 外部リンクを識別する
  ・56行目挿入
  

  a[target=_blank] {
    padding-right: 20px;
    background:url(../image/external-link.png) right center/11px auto no-repeat;
  }

システム設定†

対象ファイル名: pukiwiki.ini.php

• トップページの変更（トップページを作成後に設定する） ・128行目 例：$defaultpage = 'FrontPage'; → '私的AI研究会'
  

  // Default page name
  $defaultpage  = 'FrontPage';     // Top / Default page

• 管理者パスワード
  

  192行目 $adminpass = '{x-php-md5}!'; → $adminpass = '{x-php-md5}パスワード文字列';

  // Default: always fail
  $adminpass = '{x-php-md5}*******************************';

• ユーザー名
  ・変更前 ↓↓ 259- 行目

  $auth_users = array(
      // Username => password
      'foo'  => 'foo_passwd', // Cleartext
      'bar'  => '{x-php-md5}f53ae779077e987718cc285b14dfbe86', // PHP md5() 'bar_passwd'
      'hoge' => '{SMD5}OzJo/boHwM4q5R+g7LCOx2xGMkFKRVEx',      // LDAP SMD5 'hoge_passwd'
  );

  変更後 ↓↓
  

  $auth_users = array(
      // Username => password
      'mizutu'=> '{x-php-md5}パスワード文字列',
      'tnitta'=> '{x-php-md5}パスワード文字列',
      'hokegawa'=> '{x-php-md5}パスワード文字列',
      'guest'    => '{x-php-md5}パスワード文字列',
  );

• グループ名
  ・変更前 ↓↓ 267- 行目
  

      // Groupname => group members(users)
      'valid-user' => '', // Reserved 'valid-user' group contains all authenticated users
      'groupfoobar'  => 'foo,bar',
  );

  ・変更後 ↓↓
  

  $auth_groups = array(
      // Groupname => group members(users)
      'valid-user' => '', // Reserved 'valid-user' group contains all authenticated users
      'edit-user' => 'mizutu,tnitta,hokegawa',
      'read-suer' => 'guest',
  );

• ログインしたユーザーのみ編集許可
  ・変更前 ↓↓ 293- 行目

  $edit_auth = 0;
  
  $edit_auth_pages = array(
      // Regex           Username
      '#BarDiary#'        => 'bar',
      '#HogeHoge#'        => 'hoge',
      '#(NETABARE|NetaBare)#' => 'foo,bar,hoge',
  );

  ・変更後 ↓↓
  

  // Edit auth (0:Disable, 1:Enable)
  $edit_auth = 1;
  
  $edit_auth_pages = array(
      // Regex           Username
      '##'=> 'edit-user',
  );

全体の色†

対象ファイル名: skin/pukiwiki.css

• テキスト・テキスト背景色
  

  a:visited {
    color:#888888;        /* #a63d21 */

  h1, h2 {
    font-family:verdana, arial, helvetica, Sans-Serif;
    color:inherit;
    background-color:#DDDDDD; /* #DDEEFF */

  h3 {
    font-family:verdana, arial, helvetica, Sans-Serif;
    border-bottom:3px solid #DDDDDD;  /* #DDEEFF */
    border-top:1px solid #DDDDDD;     /* #DDEEFF */
    border-left:10px solid #DDDDDD;   /* #DDEEFF */
    border-right:5px solid #DDDDDD;       /* #DDEEFF */

  h4 {
    font-family:verdana, arial, helvetica, Sans-Serif;
    border-left:18px solid #DDDDDD;     /* #DDEEFF */

  h5, h6 {
    font-family:verdana, arial, helvetica, Sans-Serif;
    color:inherit;
    background-color:#DDDDDD;      /* #DDEEFF */

  pre {
    border-top:#DDDDEE 1px solid;
    border-bottom:#888899 1px solid;
    border-left:#DDDDEE 1px solid;
    border-right:#888899 1px solid;
    padding:.5em;
    margin-left:1em;
    margin-right:2em;
    white-space:pre-wrap;
    word-wrap:break-word;
    color:black;
    background-color:#EEEEEE; /* #F0F8FF */

• メニュー・バー背景色
  ・365行目変更 padding:4px 0px 0px 0px → 4px 0px 2px 0px
  ・316行目追加 background-color: #F1F1F1;
  

  div#navigator {
    clear:both;
    padding:4px 0px 2px 0px;
    margin:0;
    background-color: #F1F1F1;

テーブル†

対象ファイル名: skin/pukiwiki.css

• テーブル配色の変更
  ・149行目変更
  

  tfoot td.style_td {
    color:inherit;
    background-color:#EEEEEE; /* #D0D8E0 */

  ・159行目変更 margin:auto; → 15px
  ・162行目変更 background-color:#ccd5dd; → #DDDDDD
  

  .style_table {
    padding:0;
    border:0;
    margin:15px;          /* auto */
    text-align:left;
    color:inherit;
    background-color:#DDDDDD; /* #ccd5dd */

  ・175行目変更 background-color:#ccd5dd; → #FFFFFF
  

  .style_td {
    padding:5px;
    margin:1px;
    color:inherit;
    background-color:#FFFFFF; /* #EEF5FF */

タイトル・ロゴ†

対象ファイル名: skin/pukiwiki.skin.php

• タイトル・ロゴをサイトに合わせて変更
  ・>変更前 ↓↓ 96行目
  

   <a href="<?php echo $link['top'] ?>"><img id="logo" src="<?php echo IMAGE_DIR . $image['logo'] ?>" width="80" height="80" alt="[PukiWiki]" title="[PukiWiki]" /></a>

  変更後 ↓↓
  

  <div id="header">
   <a href="/"><img id="logo" src="../images/photo02pk.jpg" width="60" height="60" alt="Izutsu's Web site 2" title="Izutsu's Web site 2" /></a>

タイトルのurlを消す†

対象ファイル名: skin/pukiwiki.skin.php

• タイトル表示をシンプルに
  ・22行目変更 define('SKIN_DEFAULT_DISABLE_TOPICPATH', 1); → 0
  

      define('SKIN_DEFAULT_DISABLE_TOPICPATH', 0); // 1, 0

  ・105行目追加 <?php echo '　' ?>
  

   <?php if(SKIN_DEFAULT_DISABLE_TOPICPATH) { ?>
     <a href="<?php echo $link['canonical_url'] ?>"><span class="small"><?php echo $link['canonical_url'] ?></span></a>
   <?php } else { ?>
     <span class="small">
     <?php echo '　' ?>
     <?php require_once(PLUGIN_DIR . 'topicpath.inc.php'); echo plugin_topicpath_inline(); ?>

タイトルの url リンク表示†

対象ファイル名: plugin/topicpath.inc.php

• トップページ名前の表示
  ・17行目変更 'Top' → $defaultpage
  

  // Label for $defaultpage
  define('PLUGIN_TOPICPATH_TOP_LABEL', $defaultpage);

メニューの変更†

メニューバーが複雑でわかりにくいので、修正する。参考サイトは下記
まちゅダイアリー PukiWiki のカスタマイズ

「リロード」→　削除
「バックアップ」→　「履歴」※1.5.4 ではすでに適応済み
いま見ているページの更新履歴（バックアップ）を表示するという機能なので。

●ログオフ状態のとき
　[トップ][一覧|検索|履歴|ヘルプ|ログアウト]

●ログイン状態のとき
　[トップ][新規|編集|凍結|差分|添付][一覧|検索|履歴|最終更新|ヘルプ|ログアウト]

対象ファイル名: skin/pukiwiki.skin.php

• メニュー表示をカスタマイズする
  ・変更前 ↓↓ 129- 行目
  

   [ <?php _navigator('top') ?> ] &nbsp;
  
  <?php if ($is_page) { ?>
   [
   <?php if ($rw) { ?>
      <?php _navigator('edit') ?> |
      <?php if ($is_read && $function_freeze) { ?>
      <?php (! $is_freeze) ? _navigator('freeze') : _navigator('unfreeze') ?> |
      <?php } ?>
   <?php } ?>
   <?php _navigator('diff') ?>
   <?php if ($do_backup) { ?>
      | <?php _navigator('backup') ?>
   <?php } ?>
   <?php if ($rw && (bool)ini_get('file_uploads')) { ?>
      | <?php _navigator('upload') ?>
   <?php } ?>
   | <?php _navigator('reload') ?>
   ] &nbsp;
  <?php } ?>
  
   [
   <?php if ($rw) { ?>
     <?php _navigator('new') ?> |
   <?php } ?>
     <?php _navigator('list') ?>
   <?php if (arg_check('list')) { ?>
      | <?php _navigator('filelist') ?>
   <?php } ?>
   | <?php _navigator('search') ?>
   | <?php _navigator('recent') ?>
   | <?php _navigator('help')   ?>
   <?php if ($enable_login) { ?>
   | <?php _navigator('login') ?>
   <?php } ?>
   <?php if ($enable_logout) { ?>
   | <?php _navigator('logout') ?>
   <?php } ?>
   ]
  <?php } // PKWK_SKIN_SHOW_NAVBAR ?>

  変更後 ↓↓
  

  &nbsp; [ <?php _navigator('top') ?> ] &nbsp;
  
  <?php if ($is_page) { ?>
   <?php if ($enable_logout) { ?>
     [
     <?php if ($rw) { ?>
      <?php _navigator('new') ?> |
      <?php _navigator('edit') ?> |
      <?php if ($is_read && $function_freeze) { ?>
          <?php (! $is_freeze) ? _navigator('freeze') : _navigator('unfreeze') ?> |
      <?php } ?>
     <?php } ?>
   
    <?php _navigator('diff') ?>
     <?php if ($rw && (bool)ini_get('file_uploads')) { ?>
      | <?php _navigator('upload') ?>
     <?php } ?>
  
     ] &nbsp;
   <?php } ?>
  <?php } ?>
  
   [
   <?php _navigator('list') ?>
   <?php if (arg_check('list')) { ?>
      | <?php _navigator('filelist') ?>
   <?php } ?>
   | <?php _navigator('search') ?>
     <?php if ($do_backup) { ?>
      | <?php _navigator('backup') ?>
     <?php } ?>
  <?php if ($enable_logout) { ?>
    | <?php _navigator('recent') ?>
    | <?php _navigator('help')   ?>
    | <?php _navigator('logout') ?>
   <?php } ?>
   <?php if ($enable_login) { ?>
   | <?php _navigator('login') ?>
   <?php } ?>
   ]
  <?php } // PKWK_SKIN_SHOW_NAVBAR ?>

ヘルプを修正できるようにする†

誤植の修正・説明の追加などをできるようにする。修正後は「凍結」を忘れずに。
対象ファイル名: ja.lng.php

• 「FormattingRules」をコピーして「テキスト整形のルール」ページを作成。
• 「Help」をコピーして「ヘルプ」ページを作成して、冒頭の FormattingRules のリンクを変更する ・92-93行目 変更
  

  // Page name
  $rule_page = 'テキスト整形のルール';    // Formatting rules
  $help_page = 'ヘルプ';          // Help

表示画像のクリックで元画像をポップアップで表示する†

Light Box を導入して画像表示を改善する
参考サイト: pukiwiki1.5.xにLightboxを導入する lightbox2 オフィシャルサイト
対象ファイル名: /lib/make_link.php

• lightbox プログラムをダウンロード・コピーする（1.5.2 で使用しているモジュールをコピーしても可）
  ダウンロードファイル: lightbox2-master.zip　lightbox2 ダウンロード
  ・使用するファイル (ファイルがあるフォルダー名）
  

  lightbox.min.js   (lightbox2-master/dist/js/)
  lightbox-plus-jquery.min.js   (lightbox2-master/dist/js/)
  lightbox.min.css   (lightbox2-master/dist/css/)

  ・イメージファイル (lightbox2-master/dist/image/) 圧縮ファイルを解答し、スキンフォルダーにコピーする
  

  /skin/lightbox2-master/js/lightbox.min.js
  /skin/lightbox2-master/js/lightbox-plus-jquery.min.js
  /skin/lightbox2-master/css/lightbox.min.css
  /skin/lightbox2-master/image/  (イメージファイルすべて)

対象ファイル名: plugin/ref.inc.php

• 画像をクリックするとポップアップで表示できるようにする
  ・変更前 ↓↓ 375行目変更
  

   $params['_body'] = "<a href=\"$url2\" title=\"$title\">{$params['_body']}</a>";

  ・・変更後 ↓↓
  

      if ($is_image) { // 画像
          $params['_body'] = "<img src=\"$url\" alt=\"$title\" title=\"$title\" $info/>";
          if (! $params['nolink'] && $url2)
              // 2025/0928 -375L
              // $params['_body'] = "<a href=\"$url2\" title=\"$title\">{$params['_body']}</a>";
              $params['_body'] = "<a href=\" $url2\" title=\" $title\" rel='lightbox[aiueo]' > {$params['_body']}</a>";
              //

  
  対象ファイル名: skin/pukiwiki.skin.php
  
  ・83行目 追加
  

   <script type="text/javascript" src="skin/search2.js" defer></script>
  
   <script src="skin/lightbox2-master/js/lightbox-plus-jquery.min.js"></script>
   <script src="skin/lightbox2-master/js/lightbox.min.js"></script>
   <link href="skin/lightbox2-master/css/lightbox.min.css" rel="stylesheet" />

Pukiwikiの「？」(はてな)を表示しない†

参考サイト: Pukiwikiの「？」(はてな)を表示しないように
対象ファイル名: pukiwiki.ini.php

• リンク切れ表示を消す
  ・160行目 変更 $nowikiname = 0 → 1
  

  // _Disable_ WikiName auto-linking
  $nowikiname = 1;

動画ファイルの埋め込み†

対象ファイル名：plugin/tinyvideo.inc.php

• 下記のコードをコピーして、plugin ディレクトリに tinyvideo.inc.php というファイル名で保存する
  （1.5.2 で使用しているモジュールをコピーしても可）
  

  <?php
  /*
  PukiWiki - Yet another WikiWikiWeb clone.
  tinyvideo.inc.php, v1.01 2020 M. Taniguchi
  License: GPL v3 or (at your option) any later version
  
  videoタグを出力するPukiWiki用プラグイン。
  videoタグの全ての属性や複数source指定には対応しない簡易的なもの。
  PukiWiki 1.5.2／PHP 7.3 で動作確認済み。
  
  【使い方】
  #tinyvideo(動画ファイルURL[,幅 高さ][,ポスター画像ファイル名][,controls][,loop][,muted][,autoplay])
  &tinyvideo(動画ファイルURL[,幅 高さ][,ポスター画像ファイル名][,controls][,loop][,muted][,autoplay]);
  
  【引数】
  動画ファイル名         … 再生する動画ファイル（拡張子 mp4,mov,ogg,webm 等）
  幅 高さ                … 表示サイズ指定（単位：px）、指定なしなら幅100%・高さ自動
  ポスター画像ファイル名 … 再生前に表示したい画像ファイル（拡張子 jpg,jpeg,png,gif,webp）※1
  controls               … 操作パネル表示 ※2
  loop                   … ループ再生
  muted                  … 音声ミュート
  autoplay               … 自動再生 ※3
  
  ※1 ブラウザー／バージョンによっては再生前に何も表示されないことがあるため、ポスター画像の指定を推奨します。
  ※2 ブラウザー内蔵の標準操作パネル。デザインはブラウザーにより異なります。
  ※3 実際に自動再生されるかはブラウザーに依存します。特にスマートフォンでは条件が厳しく、常に不可だったり、mutedが必須になるなど。くわしくは「HTML5 videoタグ」等でググって情報収集してください。
  
  【使用例】
  &tinyvideo(/videos/sample.mp4,controls);
  &tinyvideo(/videos/sample.mp4,/images/sample.jpg,controls,loop,muted,autoplay);
  &tinyvideo(/videos/sample.mp4,320 240,controls);
  
  【CSS】
  スキンCSSにおいて、次のセレクターで当プラグインが出力するvideoタグを指定することができます。
  
  .plugin-tinyvideo
  
  */
  
  function plugin_tinyvideo_convert() {
      list($file, $args[0], $args[1], $args[2], $args[3], $args[4], $args[5]) = func_get_args();
      return plugin_tinyvideo_makeVideoTag($file, $args);
  }
  
  function plugin_tinyvideo_inline() {
      list($file, $args[0], $args[1], $args[2], $args[3], $args[4], $args[5]) = func_get_args();
      return plugin_tinyvideo_makeVideoTag($file, $args);
  }
  
  function plugin_tinyvideo_makeVideoTag($file, $args) {
      static $argNames = array('controls', 'loop', 'muted', 'autoplay');
  
      $attr = ' playsinline';
      $size = 'width="100%" height="auto"';
      $poster = '';
  
      foreach ($args as $v) {
          $v = trim($v);
          if (in_array(strtolower($v), $argNames)) {
              $attr .= ' ' . $v;
          } else
          if (preg_match('/^.+\.(jpe?g|png|gif|webp)$/', $v) == 1) {
              $poster = ' poster="' . htmlspecialchars($v) . '"';
          } else
          if (preg_match_all('/\d+/', $v, $match) == 2) {
              $size = 'width="' . (int)$match[0][0] . 'px" height="' . (int)$match[0][1] . 'px"';
          }
      }
  
      return '<video class="plugin-tinyvideo" ' . $size . $poster . $attr . '><source src="' . htmlspecialchars($file) .'"/></video>';
  }
  ?>

• 使用上の注意点
  • ファイルは絶対パスのURLで指定する。
• 参考サイト　自作プラグイン/tinyvideo.inc.php

Site adminの表示†

対象ファイル名: pukiwiki.ini.php

• サイト管理者の表示を変更
  ・122行目 変更 $modifier = 'Masahiro Izutsu';
  

  // Site admin's name (CHANGE THIS)
  $modifier = 'Masahiro Izutsu';

  ・125行目 変更 $modifierlink = 'http://izutsu.aa0.netvolante.jp/';
  

  // Site admin's Web page (CHANGE THIS)
  $modifierlink = 'http://izutsu.aa0.netvolante.jp/';

ページトップボタンを設置†

ページの途中から最初に戻るボタンを配置する
【jQuery不使用】PukiWikiにページトップボタンを設置する！

対象ファイル名: skin/pukiwiki.skin.php

• 「最初に戻る」ボタンの設置
  ・90行目の下あたり<body>タグの下に追加

  <body onload="prettyPrint();">
   <!-- TopPage Button -->
   <img id="page-top-button" src="<?php echo IMAGE_DIR . 'page-top-button.png' ?>">
   <script type="text/javascript" src="skin/page-top-button.js"></script>

  
  対象ファイル名: skin/pukiwiki.css
  
  ・最後に追加
  

   /* ページ本体の画像のレスポンシブ設定 */
   div#body img {
       max-width: 100%;                    /* 幅の最大値を100％指定 */
       height: auto;                       /* 縦は幅により自動設定 */
   }
   
   #page-top-button {
       position: fixed;                    /* 固定表示 */
       right: 20px;                        /* 右から20ピクセル（任意の位置に設定） */
       bottom: 60px;                       /* 下から60ピクセル（任意の位置に設定）*/
       transition: opacity 1s;             /* 透過変化時間（1秒） */
       opacity: 0;                         /* 透過（非表示） */
   }
   
   #page-top-button.fadeIn {
       position: fixed;                    /* 固定表示 */
       display: block;                     /* ブロック表示 */
       right: 20px;                        /* 右から20ピクセル（任意の位置に設定） */
       bottom: 60px;                       /* 下から60ピクセル（任意の位置に設定）*/
       outline-style: none;                /* アウトライン非表示 */
       box-shadow: none;                   /* 影表示なし */
       cursor: pointer;                    /* ポインタカーソル設定 */
       z-index: 9999;                      /* Zオーダで最上位に設定 */
       transition: opacity 1s;             /* 透過変化時間（1秒） */
       opacity: 0.8;                       /* 非透過80％ */
   }
   
   #page-top-button.fadeIn:hover {
       transition: opacity 1ms;            /* 透過変化時間（0.001秒） */
       opacity: 1;                         /* 非透過100％ */
   }

  ・skin/page-top-button.js を追加（内容は参考サイトから）
  　パーミッションは「644」
  ・image/page-top-button.png を追加（内容は参考サイトから）
  　パーミッションは「644」
  

ページ下部のアイコン表示†

ログイン時のみ表示するように変更。
対象ファイル名: skin/pukiwiki.skin.php

• ページ編集アイコンの表示
  ・238,271 行目あたりに2行追加 >変更後(//2025.09.28 2か所) ↓↓
  

  function _toolbar($key, $x = 20, $y = 20){
      $lang  = & $GLOBALS['_LANG']['skin'];
      $link  = & $GLOBALS['_LINK'];
      $image = & $GLOBALS['_IMAGE']['skin'];
      if (! isset($lang[$key]) ) { echo 'LANG NOT FOUND';  return FALSE; }
      if (! isset($link[$key]) ) { echo 'LINK NOT FOUND';  return FALSE; }
      if (! isset($image[$key])) { echo 'IMAGE NOT FOUND'; return FALSE; }
  
      echo '<a href="' . $link[$key] . '">' .
          '<img src="' . IMAGE_DIR . $image[$key] . '" width="' . $x . '" height="' . $y . '" ' .
              'alt="' . $lang[$key] . '" title="' . $lang[$key] . '" />' .
          '</a>';
      return TRUE;
  }
  ?>
  <?php if ($enable_logout) { //2025.09.28 ?>
   <?php _toolbar('top') ?>
  
  <?php if ($is_page) { ?>
   &nbsp;
   <?php if ($rw) { ?>
      <?php _toolbar('edit') ?>
      <?php if ($is_read && $function_freeze) { ?>
          <?php if (! $is_freeze) { _toolbar('freeze'); } else { _toolbar('unfreeze'); } ?>
      <?php } ?>
   <?php } ?>
   <?php _toolbar('diff') ?>
  <?php if ($do_backup) { ?>
      <?php _toolbar('backup') ?>
  <?php } ?>
  <?php if ($rw) { ?>
      <?php if ((bool)ini_get('file_uploads')) { ?>
          <?php _toolbar('upload') ?>
      <?php } ?>
      <?php _toolbar('copy') ?>
      <?php _toolbar('rename') ?>
  <?php } ?>
   <?php _toolbar('reload') ?>
  <?php } ?>
   &nbsp;
  <?php if ($rw) { ?>
      <?php _toolbar('new') ?>
  <?php } ?>
   <?php _toolbar('list')   ?>
   <?php _toolbar('search') ?>
   <?php _toolbar('recent') ?>
   &nbsp; <?php _toolbar('help') ?>
   &nbsp; <?php _toolbar('rss10', 36, 14) ?>
  <?php } //2025.09.28 ?>
  </div>
  <?php } // PKWK_SKIN_SHOW_TOOLBAR ?>

「codeprettify.inc.php」プラグインを導入†

ソースコードの表示が簡単になるプラグインを入れる。(google-code-prettifyを利用してソースコードをハイライト表示)

• 参考サイト
  
  • 「pukiwiki.codeprettify.inc.php」
  • Google Code Prettifyでソースコードを読みやすく色分けする
    
  • Google Code Prettifyダウンロード
    

• インストール手順（1.5.2 で使用しているモジュールをコピーしても可）
  
  1. pukiwiki.codeprettifyをダウンロードする
     
  2. ファイルを解凍し、codeprettify.inc.phpをpluginフォルダの下に配置する
     
  3. google-code-prettifyをダウンロードする
     smallがついてるのはコメントや改行などを縮小化したバージョンで機能的にはどちらも同じ、small をダウンロード。
     
  4. google-code-prettifyのファイルを解凍し、下記ファイルをskinフォルダの下に置く
     

     prettify.css
     prettify.js

     「prettify.css」の中の list-style-type:none を list-style-type: decimal に変更しておく。(1行ごとに行番号を表示)
     
  5. skin/pukiwiki.skin.phpファイルを編集し、google-code-prettifyのcssファイルとjsファイルを追加する
     ● 78行目あたりに下記を追加
     

      <link href="skin/prettify.css" rel="stylesheet" type="text/css" charset="utf-8"/>
      <script src="skin/prettify.js" type="text/javascript" charset="utf-8"></script>

     さらにbodyタグを変更する
     

      <body onload="prettyPrint();">

  6. 複数行の引数を有効にする
     pukiwiki.ini.phpを編集し、PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACKのdefineを探して、値を0にする
     ● 56行目あたり
     

     define('PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK', 0); // 1 = Disabled

• 使い方
  
  • ブロック型
    

    #codeprettify{{
    <?php
    echo 'test';
    ?>
    }}

  • インライン型
    

    &codeprettify{<?php echo 'test'; ?>};

  • cssクラスの追加
    codeprettifyプラグインでは関数の第一引数で追加するcssクラス指定ができる。
    

    #codeprettify(lang-html linenums:1){{

ページの一部を折り畳み表示†

「divregion.inc.php」プラグインを導入してページの一部を折りたためるようにする。

• 参考サイト
  
  • pukiwikiプラグイン/divregion

• インストール手順（1.5.2 で使用しているモジュールをコピーしても可）
  
  1. 上記サイトより「divregion.inc.php_1.1」「enddivregion.inc.php」をダウンロードする。
     
  2. 「divregion.inc.php_1.1」を「divregion.inc.php」に変更。
     
  3. 2つのファイルを UTF-8 に変更して保存したものを「plugin」フォルダにコピーする。
     
  4. 対象ファイル名: skin/pukiwiki.css の最後に追加する。
     

     div.divregion{
         background-color:#FF0000;
         color:gray;
         border:gray 1px solid;
     }
     div.divregion_contents{
         border-bottom: solid 1px #666e99;
     }
     div.divregion_h1{
         color:white;
         background-color:#666e99;
         padding:1px 4px;
     }
     div.divregion_h2{
         border-bottom: solid 1px #666e99;
         border-left: solid 10px #666e99;
     }

• 使い方
  divregion と enddivregion とで本文を挟み込むように記載する。
  

  #divregion(タイトル)
  本文
  #enddivregion

  上記記載により、以下のような表示となる。「タイトル」部分をクリックすることで、折り畳みが開閉される。
  
  ▼タイトル
  ▲タイトル
  本文

• パラメータ
  divregion には、以下のパラメータを使うことができる。
  
  • open, close
    折り畳みの初期状態を指定する。省略は「close」と同じ。
  • hstyle:xx タイトル行のスタイルを指定。「hstyle:h1」と書くと、「h1」指定と同じ意味になる。
    

    例
    #divregion(タイトル,hstyle:h1)
    本文
    #enddivregion

    ▼タイトル
    ▲タイトル
    本文
  • cstyle:xx 本文用のスタイルを指定。
    指定されたxxを利用して「div.divregion_contents_xx」のスタイルを適用する。
    
  • color:#xxxxx, background-color:#xxxxxx スタイルシート指定を無視して、タイトル部分の文字色/背景色を変更。
    xxxxxは16進（0-9,A-F)指定。「Red」などの文字指定はできない。
    

    例
    #divregion(タイトル,color:#FF0000,background-color:#dddddd)
    本文
    #enddivregion

    ▼タイトル
    ▲タイトル
    本文
  • content-color:#xxxxx, content-bgcolor:#xxxxxx スタイルシート指定を無視して、本文部分の文字色/背景色を変更。
    xxxxxは16進（0-9,A-F)指定。「Red」などの文字指定はできない。
    

    例
    #divregion(タイトル,content-color:#0000FF,content-bgcolor:#eeeeee)
    本文
    #enddivregion

    ▼タイトル
    ▲タイトル
    本文

faviconの設定方法†

• favicon.ico ファイルを用意しパスを設定する

対象ファイル名: skin/pukiwiki.skin.php

・16行目変更

$_IMAGE['skin']['favicon']  = 'image/favicon.ico'; // Sample: 'image/favicon.ico';

サイトアイコンの設定方法†

• apple-touch-icon-precomposed.png ファイルを用意して、wiki サイトフォルダに設置する。
  (image/ フォルダではうまくいかなかったので、Wikiルートに置く)
  

対象ファイル名: skin/pukiwiki.skin.php

・75行目追加

 <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

音声ファイルの埋め込み†

対象ファイル名：plugin/tinyaudio.inc.php

• 下記のコードをコピーして、plugin ディレクトリに tinyaudio.inc.php というファイル名で保存する。
  （1.5.2 で使用しているモジュールをコピーしても可）
  

  <?php
  /*
  PukiWiki - Yet another WikiWikiWeb clone.
  tinyaudio.inc.php, v0.01 2022 Masahiro Izutsu
  License: GPL v3 or (at your option) any later version
  
  audioタグを出力するPukiWiki用プラグイン。
  audioタグの全ての属性や複数source指定には対応しない簡易的なもの。
  PukiWiki 1.5.2／PHP 7.3 で動作確認済み。
  
  【使い方】
  #tinyaudio(音声ファイルURL[,controls][,loop][,autoplay])
  &tinyaudio(音声ファイルURL[,controls][,loop][,autoplay]);
  
  【引数】
  音声ファイル名         … 再生する音声ファイル（拡張子 mp3, wav 等）
  controls               … 操作パネル表示
  loop                   … ループ再生
  autoplay               … 自動再生
  
  【使用例】
  &tinyaudio(/audios/sample.mp3,controls);
  &tinyaudio(/audios/sample.mp3,controls,loop,autoplay);
  &tinyaudio(/audios/sample.mp3,controls);
  
  【CSS】
  スキンCSSにおいて、次のセレクターで当プラグインが出力するvideoタグを指定することができます。
  
  .plugin-tinyaudio
  
  */
  
  function plugin_tinyaudio_convert() {
      list($file, $args[0], $args[1], $args[2]) = func_get_args();
      return plugin_tinyaudio_makeAudioTag($file, $args);
  }
  
  function plugin_tinyaudio_inline() {
      list($file, $args[0], $args[1], $args[2]) = func_get_args();
      return plugin_tinyaudio_makeAudioTag($file, $args);
  }
  
  function plugin_tinyaudio_makeAudioTag($file, $args) {
      static $argNames = array('controls', 'loop', 'autoplay');
  
      $attr = '';
  
      foreach ($args as $v) {
          $v = trim($v);
          if (in_array(strtolower($v), $argNames)) {
              $attr .= ' ' . $v;
          }
      }
  
      return '<audio class="plugin-tinyaudio" ' . $attr . ' src="' . htmlspecialchars($file) .'"/></audio>';
  }
  ?>

• 使用上の注意点
  • ファイルは絶対パスのURLで指定する。

ページ下部の「添付ファイル一覧」を消す†

ログイン時のみ表示するように変更。
対象ファイル名: lib/html.php

• 編集時以外の不要表示を削除
  ・126,130 行目あたりの2行変更 変更後(//2025.09.28 2か所) ↓↓

      // List of attached files to the page
      $show_attaches = $is_read || arg_check('edit');
      $attaches = ($attach_link && $enable_logout && $show_attaches && exist_plugin_action('attach')) ? // 2025/09/28
          attach_filelist() : '';
  
      // List of related pages
      $related  = ($related_link && $enable_logout && $is_read) ? make_related($_page) : '';  // 2025/09/28

カスタマイズ動作確認†

• PukiWiki 1.5.4 カスタマイズ・テスト
  

PukiWiki 1.5.4 へのコンテンツ移行†

移行の前準備†

• 移行先で PukiWiki 1.5.4 カスタマイズ完了後のサイトを基本サイト「wiki_bs」として保存する
  

  $ cd /var/www/html
  $ sudo tar cvzf wiki_bs_XXXXXXXX.tar.gz wiki_bs

• 移行元のサイトのデータ・フォルダを保存する
  ・各サイト・フォルダで実行する「aippr」「pukiwiki」「wiki-boubi」「wiki-diy」
  

  $ cd /var/www/html/サイトのフォルダ名
  
  sudo tar cvzf attach_XXXXXXXX.tar.gz attach
  sudo tar cvzf backup_XXXXXXXX.tar.gz backup
  sudo tar cvzf cache_XXXXXXXX.tar.gz cache
  sudo tar cvzf diff_XXXXXXXX.tar.gz diff
  sudo tar cvzf image_XXXXXXXX.tar.gz image
  sudo tar cvzf wiki_XXXXXXXX.tar.gz wiki

移行先に新しく各サイトを構築†

1. 作業フォルダを作成する
   

   $ cd /var/www/html/
   $ mkdir temp

2. 作業フォルダに前準備で作成した「wiki_bs_XXXXXXXX.tar.gz」をコピーし解凍する
   

   $ cd /var/www/html/temp
   $ sudo tar xvzf wiki_bs_XXXXXXXX.tar.gz

3. 「wiki_bs」を各サイトのフォルダ名に変更する
   

   $ mv wiki_bs/各サイトのフォルダ名/

4. データ・フォルダを構成する
   ・フォルダを削除し移行元で保存したファイルと入れ替える
   

   $ cd /var/www/html/temp/各サイトのフォルダ名
   $ rm attach
   $ sudo tar xvzf attach_XXXXXXXX.tar.gz
   $ rm backup
   $ sudo tar xvzf backup_XXXXXXXX.tar.gz
   $ rm cache
   $ sudo tar xvzf cache_XXXXXXXX.tar.gz
   $ rm diff
   $ sudo tar xvzf diff_XXXXXXXX.tar.gz
   $ rm image
   $ sudo tar xvzf image_XXXXXXXX.tar.gz
   $ rm wiki
   $ sudo tar xvzf wiki_XXXXXXXX.tar.gz

5. トップページ名の変更

   $ sudo vi pukiwiki.ini.php

   ・128行目 例：$defaultpage = 'FrontPage'; → '各サイトのトップページ名'
   

   // Default page name
   $defaultpage  = 'FrontPage';     // Top / Default page

6. 各フォルダを正規の場所に配置する
   

   $ cd /var/www/html/temp
   $ mv aippr ../
   $ mv pukiwiki ../
   $ mv wiki-boubi ../
   $ mv wiki-diy ../

7. ブラウザで各サイトにアクセスして動作確認
   

忘備録†

コンテンツのバックアップ・サーバー移行†

• サイト「wiki_bs」バックアップ
  

  $ cd /var/www/html
  $ sudo tar cvzf wiki_bs_XXXXXXXX.tar.gz wiki_bs

• サイトの再構築
  

  $ cd /var/www/html
  $ sudo tar xvzf wiki_bs_XXXXXXXX.tar.gz

Ubuntu 環境設定 覚書†

• vi エディタの設定
  

  $ vi ~/.vimrc
  set number
  set nocompatible
  set backspace=indent,eol,start
  set expandtab
  set tabstop=4
  set shiftwidth=4
  set autoindent

  ・sudo 付きで vi を実行した場合は、root の設定が使用されるので、rootの .vimrcを ~/vimrc のシンボリックリンクにする
  
• vi エディタの設定
  

  $ sudo ln -s ~/.vimrc /root/.vimrc
  $ sudo ls -la /root
  合計 24
  drwx------  4 root root 4096  3月 31 19:07 .
  drwxr-xr-x 20 root root 4096  3月 31 17:29 ..
  -rw-r--r--  1 root root 3106 12月  5  2019 .bashrc
  drwx------  2 root root 4096  2月 10 03:51 .cache
  -rw-r--r--  1 root root  161 12月  5  2019 .profile
  lrwxrwxrwx  1 root root   19  3月 31 19:07 .vimrc -> /home/mizutu/.vimrc
  drwxr-xr-x  3 root root 4096  3月 31 17:33 snap

更新履歴†

• 2025/09/28 1.5.2「サイト構築 覚書」をもとに再構成