Studio TA Subsite の案内とお知らせ

カテゴリ:PC環境(ハード/ソフト)( 81 )

価格.com掲示板をアレンジする(3) 白熱スレッドランキング の表を見易く

2018年 02月 13日

白熱スレッドランキングの表


開くスレッドを限定していると、情報が偏ったり面白い新情報を見過ごす事になるので、私は「白熱スレッドランキング」で面白そうな記事を時々つまみ食いします。 しかし、このページも「MS Pゴシック」が基準フォントです。 このフォントを「メイリオ」に指定するついでに、表をもう少し見易くする事を考えました。

本来のランキング表は、ウインドウ幅960px以下で横スクロールバーが出る「横幅固定」の表です。

a0349576_21500686.png

上図を良く見ると、左端の「順位」列、右端の「最終投稿日時」列など、無駄な幅があります。 この無駄を省いた上で、「サブカテゴリ」「内容・タイトル」列を幅可変として、表全体をコンパクトな可変幅にアレンジします。



「table」の一部の列幅を固定とするのは案外と難しい


色々と表のCSSを弄っている内に、案外と知らなかった「table」の扱いに出会いました。 表の一部の列を固定幅にするのは、

◎「table」に「table-layout: fixed;」を指定する
◎ 固定する「th」「td」等に幅値「width: ~;」を指定する
◎ 固定しない「table」「tr」「th」「td」等には幅値を指定しない

というのが基本の様です。 しかし、この通りしても思った様には行きません。

◎ 固定幅としたい「th」「td」等に「white-space: nowrap;」を指定する

これが、今回のアレンジの鍵になりました。(教科書通りにならないのは、スクリプトによる指定が効いているのかも知れません)
カットアンドトライで模索していくと、この「table」に関しては、

●「table」に「table-layout: fixed;」を指定する
● 全ての「td」に幅値「width: ~;」を指定する
● 固定する「td」には「white-space: nowrap;」を指定する
● 可変幅の「td」には「white-space: nowrap;」を指定しない

という方法が目的の通りになりました。 但しこの指定方法は、全ての「td」の指定幅の合計値が「table」の最大幅となり、可変幅の「td」は指定幅を最大値とした拡縮状態になります。

可変幅の「td」に幅値を指定しない場合は、「table」や可変幅「td」は完全に自由な拡縮状態になりますが、可変幅「td」の幅のコントロールがアレンジ側で出来なくなり、この指定方法は却下しました。



アレンジ後の「table」の拡縮の様子


ウインドウ幅が900px以上の場合は、下図の様に「table」の左右に余白が出来、「table」幅は最大値(約830px)に固定です。

a0349576_21523166.png

ウインドウ幅が900pxより小さくなると「サブカテゴリ」と「内容・タイトル」の列が縮まり始めます。 下図はウインドウ幅が760pxの時で、上に比べると可変幅の列内の右余白部分だけが減っています。

a0349576_21581924.png

可変幅の文字列(a要素)は、文字数が一定ではありません。 ウインドウ幅を縮めて行くと、文字の多い列から折り返しが始まります。 下はウインドウ幅735pxの時で、「サブカテゴリ」の列が折り返されています。

a0349576_22061471.png

更にウインドウ幅を縮めると「内容・タイトル」列も折り返されます。 レスポンシブではないですが、この様にして幅をコンパクトにアレンジしました。 小幅のモニターでも使用し易い、或いはブラウザで拡大表示してもデスクトップを占拠しない事を基本として、この様なアレンジをしているのです。



実際に価格.comをアレンジするには


このアレンジスタイルは、スタイル投稿サイト「userstyles.org」に、スタイル名「Kakakucom Viewer」として登録しています。

Chrome あるいは Firefox のブラウザを使用されているなら、拡張機能の「Stylus」(最新の「Stylish」でも可)を導入して、以下のリンク先で「Kakakucom Viewer」をインストールすれば、アレンジが有効になります。


「Kakakucom Viewer」の他のアレンジ内容については、以下のリンク先を参照ください。





「Kakakucom Viewer」のセクション構成


最新の「Kakakucom Viewer」は 10セクションの構成です。

セクション1  価格.com 掲示板 基本CSS

セクション2  写真ビューワー画面 基本CSS

セクション3  コメント編集画面・レビュー編集画面 基本CSS

セクション4  レビュー編集画面 追加 基本CSS

セクション5  フォント メイリオ指定 / 画面背景色

セクション6  フロート部 機材詳細の非表示オプション

セクション7  フロート部 カテゴリタブの非表示オプション

セクション8  フロート部 全体の非表示オプション

セクション9  白熱スレッドランキング 基本CSS

セクション10  PHOTOHITO 基本CSS


●「セクション5」はCSSの扱いが出来る人には、簡単にカスタマイズが可能です。

●「セクション 6, 7, 8」の「有効」「無効」の切り替えで、フロート部の表示を選択出来ます。

● 初期設定は、「セクション1~6, 9, 10」を有効、「セクション7, 8」を無効に設定しています。

●セクションの適用先が「次で始まるURL」の場合は「有効」、「URL」等の場合は「無効」になります。 編集画面で適用先を変更して「保存」を押すと、オプション設定が変更されます。



[PR]
by Ataron | 2018-02-13 23:02 | PC環境(ハード/ソフト) | Comments(0)

拡張機能「Stylus」(Chrome/Firefox) / リスト画面のインターフェイス改善

2018年 02月 12日

スタイルリストのチェックボタンの誤操作


管理画面のインストールしたスタイルリストは、各行の先頭のチェックボタンで、そのスタイルのON/OFFを切り替える事が出来ます。 管理画面も余り開かないユーザーも居るかもしれませんが、スタイルを編集/作成する場合は、スタイルの問題点の洗い出しなどで、スタイルのON/OFFをする事が非常に増えます。 そんな場合に、一番利用するのがこのリスト行先頭のボタンです。 また、リストの行自体をクリックすると、そのスタイルの編集画面が開きます。

a0349576_09041121.png

以前のStylusでは、行頭の「チェックボタン」とその右側の「スタイル名」の部分は押し間違える事は無かったのですが、最近にデザインが変更され、上図の様に「チェックボタン」を「スタイル名」の部分が囲う様になりました。 この結果、ON/OFFの切替えのつもりが編集画面が開く事が時々生じ、操作性の悪さを感じていました。



上手い回避策があった


前ページで触れましたが、これを改善するために、チェックボタンのサイズを標準の「12px」から「16px」に拡大したのですが、他の人の投稿スタイルを調べると、上手くこの問題を回避している人が居ました。

その方法は、「pointer-events: none;」を使い、赤い部分をクリックで反応しない様にしていたのです。 なるほど、その手があったかと早速輸入しました。

以下は、この部分の要素の構成です。

a0349576_09064340.png

「style-name」に「pointer-events: none;」を指定し、「input.checker」と「a.style-name-link」に「pointer-events: auto;」を指定する事で、昔の操作状態に戻せました。

●改善前
下図の部分はファイル名と同様に、編集画面を開くスイッチとして反応。

a0349576_09074325.png

●改善後
同じ部分にマウスを置いても、反応せず背景色も変化しない。 つまり、ここをクリックしても編集画面が開くことは無い。

a0349576_09084637.png

「チェックボタン」にマウスを乗せると下の様に反応するが、「ファイル名」との間には反応しない部分があります。

a0349576_09092303.png
a0349576_09093557.png

この改善策で誤操作の心配がなくなったので、スタイル名のフォントに比べて大きすぎの感があったチェックボタンのサイズを、「16px」から「15px」に減らしました。 12pxでもOKですが、操作性ではこの位が良いと判断しています。



