PHP関連/PukiWikiのSkinの変更

Top / PHP関連 / PukiWikiのSkinの変更

[ トップ ]   [ 編集 | 凍結解除 | 差分 | バックアップ | 添付 | リロード ]   [ 新規 | 一覧 | 単語検索 | 最終更新 | ヘルプ ]

PukiWikiのSkinの変更 †

デフォルトのままでも、良いのですが、やっぱりSkin(スキン)を変えて、
ただ設置しただけではないよ。としたほうが格好が良いです。

自分は、本家サイトに紹介されていたhirokasa.info simple3というSkinを
若干のカスタマイズをした上で、公開させていただきました。

スキンを変えるには、CSS(カスケードスタイルシート)の知識、htmlの知識が必要となります。
インターネット上には、CSSの解説や、htmlの解説をしてくれるサイトがたくさんありますので、
そこで勉強をするとよいでしょう。

hirokasa.info simple3のダウンロード †

なぜ、このskinにしようとおもったのかですが、３段組に対応していたからです。
あと、テーブルでWikiを構成していなく、CSSで構成しているからです。

無償で公開されているPukiWikiのSkinは、それほど多くは無いので、自分のセンスにあう
Skinを選択すると良いでしょう。

PukiWikiのサイトに行きます。　http://pukiwiki.sourceforge.jp/
スキンのアンカーをクリックします。

スキンのページにつきました。自作スキンのアンカーをクリックします。

PukiWiki用の自作スキンの配布ページにつきました。

ちょっとスクロールして、hirokasa.info.simple3のアンカーをクリックします。

Skinの作者のページにつきました。使用方法が記載されています。
パーミッションの話が書かれていますので、Unix系のOSをターゲットにしているようですが、
Windows版のPukiWikiでも問題なく動作します。

ちょっとスクロールして、ダウンロードのアンカーをクリックします。

配布ページにつきました。Simple3のアンカーをクリックします。

ファイルのダウンロードのダイアログが出ますので、保存のボタンをクリックします。

ここではデスクトップに保存します。

設置 †

設置の仕方は、このページの使用方法に書かれています。

というのは、不親切ですので、キャプチャして解説します。
キャプチャしているＯＳが変わったのはご愛嬌です。Windows2003 Serverです。
ダウンロードしたファイルを展開します。

設置したPukiWikiのskinのディレクトリに、展開したファイルの中にあるsimple3のディレクトリ
丸ごとコピーします。

展開したファイルにあった、5269676874426172.txtというファイルを、wiki/内に配置します。

展開したファイルにあった、simple3.phpというファイルを、PukiWikiのディレクトリに配置します。

パーミッションをいじり倒します。読み取り可能にしておきます。

気に入ったら、simple3.phpをindex.phpにリネームします。

カスタマイズ †

デフォルトだと、このような色使い、幅になります。

自分の場合、すでに作成していたコンテンツの絵の幅が広かったので、デフォルトのままでは
うまい具合にいかなかったので、いろいろなところをカスタマイズしました。
カスタマイズするには、simple3/pukiwiki.css.phpをいじります。

デフォルトとの差分は、以下のとおりです。

大まかに説明しますと、
①.全体的な色味を変更する。
②.Ｗｉｋｉの幅を変更する。
③.h3,h4の表示を変更する。
④.アンカーの色を変更する。
⑤.テーブルの表示方法を変更する。
⑥.何の設定でしょう？無意識の変更です。

--- C:/Apache/Apache2.2/htdocs/wiki/skin/simple3/pukiwiki.css.php   Sun Jan 25 19:01:53 2009
+++ C:/Documents and Settings/pulldown_simple3/pulldown_simple3/simple3/pukiwiki.css.php    Sun Jan 25 22:56:18 2009
@@ -46,7 +46,7 @@
    color: black;
    background-color: #494a41;
    background-image: url(bg.png);
-   font-size: 85%;
+   font-size: 90%;  ←⑥
    font-family:verdana, arial, helvetica, Sans-Serif;
    padding: 0px 0px 0px 0px;
    margin: 10px 0px 10px 0px;
