Pukiwikiのcssについて

2020/02/07 23:22 Pukiwiki

v1.5.2について

skin/pukiwiki.cssを編集します。

v1.5.1について

skin/pukiwiki.css.phpを編集します。

スマホ対応について

基本的なこと

Pukiwikiをカスタマイズしよう、と思う人は、cssを自分で書くくらいスキルが高い方がほとんどだと思いますが、ごく基本的なことから書きたいと思います。（自分が忘れないために）
HTML文書の基本構造は、以下のようになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タイトル</title>
</head>
<body>本文</body>
</html>
レスポンシブル化する場合は
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>タイトル</title>
</head>
<body>本文</body>
</html>
とhead内に、ビューポートタグを記載します。
これをPukiWikiに合わせてレスポンシブル化すると、skin\pukiwiki.skin.phpに
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=<?php echo CONTENT_CHARSET ?>" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
と記載することになります。

cssの組み込み方

HTML文書にcssを組み込む場合です。style.cssというファイルにスタイルが記載されているとします。これを
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>タイトル</title>
<link rel="stylesheet" href="style.css">
</head>
<body>本文</body>
</html>
のように指定します。cssファイルは複数に分かれて記載されても大丈夫です。
これをpukiwikiの仕様に合わせると、新たにスマホに対応したレイアウトを記載したpukiwikirspnfsv.cssを組み込むので、skin\pukiwiki.skin.phpに
 <link rel="manifest" href="/favicons/manifest.json">

 <link rel="stylesheet" type="text/css" href="<?php echo SKIN_DIR ?>pukiwiki.css" />
 <link rel="stylesheet" type="text/css" href="<?php echo SKIN_DIR ?>pukiwiki-rspnsv.css" />
のように記載します。
PukiWiki1.5.2をレスポンシブデザインに変更する！

こちらのサイトのやり方では、div#menubarとdiv#bodyが、オリジナルだとtableで定義されているのを解消して、この２つをdiv#contentに含むように再編して、div#contentをスマホ対応用に操作しています。ページの構造がskin/pukiwiki.skin.phpに定義されているので、そこを書き換えています。どうやって書き換えるのかは上記サイトをしっかり読んで頂くとして、右サイドバーにするには、skin/pukiwiki.skin.phpの対応部分を
<?php if ($menu !== FALSE) { ?>
<!-- ボディ部の構成を変更 -->
<div id="contents">
    <div id="body"><?php echo $body ?></div>
    <div id="menubar"><?php echo $menu ?></div>
</div>
<?php } else { ?>
<div id="body"><?php echo $body ?></div>
<?php } ?>
と変更します。div#bodyとdiv#menubarの順番を入れ替えるだけです。あとは上記サイト記載の通りに作業していくと、右サイドバーのPukiwikiスマホ対応版が作成されます。

pukiwiki-1.5.2_utf8_green.zip
サンプルをダウンロードして頂けます。ご利用は自己責任でお願いします。デザインのサンプル。

本体の幅が固定されている場合

ここでいう「本体」とは、div#bodyのことではなくて、htmlにおけるbodyのことです。ちょっとややこしいですが、ページの中で内包する順番は
body > div#content > div#body + div#menubar
となります。bodyはノートの「全体部分」、div#contentはノートの中で「書き込みができる部分」という感じになります。ノートの範囲を超えて、ノートを書くことはできませんから、div#contentはbodyと同じ幅か、それよりも狭い幅となります。bodyの幅はcssで指定します。
デフォルトのPukiwikiでは、bodyの定義は、skin/ｐukiwiki.cssに記載されています。これがtdと同じ構造で、記載されていて幅の指定がありません。この場合、PCではブラウザの幅一杯にページ内容が記載されることになります。
bodyの幅を指定する場合は、cssのbody部分に
body {
 　  margin: 0 auto;
     width: 950px;
}
のように記載します。「margin: 0 auto;」とすると、ページの中央にbodyの内容を表示することができます。これをレスポンシブル化する際には
body {
 　  margin: 0 auto;
     max-width: 950px;
}
とします。こうすると、幅は950pxに固定されず、「最大の幅」が950pxとなります。だいたいPCでは950px以上の幅でブラウザを見ている人が多いと思いますので、一見したレイアウトは幅を可変に指定しても特に変わりません。

skin/pukiwiki-rspnsv.cssについて