[PR]
by Ataron | 2018-02-12 10:07 | PC環境(ハード/ソフト) | Comments(0)

拡張機能「Stylus」(Chrome/Firefox)のアレンジ(続き)

2018年 02月 08日

ユーザースタイルシートを操る拡張機能「Stylus」


元気な「Stylus」


ブログ編集画面のアレンジに限らず、ブラウザ作業に欠かせなくなった「Stylus」です。 ブラウザの表示の殆どの局面で、それをアレンジ出来るのが Stylusの有効なところです。

その Stylus自身のデザインを、私は使い易くアレンジしていますが、元気にアップデートを続ける Stylusですから、ある日気付くと表示が変になっている事があります。 コードの更新(修正)追加の際にCSSも更新が必須で、こちらは旧状況に対応したCSSのままなので、「表示の一部が変になる」「デザインが崩れる」という事が時々生じます。

これは1月末に、最初に「Firefox版」その後「Chrome版」の更新があった、基本フォントの「Meiryo UI」への切り替えです。 これは、作者自身が日本語で文字幅が拡がる事に、ようやく対応を始めたのに違いありません。

管理画面を開くと文字(漢字)が全て縦長になっていて、すぐに気付きました。(下図は現在のアレンジなしのStylus画面です)

a0349576_17570193.png

ボタンの「キャプション」を日本語に直訳すると幅が広くなり、デザインがままならなくなります。 英語圏の作者に手際良い「言い換え」は無理な注文です。 以前は、Stylusの画面の何か所かで、変な行送りが生じていました。 (英語かぶれなのかを参照ください)

私はアレンジして、キャプションの言い換えでボタン幅を狭くするなど、収まり良くしていたのですが、作者は縦長フォントに置き換えて幅をかせいだのです。


フォントは以前の方が良かった


下は、「Meiryo UI」と以前の「Meiryo」の違いの例です。

a0349576_18505782.png

どちらも私のアレンジを適用した状態で、左はフォント切り替えられた後で、右は切り替え前です。

「Meiryo」のベースライン(文字の上下位置)を調整したコードに、フォントだけ「Meiryo UI」に替えた状態で、殆どの場所で左の様に文字が「下付き」になってしまいました。 丹念にキャプションを調整していたので、がっかりです。「Meiryo UI」のままで、キャプション位置を再調整する事もやぶさかではなかったのですが、文字のルックスも「UI」はやはり美しくありません。

どうも行間隔のデフォルト値の違いが原因の様ですが、Chrome版が置き換えられた時に、やはり「Meiryo」が良いと決心しました。 対策アレンジは基本フォントを「Meiryo」に戻す事でした。



「チェックボタン」の改善と「自動プレビュー」ボタンに対応


スタイルリストのチェックボタンのサイズ変更


フォントを指定しなおすついでに、「チェックボタン」の改善をしました。 下図は今回のアレンジ更新後ですが、右側のリストの「チェックボタン」が少し大きくなっています。

a0349576_19033851.png

この画面で適用スタイルのON/OFFを切り替える事が多いのですが、そのスイッチがリスト行の先頭のボタンです。

a0349576_19124821.png

このボタンを押しそこなうと、そのスタイルの編集画面が開いてしまいます。 この誤操作が時々あったので、丸いボタンのサイズを大きくしました。 左メニューのボタンが標準サイズです。


新設された「自動プレビュー」ボタン


「自動プレビュー」機能は、コード行を編集したその瞬間に、当該コードの適用対象のブラウザ表示に、コードが適用される機能です。 この機能のON/OFFボタンはデフォルトは下です。

a0349576_19250305.png

アレンジ後のデザインは下の様なもので、ウインドウ幅が広い場合です。

a0349576_19260150.png

「自動プレビュー」ボタンに「◀印」を入れたのは、「有効」ボタンと区別するためです。 「◀」はCSSで描画しています。 狭幅のウインドウでは、下の様にボタンが並ぶので、この区別が必要でした。

a0349576_19293357.png

この私のアレンジは、「Stylus LT800」というスタイル名で、以下のページに登録しています。




[PR]
by Ataron | 2018-02-08 20:20 | PC環境(ハード/ソフト) | Comments(0)

エキサイト「SSL」への移行は 2018年2月21日

2018年 01月 27日

エキサイト SSL 移行スケジュール


いよいよエキサイトのSSL移行の期日が発表されました。

発表から移行までの1ヵ月の期間は、「ユーザーに対して」与えられた移行に関する準備期間です。 移行後に対処しても取返しの付かない事はなさそうですが、早めに上記ページの注意ポイントだけはチェックするのがベターと思います。

私なりに要点を纏めると、

明らかにチェックを要するもの
●投稿文やスキン上(アレンジしている場合)に書き込まれた「http://」のリンクが問題になりうる。
●「外部リンクによって表示している表示物」や「動作させている機能」で「http://」のリンクで引いて来ている要素が、表示されなくなったり機能しなくなったりする。

おそらく問題の生じないもの
●単なる外部リンク、これまでのエキサイト内のリンク、自己ブログ記事内のリンク、は「http://」であっても無問題。 メニュー上の「フォロー」「外部リンク」、記事中の「リッチリンク」なども。
●「YouTube」は2014年7月にSSL移行しているので、それより後の記事は当然問題ないはずですが、それ以前に記事に埋め込んだ、つまり動画URLが「http://」の動画も問題が無い様です。 意図的に動画リンクのURLを「http://」に書き換えても問題なく動画が表示され、これは「YouTube」側のリダイレクト処理の結果らしい。



SSL状態の自ブログをチェック


現在は、非SSL、SSL、の両方のURLで自ブログをチェック出来ます。 上記ページの説明通り「https://」への書き換えをして、SSL状態の自ブログをチェックして見ました。 後で説明しますが、これは簡単な「非SSLチェッカー」を使っています。

a0349576_11204617.png

以前は「SSL」以前の状態でチェックしていたので、それに比べるとずい分と「赤」が減ったというのが実感です。 エキサイトヘッダーの「マイブログ」は気にする必要はないでしょう。 上図のページ上にはリンク2個を「http://」で書き込んでいたのでチェックが付いてます。 しかし、こういうリンクは無問題のはずです。 ただ、上記はフリーページ(看板ページ)なので、気になるので「https://」表記に書き換えました。

同ページの下方にスクロールすると、メニューの「フォロー中のブログ」「外部リンク」が全てチェックされます。

a0349576_11320045.png

これらは単なるリンクで無問題です。「フォロー中のブログ」はSSL移行後に、再フォローすれば皆んなチェックが消えるはずですが、その手間の必要はないと思います。 また「Excite外部のリンク」は、リンク対象が非SSLなら「http://」とせざるを得ず、それが駄目という事はあり得ない話ですね。

上図は「リッチリンク」が2個あり、下側はチェックされています。 HTML編集で調べると自ブログ内記事へのリッチリンクですが、昔に設置した物で記述が「http://」になっていました。 これも、単なるリンクで無問題と思いますが、「https://」に書き換えて善処しました。

まあ、チェックされる部分は「気持ちの問題」という無問題の場合が殆どです。



非SSLチェッカーについて


スキンアレンジをしたり、特別な機能をページで使用しているユーザーは、「見落とし」ている問題がないか、SSL化前に自ブログをチェックをすると確実でしょう。 変わった事をしていないユーザーは、こんなチェックの必要は無いと思います。

「非SSLチェッカー」の詳細は、以下のリンク先を参照ください。
このチェッカーは、ユーザースタイルシートの機能を使用しています。