@@ -59,9 +59,9 @@
 
 #wrap{
     color: #000000;
-    background-color: #ffffff;　←①
+    background-color: #fffff9;
     position:relative;
-    width:1200px;　　←②
+    width:970px;
     text-align:left;
     margin-left:auto;
     margin-right:auto;
@@ -75,15 +75,14 @@
 <?php  if ($media == 'print') { ?>
    text-decoration: underline;
 <?php  } else { ?>
-   color: #993300;　　←④
+   color: #583822;
    background-color: inherit;
    text-decoration: none;
-
 <?php  } ?>
 }
 
 a:active {
-   color: #ed6d35;　　　←④
+   color: #583822;
    background-color: #ccddee;
    text-decoration: none;
 }
@@ -92,21 +91,21 @@
 <?php  if ($media == 'print') { ?>
    text-decoration: underline;
 <?php  } else { ?>
-   color:#FF3333;　　　←④
+   color:#ea5532;
    background-color:inherit;
-   text-decoration: none;　←④
+   text-decoration:none;
 <?php  } ?>
 }
 
 a:hover {
    color: #ed6d35;
    background-color: #fff799;
-   text-decoration: underline;　←④
+   text-decoration: none;
 }
 
 h1, h2 {
    font-family:verdana, arial, helvetica, Sans-Serif;
-   color: #000000;　　←①
+   color: #0000cd;
    background-color: #e1ecd6;
    padding:.3em;
    margin:0px 0px .5em 0px;
@@ -114,21 +113,14 @@
 h3 {
    font-family:verdana, arial, helvetica, Sans-Serif;
    color: #0000cd;
-   border-bottom:  3px solid #e1ecd6;  ←③
-   border-top:     1px solid #e1ecd6;　　 ←③
-   border-left:   10px solid #e1ecd6;　　　←③
-   border-right:   5px solid #e1ecd6;　　　←③
-   color:inherit;　　　　　　　　　　　　　　　　　　　←③
-   background-color:#FFFFFF;　　　　　　　　　←③
+   background-color: #e1ecd6;
    padding:.3em;
    margin:0px 0px .5em 0px;
 }
 h4 {
    font-family:verdana, arial, helvetica, Sans-Serif;
-   border-left:   18px solid #e1ecd6;　　　　　←③
    color:#0000cd;
-   color:inherit;　　　　　　　　　　　　　　　　　　　　　←③
-   background-color:#FFFFFF;　　　　　　　　　　 ←③
+   background-color: #e1ecd6;
    padding:.3em;
    margin:0px 0px .5em 0px;
 }
@@ -143,7 +135,7 @@
 h1.title {
    font-size: 30px;
    font-weight:bold;
-   background-color: #739028;←①
+   background-color: #696969;
    color: #ffffff;
    padding: 12px 0px 0px 12px;
    border: 0px;
@@ -151,7 +143,7 @@
 }
  
 h1.title a {
-   background-color: #739028;　←①
+   background-color: #696969;
    color: #ffffff;
 }
 
@@ -202,6 +194,7 @@
 .style_table {
    padding:0px;
    border:0px;
+   margin:auto;　←⑤
    text-align:left;
    color:inherit;
    background-color: #6c3524;
@@ -227,7 +220,7 @@
 ol.list2 { list-style-type:lower-roman; }
 ol.list3 { list-style-type:lower-alpha; }
 
-div.ie5 { text-align:left; }　←⑤
+div.ie5 { text-align:center; }
 
 span.noexists {
    color:inherit;
@@ -363,7 +356,7 @@
 
 /* pukiwiki.skin.php */
 div#header {
-   background-color: #739028;　←①
+   background-color: #696969;
    color: inherit;
    padding: 0px 0px 0px 12px;
    margin: 0px 0px 0px 0px;
@@ -374,16 +367,16 @@
 }
 
 #head{
-    width:1200px;　←②
-    background-color:#739028;　←①
+    width:970px;
+    background-color:#696969;
     color:#ffffff;
     margin-left:auto;
     margin-right:auto;
     text-align:left;
-    border-top: 0px solid #739028; ←①
-    border-bottom: 2px solid #739028;　←①
-    border-left: 0px solid #739028;　←①
-    border-right: 0px solid #739028;　←①
+    border-top: 0px solid #0d0015;
+    border-bottom: 2px solid #0d0015;
+    border-left: 0px solid #0d0015;
+    border-right: 0px solid #0d0015;
 }
 
 div#navigator {
@@ -391,7 +384,7 @@
    display:none;
 <?php   } else { ?>
    clear:both;
-   background-color: #739028;　←①
+   background-color: #696969;
    color: inherit;
    padding:3px 0px 3px 0px;
    margin: 0px 0px 0px 0px;
@@ -403,7 +396,7 @@
 }
 
 div#navigator a {
