[過去ログ]
=^・ω・^= ぬこリゾート Part5 (636レス)
=^・ω・^= ぬこリゾート Part5 http://ex14.vip2ch.com/test/read.cgi/part4vip/1428933470/
上
下
前次
1-
新
通常表示
512バイト分割
レス栞
抽出解除
レス栞
あぼーん
このスレッドは過去ログ倉庫に格納されています。
次スレ検索
歴削→次スレ
栞削→次スレ
過去ログメニュー
62: ◆xIcROaHbuQ [sage] 2015/04/19(日) 20:00:43.91 ID:kbuzAK+10 >>59 来た! 常々、classを充実させてほしいと思ってました 現在、スレタイ、板タイトル、トリップ、キャップしか無いから… スマートフォンは持ってないんだけど、CSSで諸々の設定をするうえで不便な点が多かったので、classやIDを増やすのは大賛成です 以下の点を改良してもらえると嬉しいな ・スレの上や下にある「板」とか「写」とかのリンクに、それぞれID割り振り ・それらについて、スレ上部にあるリンク一括指定とか出来るように、上部メニューと下部メニューにclass割り振り (例えば、上部にあるものは全部 CLASS="top"、下部にあるものは全部 CLASS="bottom" とか) ・1レス単位で、<div> 〜〜 </div> で挟む ・デモ http://www.kyodemo.net/demo/c?p=col のように、名前欄、メール欄、日時、IDにもclass割り振り 特に欲しいのがこれらで、あと、 ・本物のぬこさんを識別するためのclassかID割り振り ・栞や閲覧履歴下部にあるメニューリンクにそれぞれID割り振り ・CSSの設定文字数増量 もあると尚よしですね ご検討をお願いします。 http://ex14.vip2ch.com/test/read.cgi/part4vip/1428933470/62
75: ◆xIcROaHbuQ [sage] 2015/04/19(日) 23:25:13.59 ID:kbuzAK+10 >>67 ごめん、無駄に長いのが気になったからダメ出しさせてww ・} で閉める直前はセミコロンを付けなくていいよ ・「background-color」は「background」でも反映させられるよ ・「padding: 0.1em 0.1em 0.1em 0.1em」 →上下左右がそれぞれ違うなら4つの指定が必要になるけど、全方向が同じなら「padding: 0.1em」だけでおk ・「padding:8px 0 8px 0」 →[上下]と[左右]がそれぞれ同じなので、「padding:8px 0」でおk ・「color:#ffffff」、「background:#0000cc」、「border:1px solid #225588」 →RGB値が3か所とも、左右の値が同じなら、3桁表記の「color:#fff」と「background:#00c」と「border:1px solid #258」でおk ・a {text-decoration: none;} だけ何で分けて書いてるのかよく分からない… a[href] {padding: 0.1em; outline: 1px dotted; background: #e0F0e0; text-decoration: none} でいいと思うよ ・リンクの移動方法が「position: fixed」なので、bodyの「position: relative」は必要なさそう (bodyにこれを指定する必要が特にあるのは、移動させる方法が「position:absolute」で尚かつ移動先がスクロール前の状態ではディスプレイ上に表示されていない領域である場合) ・最後のアクセスキーで指定してる5行、同じプロパティ&パラメータが並んでる部分が長ーーいから、共通する部分をこうやってまとめれば大幅に短縮可能だよ a[ACCESSKEY="2"],a[ACCESSKEY="8"],a[ACCESSKEY="7"],a[ACCESSKEY="9"],a[ACCESSKEY="3"]{width:2em;height:2em;font-size:13px;font-weight:bold;text-align:center;display:block;border:1px solid #258;padding:8px 0;position:fixed;left:1px} a[ACCESSKEY="2"]{top:1em} a[ACCESSKEY="8"]{top:5em} a[ACCESSKEY="7"]{top:10em} a[ACCESSKEY="9"]{top:14em} a[ACCESSKEY="3"]{top:20em} あと、ホントは単位省略は非推奨だけど、ピクセルで指定する場合は一部のプロパティを除き、実は反映されるので、 >>67の内容の場合「border」と「outline」以外のプロパティはpxを省いてしまっても大丈夫かと。 これだけ直したら、700文字を下回ります ま、外部に置ける環境なら別にぬこのCSS設定欄に戻す必要はないし文字数を気にしなくてもいいんだけど、 共通する部分についてはまとめてしまったほうが見やすいから、最低でもそこだけは直すことをお勧めするよ それから、「display:block」を「display:inline-block」に変えれば改行させずにリンクを並べられるので、 もし縦並びにする必要が無いのであればもっと画面をコンパクトにさせられるよ http://ex14.vip2ch.com/test/read.cgi/part4vip/1428933470/75
77: ◆xIcROaHbuQ [sage] 2015/04/19(日) 23:38:42.70 ID:kbuzAK+10 >>70 CSSの設定でリンクの間隔を広げられるよ [HREF] {margin: 8} これは、リンクの左右に8ピクセルの余白を作るという指示 (特に小細工をしてないと、リンクに上下の余白は設定できません) 数値はお好みでどーぞ http://ex14.vip2ch.com/test/read.cgi/part4vip/1428933470/77
78: ◆xIcROaHbuQ [sage] 2015/04/19(日) 23:43:20.63 ID:kbuzAK+10 連投失礼… >>76 いいですね! 下部メニュー2段目にある「スレ情報」 「自ID抽出」……にも全部、 その感じでクラスを割り振ってもらえると、CSSで出来ることが広がります♪♪ http://ex14.vip2ch.com/test/read.cgi/part4vip/1428933470/78
81: ◆xIcROaHbuQ [sage] 2015/04/20(月) 00:18:29.38 ID:OZDi9hmO0 >>79 さ、さあ…… 下部メニュー1段目全部と2段目の「スレ情報」は、表示/非表示の設定が出来ないからみんな順番は一緒だけど、 それ以外は人によって歯抜け番号も出てくることですから、 左右から順番に割り振ることの利用法が今のところ思いつきませんねー 連番があれば役に立つことも、もしかしたら出てくるのかもしれませんが… それよりも、下部1段目と2段目でクラス名を分けてくれる方が助かります 1段目は押しやすいように大きめのサイズに指定したりボタン状に変えてみたり、 2段目は通常サイズのリンクのままにしたりとかして、使い分けたいです あと、CSSとは関係ないですけど、 リンク先アンカーの <A NAME="t"></A> と <A NAME="b"></A> はひそかに存在してるので、 上部メニューに「上」へ行くリンク、下部メニューに「下」へ行くリンクは要りませんww http://ex14.vip2ch.com/test/read.cgi/part4vip/1428933470/81
83: ◆xIcROaHbuQ [sage] 2015/04/20(月) 00:50:46.99 ID:OZDi9hmO0 >>82 上部メニューにも、下部メニューの位置に応じた区別を付けてくれるのは助かりますね 上部メニューが長くて目的のリンクを探してウロウロ〜っとしてしまうから、 [HREF^= "/h/" ][HREF*= "end=1&guid"] {margin-right: 30} を記述して、見やすいように「歴」と「情」の間は広げてました 一括指定できるようになれば、「情」から先はリンクの色を変えるとか、まとめて移動するとかしてみようかな http://ex14.vip2ch.com/test/read.cgi/part4vip/1428933470/83
86: ◆xIcROaHbuQ [sage] 2015/04/20(月) 06:32:44.45 ID:OZDi9hmO0 >>85 スマートフォン持ってないから、どの程度まで広げると押しやすくなるのか分からないけど、 メニュー関連を押しやすくなるまで広げると、他の部分はフガフガ(?)wwになっちゃうのかー 今のところ、上下のメニューだけを完璧にピンポイントで指定することが出来ないから、 (いや、やろうと思えば出来なくもないけど、CSSが尋常じゃないほど猛烈に長くなる…) 現状で、もうちょっとマシになる事をやろうとするなら、 .ttitle + font br ~ a:nth-of-type(-n+■) , [NAME= "b"] ~ a:not([HREF*= "c="]):not([HREF*= "rss"]) {margin: 15} こうすればいいかなー ■の部分には、自分が画面構成設定で「レス表示(ページ上部)」にチェックを入れているリンクの数を入れて下さい ただ、この方法だと、「自ID抽出」と「履歴追加」にチェックを入れてる場合には 自IDが無いスレッドや閲覧履歴OFFに設定していない板ではリンクが出てこなくて適用範囲がずれてくるので、 あんまりいい方法だとは言えない… 上部メニューのリンク間を広げるのは諦めて、 [NAME= "b"] ~ a:not([HREF*= "c="]):not([HREF*= "rss"]) {margin: 15} だけにしたほうが良いのかもね 下部の「上」以降にあるリンクのうち、「ぬこの手」と「ぬこTOP」と「ぬこRSS」は除外してリンク間を広げる指示になります ぬこさんがCSSの記述を改良してくれた後は、もっとマシな指定方法が出来るようになるはず http://ex14.vip2ch.com/test/read.cgi/part4vip/1428933470/86
137: ◆xIcROaHbuQ [sage] 2015/04/26(日) 18:56:35.67 ID:mHPNw8ESO >>134 キタ━━━(゚∀゚)━━━!!!! 待ってました、CSSの改良 しかも、保存できる設定は3つまでなのかと思ってたけど5つもあるし、 改良ついでに入力できる文字数がもし2倍になったらいいな♪と思ってたら、まさかの4倍て! これは嬉しすぎるサプライズ もう、文字数制限に悩まされて泣く泣く削らざるを得なかった設定もふんだんに盛り込める! ぬこさん、超グッジョブ ありがとう!! あ、「複数端末でログ共有」の説明が、スキン設定は共有できないままになってて、 TOPページ→ぬこの特徴も、CSSが1024文字のままになってますので直しておいて下さいね http://ex14.vip2ch.com/test/read.cgi/part4vip/1428933470/137
138: ◆xIcROaHbuQ [sage] 2015/04/26(日) 19:40:24.52 ID:mHPNw8ESO >>134 本日のCSSに関する機能改良について皆さんに補足します 端末やブラウザごとに表示の特性が異なるため内容も異なるものにせざるを得ないCSSですが、 例えば、「設定1にはガラケー用CSS」、「設定2にはスマートフォン用CSS」、「設定3にはFirefox用CSS」、「設定4にはGoogle Chrome用CSS」、「設定5にはタブレット用CSS」といったように、 それぞれ使い分けて入力し、別々にCSSを適用させられます。 栞/歴を共有している端末で、最大5種類の設定を一括管理することが出来るようになりました。 今までは、スキンとCSS関連については各ブラウザのCookieによる保存に依存していたため、 うっかりブラウザのCookieを削除してしまった場合は内容が消えてしまい、ゼロから書き直さなくてはなりませんでしたが、 ぬこの共有URLによって管理され、ぬこ鯖に保存されるようになったのだと思われます。 (3月10日の http://ex14.vip2ch.com/test/read.cgi/part4vip/1425488700/167 で、 共有URLにデータを全部引き継がせたいと書かれてたので、多分これの実行が今日の改良) 今後は、共有URLさえ分かれば構築したCSSを失わずに済むようになります。 今まで設定していた内容は「過去設定参照(4月26日時点)」に入っていて、 この欄は「CSS設定画面」にアクセスした端末やブラウザによって、入っている内容が違います。 これをコピペして、設定1〜5へ移し替えると良いでしょう。 コピペ→「設定」クリック が完了する前に、ぬこのCookieを削除してしまわないようご注意下さい。この欄の内容が失われると思われます。 http://ex14.vip2ch.com/test/read.cgi/part4vip/1428933470/138
141: ◆xIcROaHbuQ [sage] 2015/04/26(日) 21:32:55.83 ID:mHPNw8ESO 連投失礼… >>136 今日の改良でメニューのリンクにclassが新たに割り振られたから、 HTMLの記述変更に伴い、セレクタの記述方法によっては適用されなくなったのかもしれないね スマートフォンを持ってないから、どの程度の数値にすればいいかよく分からないけど、 「書」と「写」ボタンを上下ともに大きくすればいいのなら、 .mbwri , .mbcpy {font-size: 20; margin: 12} こうすると、その2つのボタンのサイズが20ピクセルになり、 ついでに隣のリンクとの間に12ピクセルの余白を空ける、という指示 自分の端末に合うように数値の微調整を メニューリンクに対するCSSの指定が、今までよりも格段に楽になって大助かり♪ 自分のCSSも改良作業しよっと 「今までのCSSが適用できなくなった!」というトラブルや、 「CSSでこういう事ってできないの?」という疑問、 可能な限り相談に乗りますので、お悩みの方は何をどうしたいか書き込んで下さい 記述の順番が良くないせいで適用できなくなってる場合もあります 出来れば設定中のCSSの内容もコピペをお願いします http://ex14.vip2ch.com/test/read.cgi/part4vip/1428933470/141
144: ◆xIcROaHbuQ [sage] 2015/04/26(日) 22:58:01.95 ID:mHPNw8ESO >>143 ぬこスレのテンプレからは何ヶ月も前から消えちゃってるけど、 CSS設定画面の「設定1〜5」を押せば、その先の画面に http://nanos.jp/nukocssmatome/bbs/1/ へのリンクはちゃんと存在してるから大丈夫 そのCSSには、触れてみたことのないプロパティも含まれてるので、解決まで少々お時間を下さい。 空いてる設定番号にそれを丸々ぶちこんで、とりあえず自分の端末に反映させてみました。 今からいろいろ動作確認したり弄ってみます。 ぬこの手や、ぬこTOPへのリンクは、ボタン状になっていなくてもいいかな? http://ex14.vip2ch.com/test/read.cgi/part4vip/1428933470/144
146: ◆xIcROaHbuQ [sage] 2015/04/26(日) 23:55:14.08 ID:mHPNw8ESO >>145 これでどうかな body {padding: 15 15; line-height: 28px} [HREF] {margin: 3; padding: 1} .mrb1 , .mrb2{ width:19%; color:#00f; background:#fff; font-size:15px; font-weight:bold; text-align:center; display:inline-block; text-decoration:none; border:1px solid #258; margin:2px; padding:12px 0; border-radius:5px; } a[ACCESSKEY="#"]~ a{ width:100%; color:#fff; background:#337fcc; font-size:28px; font-weight:bold; text-align:center; display:inline-block; text-decoration:none; border:1px solid #258; padding:12px 0; border-radius:5px; } .mrb1:hover , .mrb2:hover {background:#cef} input[NAME= "q" ] {margin-top:10} ・下部メニューリンクを指定するためのセレクタを、本日導入のclassによる指定に変更。 ・「display:block」を「display:inline-block」に変更。 ・インライン型に変えたため不要になり、「float:left」、「clear:left」を撤去。 ・勝手に、ボタン間の上下に隙間が無かったけど見栄えを良くするため外部余白を追加ww ・勝手に、これらのボタンにマウスカーソルが重ねられた時の背景色変更を追加ww ・勝手に、これ以外のリンクに対して、リンク間の余白を多少空ける設定を増設ww ・勝手に、下部メニューリンクとレス索窓の隙間が少なかったのでレス索窓の上部に外部余白を設定ww (レス索窓の位置が下部じゃなかったらゴメン) ・勝手に、ページ全体の上下左右余白と行間を空ける指定を増設ww 適用させてみて何か問題が出たら報告して下さい http://ex14.vip2ch.com/test/read.cgi/part4vip/1428933470/146
153: ◆xIcROaHbuQ [sage] 2015/04/27(月) 13:22:17.97 ID:aw7AKZbSO >>152 前より改悪!? oh... これ、スマートフォン用のCSSなのかな? 昨日も書いたけど、スマートフォンは持ってないんだよねー スマートフォンの特性ってあまり知らないから、やれることに限界がある それに>>152が、どんな感じの画面を理想としていて、どうしたいかがよく分からない 「上」から「歴」までを1行で表示させたいってこと? 2行くらいにはなってもいいの? とりあえず、今回は146番の内容のうち2ヶ所に修正を加えてみよう 1つ目。 width:19%; って記述してる行、ここのパーセンテージを弄って、ボタンの幅を自分好みに調整してみて? 「幅だけでなく高さも調整したい」という希望があったら、新たなプロパティを組み込む必要あり 2つ目。 .mrb1 , .mrb2{ って記述してる行、ここを .mrb1 , .mrb2 , a[NAME="b"]~ a { に変更して、レス表示画面以外も下部メニューがボタン化するようにしてみよう http://ex14.vip2ch.com/test/read.cgi/part4vip/1428933470/153
157: ◆xIcROaHbuQ [sage] 2015/04/27(月) 13:49:38.71 ID:aw7AKZbSO >>155 そうだね 今、どんなふうに表示されてるか知りたいから、できれば沖縄さんに画面をアップロードしてほしいです >>156 最初とはいつかな? 今初めて聞いたよ ただのCSS好きが高じたボランティアで相談に乗ってるだけなので、もちろん実機を用意する気は毛頭なしだよ 「お悩みの方はどうしたいか書き込んで下さい」 って書いたら舞い込んできた案件に宣言通り対応してるまでだし、 実機が無いと全く何も出来ないってことはないから中断する気もないよ http://ex14.vip2ch.com/test/read.cgi/part4vip/1428933470/157
メモ帳
(0/65535文字)
上
下
前次
1-
新
書
関
写
板
覧
索
設
栞
歴
スレ情報
赤レス抽出
画像レス抽出
歴の未読スレ
AAサムネイル
Google検索
Wikipedia
ぬこの手
ぬこTOP
0.444s*