●Chrome を使用している場合は、下のページから拡張機能「Stylus」の導入します。

●Firefox を使用している場合は、下のページから拡張機能「Stylus」の導入します。

●IEの場合は、以下のページの手順を参照ください。



Stylusでのチェッカー登録


Chrome / Firefox で、「Stylus」の表示や機能は全く同じです。

「Stylus」の「管理画面」から「新スタイルを作成」を押して、下図の「スタイルを追加」(スタイル編集画面)を表示させます。

a0349576_15135485.png

❶「スタイル名」は適当で良いのですが、上図は「非SSLチェッカー」と記入しています。

❷「CSSコード」は、以下のコードをコピーペーストで記入します。


/* SSL非対応リンクチェッカー */

a[href^="http://"] {
background: red !important;
border: 1px solid red !important; }

img[src^="http://"] {
border: 3px solid red !important; }



❸ 上記の書き込みをして「保存」を押します。

以上の手順で「非SSLチェッカー」のスタイル名で、チェッカーが登録されます。
「Stylus」でこのスタイルをOFFとしない限り、ブラウザが表示する全サイトで「非SSLリンク」が「赤背景」で表示されます。

〔注意〕
● 登録後は即ブラウザの表示にこのチェッカーが反映します。 平常の場合は「Stylus」でこのスタイルをOFFとしてください。
● 自ブログをチェックする場合、「https://」でアクセスした自ブログでチェックしないと意味がありません。




この記事はカテゴリ「ブログ」にトラックバックしています。



[PR]
by Ataron | 2018-01-27 12:44 | PC環境(ハード/ソフト) | Comments(0)

EaseUS Partition Master Free版 の使用方法 / Windows10 Cドライブの拡張

2018年 01月 18日

Windows10でCドライブの容量が不足した場合


Windows10のPCで、OSをインストールしたCドライブが容量限界に近付くと、警告が表示されます。 こんな場合に先ず試すべきは、Win10標準のクリーンアップ機能でしょう。


Win10標準のクリーンアップ機能を試す


Win10 スタートボタンの 右クリック →「システム」→「ストレージ」と進むと、下図の画面が表示されます。

a0349576_10144569.png

Cドライブのグラフを直接クリックすると、更にドライブ使用内容の詳細が表示されます。

a0349576_10244000.png

「システムと予約済み」は触れませんが、異様に多い「一時ファイル」の多くが削除が可能です。 各グラフを直接クリックすると、それぞれ削除可能かどうかが判ります。 下は「一時ファイル」をクリックした場合です。

a0349576_10201981.png

「一時ファイル」にチェックを入れ「ファイルの削除」を押せば、自動クリーンアップが実行されます。 実行後の使用容量表示は、値が更新されない場合があります。 PCを一度再起動して、このクリーンアッブ画面を表示させてから、ディスクの空き容量を確かめてください。

しかし、こういったクリーンアップ機能は時間しのぎの効果しかない場合も多く、再び警告が出る様なら、思い切った対処が必要です。

私自身は最近この状況になり、Win10で無料で使用できるソフトを探して、EaseUS社の「Partition Master Free版」を使いました。 昔の定番の「Partition Magic」とほぼ同様の操作をWindows上で行え、非常に好印象を受けました。 こういったソフトの無料提供は、自社ユーザー拡張の目的でしょう。 妙な囲い込みもなく、ある程度PCを扱える方には適当と思います。

Free版のPro版(4980円)との主な差は、「対象ディスク8TB制限」「他のSSDやHDDにシステムドライブを移行させる機能が使えない」という点です。 これは、以下の説明の➁の場合は適さない事に注意してください。


データの移行を伴うHDD容量不足の対処方法


a0349576_20503487.png

①HDDがCドライブのみの場合、内蔵か外付けのデータ用HDDを増設して、移動可能なデータ類をCドライブから移動する。 データ類が音楽や動画や大量の画像などで、データ容量が大きな場合に適しています。 データ容量が少ない場合は適しません。 この対策には、パーテション操作のアプリは不要ですね。

➁HDDがCドライブのみの場合、メインHDDを大容量なものに換装する。
システムを含めた環境全体の移動は、Partition Master ではPro版(4980円)になる様です。 ディスクイメージをコピーしたり、引越しを助けてくれるアプリは、他に探せばフリーアプリで適当なものがありそうです。

➂HDDに複数のドライブ(パーテション)があり、Cドライブ以外のドライブに充分な余裕がある場合。 この場合は、他のパーテションサイズを節約して、パーテションの境界を移動する事で、Cドライブの容量を拡張する事が出来ます。 Free版はこのHDDディスク内でのパーテションサイズ変更/移動には問題なく使えます。

ここからの内容は、この➂の対策方法に限ったものです。



Partition Master で Cドライブのパーテションを拡張する


パーテション操作の前に確認しておくこと


●パーテション操作の前に、Win10のドライブのプロパティから、操作対象のディスク上の全ドライブの「エラーチェック」を行います。 これは絶対に必要で、エラーを抱えたディスクでの操作はほぼ確実に失敗し、データと労力の大変な損失になります。 下の様に「スキャンする必要はありません」と表示されれば、精査の必要は無いでしょう。

a0349576_20590927.png

●念のために、PCを再起動させます。 Win10アップグレード等の適正な完了、適正な再起動が確認できない場合は、問題を解決してから操作しないと、思わぬ問題を生じる可能性があります。 出来ればネットワーク接続を物理的に切って置くと確実です。

●最近はSSD使用が一般的になりましたが、このアプリに限らず、SSDでのパーテション操作はトラブルが散見され、不安を感じさせます。 一方、こなれた技術のHDDでは、トラブル報告の多くはユーザー側に問題がありそうです。 このあたりも勘案して、自己責任の上でパーテション操作をしてください。

●関連するディスクに非常に重要なデータがある場合は、操作の前にディスク/データの他媒体へのバックアップが推奨されます。 パーテション操作に関して、絶対はあり得ません。 データの安全性は、各自の自己責任で判断してください。


Partition Master Free 12.8 のダウンロードとインストール


以下の EaseUS社のページから直接ダウンロードできます。
ダウンロードしたインストールファイルを実行して、Win10にインストールします。 アプリのインストールやその後の実行時に、下の様にアプリの性質上でWin10のチェックが入りますが、OKを押して実行します。

a0349576_20543729.png

また、全てのパーテション操作が目的の通り問題なく完了すれば、このアプリやインストールファイルはWin10から削除しても構いません。


パーテション操作の最短の手順について理解しておく


パーテション操作は、大きな家具の置かれた部屋の模様変えに似ています。 家具のある場所に他の家具は置けません。 先ず移動できる家具を移動して、スペースを空けてから次の移動を行うのが基本です。 操作は「その手順が最短になる様に指定する」のがコツです。

以下の説明は、メインHDDが既にパーテション分けで C・Dのドライブが作られている例です。 最上段は最初の状態で、Cドライブの余裕がなくなり、Dドライブには余裕があります。

a0349576_20554886.png

操作1 : Dドライブを右側に詰めてサイズを減らし、Cドライブ側に空き領域を作る。
操作2 : 空いた領域へCドライブを拡張する。

CドライブにDドライブの余裕分を廻すだけですが、内部に情報があるパーテション操作はこの様な手順が必要で、そしてこれが最短の手順になります。

パーテションがもっと多い場合、同様の操作を繰り返して、詰めたり拡張したりして行く事も考えられます。 更に「Partition Master Free版」は、パーテションのクローン(コピー)、マージ(結合)、削除などの操作が出来ます。 これらの操作を適切に組み合わせて、目的のパーテション構成に変更するための最短の手順を指定します。