-   background-color: #739028;　←①
+   background-color: #696969;
    color: #ffffff;
 }
 
@@ -546,7 +539,7 @@
    overflow: visible;
 <?php   } else { ?>
    float: left;
-   width: 840px;　←②
+   width: 615px;
    padding: 0px 0px 0px 0px;
    margin: 5px 0px 0px 0px;
    overflow:auto;
@@ -572,7 +565,7 @@
 }
 
 #foot{
-    width:1200px;　←②
+    width:970px;
     background-color: #efefef;
     color:#000000;
     border-top: 2px solid #739028;

適当にいろいろと試してみてください。
PukiWikiのプログラムが作成するhtmlファイルを見て、対応するCSSを調べるという
やり方をすれば、ほぼ思い通りの制御は可能だろうと思います。

以上です。

2010-07-09

• Salesforce関連/Workbook チュートリアル3
• Salesforce関連
• Salesforce関連/Workbook チュートリアル2

2010-07-08

• Salesforce関連/Mileage Trackerコンポーネントの削除
• Salesforce関連/Workbook チュートリアル1

2010-07-07

• Salesforce関連/Work

2010-06-29

• Salesforce関連/Metadata
• Salesforce関連/Web Services APIs(2)
• Salesforce関連/Apex APIs

2010-06-28

• DB関連/Oracle開発者ライセンス

• Java関連/Eclipse(x64)のダウンロード(9041)
• DB関連/OracleClientのダウンロード(Windows)(5576)
• DB関連/DBコーディング規約/DBネーミング規約(5542)
• Java関連/Javaコーディング規約/Javaネーミング規約(5500)
• DB関連/Oracle 11g R2のダウンロードとインストール(Linux版)その３(4945)
• DB関連/テーブル定義書(4917)
• DB関連/Oracle 11g R2のダウンロードとインストール(Linux版)その１(4855)
• 標準化/設計ドキュメントテンプレート(4662)
• DB関連(4469)
• Java関連(4332)
• Linux関連/TeraTermのダウンロードとインストール(4069)
• Java関連/Javaコーディング規約(3853)
• DB関連/Oracle 11g R2のダウンロードとインストール(Linux版)その２(3705)
• Java関連/SJC-WC(3620)
• DB関連/Oracle JDBCドライバーのダウンロードとインストール(Windows)(3606)
• DB関連/Oracle 11g R2のダウンロードとインストール(Linux版)その４(3309)
• DB関連/MySQL-JDBCドライバーのダウンロードとインストール(3135)
• 標準化/ドキュメントの種類(3087)
• Java関連/Eclipse(x64)-WTPのインストール(3061)
• Subversion関連/SVNサーバーのダウンロード(2899)

       

Last-modified: 2009-11-14 (土) 22:36:17 (299d)

Link: PHP関連(208d) FrontPage(287d)

Web Master: anonymous

PukiWiki 1.4.7 Copyright © 2001-2006 PukiWiki Developers Team. License is GPL.
Based on "PukiWiki" 1.3 by yu-ji. Powered by PHP 5.2.11. HTML convert time: 0.078 sec. skin simple3 by hirokasa with Google Analytics.