YonaretarLinuxWeb

Wikiを使って何かを公開する為のノウハウ / 見た目を変える 試行錯誤した詳細

この文章は、Wikiを使って何かを公開する為のノウハウ#zff346ba見た目を変えるの詳細です。

試行錯誤した詳細 †

すぐには、上手く行かなかった。 †

  • tDiary から、ずーっと試して行ったが、最初に文字の色が変わってレイアウトが少々おかしくなったくらいで、後はずっとそのまま変化しない。これは、キャッシュされているのが原因だと気付くまでに、しばらくかかった。
    css を上げて skin のページ等をクリックして添付とは違うページを表示させて、表示を変えても、css はブラウザーにキャッシュされたものだった。 表示が変わったのだから、キャッシュではないと思った事が罠だった。
    リロードが必要だった。
    これで、一応 css が反映される事は分かった。
  • しかし、作成されたものを適当に選んでそのまま使うのは、やはり表示がおかしくなる。

やっとやり方が分かってきた。 †

  • css と取り組むか、諦めようと思ったが、参考までにと WikiHouse の css をそのまま借りてきていじってみた。
    ソースを読むと、http://www.wikihouse.com/pukiwiki/skin/pukiwikiscreen.css に、表示用の css があるから、それをいじることにする。印刷用は別ファイルである事を一応注意しておく。
  • まずは、9行目の body の色を、white から Linen へ変えてみる。これを、添付してリロードする。 
    body,td {
	color:black;
	background-color:Linen;

本格的に、修正していく事にした。 †

  • あとは、tDiary.org - テーマギャラリー 等から気に入った配色のものを落としてきて css を覗いて参考にしながら、書き換えていく。
    どこの部分をいじればどこの色が変わるかについては、下記の参考情報にも上げてある、pukiwikiをいじくりまわす が、参考になった。
    公式のどこかに、もっとまとまった文章が有るのだろうが、見つからなかった。まあ、Wikiのスキンを作りたい訳では無いので、適当にやり過ごす。

  • 配色パターンは、サンプルから選ぶサイトも有った。URL下記
    基本的に gnome-terminal の配色で用いられている、tango を使う事にしたURL下記。
  • 読みやすい色の組み合わせをチェック出来るサイトが、参考になった。URL下記

手元で、作業する。 †

  • local に適当なページを test.html として保存し、local の css を読み込む様に、少し修正する。

    :config/preference/skinで、css を指定している(編集した時点では、15行目だった)箇所を、style.css に変更して、手元で簡単に試せるようにする。

    この行を、 
    <link rel="stylesheet" href="?plugin=attach&pcmd=open&file=style.css&refer=:config/preference/skin" type="text/css" media="screen" charset="Shift_JIS" />

    以下の様に style.css にする。 
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="Shift_JIS" />

    ドラッグして、もしくはファイルを開く事で、test.html をブラウザーに表示させてみる。

  • logo.gif も表示させてみる。 アンカータグを貼ると、ページの更新を受け付けてもらえないらしいので、省略した。

    この行を、 
    <img id="logo" src="?plugin=attach&pcmd=open&file=logo.gif&refer=:config/preference/skin" alt="LinuxWiki" />

    以下の様に logo.gif に変える。 
    <img id="logo" src="logo.gif" alt="LinuxWiki" />


アイコンなどを css で指定する †

  • skin ディレクトリーに置いて、url(FileName.png) 等と指定してもダメだった。 そこで、httpから全て指定すると成功した。
  • 結局、url(?plugin=attach&pcmd=open&file=FileName.png&refer=:config/preference/skin) とすれば良い事が分かった。
    httpから指定しなくても良い。refer=も必要。

その他に、工夫した所 †

  • preの幅が固定されて、ページ全体の横幅も固定されていたが、"white-space: pre-wrap;" とすると、折り返される。これにより、問題が解決された。

このサイトで作成した css について †

以上までで、css を編集していく際に気付いた事を書いたが、このサイトでの配色の事について、Wikiを使って何かを公開する為のノウハウ/見た目を変える 配色についてで書いておいた。Tango カラーパレットを使っています。

まとめ †

  1. config/preference/skin に css ファイルを添付する。
  2. css のリロードに注意
  3. http://www.wikihouse.com/pukiwiki/skin/pukiwikiscreen.css を元にしていじるやり方が簡単。
  4. local に html を保存し local の css を読む様に一部を修正して、css を修正していく。
  5. 画像などurlは、url(?plugin=attach&pcmd=open&file=FileName.png&refer=:config/preference/skin) などと指定する。refer=も必要。
  6. preに"white-space: pre-wrap;"とすると、折り返される。

参考情報 †

これらは、適当に検索して簡単に見つかったものなので、他に良いサイトが有るかもしれない。また、これらは、あまりじっくりと見ていない。

  • ここは、CSS の各部分について検討しているので、参考になった。
    CSS とか勉強しなくとも、始めの辺りの BODY 部分を参考にして色を変えて行ける様になった。
    しかし、このwiki自体がfirefox3.6 では画像が右側にはみ出てレイアウトが崩れていたのが残念。

    pukiwikiをいじくりまわす♪　pukiwikiのスキン変更
    http://mrs.suzu841.com/puki/


css 全般について †

  • 用語を調べた。ここの解説は役に立つ。フォントも読んだ。

    CSS 概説 | 背景と色
    http://msugai.fc2web.com/web/CSS/color.html
    inherit は、親要素の値を明示的に継承する指定

配色について †

フォントについて †

  • 実際にフォントを設定するに当たって、ここを参考にした。あまり詰めていないので、適当だが。
    各環境でどんな日本語フォントが使えるのか、まとめてある。

    フォントカタログ / もうパンツはかない
    http://rinrin.saiin.net/~aor/fonts/fonts
    標準の日本語フォント
    CSSで使われるフォント

  • 上のだけでは、分からなかったので Linux のフォント一覧を探してみた。

    Linuxフォントカタログ - 血統の森 web実験小屋
    http://momdo.s35.xrea.com/web-html-test/linux-fonts/
    Linux標準の日本語フォント
    Linux標準全フォント一覧

その他 †

  • preの幅が固定されて、ページ全体の横幅も固定されていたが、"white-space: pre-wrap;" で、問題が解決された。

    [ CSS ] pre でも改行を生かしたまま折り返す | Bowz::Notebook
    http://bowz.info/409

  • ここでは、レンタルサーバーにインストールして、カスタマイズする手順が示されている。イラストが入っていて、パソコン初心者向けの雰囲気だが良く書けていそうだ。今ならubuntuを選択する方が良いだろう。

    Wikiでつくる　かんたん　ホームページ
    http://wiki-hp.com/wiki6-01.html

  • ここでは、css から php を除いてブラウザーのキャッシュを有効にし、高速化を図る事が述べられていた。WikiHouseでは CSS のみ編集して設置可能で、PHPを読み込んでくれなさそうなので、情報のみ挙げておく。
    レンタルサーバーで使用する際も、下手にいじるとレイアウトが崩れたり、不具合の元になるかもしれないので、情報を集めてから検討する。

    PukiWiki/負荷軽減・高速化/スタイルシート - Revulo's Laboratory
    http://www.revulo.com/PukiWiki/Cache/CSS.html

目次

#includex(): Page index is already included.

最新の5件

2011-06-06 2011-06-30 2011-06-09

今日の1件

  • Wikiを使って何かを公開する為のノウハウ/見た目を変える 試行錯誤した詳細(1)

  • counter: 199
  • today: 1
  • yesterday: 0
  • online: 1
 
 
クリエイティブ・コモンズ・ライセンス

この作品で特に断っていたり引用していないものは、クリエイティブ・コモンズ表示 3.0 非移植ライセンスの下に提供されています。
Copyright (C) 2011 Yo Naretar