Partition Master の実際の操作手順


では、上記の操作1、操作2を実際に Partition Master に指定し、パーテション操作を行う実際の様子を説明します。
Partition Master は起動時に、少し待たされます。 これは、起動時にディスクの構成をチェックするためです。

❶ 以下の基本画面が表示されたら、ディスクの構成をざっと確認します。 人によってはもっと複雑かも知れません。 最初の「*」マークのパーテションは、Win10のシステム専用の領域です。

a0349576_21343710.png

❷ 操作1をアプリに指定するには、上図の「D」の行を右クリックします。 下図のダイアログが表示されるので、「パーテションのサイズ調整/移動」をクリックします。

a0349576_21421583.png

❸ 下図の様な小ウインドウが表示され、ここで選択したDパーテションのサイズを変更します。 赤丸の部分をマウスでドラッグして、茶色(パーテションの使用範囲)の先頭と末尾の境界を移動します。 その下の枠内の値はドラッグに連動して変化します。 また、枠内の数値を変化させて境界を調節する事も可能です。

a0349576_21510532.png

この操作で「未割り当て領域:前」「未割り当て領域:後」として「空き領域」を作ることが出来ます。 下図は、操作1の方針の通り、パーテションサイズを減らして、約100GBの「空き領域」を前方に指定した所です。

a0349576_22023695.png

入力枠の下部は、パーテションサイズの変更結果を推測して、ディスク全体の配分を表示します。 なお、パーテション(ドライブ)の容量値が色々表示されますが、これはアバウトで、細かい値に拘るのは無意味です。

操作1の目的通りに設定できたら、最下段の「OK」を押して、元の❶の画面に戻ります。

❹ 次に「C」の行を右クリックし、先と同様に「パーテションのサイズ調整/移動」をクリックします。
今度は「C」のパーテションの状態が表示されますが、ここまでの指定が反映され、最初から「未割り当て領域:後」が約100GBの幅として右側に表示されています。

a0349576_22241098.png

操作2の方針に従って、末尾の境界(上図の赤丸)をマウスで右方向へドラッグします。 これにより「C」のパーテションサイズが約100GB増えます。(下図の赤枠)

a0349576_22395530.png

下段のディスク全体の構成は、操作2まで行った結果が表示されています。 この例では、Dドライブを100GB減らし、Cドライブを100GB拡張した結果になっています。 グラフからも、Cドライブの空き容量が増えた事が判ります。

❺ ここで理解しておくべき事は、実際のパーテション操作は未実行で、ここまでの ❶~❹ の操作は、パーテション操作を指定する「手順書」作成の作業だという事です。

「手順書」を実行した結果は、基本画面の最下部に、ディスク全体のパーテション配分を予測して表示されています。(下図の赤枠)

a0349576_22551992.png

これが納得が行くものなら、上図の赤丸のボタンを押して「手順書」を実行に移します。 もし、納得できないなら、その右のボタンを押せば ❶からやり直せます。「手順書」はリセットされて白紙に戻ります。

「変更を適用」のボタンを押し、下のダイアログで「はい」を押すと、後戻りができません。 予測された結果をよく確認してから「はい」を押してください。

a0349576_23104837.png

❻「変更を適用」を指定すると、PCがシャットダウンされ、再起動後にWin10が起動しない状態(黒バックの画面)で、手順書に従ってパーテション操作が行なわれます。 自動実行される作業を見守るだけですが、HDDの容量や変更内容に従って時間はけっこうかかります。 この間、電源が落ちる事は絶対に避けるべきです。

処理が完了するとPCはもう一度再起動して、その後にWin10が起動します。 目的のパーテション環境が完成しているかを確認してください。




この記事はカテゴリ「コンピュータ」にトラックバックしています。



[PR]
by Ataron | 2018-01-18 17:40 | PC環境(ハード/ソフト) | Comments(0)

Windows10 Update (KB4056892) でトラブル

2018年 01月 08日

Windows10 の更新プログラムで PCが起動できない


症状は黒画面にウインドウロゴを表示したたま、起動に至らず停止してしまいます。

a0349576_16292110.png

仕方なく、PCのリセットボタンで再起動すると同様の状態。 もう一度リセットすると「PCの修復」が行われ起動出来ましたが、この過程で「Windows Update の失敗」と判りました。

Updateが未完了なので再実行すると再び上記の行程の繰り返します。 ネットを調べて状況が判明。

a0349576_12555015.png

「古いAthlon」とは少し腹ただしい表現、立派に充分に働いてますから。 まあ、それは良いとして、PC内で生じている問題が、実際にこれに該当するか確認しました。 以下の行程は他種のWindows PCのユーザーにも有効かと思い、確認方法を少し整理します。



イベントビューアーの起動


タスクバー左端のスタートボタンを右クリックして「コンピューターの管理」を押します。

a0349576_13150447.png

「コンピューターの管理」ウインドウが表示されたら、左枠の「イベントビューアー」をクリックします。

a0349576_13193842.png

各項目の左側の「 」を押せば、その下の階層が表示されます。
「イベントビューアー」→「Windows ログ」と順に開き、「システム」をクリックします。

a0349576_13253182.png

中央枠の上部に、システム(OS)に関する管理情報が時系列で表示されます。 起動不良の様な重大エラーは赤丸「」マークが付きます。 但し、この表示が多数あっても、システム自身が解決している場合が多く、過大な心配は不要です。

この赤丸マークをクリックすると、下側にエラー内容の詳細が表示されます。 順にクリックして内容を眺め、関連のありそうなエラーを探します。 素人が簡単に理解できない内容も多いですが、問題の発生時刻などからも推理して、それなりに実情を探る事が出来ます。

a0349576_13402246.png

今回は、一番最近のエラーに関連情報が表示されていました。

インストールの失敗: エラー 0x800F0845 で次の更新プログラムのインストールに失敗しました: 2018-01 x86 ベース システム用 Windows 10 Version 1709 の累積更新プログラム (KB4056892)。

私のPCの場合は、最初に挙げたネット上の情報に該当すると判断して良さそうです。



問題が多そうな今回の更新プログラム


今回の更新プログラムに関してネット上の情報を調べると、年末あたりから配布されて、問題が色々とある様です。 PC環境によって、私の場合とは異なる原因で更新に失敗する様です。

参照: ぼくんちのTV別館

問題に直面された方は、上記の様に「イベントビューアー」を起動して、どんな系統のトラブルなのかを判断し、その情報を元にネット上で解決方法を再検索されると良いでしょう。

私の「Athlon x64」系の問題は、現在の解決策が見当たらず、騒がずに様子見します。 下手にWindowsの再セットアップなどしても、苦労して同じ結果になります。 この Updateを避けても、PCはちゃんと動きますからね。




この記事はカテゴリ「コンピュータ」にトラックバックしています。



[PR]
by Ataron | 2018-01-08 14:27 | PC環境(ハード/ソフト) | Comments(0)

ハッピーハッキングキーボードをハック

2018年 01月 05日
撮影に出かける用意をしていたら雨が降って、インドアになってしまいました。

なんとなく目が行ったのが部屋の隅にあったHHK(ハッピーハッキングキーボード)で、埃だらけの上に黄ばんで酷い。 HHKの上級品は静電容量キーで高価だけど、ウチにあるのはLite版で安物です。 以前は良く使っていたけど、コネクターがUSB化したマザーボードに変わってからお蔵状態です。

清掃は暇つぶしにもってこい。 ネジを外してキーボード上面と下側の本体とを分離し、上面枠からキーを全部外して無水アルコールで拭きました。

