日本語Codexのサイトデザイン
9月末の緊急メンテナンスの関係で、現在、日本語CodexのサイトデザインがMediaWikiのデフォルトスキン「Vector」となっています（詳細）。
ウィキペディアで使われていてみなさん見慣れていそうなので、必要な箇所だけ手を入れるのでもいいかなーと思うのですが、どうでしょう。
大幅に変えた方がいい箇所とかありますか？
タグ: Codex メンテナンス コメントスレッドの表示切替 | キーボードショートカット
-
ぼの
-
Naoko Takano
ユーザーの方から、iPhone Safari で Codex サイトがカラム落ちしてしまうとの指摘がありました。
ところで http://codex.wordpress.org/ もリニューアルしてフォーラムの方は日本語版も刷新されています。新テーマのテンプレに合わせていったほうがいいでしょうか？現在のテンプレは、どこかのをベースにしていたんでしたっけ。
-
Fumito Mizuno
公式サイトと同じスタイルのテーマを利用したほうが、公式ページだと認識しやすいと思います。ただし、wiki に適用するのが大変なら今のままでもいいと思います。
-
ぼの
Naoさん、Mizunoさん、ありがとうございますー。
今回は取り急ぎ、現行のスキンのiPhone対応だけさせてもらえたらありがたいです（事情は後ほど）。
＞iPhoneをお持ちの方
日本語Codexにログインして、オプション設定の「外装」で「MonoBook」に切り替えるとどうなるか、確認していただくことはできますか？
また、CSSのどこをどう直したらよいかお分かりになりますか？
iPhoneを持っていないのでFirefoxのFireMobileSimulatorで見てみたのですが、サイドバーが落ちなくて。。。
-
Naoko
ぼのさんどうもですー。スタイル変更が大変なようなら、今のままでもいいと思います。ja.wordpress.org とは統一してますしね。
あ、MonoBook スキンベースだったのですね。テストしてみましたが、切り替えてもやっぱり落ちました。ちなみに、Modern、Simple、ケルンブルー、標準 も2カラムですが、これらは大丈夫。
シュミレーターで見るときウィンドウ幅を狭くしてみたらどうなりますか？ちょっと見てみますね。こんなのを発見。
http://www.mediawiki.org/wiki/Mobile_browser_testing#Issues_2General layout and sizing are not very convenient with the stock MonoBook skin, but MediaWiki is fully functional.
で、こちらも。
http://en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_7#iPhone_compatibilitybody { -webkit-text-size-adjust:100%; }って追加してみてもらえますか？
-
-
-
ぼの
それか、いっそのこと、モバイル用スキンを入れてみます？
http://www.mediawiki.org/wiki/Simple_mobile_skin_auto_change
http://www.mediawiki.org/wiki/Manual:Gallery_of_user_styles#WPtouch-
Naoko
お、WPTouch が MediaWiki 用にもあるんですね！
これもいいかもー。-
ぼの
WPTouch、試しに入れてみました。
オプションで切り替えられます。Codexのバージョンで上手く動くか分からないのですけど、どうかな。。
-
Naoko
どうもですー。動いてるっぽいですが、タイトルに表示されてる画像がないみたい。
あと、切り替えちゃうとパソコンからもこのスキンになっちゃって、ユーザー設定とかへのリンクが無くなってしまいました 😛
スクリプトか何かでUserAgentごとに変えたりできるとうれしいです。注文多くてごめんなさい (> <)
-
ぼの
確認ありがとうございますー。 🙂
あと、切り替えちゃうとパソコンからもこのスキンになっちゃって、ユーザー設定とかへのリンクが無くなってしまいました 😛
スクリプトか何かでUserAgentごとに変えたりできるとうれしいです。iPhineからは、オプション設定とかにアクセスできますか？
問題がないようだったら、UAで切り替わるようにしてみますね。
-
Naoko
iPhone からアクセスしても同じで、ユーザー設定へのリンクがないですー。
デフォルトスキンについて。shared.css に追加CSSが書かれているのは確認したんですが、これをさらに上書きしているCSSのルールに影響を受けているのかもしれません。リンクしているサンドボックスのページは、body の下に div を入れて、そこにCSSをインラインで直描きしてあります。 -
ぼの
この右側みたいに出ないってことですよね。
やっぱMWバージョンが合わないのかなー、残念。
WPTouchスキンを削除してデフォルトに戻せるようにしますね。インラインCSSの方、やってみます。
-
Naoko
お！矢印のあるあたりをクリックしたらドロップダウンでてきました。矢印画像がないけど機能は動いている模様です。
-
ぼの
やった！わぁーい、ありがとうありがとう！
WPdocsスキンのインラインCSSの方は、サンドボックスのとHTML構造が違うみたいなので、とりあえず body タグに
-webkit-text-size-adjust:100%;を入れてみました。
ここじゃだめかな。。これで直らなかったら、取り急ぎUA切り替えで、WPTouchスキンか問題のなかった「Modern、Simple、ケルンブルー、標準」のどれかで見られるようにしておきましょうか。
- むしろWPdocsよりも見やすそうな気も。。。(^-^;
-
Naoko
すみません、テストページを作ってちゃんと見たら（汗）分かったのですが、どうも原因は KHTMLFiles.css にあるようです。これへのリンクを外せば、ほかはまったくそのままでもカラム落ちしません。
このスキンのことはよく知らないのですが、古いバージョンの Webkit 対応だとしたら、なくてもいい？WPTouch ですが、ひとつだけ。縦長画面で見たらメニューが横に入りきらなくて「個人用ツール」タブが「目次」の列と重なってしまうようです。
でも確かにシンプルでなかなか見やすく、良いですねー。
-
ぼの
Naoさんありがとう～～。よくここまで突き止められましたね。。。！
・KHTMLFiles.css へのリンクを外しました。
・common/shared.css と bodyタグに入れた-webkit-text-size-adjust:100%;を削除しました。この状態でいかがでしょう。。
参考までに最近のMWバージョンも見てみたのですけど、KHTMLFiles.css ファイルやこの定義は見当たりませんでした。おっしゃるように、もう必要がなくなったコードなのかなと思います。
-
-
ぼの
あと、Naoさんお一人に頼ってしまって申し訳ないと思って、Twitterでご相談したところ、
おでこ、wokamoさん、ひかげさんが表示を確認してくださいました（感謝！）。
教えてもらったことを書いておきます（11/2午後（日本時間）時点）。WPdocsスキン
common/shared.css と bodyタグに-webkit-text-size-adjust:100%;を追加した状態iPhone おでこ： ○
http://twitter.com/#!/odyssey/status/29443759401
iPhone Opera Mini おでこ：○
http://twitter.com/#!/odyssey/status/29445816657BlackBerry wokamotoさん
http://twitter.com/#!/wokamoto/status/29443863551
Opera Mini： ○
http://twitter.com/#!/wokamoto/status/29444014479
BlackBerry 標準ブラウザ： ○
http://twitter.com/#!/wokamoto/status/29444290317タッチ4（OS4.1）ひかげさん：×
http://twitter.com/#!/hikage/status/29444327185
タッチ3（OS4.1）ひかげさん：×
http://twitter.com/#!/hikage/status/29444538552
横向きもダメ
http://twitter.com/#!/hikage/status/29445282162
Safariの設定でJavaをオフ： ○
http://twitter.com/#!/hikage/status/29445877142タッチ3 Opera ひかげさん：○
http://twitter.com/#!/hikage/status/29444602712
タッチ4 Opera ひかげさん：○
http://twitter.com/#!/hikage/status/29445128642アンドロイド おでこ：○
http://twitter.com/#!/odyssey/status/29445203809
（落ちないけど見づらそう(^^;）WPtouchスキン
BlackBerry wokamotoさん
標準ブラウザ： ×メニュー
右上隅クリックしても変化なし。たぶん、JSエラー。
http://twitter.com/#!/wokamoto/status/29444816850
Opera Mini：○メニュー表示
http://twitter.com/#!/wokamoto/status/29444865526iPhone4 Javaオン おでこ：
サーチ○、メニュー×
http://twitter.com/#!/odyssey/status/29445361265
-
-
-
-
ぼの
Naoさんメールより：
（情報＆転載承諾ありがとう :)）On Fri, 15 Oct 2010 06:32:50 -0400
Naoko McCracken wrote:
こちらで見たところ、トップページは CSS 無しの表示になり、それ以外は添付画像のような感じです。
ちなみに普通の Safari で横幅を狭くしても同じようなことはないです。
Wikipedia.org サイトを非モバイル版で見てもカラム落ちはしていないので、何か変更点で心当たりの点がありますでしょうか。あ、http://codex.wordpress.org/
もリニューアルしましたが、新テーマのテンプレデータもらったりできるか聞いてみますか？（フォーラムとはマッチするけど ja.orgサイトとは違っちゃうというジレンマ…）-
ぼの
現在のテンプレは、どこかのをベースにしていたんでしたっけ。
MediaWikiのデフォルトテーマだった「Monobook」をベースに、色遣い変更＋ヘッダ部追加とかをしています。
Codex:談話室 – サイトのデザイン（外装）Wikipedia.org サイトを非モバイル版で見てもカラム落ちはしていないので、何か変更点で心当たりの点がありますでしょうか。
ウィキペディアでは「Vector」という新開発のスキンが使われています。
日本語CodexのMWをアップグレードしたら、この「Vector」ベース＋WP新デザインに合わせて作り変えようかと考えていましたが、残念ながら、諸事情によりまだ行なえません（検証中）。
新テーマのテンプレデータもらったりできるか聞いてみますか？
ヘッダ部のコードは、もらえるなら利用できそうかもです。(^-^)
（でも訊いてもらうとしたらMWアップグレードしてからで）スキン全体としては、そのまま使うことはできないかと思います。
MWの機能・仕様に合わない作りになっている部分があるみたいで、たぶん一部の機能や表示が使えなくなります。
（英語版でも欠落あり。日本語版ではさらにMWの機能を活用しているので。。）前のスキンのときもMLで聞いてくださったのですけど、反応なかったんですよね。
あそこ、管理者からは全然レスないんですよね。。。くすん（・；）
[wp-docs] Use of MediaWiki Skin in International Codex
-
-
(ま) さん、
Makky さん、
WordPress Codex 日本語版 会議室 
Naoko 10:29 pm | 2011年10月28日 パーマリンク
ありがとうございます！
全体のスタイルは、読みにくいこともないですし私はそのままでもいいと思います。
今のところ、そんなかんじです！
ぼの 12:13 pm | 2011年11月17日 パーマリンク
Naoさんコメントありがとうございます～～。
そうでした！サイト名がなかった…！
新しいスキンだと、今の「W」ロゴの位置に「サイト名入りのロゴ画像」を表示するようになっているんでした。
ウィキペディアやMediaWiki.orgみたいな。
前の「WPdocs」スキンでは、WordPress.org風に
・ヘッダ部に「WordPress.日本語」ロゴ＋ナビゲーションバー
・サイドバー左肩に「Codex」の文字
を出してました。
日本語ホームか日本語フォーラムとお揃いのヘッダって、やっぱりあったほうがいいでしょうか？
ぼの 12:02 pm | 2011年11月18日 パーマリンク
ロゴ画像、P2のサイドバーのをお借りしちゃおうと思ったのですが
サイト名の表示がないので、やっつけ仕事ですみません的なロゴに取り急ぎ差し替えました。
なんかグリッドとか揃ってなくて気持ち悪くてごめんなさい。おおう。。orz
ロゴ画像募集、とかでお願いしたいです。＞＜
ぼの 12:24 pm | 2011年11月17日 パーマリンク
これスキンでわざわざ画像出してるのかな。。外しちゃいましょうね。
直にいじるとsvnのアップグレード時に衝突するので修正方法を考えるお時間ください。
その前に自動センタリングが想定外だったので左寄せに直すかもです。
ぼの 12:41 pm | 2011年11月17日 パーマリンク
スミマセン(>_<)
本文領域内の、日本語Codex独自CSSはほとんど切れている状態です。
{{Old}} とかのWikiテンプレートも全部。。
目次、前みたいなレイアウトでいいですか？
どなたかCSS書いてくださる方いませんか？
shokun0803 11:06 am | 2011年11月22日 パーマリンク
なるほど…
詳細ページなどは別段見にくいとかない感じですね。
ただ、やっぱりTOPページだけはちょっと見づらいかな？縦に全部並ぶとちょっと…
あと、やっぱりフォーラムなどへのリンクはサイドバー以外に欲しい気がします。なんだか独立したページみたいに見えて…過去の議論にあった公式サイトとCodexの関係性がまたあやふやになりそうなヨカンです。
ぼの 7:19 pm | 2011年11月24日 パーマリンク
shokunさん、コメントどうもありがとうございます～～～。
コメント承認待ちになってしまってました。すみません！
トップページ、やっぱ縦長すぎですよね。(^-^;;
リンクも、ドメインが揃えられないのでヘッダ部くらいは揃えた方がいいですね～～。
ご意見感謝感謝です！
HTMLとCSSと画像、作ってくれる人募集してみようかと思います。
Naoko 6:55 pm | 2011年12月1日 パーマリンク
CSS、画像など諸々、手が空いたら私もできますが、メモってく意味で協力募集中みたいなページを作るといいでしょうかね？
としや＠破天荒バージョン 11:40 am | 2013年8月31日 パーマリンク
http://wpdocs.sourceforge.jp/関数リファレンス のデザインについて提案
関数名の横に説明文を入れていくとテーブルが崩れてしまいます。
本家のページもテーブルが使っていますが、日本語のページは説明文も追加されているのでテーブル形式ではなく、PHP公式マニュアル(例えばhttp://php.net/manual/ja/book.array.php)のような形で1行1関数&説明文でリスト形式に変更してみるのはどうでしょう？
Naoko 4:15 pm | 2013年9月2日 パーマリンク
としやさん、HTTP API 関数のところ、pre タグが有効化されていたせいでうまく折り返しができていなかったようです。修正してみましたがいかがでしょうか？
差分:
http://wpdocs.sourceforge.jp/wiki/index.php?title=%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9&action=historysubmit&diff=5964&oldid=5922
としや＠破天荒バージョン 7:00 pm | 2013年9月2日 パーマリンク
きれいにテーブルが表示されました。迅速な修正ありがとうございます。
(今回は提案のつもりで投稿してみたのですが、提案は取り下げます。)
Naoko 10:58 pm | 2013年9月2日 パーマリンク
良かったです、ありがとうございました。今後ともお気づきの点があったら、フィードバックお待ちしています〜！
totono 8:52 am | 2014年1月24日 パーマリンク
ログイン時にページ上部に表示されるメニューのプルダウンをデフォルトでオフにして欲しい。 プルダウン部分のメニューなんて全く使わないのに、カーソルが横切るたびにチラチラとプルダウンが表示されるのが非常なストレスになります。
Naoko Takano 12:54 pm | 2014年1月24日 パーマリンク
この部分のプルダウンのことということでよろしいでしょうか？
Makky 9:30 am | 2015年5月6日 パーマリンク
↓画像１
wpnet.webcrow.jp/デザイン.png
そのままでいいという意見が多いのですが
画像1のようなデザインはどうでしょうか
Makky 9:36 am | 2015年5月6日 パーマリンク
画像URL変更しました
(ま) 11:33 pm | 2015年7月24日 パーマリンク
ぼのさん、こんばんは。
少しご相談なのですが、現在Codexの全ページに表示されている「サイトデザイン工事中です。ご意見をお寄せください」という文言について、できるだけCodexをシンプルに分かりやすくするため、この文言をSitenoticeから撤去するのが良いのではないかと思うのですが、ぼのさんは、どう思われますでしょうか？