Q＆A/デザイン・CSS の履歴ソース(No.30)

RIGHT:&size(12){Category:[[Design>:Design]]};
*Q＆A/デザイン・CSS [#c724f33f]
:主なFAQ|PukiWikiのデザインやスキンの変更、CSSについてよくある質問

>下記のページも参考にしてください。
-[[カスタマイズ]]

#navi(Q＆A)
#contents

**メニュー（Menubar） [#ub313802]
***Q.　MenuBarが表示されない [#i7181279]
>''A.''　MenuBarというページ（1.4 系では、pukiwiki.ini.php の$menubar で設定したページ）を作成していますか？&br;このページがない場合は、MenuBarが表示される部分が空白になってしまいます。

***Q.　左サイドに表示される内容を変更したい [#uc041798]
>''A.''　左サイドに表示される内容は、MenuBarというページ（1.4 系では、pukiwiki.ini.php の$menubar で設定したページ）の内容そのものです。（[[menu プラグイン>PukiWiki/1.4/Manual/Plugin/L-N#vc24ce14]]で切り替えていない場合）&br;そのページを編集することで、表示される内容を変えることができます。
~表示の整形ルールに関しては、[[整形ルール]], [[プラグインマニュアル>PukiWiki/1.4/Manual/Plugin]], [[Q＆A/使い方]] などをご覧ください。


***Q.　FrontPageのみ左サイドにサブメニューをつけたい [#d6cb8217]
>''A.''
- PukiWiki 1.3系の場合
 if($vars['page'] == 'FrontPage') 
のような判定で振り分ければOKだと思います。~
pukiwiki.skin.ja.phpの60行あたりに以下のように追加してみて下さい。
 +<?php if($vars['page'] == 'FrontPage'){ ?>
 <td valign="top" style="width:120px;word-break:break-all;">
 <?php echo convert_html(@join('',@file(get_filename(encode('MenuBar'))))) ?>
 </td>
 <td style="width:10px">
 </td>
 +<? php } ?>
- PukiWiki 1.4系の場合~
pukiwiki.skin.ja.php(pukiwiki.skin.php) の110行目あたりを以下みたいな感じに
 <?php if (arg_check('read') and exist_plugin_convert('menu') 
 and $r_page == 'FrontPage') { ?>
あるいは、MenuBarというページを作らない事にして(強制したいなら削除した後に編集認証をかけて)、menuプラグインのサブメニューの機能を利用しましょう。(デフォルトでは無効)
- version 1.4.7の場合~
skin/pukiwiki.skin.phpの169行目
 <?php if (arg_check('read') && exist_plugin_convert('menu')) { ?>
を
 <?php if (arg_check('read') && exist_plugin_convert('menu') 
 && $_page === 'FrontPage') { ?>
とする。pukiwiki.ini.php で$defaultpage をFrontPage 以外に設定している場合は、
 <?php if (arg_check('read') && exist_plugin_convert('menu') 
 && $_page === $defaultpage) { ?>
とした方が便利。（変更するたびにスキンを修正する必要がなくなる）

***Q.　MenuBarの幅を変更したい [#cda794d0]
>''A.''　 skin/pukiwiki.skin.ja.php の60行目あたりにMenuBar のテーブルのスタイル定義
 td.menubar{width:135px;}
 div#menubar{width:130px;} 
があるのでこの部分を変更すればサイズを変更できます。

＊1.4.5 以降では、「skin/pukiwiki.css.php」が編集対象になるファイルになります。

***Q.　MenuBarを2つ設置したい [#mbc9ac4a]
>''A.''　サイトの左側だけ出なく、右側にもMenuBarを設置したい場合は、[[dev:BugTrack/430]]のページを参考にして下さい。


***Q.　ページ右側にもMenuBarがほしい [#f1aad26a]
>''A.''　[[続・質問箱/21]]

***Q.　編集や検索ページの全てのページにMenubarを表示させたい [#fe98e5cb]
>''A.''　こちらのページを参考にして下さい。~
[[dev:PukiWiki/1.4/ちょっと便利に/編集や検索ページでも常にMenubarを表示する]]


***Q.　ページを階層化していない状態で、includesubmenuプラグインのようにMenuBarの表示内容を切り替えたい [#xa2ec53b]
>''A.''　通常のメニューと切り替えたいページにmenuプラグインを設置して、引数に切り替えたいページを指定してください。


**編集ページ [#r87e9afa]
***Q.　編集ページのボタンの位置を変えたいのですが [#d5aced7b]
>''A.''　lib/html.phpの編集ページに関する部分を変更してください。


***Q.　編集時のテキストボックスの大きさを変えたい [#oe41fade]
>''A.''　default.ini.php　の以下の部分を変更してください。
 // テキストエリアのカラム数
 $cols = 60;
 // テキストエリアの行数
 $rows = 25;



**ページ [#sad98f3e]
***Q.　検索フォームをページ中に指定したい [#deb0db0d]
>''A.''　プラグインの「#search」を使うことで検索フォームを作ることが出来ます。
また「#lookup(検索,ケンサク)　と　InterWikiName」を組み合わせて擬似検索フォームを作ることができます。

 例　#lookup(検索,サイト内を検索)
 　　#lookup(Google,Googleで外部サイトを検索)
#lookup(検索,サイト内を検索)
#lookup(Google,Googleで外部サイトを検索)

&color(red){注意};: 1.4.5 以降のPukiWiki はデフォルトで、GET メソッドでの検索を禁止する設定になっています。この状態では、InterWikiName を組み合わせる方法がうまく働かなくなります（search プラグインを呼び出すだけになる）。
--参考: [[dev:BugTrack/796]]


***Q.　文字の横や下についている記号(&uarr;, &dagger;, ?)を変更したい（消したい） [#va05b554]
>''A.''　各言語設定ファイル（ja.lng.php, en.lng.php）の&br;$_msg_content_back_to_top, $_symbol_anchor, $_symbol_noexists を修正してください。
 $_msg_content_back_to_top = '<div class="jumpmenu"><a href="#navigator">&uarr;</a></div>';
 $_msg_word           = 'これらのキーワードがハイライトされています：';
 
 ///////////////////////////////////////
 // Symbols
 $_symbol_anchor   = '&dagger;';
 $_symbol_noexists = '?';
$_symbol_anchor は[[aname プラグイン>PukiWiki/1.4/Manual/Plugin/A-D#n9f7bab5]]を通して表示しているので、その制約を受けます。空文字を設定したい場合は、[[質問箱3/37]] を参照してください。
~なお、&amp;uarr; は↑ を、&amp;dagger; は† を意味するHTML エンティティです。
- 参考: [[質問箱3/37]], [[質問箱3/156]], [[質問箱4/42]], [[質問箱4/47]]


**スキン [#db039027]
***Q.　PukiWikiのロゴの画像を自分のサイトで使いたい [#cf293b70]
>''Q.続き''~
PukiWiki.orgのロゴ画像を自サイトのPukiWikiで使いたいのですが、使用許諾またはガイドラインなどは何処かに書いてありますか？

>''A.''　リンク画像については、PukiWiki-official及びPukiWiki開発サイトへのリンク用の画像としてご自由にお使いください。画像はできるだけご自分のサイトにコピーしてお使いください。なお、他の用途には使わないでください。


***Q.　PukiWikiの公式サイトのスキン・CSSを公開して欲しい [#m8135d33]
>''A.''　[[PukiWiki-official/仕様]]のページを参考にして下さい。またPukiWiki.org及び開発サイトで使用しているスキンは、リリース版やcvs版のスキンとは別物で、それぞれのサイトでカスタマイズしたものを使用しています。開発サイトで使用しているスキンは、開発サイトのページデザインで公開されています(但し、2002年8月時点のものなので、そのままでは使えません)。
- ''Reference'': [[続・質問箱/26]]


***Q.　印刷用ページの出力や対応スキンについて [#a73b635b]
>''A.''　印刷用スキンに関してはこちらのページをご覧下さい。
-[[dev:BugTrack/212]]
-[[dev:BugTrack/110]]
-[[dev:PukiWiki/1.4/ちょっと便利に/印刷用表示対応スキン]]
-[[dev:PukiWiki/1.4/ちょっと便利に/印刷用表示対応スキン2]]


***Q.　スキンにあるmetaのrobots、NOINDEX,NOFOLLOWはいったいなに [#f4c20725]
>''A.''　skin/pukiwiki.skin.ja.php(pukiwiki.skin.php) の
 <?php if (!$is_read) { ?>
 <meta name="robots" content="NOINDEX,NOFOLLOW" />
 <?php } ?>
この部分は、編集画面などを検索エンジンに登録させないために、編集画面などをロボットに巡回させないための設定になっています。
- 参考: [[SEO]], [[dev:BugTrack/785]]


***Q.　Last-modifiedの書式を日本語書式に変更したい [#q4aae2af]
>''A.''　表示される内容を変更する場合は、skin/pukiwiki.skin.php(pukiwiki.skin.php) の270行辺りの以下の部分を修正してください。
 <?php if ($lastmodified != '') { ?>
 <div id="lastmodified">Last-modified: ←ここ
 <?php echo $lastmodified ?></div>
 <?php } ?>

>日付などの順番の変更は、pukiwiki.ini.phpの280行辺りの以下の部分を修正してください。
 // Date format
 $date_format = 'Y-m-d'; 
 // Time format
 $time_format = 'H:i:s';
- 設定用パラメータの参考資料: [[PHP関数:date]]

***Q.　ページのタイトルの下にあるURLを表示させたくない [#cec2049a]
>''A.''　skin/pukiwiki.skin.phpの20行目当たりにある以下の部分を変更すると、&br;リロード用のURL 表示（http://pukiwiki.sourceforge.jp/?Q%EF%BC%86A%2F%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%BBCSS ）から、&br;[[topicpath プラグイン>PukiWiki/1.4/Manual/Plugin/S-U#vd55c067]]を用いた階層構造のユーザーインターフェース表示になります（Top / Q & A / デザイン・CSS のような表示）。
 // SKIN_DEFAULT_DISABLE_TOPICPATH
 //   1 = Show reload URL
 //   0 = Show topicpath
 if (! defined('SKIN_DEFAULT_DISABLE_TOPICPATH'))
 	define('SKIN_DEFAULT_DISABLE_TOPICPATH', 1); // 1, 0
>それすらも表示したくない場合は skin/pukiwiki.skin.phpの
 <?php if ($is_page) { ?>
  <?php if(SKIN_DEFAULT_DISABLE_TOPICPATH) { ?>
    <a href="<?php echo $link['reload'] ?>">
    <span class="small"><?php echo $link['reload'] ?></span></a>
  <?php } else { ?>
    <span class="small">
    <?php require_once(PLUGIN_DIR . 'topicpath.inc.php'); 
     echo plugin_topicpath_inline(); ?>
    </span>
  <?php } ?>
 <?php } ?>
の箇所を消去します。

***Q.　ページ下の関連リンク(Link:)の表示を消したい [#kc96a20f]
>''A.''　default.ini.php の $related_link の値を 0 にしてください。

***Q.　ページ下（フッター部）にある添付一覧(添付ファイル:)の表示方法を変更したい [#u56effd8]
>''A.''　[[ページに添付された一覧をフッター部に表示&#x5b;非表示&#x5d;にするには>Q＆A/プラグイン/attachプラグイン#s6929711]] や、[[フッター部の添付一覧の表示方法を変更するには>Q＆A/プラグイン/attachプラグイン#zbe8077c]] の各Q＆A をご覧ください。

***Q.　プラグインcounterやonlineをスキンに直接埋め込みたい [#k9c542c0]
>''A.''スキン自体にonlineを埋め込む場合は、skin/pukiwiki.skin.ja.php(pukiwiki.skin.php) に
 <?php if (is_page(':online')) { ?>
 <?php echo convert_html(get_source(':online')) ?>
 <?php } ?>
を記述してください。なお、counterの埋め込みは無理のようです。see [[質問箱/7]]

>簡単な方法は、MenuBarにプラグインcounterやonlineを記述すれば全ページでカウントを行うことが出来ます。以下をMenuBarに入れると便利です。
 RIGHT:today:&color(green){&counter(today);};
 RIGHT:yesterday:&color(green){&counter(yesterday);};
 RIGHT:total:&color(green){&counter;};
 RIGHT:online:&color(green){&online;};


***Q.　リスト構造における「+」のインライン要素の表示方法を変更したい [#jd6c09d8]
>''A.''　[[続・質問箱/3]]



**[[CSS]] [#dc7b0223]
***Q.　リンクの色を変えたい [#eb9a0205]
>''A.''　リンクの色を変更するときは、skin/pukiwiki.css.phpの下記の部分を変更してください。
 a:link { color:#215dc6; }

***Q.　見出しの表示色を変更したい [#x9ab52aa]
>''A.''　skin/pukiwiki.css.phpの以下の部分を変更してください。
 h1, h2 { background-color:#999; }


***Q.　横方向のスクロールバーを出ないようにサイトのページ幅を調節するには [#w4c72b75]
>''A.''　整形済みテキストなどで横スクロールバーが出て見難くならないようにしたい場合は、skin/pukiwiki.css.phpのCSSに以下のプロパティを追加すればよいでしょう。
 pre {overflow:auto;}


***Q.　スタイルシートを個別に指定したい [#d9af7915]
>''A.''　個別のページごとにスタイルシートをしたい場合は以下のプラグインを利用してください。
-[[skin.inc.php（PukiWiki Plus! 用）>plus:Plugin/skin.inc.php]]
-[[自作プラグイン/kisekae.inc.php]]


***Q.　表組み（テーブル）自体をページの右寄せ、左寄せ、中央寄せに変えたい [#ydaff3d8]
>''A.''　こちらのページを参考にして下さい。~
[[dev:PukiWiki/1.4/ちょっと便利に/テーブルの中央寄せor右寄せ]]

***Q.　カレンダーの横にテキストを回り込ませる方法は？ [#cf27dc82]
>''A.''　カレンダーを包んでいるdiv(またはtable)タグのCSSにfloat:leftを設定してください。

***Q.　凍結ページの背景色を設定したい [#e697f2b3]
>''A.''　[[続・質問箱/17]]

***Q.　PukiWiki で使っている、CSS のclass 名やid 名を知りたい [#t2975d2d]
>''A.''　[[dev:PukiWiki/CSSのclass一覧]] を参考にしてください