b0174191_18361321.jpg

後で戻すのに苦労しない様に、キートップの位置を元と同じにして並べてます。

キートップの3個だけが背部にパンタグラフの針金があります。(下図の左) この3個だけを外して、上面ごと洗剤洗いで良かったのですが、始めてしまったのでつい全部を外してしまいました。 キーは2つのプラ爪を寄せるだけで外れ(下図の右)、慣れると指先だけの作業です。

b0174191_18362169.jpg

清掃後に元通りにキーを嵌め、上面と本体を閉じる前に記念撮影。 3時間位かかってます。

b0174191_18361811.jpg

本体のスイッチ部分は一体構造です。 こういうの、最近のゴム式のキーボードでは普通ですね。 Lite2のキータッチは良いとは言いがたく、パソコンショップに並んでいる最近のものは、同じゴム式でも工夫されて良いタッチのが多くなりました。

でも、やはりメカニカルキーか静電容量キーのものが良いですね。 キーボードは良いものでないとね。



[PR]
by Ataron | 2018-01-05 19:11 | PC環境(ハード/ソフト) | Comments(0)

価格.com掲示板をアレンジする(2) PHOTOHITOと連携

2018年 01月 03日

PHOTOHITOとの連携


価格.comのカメラ掲示版は、PHOTOHITOとの連携で、機材に関する情報を豊富化しています。 PHOTOHITOにデータベース化されたユーザーによるレンズの実際の撮影サンプルは、メーカーの宣伝よりも参考になる場合が多いものです。

価格.com掲示板を800px以下にコンパクト化したアレンジスタイル「Kakakucom Viewer」は、掲示板の右メニューを省略したので、PHOTOHITOのサンプルページを開くリンクが見えなくなりました。 これは、右メニューで一番必要なリンクだったので、これを再生しました。

a0349576_21181835.png

上図の赤枠は、ページ最上部に移動したPHOTOHITOへのリンクです。

また、移動先のPHOTOHITOのページは本来は最小1000px幅でデザインされているため、スムーズな移行となる様に主要な画像閲覧ページを最小幅800pxにアレンジしました。

下図はサンプルの最初のページで、画像リストの画面です。

a0349576_21593602.png

このリストの画像をクリックすると、撮影者別のリストとコメント表示の下のページになります。

a0349576_21595153.png

上記はいずれも約800pxまで幅を狭めた状態で、アレンジがなければ左右が隠れるところです。 個別画像の拡大参照の画面は、元々完全にウインドウ幅に従って拡縮するので、アレンジの必要がありませんでした。



Kakakucom Viewer の更新


以上の様に、「Kakakucom Viewer」を更新して PHOTOHITOとの連携を有効にしました。「Kakakucom Viewer」を使用する手順は以下の「①→➁A」または「①→➁B」の手順が必要です。

① ブラウザにStylusを導入する


ウェブページのアレンジには、拡張機能(アドオン)の Stylusが先ず必要です。 これは、Chrome用とFirefox用があり、使用中のブラウザに合わせて導入します。

  Chrome版  Stylusの入手先
  
  Firefox版   Stylusの入手先


➁A userstyles.org から Kakakucom Viewer をインストール


以下のリンク先は、スタイル投稿サイト「userstyles.org」に私がこのスタイルを登録したページです。 スタイルの名前を「Kakakucom Viewer」としています。 このスタイルは Chrome版 / Firefox版 どちらのStylusでも使用出来ます。
スタイルのインストールは、サンプル画像の右下の Install Style を押すと、一瞬で Stylus にインストールされます。 この際、無関係なアプリの「Download」ボタンなどが同ページにあり、紛らわしいので注意ください。


➁B 手作業で Kakakucom Viewer をStylusにインストール


以下に掲載する「Kakakucom Viewer」(Mozilla Format)のCSSを、手作業で Stylus に登録することができます。 方法は、以下のリンク先を参照ください。 登録後の機能は➁Aと同じです。



セクション構成 と CSS


最新の「Kakakucom Viewer」は 9セクションの構成です。

セクション1  価格.com 掲示板 基本CSS

セクション2  写真ビューワー画面 基本CSS

セクション3  コメント編集画面・レビュー編集画面 基本CSS

セクション4  レビュー編集画面 追加 基本CSS

セクション5  フォント メイリオ指定 / 画面背景色

セクション6  フロート部 機材詳細の非表示オプション

セクション7  フロート部 カテゴリタブの非表示オプション

セクション8  フロート部 全体の非表示オプション

セクション9  PHOTOHITO 基本CSS

●「セクション5」はCSSの扱いが出来る人には、簡単にカスタマイズが可能です。

●「セクション 6, 7, 8」の「有効」「無効」の切り替えで、フロート部の表示を選択出来ます。

● 初期設定は、「セクション1~6, 9」を有効、「セクション7, 8」を無効に設定しています。

●セクションの適用先が「次で始まるURL」の場合は「有効」、「URL」等の場合は「無効」になります。 編集画面で適用先を変更して「保存」を押すと、オプション設定が変更されます。


以下のCSSコードは Mozilla Format で、9セクションが適用先指定と共にコンパイルされています。

 Kakakucom Viewer (Chrome/Firefox)  ( Mozilla Format )


@-moz-document url-prefix("http://bbs.kakaku.com/bbs/"), url-prefix("http://kakaku.com/item/"), url-prefix("http://review.kakaku.com/review/"), url-prefix("http://kakaku.com/auth/prdevaluate/") {
/* 2018.01.04 価格.com 掲示板 基本CSS */

/* ページ上部 機種説明 */
#contents930 {
width: 740px !important; }

#header {
width: 740px !important; }

#header .headerR {
display: none; }

.path.btmPath {
width: 740px; }

#itmOther {
display: none; }

#itmBoxMax {
width: 740px !important;
background-size: contain !important; }

#titleBox {
width: 720px !important; }

#titleBox + .bookmarkAdd3 {
right: -3px; }

#productInfoBox span.morelinkbox {
width: auto !important; }


/* カテゴリタブの小幅化 */
#main ul.tab {
margin: 0 0 -1px !important;
width: 740px;
display: flex; }

#main ul.tab li {
border-radius: 7px 7px 0 0;
overflow: hidden;
flex-shrink: 1;
transition: .5s }

#main ul.tab li:hover {
flex-shrink: 0; }

#itemviewFixedTab ul.tab li {
border-radius: 7px 7px 0 0;
overflow: hidden;
flex-shrink: 1;
transition: .5s }

#itemviewFixedTab ul.tab li:hover {
flex-shrink: 0; }


/* 標準タブ */
#main .tabArea {
width: 740px;
background-position: center bottom !important; }

#main .h3Area {
width: 720px;
background-size: contain; }

#main .h3Area + img {
width: 740px; }


/* フロート部 全体 */
#itemviewFixedTab {
width: 740px; }


/* フロート部 機材詳細 */
#itemviewFixedTab .fixedTabItemLines {
display: grid; }


/* スレッド表示順 ボタン列 */
.box04.change01 {
width: 116px; }

.box04.change05 {
width: 240px; }


/* NEW 新製品紹介 */
.newmodel,
.oldmodel {
width: 740px;
overflow: hidden; }

.newmodel h4 span,
.oldmodel h4 span {
width: 720px; }

.newmodel .newmodelInfo,
.oldmodel .oldmodelInfo {
width: 720px; }

.newmodel .valuebox,
.oldmodel .valuebox {
width: 300px; }


/* 右メニュー PHOTOHITOのみ残し上部に移動*/
#module > * {
display: none; }