このファイルは、デフォルトのskin/pukiwiki.cssをなるべく改変しないで済むように設計されたものです。ですので、その内容をpukiwiki.cssに直接書き込んで組み込んでしまっても、結果的には問題がありません。
@charset "utf-8";

/* PukiWikiレスポンシブ設定 */

/* コンテンツ（メニューバー＋ページ本体）全体 */
div#contents {
    display: table;                     /* 表示をテーブル（TABLE要素）同様にする */
    table-layout: fixed;                /* テーブル列幅固定 */
    border-spacing: 5px; 0;             /* 隣接セル間隔：左右8ピクセル */
    width: 100%;                   /* 幅100％ */
}

/* メニューバー*/
div#menubar {
    display: table-cell;                /* 表示をテーブルセル（TD要素）同様にする */
    vertical-align: top;                /* 上端揃え */
    width: 170px;                       /* 幅105ピクセル（オリジナルとほぼ同様サイズ：任意の数字） */
}

/* ページ本体 */
div#body {
    display: table-cell;               /* 表示をテーブルセル（TD要素）同様にする */
}

/* 低解像度（スマホ等）メディアクエリ */
@media (max-width: 800px) {             /* 横幅800ピクセル以下のデバイス */
    div#contents {
        display: table;                 /* 表示をテーブル（TABLE要素）同様にする */
        table-layout: fixed;            /* テーブル列幅固定 */
        border-spacing: 5px; 0;         /* 隣接セル間隔：左右8ピクセル */
        width: 100%;                    /* 幅100％ */
    }

    
        div#menubar {
        display: table-footer-group;    /* 表示をテーブルフッタ（TFOOT要素）同様にする */
        width: 100%;                    /* 幅100％ */
    }
        div#body {
        display: table-row-group;       /* 表示をテーブルボディ（TBODY要素）同様にする */
        width: 100%;                    /* 幅100％ */
    }
    

}

/* ページ本体の画像のレスポンシブ設定 */
div#body img {
    max-width: 100%;                    /* 幅の最大値を100％指定 */
    height: auto;            
｝
これは私が使用しているpukiwiki-rspnsv.cssです。メニューバーは固定で170pxとし、div#bodyでは指定をしません。これでスマホ対応のpukiwikiが完成しました。

pukiwiki-1.5.2_utf8_green_colorful.zip
サンプルをダウンロードして頂けます。ご利用は自己責任でお願いします。デザインのサンプル。

v1.5.1への応用編

　v1.5.1では、cssはskin/pukiwiki.css.phpに記載されていますので、pukiwiki-rspnsv.cssの内容をskin/pukiwiki.css.phpの該当部分に書き込みます。div#menubarの前辺りにdiv#contentsを加えます。
div#menubarの
display:none;
を
display:table-cell;
と修正し、
    vertical-align: top; 
    width: 170px;
を付け加えます。
div#bodyに
    display: table-cell;
を付け加えます。また、div#menubarとdiv#boddyの幅を%で指定します。
そして、pukiwiki.css.phpの最後に
@media (max-width: 800px) {             /* 横幅800ピクセル以下のデバイス */
    div#contents {
        display: table;                 /* 表示をテーブル（TABLE要素）同様にする */
        table-layout: fixed;            /* テーブル列幅固定 */
        border-spacing: 7px; 0;         /* 隣接セル間隔：左右8ピクセル */
        width: 100%;                    /* 幅100％ */
    }

div#menubar {
<?php   if ($media == 'print') { ?>
	display:table-footer-group;
	vertical-align: top;
	width:100%;
<?php   } else { ?>
	padding:0px 5px 5px 5px;
	margin:0px 5px 0px 0px;
	background-color:#e0ebaf;
	border-radius: 5px;
	word-break:break-all;
	font-size:14px;
	overflow:hidden;
<?php   } ?>
}
   
div#body {
        display: table-row-group;       /* 表示をテーブルボディ（TBODY要素）同様にする */
        width: 100%;                    /* 幅100％ */
    }
}

/* ページ本体の画像のレスポンシブ設定 */
div#body img {
    max-width: 100%;                    /* 幅の最大値を100％指定 */
    height: auto;            
}
を私の場合は書き加えています。
このやり方だと、編集画面や差分画面でレイアウトが崩れます。それでも良ければ、お試し下さい。

url短縮について

URL短縮ライブラリを組み込んでURLを短くしています。

PukiWikiのクソ長いURLをURL短縮ライブラリを組み込んで解決する！

を利用しました。