#module .imgPhotohito {
display: block;
position: absolute;
top: 4px;
right: 0;
width: 450px;
background: none; }

#module .imgPhotohito .title {
width: auto;
background: none; }

#module .imgPhotohito .title p {
display: inline-block;
background: #e1f5fe;
max-width: 430px;
overflow: hidden;
border-radius: 4px; }

#module .imgPhotohito .title a {
white-space: nowrap; }

#module .imgPhotohito .boxIn,
#module .imgPhotohito .more {
display: none; }


/* レビューページ */
div#revbox {
width: 740px; }

#revbox .totalbox.clearfix {
width: 736px !important; }


/* 下部DM */
.sqTwoWrapper,
.sqTwo {
display: none; }
}

@-moz-document url-prefix("http://bbs.kakaku.com/bbs/") {
/* 写真ビューワー画面 基本CSS */
#contents {
width: 740px; }

#camera .h1Area {
width: 740px; }

#imageView {
margin: 0;
width: 740px; }

#imageViewInner {
margin: 0;
width: 740px; }

#imageView .imgAreaShadow {
width: 740px; }

#imageView .imageArea {
padding: 10px;
width: 718px; }

.imageArea a > img {
width: 718px; }
}

@-moz-document url-prefix("http://kakaku.com/auth/bbsnew/"), url-prefix("http://kakaku.com/auth/prdevaluate/") {
/* コメント編集画面・レビュー編集画面 基本CSS */

/* ページ上部 機種説明 */
#contents930 {
width: 740px !important; }

#header {
width: 740px !important; }

#header .headerL {
margin-right: -200px; }

#header .mLeft10 {
position: relative;
z-index: 1; }

#header .prText iframe {
display: none; }

#main .bbsBar {
width: 740px;
overflow: hidden;
background-position: center bottom !important; }

#main .h3Area {
width: 720px; }

#main .h3Area + img {
width: 740px; }


/* 入力欄 */
table.tblInput.ver2 {
width: 740px; }

#main .tblInput.ver2 .commentTextarea {
width: 600px !important; }

#main .tblInput.ver2 .nicknameChoice {
width: 592px; }

#main .tblInput.ver2 td .attention {
width: 600px }

#main .tblInput.ver2 #file_up .step {
width: 602px; }

#FrmInput .agreementFrame,
#FrmUpload .agreementFrame {
width: 738px; }


/* 下部クチコミ参照枠 */
#main .box08 {
border: none; }
}

@-moz-document url-prefix("http://kakaku.com/auth/prdevaluate/") {
/* レビュー編集画面 追加 基本CSS */
#main .tblInput.ver2 td {
padding-right: 0; }

#main .tblInput.ver2 .tblInput02,
#main .tblInput.ver2 .tblInput03 {
width: 590px !important; }

#main .tblInput.ver2 .commentTextarea {
width: 578px !important; }

#main .tblInput.ver2 #file_up .step {
width: 580px; }
}

@-moz-document url-prefix("http://bbs.kakaku.com/bb"), url-prefix("http://kakaku.com/ite"), url-prefix("http://review.kakaku.com/revi"), url-prefix("http://kakaku.com/auth/bbsn"), url-prefix("http://kakaku.com/auth/prdevalua") {
/* フォント メイリオ指定 */
* {
font-family: "メイリオ", "Meiryo" !important; }


/* 画面背景色 */
body {
background: #fafafa !important; }

#camera #header {
background: #fff; }

.h1deco {
background: #fff; }
}

@-moz-document url-prefix("http://bbs.kakaku.com/bb"), url-prefix("http://kakaku.com/ite"), url-prefix("http://review.kakaku.com/revi"), url-prefix("http://kakaku.com/auth/prdevalua") {
/* フロート部 機材詳細の非表示 */
#itemviewFixedTab .fixedTabItem {
display: none; }
}

@-moz-document url("http://bbs.kakaku.com/bb"), url("http://kakaku.com/ite"), url("http://review.kakaku.com/revi"), url("http://kakaku.com/auth/prdevalua") {
/* フロート部 カテゴリタブの非表示 */
#itemviewFixedTab .fixedTabArea {
display: none; }
}

@-moz-document url("http://bbs.kakaku.com/bb"), url("http://kakaku.com/ite"), url("http://review.kakaku.com/revi"), url("http://kakaku.com/auth/prdevalua") {
/* フロート部 全体の非表示 */
#itemviewFixedTab {
display: none !important; }
}

@-moz-document url-prefix("http://photohito.com/camera/brands/"), url-prefix("http://photohito.com/photo/") {
/* PHOTOHITO 基本CSS */
body {
min-width: 780px; }

#search_form input {
width: 150px; }

body .wrapper_full article #path,
body .wrapper_full article section {
margin-right: 230px; }

#photo_list_search_form {
margin: 0 0 20px 0; }

#photo_list_search_form input {
width: 436px; }


/* 右側メニュー */
body .wrapper_full aside {
margin-right: 15px;
margin-left: -215px; }

aside {
width: 200px; }

aside .side_ad {
display: none; }

.notlogin_banner img {
width: 200px;
height: auto; }

#recommend_container img {
width: 200px; }

section .adBox-300-2 {
display: none; }

footer {
min-width: initial; }


/* photo画面 写真枠 */
#photo_detail #photo_view a {
margin: 0 180px 0 0; }

#photo_detail #photo_view_side .ad_detail {
display: none; }

#photo_detail #photo_view_side #photo_link_area {
width: 170px; }

#photo_detail #photo_link_area #photo_date {
margin: 20px 0 60px !important; }


/* photo画面 コメント枠 */
#photo_detail .wrapper:nth-child(3) {
width: 780px; }

#photo_detail .wrapper #contents {
width: 570px; }

#contents .content_ad {
display: none; }

#photo_detail #photo_comment_area textarea {
min-width: 510px; }

#photo_detail .recommend_photo_list img {
width: 90px;
height: auto; }

#photo_detail #fav_users_area li {
width: 56px; }
}






この記事はカテゴリ「スキン編集」にトラックバックしています。



[PR]
by Ataron | 2018-01-03 22:07 | PC環境(ハード/ソフト) | Comments(0)

価格.com掲示板をアレンジする(1) / ユーザースタイルシート

2017年 12月 29日

価格.com掲示板をアレンジ


Stylus の最も一般的な使用方法は、ネット上のページのルックスをユーザーライクに変更してしまう事でしょう。 価格.com掲示板のカメラ板を良く見に行きますが、情報満載のページ構成は良いのですが、実際に見る所は決まってます。 そこで、掲示板自体のコメント機能を重点として、余り関係ない表示を省きました。 下はアレンジ前のサンプルページです。

a0349576_19011509.png

右サイドにAD要素が多く、アレンジはこれらを非表示にしました。 ただ、右下の検索やPHOTOHITOのリンクなどは時々利用しますが、これが必要な場合はブラウザのStylusアイコンから一時的にスタイルをOFFにすれば良いだけです。

また、本来はページ幅930pxが基準のデザインで、右メニュー等を省いた幅に纏めるために、かなり多くの要素幅を縮めています。 困ったのは、上図中央のカテゴリタブです。 この幅を減らすために、タブの幅を縮小したアコーディオン型を採用しました。



アレンジ後のデザイン


下は、アレンジを適用した、ページ上部の様子です。

a0349576_19571083.png

AD部を省いたので落ち着いた画面になっています。 上図の青枠の部分のカテゴリタブは、下図の様に必要なタブにマウスを乗せると幅が広がるアコーディオン型です。

a0349576_15545998.png


フロート表示のカテゴリタブ


価格.com掲示版はページの下方にスクロールすると、フロート表示で機材詳細+カテゴリタブが表示されます。 これを小幅にアレンジしましたが、機材詳細の高さが増えてしまいました。

a0349576_20592661.png

上図はフロート表示ですが、青枠の機材詳細は少し邪魔なので、オプションを3種作って選択可能としました。

◎機材詳細を非表示(カテゴリタブのみ表示)
◎カテゴリタブを非表示(機材詳細のみ表示)
◎フロート部を全て非表示

下はカテゴリタブのみ表示とした状態です。

a0349576_21103227.png


その他のアレンジ


全体の背景色を淡いグレーにして、眩しさを抑えています。 背景色は好みに変更可能です。 幅を780px程度に抑えているので、文字が小さく読み難い場合に、普通のモニターでもブラウザ表示を150%程度まで拡大可能です。 またウインドウ幅を節約したので、コメント入力時等の2画面表示が楽に行えます。

コメント編集ページ、添付画像ビューワー、レビューページ、レビュー編集ページなど、掲示板と連携するページは、同じページ幅に収まるアレンジをしています。 この事で、他ページへの移行がスムーズに行えます。
また、カテゴリタブの別ページにもアレンジが適応されますが、おうよそ表示に問題はありません。



アレンジを実現する方法



① ブラウザにStylusを導入する


ウェブページのアレンジには、拡張機能(アドオン)の Stylusが先ず必要です。 これは、Chrome用とFirefox用があり、使用中のブラウザに合わせて導入します。

  Chrome版  Stylusの入手先
  
  Firefox版   Stylusの入手先


➁A userstyles.org から Kakakucom Viewer をインストール


以下のリンク先は、スタイル投稿サイト「userstyles.org」に私がこのスタイルを登録したページです。 スタイルの名前を「Kakakucom Viewer」としています。 このスタイルは Chrome版 / Firefox版 どちらのStylusでも使用出来ます。
スタイルのインストールは、サンプル画像の右下の Install Style を押すと、一瞬で Stylus にインストールされます。 この際、無関係なアプリの「Download」ボタンなどが同ページにあり、紛らわしいので注意ください。


➁B 手作業で Kakakucom Viewer をStylusにインストール


以下に掲載する「Kakakucom Viewer」(Mozilla Format)のCSSを、手作業で Stylus に登録することができます。 方法は、以下のリンク先を参照ください。 登録後の機能は➁Aと同じです。



スタイルのCSSとセクション構成


以下のCSSコードは Mozilla Format で、8セクションが適用先指定と共にコンパイルされています。

セクション1  価格.com 掲示板 基本CSS

セクション2   写真ビューワー画面 基本CSS

セクション3  コメント編集画面・レビュー編集画面 基本CSS

セクション4  レビュー編集画面 追加 基本CSS

セクション5  フォント メイリオ指定 / 画面背景色

セクション6  フロート部 機材詳細の非表示オプション

セクション7  フロート部 カテゴリタブの非表示オプション

セクション8  フロート部 全体の非表示オプション


●「セクション5」はCSSの扱いが出来る人には、簡単にカスタマイズが可能です。

●「セクション 6, 7, 8」の「有効」「無効」の切り替えで、フロート部の表示を選択出来ます。

● 初期設定は、「セクション1~6」を有効、「セクション7, 8」を無効に設定しています。

●セクションの適用先が「次で始まるURL」の場合は「有効」、「URL」等の場合は「無効」になります。 編集画面で適用先を変更して「保存」を押すと、オプション設定が変更されます。


価格.com 掲示板アレンジ 基本CSS  ( Mozilla Format )



@-moz-document url-prefix("http://bbs.kakaku.com/bbs/"), url-prefix("http://kakaku.com/item/"), url-prefix("http://review.kakaku.com/review/"), url-prefix("http://kakaku.com/auth/prdevaluate/") {
/* 2018.01.03 価格.com 掲示板 基本CSS */

/* ページ上部 機種説明 */
#contents930 {
width: 740px !important; }

#header {
width: 740px !important; }

#header .headerR {
display: none; }

.path.btmPath {
width: 740px; }

#itmOther {
display: none; }

#itmBoxMax {
width: 740px !important;
background-size: contain !important; }

#titleBox {
width: 720px !important; }

#titleBox + .bookmarkAdd3 {
right: -3px; }

#productInfoBox span.morelinkbox {
width: auto !important; }


/* カテゴリタブの小幅化 */
#main ul.tab li {
border-radius: 7px 7px 0 0;
overflow: hidden;
width: 65px;
box-shadow: 0 1px 2px 0px #00000080;
transition: .5s }

#main ul.tab li:hover {
width: 84px; }

#itemviewFixedTab ul.tab li {
border-radius: 7px 7px 0 0;
overflow: hidden;
width: 65px;
box-shadow: 0 1px 2px 0px #00000080;
transition: .5s }

#itemviewFixedTab ul.tab li:hover {
width: 84px; }


/* 標準タブ */
#main .tabArea {
width: 740px;
background-position: center bottom !important; }

#main .h3Area {
width: 720px;
background-size: contain; }

#main .h3Area + img {
width: 740px; }


/* フロート部 全体 */
#itemviewFixedTab {
width: 740px; }


/* フロート部 機材詳細 */
#itemviewFixedTab .fixedTabItemLines {
display: grid; }


/* スレッド表示順 ボタン列 */
.box04.change01 {
width: 116px; }

.box04.change05 {
width: 240px; }


/* NEW 新製品紹介 */
.newmodel h4 span,
.oldmodel h4 span {
width: 720px; }

.newmodel .newmodelInfo,
.oldmodel .oldmodelInfo {
width: 720px; }

.newmodel .valuebox,
.oldmodel .valuebox {
width: 300px; }


/* 右メニュー */
#mainRight {
display: none; }


/* レビューページ */
div#revbox {
width: 740px; }

#revbox .totalbox.clearfix {
width: 736px !important; }


/* 下部 ADブロック */
.sqTwoWrapper,
.sqTwo {
display: none; }

.fixedRightAdContainer {
display: none !important; }
}

@-moz-document url-prefix("http://bbs.kakaku.com/bbs/"), url-prefix("http://review.kakaku.com/review/") {
/* 写真ビューワー画面 基本CSS */
#contents {
width: 740px; }

#camera .h1Area {
width: 740px; }

#imageView {
margin: 0;
width: 740px; }

#imageViewInner {
margin: 0;
width: 740px; }

#imageView .imgAreaShadow {
width: 740px; }

#imageView .imageArea {
padding: 10px;
width: 718px; }

.imageArea a > img {
width: 718px; }
}

@-moz-document url-prefix("http://kakaku.com/auth/bbsnew/"), url-prefix("http://kakaku.com/auth/prdevaluate/") {
/* コメント編集画面・レビュー編集画面 基本CSS */

/* ページ上部 機種説明 */
#contents930 {
width: 740px !important; }

#header {
width: 740px !important; }

#header .headerL {
width: 270px; }

.prText iframe {
display: none; }

iframe.loginSearchFrame {
width: 460px !important; }

#main .bbsBar {
width: 740px;
overflow: hidden;
background-position: center bottom !important; }

#main .h3Area {
width: 720px; }

#main .h3Area + img {
width: 740px; }


/* 入力欄 */
table.tblInput.ver2 {
width: 740px; }

#main .tblInput.ver2 .commentTextarea {
width: 600px !important; }

#main .tblInput.ver2 .nicknameChoice {
width: 592px; }

#main .tblInput.ver2 #file_up .step {
width: 602px; }

#FrmInput .agreementFrame,
#FrmUpload .agreementFrame {
width: 738px; }


/* 下部クチコミ参照枠 */
#main .box08 {
border: none; }
}

@-moz-document url-prefix("http://kakaku.com/auth/prdevaluate/") {
/* レビュー編集画面 追加 基本CSS */
#main .tblInput.ver2 td {
padding-right: 0; }

#main .tblInput.ver2 .tblInput02,
#main .tblInput.ver2 .tblInput03 {
width: 590px !important; }

#main .tblInput.ver2 .commentTextarea {
width: 578px !important; }

#main .tblInput.ver2 #file_up .step {
width: 580px; }
}

@-moz-document url-prefix("http://bbs.kakaku.com/bb"), url-prefix("http://kakaku.com/ite"), url-prefix("http://review.kakaku.com/revi"), url-prefix("http://kakaku.com/auth/bbsn"), url-prefix("http://kakaku.com/auth/prdevalua") {
/* フォント メイリオ指定 */
* {
font-family: "メイリオ", "Meiryo" !important; }


/* 画面背景色 */
body {
background: #fafafa !important; }

#camera #header {
background: #fff; }

.h1deco {
background: #fff; }
}

@-moz-document url-prefix("http://bbs.kakaku.com/bb"), url-prefix("http://kakaku.com/ite"), url-prefix("http://review.kakaku.com/revi"), url-prefix("http://kakaku.com/auth/prdevalua") {
/* フロート部 機材詳細の非表示 */
#itemviewFixedTab .fixedTabItem {
display: none; }
}

@-moz-document url("http://bbs.kakaku.com/bb"), url("http://kakaku.com/ite"), url("http://review.kakaku.com/revi"), url("http://kakaku.com/auth/prdevalua") {
/* フロート部 カテゴリタブの非表示 */
#itemviewFixedTab .fixedTabArea {
display: none; }
}

@-moz-document url("http://bbs.kakaku.com/bb"), url("http://kakaku.com/ite"), url("http://review.kakaku.com/revi"), url("http://kakaku.com/auth/prdevalua") {
/* フロート部 全体の非表示 */
#itemviewFixedTab {
display: none !important; }
}



〔更新〕2018.01.03
 下部 ADブロック項目 追加  上記コードは更新済です。



この記事はカテゴリ「スキン編集」にトラックバックしています。



[PR]
by Ataron | 2017-12-29 22:07 | PC環境(ハード/ソフト) | Comments(0)

拡張機能「Stylus」(Chrome/Firefox)のアレンジ

2017年 12月 17日

ユーザースタイルシート


エキサイト編集画面のアレンジのために「ユーザースタイルシート」を利用する様になり、最初は「Stylist」という国産のブラウザ拡張機能を利用していましたが、最近は「Stylus」という米国製の拡張機能を専ら使用しています。 これらの拡張機能を使うと、特定のページを自分の目的に合わせてアレンジ出来ます。 ブラウザが表示するページなら、おおむねアレンジが可能です。

いつもウォッチするページの過剰なコマーシャルをカットする、読み難いページのフォントを変えて読み易くする等は、とても簡単で実用的な例です。 更に進んだアレンジをすれば、ブログ編集画面を使い易くするとか、ブラウザ上で動作するウェブメールやウェブアプリなどのデザインもアレンジ可能と思います。 (その必要があればですが)

アレンジ内容は「スタイル」(スキン)と呼ばれるファイルに出力し、ユーザーが発表したりそれを利用したりできます。 ユーザー投稿を扱うサイトでは、Google検索ページの背景アレンジ、YouTubeページのアレンジ等を良く見かけ、先ずそういう利用から入る人が多い様です。 しかし、可能性は使い方アイデアしだいで、ブラウザの機能を文字通り拡張する、大変に素晴らしい機能です。



「Stylus」自体のアレンジ


私にとっては、とてもお世話になっているStylusです。 前のページで少し書きましたが、そのStylus自体の機能デザインもアレンジしています。 最近のデザインを少し載せておきます。

私のアレンジは小幅のウインドウでの使い勝手を向上させる事が主目的です。 また、日本語版の表記のまずさを補い、デザイン向上を細かく配慮しています。 Stylusはメインの「管理画面」でユーザーが利用する複数のスタイルをリスト表示し、個々のスタイルを「スタイル編集画面」で編集するという、2画面の操作体系です。


管理画面


管理画面の小幅時の状態をアレンジした結果です。

a0349576_23293650.png

操作メニューはウインドウ上部にコンパクト化し、良く使うボタンだけを表示しています。 メニューにマウスを乗せるとプルダウンしますが、最近は管理オプションも表示できる様にしました。

a0349576_23384014.png

殆どの機能がこの画面だけで利用出来、もはや本来の広い画面に戻る必要がありません。(ウインドウ幅を拡げると、本来の表示状態になります) しかし、小幅時は簡素化が重要な目的なので、オプションはマウスを乗せるまで開かない様にし、オプション表示が不要なら非表示に出来る様にしています。


スタイル編集画面


管理画面のリストのスタイル名をクリックすると、そのスタイルがすぐに編集可能です。 多くのStylusユーザーは、スタイルのCSSを自分で編集します。(編集が出来なくてもStylusは使えますが) ブラウザ表示にスタイルを適用すると同時に、そのスタイルを作ったり編集修正したりするのも、このStylusの機能です。

下は小幅時の編集画面です。 やはりウインドウ最上部にメニューをコンパクトに纏めています。 従来のアレンジはスタイル名の枠だけでしたが、今回は主要な機能ボタンを常に表示する様にしました。

a0349576_23530650.png

更に幅が狭くなるとスタイル名が隠れて来ますが、マウスを乗せると拡がり実用上は困りません。 メニュー背景がブルーですが、これはコードに加筆があった場合の状態で、ユーザーにそれを知らせるものです。

編集画面にも編集オプションがあります。 また、コード記述のエラーを報告する機能があり、これらは上部メニューにマウスを乗せるとプルダウンして表示されます。

a0349576_00003046.png

編集オプションも邪魔にならない様にオプションバーにマウスを乗せないと開かない仕組みで、またクリックで開かない様にロックできます。 更に全く使わない場合は、小幅時は非表示に出来ます。

以上の様にコンパクト化に注力したのですが、Stylusを2個のウインドウで並べて表示し、コードの見比べ編集が出来ます。 これは改めて便利な事に気付きました。 日本語版を英語版に再編集する時などは、見比べ編集は必須機能なのです。



Stylusのスタイル「Stylus LT800」


この コンパクト使用に特化したスタイルを「Stylus LT800」という名前で、「usedtyles.org」というサイトに登録しています。(下のリンク先です)

もちろん、拡張機能のStylusをブラウザに導入していないとこの「LT800」は意味がありません。 それ以前に、Stylusの利用目的がはっきりしていない場合はお勧めしません。 しかし、これからユーザースタイルシートやCSSの知識を得たいと思う人には、Stylusは大変にお勧めできる拡張機能です。


Chrome版 Stylus の入手先


Firefox版 Stylus の入手先


Stylus LT800 の入手先


  ◎アレンジ結果を示すメイン画像の右下の Install Style を押してインストールします。
  ◎スタイルのインストールは一瞬で完了し、同時に働き始めます。
  ◎紛らわしい「DownLoad」などのボタンを、間違って押さない様に注意してください。
  ◎アレンジを停止するには、Stylusの管理画面でこのスタイルを「無効」にします。




この記事はカテゴリ「スキン編集」にトラックバックしています。


[PR]
by Ataron | 2017-12-17 09:56 | PC環境(ハード/ソフト) | Comments(0)