☆ なんちゃら かんちゃら ☆ 313947

▲TOP あのー, ココって,どんな掲示板なんですかぁ?
ココをつくった私 (飯山一郎) にも サパーリ 分かりません.
どんな掲示板にするか?  それは,あなたが決めてくださいな.
なんちゃら かんちゃら 好きな事を書けばE~んじゃないですかぁ  (^_^;

飯山一郎の古代史  北朝鮮の写真 ビビンバ!北朝鮮! 金王朝の深い謎  『放知技』へ


【Stylish】サイトのデザインを個人的に変更する【実例集】

1:上州@大渡橋(書式に結構こだわる純文学系) :

2015/12/13 (Sun) 17:15:35

host:*.bbtec.net
http://bbs6.fc2.com//bbs/img/_422400/422306/full/422306_1449994535.png サイトのデザインはこちら好みに変更可能なり。個人的なれば「ユーザースタイルシート」という。これをブラウザに適用させるには拡張機能が必要にて「Stylish」が代表的。対応するブラウザはFirefox、Chrome、Opera、Sleipnirなど。IEは多分不可。便利なツールでありながら使っている人は数パーセント程度らしいと知る。勿体ない話なり。ユーザースタイルシート作りのわが苦闘の日々を思い返すにつけ、実例があれば楽チンだったのに。しかしなかった。実例展示する次第なり。
【スクリーンショット】Stylish入手サイト。
24:zhu :

2017/01/09 (Mon) 18:40:51

host:*.access-internet.ne.jp

ipadを使用しています。時折ネットに繋がりにくくなり、
そういう時に限って自分で開いた覚えのない
ファイルがトランプを広げたように
複数開けられた状態で並べられています。
この現象を止める方法をご存知の方いらっしゃいましたら
教えていただけませんか。
23:上州@大渡橋 :

2017/01/07 (Sat) 20:18:00

host:*.eaccess.ne.jp
【タイトル】第23回 Firefox用アドオン「Anti-Aliasing Tuner」を使うの件
【投稿者】上州@大渡橋

【症状】原因は多分あれだと思うが――あれの説明は無駄に長いので略――、突然モニターの文字が汚くなる。線が本来の太さにならず不規則に細く、部分的に太い箇所もあり、汚い。版画文字のようなかすれた美しさには至らず醜いだけ。当然読みにくい。あるサイズ以上にすると本来の正しい姿になるが、文字がやや大きすぎて読むにはうっとうしい。あるサイズ以下で、望むサイズにすると汚くなる。メイリオNotoSansなどは綺麗に表示される。肝心のMyフォントたる源柔ゴシックが良くない。なぜなんだ、どうしてなんだ、と年末年始3週間苦闘す(当然軽い風邪をひくことになった)。

【対策】アドオンを入れたら綺麗な表示に戻った。「アンチ・エイリアシング・チューナー」という。モニター表示は小さな四角形の集まりで作られるので斜線曲線はギザギザになる。あれがエイリアシング。ロゴ作成ソフトでこの用語を目にしていたが、意味を掴まないで来た。MacTypeより綺麗で検索したら2chにこのアドオンの記述があったが、確認のためこのアドオン名で検索をかけたら、源柔ゴシック生みの親サイトが1頁目に登場、源真ゴシックのほうの解説ページにFirefoxとの組合せとして記述されてあり。絶句す。気付かなかった。

【特徴】MacTypeより桁違いに綺麗(PCごとに異なる可能性あるかも)。ギザギザが消える。ポータルサイト系のニュース一覧の恐ろしくちっこい文字でさえ拡大しないで読めるようになり、読む速度が速くなった。MacTypeで効果が現れなかった箇所でもギザギサが消えた。Linux表示文字にあと一歩くらいには追い付いたと言えそう。Firefox系利用者必須のアドオンと信ず。

【スクリーンショット】
・ある日のヤフートップページ。
https://dl.dropboxusercontent.com/s/9vithyq1ot1tsl8/screenshot_01.png
□IE用として作成されたものもあり。「Anti-Aliasing Tuner for IE」
http://ice.hotmint.com/aatie/

【使い方】
□Anti-Aliasing Tunerのインストール先
https://addons.mozilla.org/ja/firefox/addon/anti-aliasing-tuner/
□設定画面
https://dl.dropboxusercontent.com/s/5d7ej2mukde5vvs/20170105_2.png
□設定箇所
・Gamma……濃さ。数字を大きくすると薄くなる。
・Enhanced contrast……くっきり感。数字を大きくするとくっきり見える。
・以下は画像通りでよさそう。
・中段から下は大文字の場合の設定。いじる必要なさそう。

【附記】
・テキストエディタMeryで英単語の字間がギューギュー詰めとなる不具合出現。
・筆者の場合、MacTypeはそのまま、Gdippは削除。これで不都合ない模様。
・源柔ゴシックは豆腐文字発生す。対処法見つけるも手間食いそうなので後回し。
22:上州@大渡橋 :

2016/12/20 (Tue) 21:39:44

host:*.eaccess.ne.jp
【タイトル】第22回 Webフォントを利用するの件
【投稿者】上州@大渡橋

■なぜだか知らないが、このところ最近IMDbとYahoo!Moviesで予告編が再生されなくなった。首かげたまま何日かが過ぎたある日ハタと、広告ブロック用アドオンを別のものに変えたのが原因と閃いた。「uBlock Origin」は予告編を広告と見なしているらしかった。解除ボタン押すとIMDbとYahoo!Moviesともに予告編が再生された。

■そんな人はいないと思いますが、このスレを見て「uBlock Origin」をインストールした方で動画が最近急に再生されなくなったという方、「uBlock Origin」の設定をお願いいたします。
○動画が再生されないサイトを開き、
○筆者の環境の場合、ツールバーの右端の右向き矢印アイコンをクリック。
○出現するメニューに[uBlock Origin]の文字あり。これをクリック。
○大きな電源アイコンみたいのが現れる。
○アイコンが濃い色だったらオン状態。これをクリック。
○アイコンが薄い色に変わる。これでブロック解除状態になる。

■それにしても、この「uBlock Origin」を入れてからというもの、広告ブロックを全面解除するか、一時的にでも解除しろと命令されるようになっている。前のものより強力みたい。

■Cyberfoxが「ご迷惑をお掛けして」連発の絶不調になっていた頃、Linuxに初めてチャレンジす。文字サイズが異様に小さい感じがするが――筆者のWindows環境でのそれと比較すると半分以下――不思議と読める。もしやと思い、「き」と「さ」を探すと、やはりGoogleとアドビ共同開発系のフォントだった。

■Webフォントを表示させてLinux気分に浸る法。
○WebフォントはGoogleサーバにあり、自分のPCにインストールする必要なし。
○PCモニター表示用なのでWin付属フォントよりも断然文字が見易くなる。
○ユニバーサル系角ゴシック。
○シンプルで、癖がなく、漢字と仮名のバランスがかなり模範的。
○ただし、拡大用としてはつまんない。

【Stylishでの設定】
○Stylishアイコン[S]を左クリック。
○[新しいスタイルを書く]をクリック。
○[白紙のスタイル]をクリック。
○真っ白編集画面が出るので、そこに以下をコピペ。

▼▼▼ ここからコピー ▼▼▼
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
body {
font-family: 'Noto Sans JP', sans-serif;
}
▲▲▲ コピーここまで ▲▲▲
○[お試し]クリック、サイト表示して確認。
○良ければ、[保存]クリック。編集画面閉じる。

【フォントの種類】
○Noto Sans以外にも数書体あり。
○どれも似たり寄ったりですけど、ちょっと違います。

● Noto Sans Japanese
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
body { font-family: 'Noto Sans Japanese', sans-serif; }
● m+1p
@import url(https://fonts.googleapis.com/earlyaccess/mplus1p.css);
body { font-family: 'Mplus 1p', sans-serif; }
● Rounded M+ 1c
@import url(https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css);
body { font-family: 'Rounded Mplus 1c', sans-serif; }

【最初の表示】
○Googleサバから読み取ってくるのに時間がちょっと掛かる。1、2秒。
○一旦表示されるとキャッシュとして残り、次回から瞬時の表示となる。

【その他の指定】
○サイズfont-size、太さfont-weightなどの指定も可。
○太さは普通100刻みで、100から700まで。
○太さの見本は検索で参照のこと。
○サイトの指定を無視したい場合は!importantを付ける。

【感謝を込めて参照サイト】
○Google Fonts + 日本語 早期アクセス Google Fonts + Japanese Early Access
 → https://googlefonts.github.io/japanese/
21:上州@大渡橋 :

2016/12/04 (Sun) 21:52:49

host:*.eaccess.ne.jp
【タイトル】第21回 広告バナーその他をブロックするアドオンの件
【投稿者】上州@大渡橋
おとといも昨日もわが街の空は真っ青だった。白い直線は現れなかった。土曜に出なければ日曜日も出ないだろうと思ったら、どっひゃーとなっていた。すると、ちょうどドクターヘリが妙に低空で飛んで行き、すると、救急車のけたたましいサイレンが近付いてきてやがて遠ざかって行った。これは「ER緊急救命室」のロケ現場かと思われた。

右クリックメニューの[要素を検査]、あれの上にある[要素をブロック]というのはなんだろうかとふと思い、クリックして検査したところ、広告ブロック用アドオンで、自動ブロックがきかない、広告以外のものを非表示にするものと判明。知らなかった。

筆者が常々消したい、邪魔だと思うものに、SNSアイコンがある。あれが大抵ページの下端に結構大きなサイズでへばりついて、サイトをスクロールしてもあれらのアイコンの集合体は居続ける。文章の上に乗っていて目障りでかなわない。あれらが常に表示されなければならない理由というのはなんなのだろう。

「次へ/前へ/トップへ」のリンクナビアイコンもある。縦表示が多いが、これも本文にかぶり、本文が読みにくい。特に「トップへ」アイコンは見る側のブラウザで対応可能になっている。好きなサイズ、好きな色合い、好きな形状で。

あれらがこの「要素をブロック」で非表示にできるとは。今までずっと知らなかった。この連載(?)を書かなければ一生気付かなかったに違いなし。使い方はひどく簡単。なお、筆者はuBlockを使っていたが、どうも制作者側に問題があるらしいと今回知り、本家尊重でuBlock Originに変更した。こっちにすると「要素をブロック」は右クリックメニューから消えた。

■アドオンuBlock Origin :: Add-ons for Firefox
 →https://addons.mozilla.org/ja/firefox/addon/ublock-origin/
――CPUとメモリーの負担を抑えます。
頼もしいお言葉。

■アイコンはインストールすると自動的にツールバーに登録される。筆者の場合は表示スペースなく右の矢印をクリックすると出現する。
■uBlock適用前(筆者Stylish利用中)の姿。
 →https://dl.dropboxusercontent.com/s/89urpoc981hake9/2016-12-02_040921.png
右手の枠の中の「uBlock Origin」をクリック。

■右手はこう変わる。大きな電源アイコンみたいなものの下にあるスポイトをクリック。
 →https://dl.dropboxusercontent.com/s/y38joc8z5q3vzkd/2016-12-02_041006.png

■サイト全体が暗くなる。マウスをその暗闇に移動させると、マウスが乗った箇所がオレンジ色になる。目当てのアイコン上にのせ、表示される四角形の出具合を確認する。ここでは、SNSアイコンが3種類表示されているのが分かる。まずtwitter上で左クリック。
 →https://dl.dropboxusercontent.com/s/5hvh8eusaplwy7k/2016-12-02_041029.png

■右下角にうっすら四角形の窓らしきものが出現する。
 →https://dl.dropboxusercontent.com/s/m9drxo9gk3i0fuv/2016-12-02_041048.png

■マウスを持って行くと、はっきり姿を現す。[作成]をクリック。
 →https://dl.dropboxusercontent.com/s/geltctidol9nyau/2016-12-02_041100.png

■更新ボタンか[F5]キーを押す。twitterのアイコンが消える。
 →https://dl.dropboxusercontent.com/s/wkr4sl79fslpv1e/2016-12-02_041112.png

■残りのSNSアイコンも同様に処理。そうすると、こうなる。
 →https://dl.dropboxusercontent.com/s/3uubwtbmp79trpc/2016-12-02_041729.png

■解除したい場合。uBlockアイコンをクリック。この図の一番上の行にマウスを当てると、[クリックしてダッシュボードを開く]と表示される。クリックする。
 →https://dl.dropboxusercontent.com/s/z9r09hprp15ynaf/2016-12-03_122011.png

■設定画面が現れる。[MYフィルター]をクリック。ここに今非表示にしたアイコンのURLらしきものが書いてある。解除したい行を削除する。[変更を適用]ボタンを押す。
 →https://dl.dropboxusercontent.com/s/qxympmsxqrgunmt/2016-12-03_122055.png

文章が引き立つ眺め。行間もあり、横幅も広くなく、爽やか景色。念のため言い訳すれば、広告その他が嫌いというわけではなく、文章を読む際邪魔になるから困るというだけの話なり。
20:上州@大渡橋 :

2016/11/30 (Wed) 21:45:22

host:*.eaccess.ne.jp
【タイトル】第20回 編集・削除できたの件、わが街の空はケムトレイルで一面真っ白になったの件
【投稿者】上州@大渡橋

携帯ぎ○装アドオン利用して編集・削除ができた。
修正は以下の通り(第19回投稿文)。
【誤】回転しまっていた。 【正】回転しまくっていた。
【誤】まずい話なり。 【正】まずい話だった。
【誤】整列変形でき(改行)ず 【正】整列変形できず

■放知技で新スレが乱立する理由が今回分かった。
携帯での表示は、トップページ、個別ページともに上部に[新規投稿]リンクがあり、ここをクリックしてしまうらしく見えた。これで新スレが建ってしまうが、大抵タイトルは漠然としていて、スレのタイトルの形式を満たしていない。当人に新スレを立てる気がないのになぜか立ってしまったという風情である。

■携帯から個別スレで投稿する場合は、個別ページに移り、先頭にはたいてい飯山教授博士の当該スレの趣旨が書いてあるが、その箇所の[返信]をクリックすること。タイトル欄には「Re:○○○」と既に書いてあり、新たに書き込む必要はない。――という、但し書きがスレ趣旨文の末尾に必要ではないかと思われた。

■10月初め、たしか基軸通貨に人民元が仲間入りという日、米ドルのほうは国内で半値に切り下げ、外国ではそのままという情報があり(Beforeitnews)、おー、米ドル暴落かと経済よく分かっていない者ながら思ったのだったが、鮮やかにハズレとなった。

■しかし、あした、国内で半値切り下げが来ると再びあり(上記とは別情報源)。新紙幣も印刷されてあり。画像が小さいせいかなんだかショボイ。こども銀行券に見えなくもない。じゃ、そうなるとして、紙幣の価値が半分になってしまうというのは国民の側からするとどう感じるものなのだろうかと考え、そらぁ、アッタマに来るじゃないかと思われた。インドの突然の高額紙幣使用禁止で大行列となったというが、米国は自衛のための銃を持っていいというお国柄であるし……

■いやいや世間知らずのバカヤローたる純文学系が考えても意味はない。それにしても、今日のわが街の空はケムトレイルで物凄かった。この3ヶ月で一番ひどい。早朝は真っ青な空だったのが、正午にはもう辺り一面真っ白になっていた。ケムトレイルは初めは直線状だが、やがて横に広がって行く。その直線があっちにもこっちにアットランダムに引かれ、それらが横幅を広げて行き、やがて背景の真っ青な空が見えなくなった。ネット天気サイトではわが県に雲は写っていなかった。ネット民の投票(?)ではくもりが圧倒的になっていた。兵藤正俊先生の言う、日本は欧米の廃棄物の最終処分場というあれなのかも知れないと思われた。
19:上州@大渡橋 :

2016/11/30 (Wed) 16:30:32

host:*.eaccess.ne.jp
【タイトル】第19回 前回投稿文の誤記訂正。誤記投稿ミスを編集削除できるかどうか確認の件
【投稿者】上州@大渡橋

みっともないことに、あろうことか、タイトルでドジってしまった。
以下の通り。
(誤)【タイトル】第17回→(正)【タイトル】第18回
(誤)[要素の検査]→(正)[要素を検査]

こういうことがあるから、編集削除ページに入る技について書いたのだったが(第2回)。自分でやって確かめておかないというのはまずい話だった。投稿文をしたためつつ作業のいちいちを記録しつつ、アドオン設定・解除を繰り返していたところ、カウンタが異様に回転しまくっていた。見に来る人なし。数字増やそうとの意図も全くなし。

さて、書式について確認すると、CSSが生きていなかった。使い回しでよくするミスで、放知技適用の指定になっていた。取り急ぎ、書き直す。

【携帯ギ○装アドオンに関して】
■なんちゃら掲示板(PC版)用スタイルシートと携帯版用を分離した。コピペして保存されたし。
□なんちゃら掲示板用スタイルシート
 →https://dl.dropboxusercontent.com/s/fa3l21ldas3k6xk/nanchara_pc.txt

□なんちゃら携帯版用スタイルシート
 →https://dl.dropboxusercontent.com/s/c94j3050zzqnopy/nancha_keitai.txt

■同時適用で問題なく、アドオン適用中はどこも携帯版CSS表示となる。当たり前だが。ただし、PC版とは違いあり、省略多々あり。たとえば、改行なしの思いっ切りベタ書き。改行を忘れたなんていう誤記は気にする必要全くなしと知る。

■なんちゃら掲示板(携帯版)用CSS適用のスクリーンショット。
□トップ画面→https://dl.dropboxusercontent.com/s/vi0qeye99w1qp0t/2016-11-29_150613.png

□個別スレ→https://dl.dropboxusercontent.com/s/10atc22rfimw3eq/2016-11-29_150629.png

□編集削除キー入力(これ以上の整列変形できず)
 →https://dl.dropboxusercontent.com/s/ast4fadj7tpx0oq/2016-11-29_150703.png

□ぎ○装選択と解除→https://dl.dropboxusercontent.com/s/2hwwuqdbgnt64np/2016-11-29_150901.png

□選択・解除のあとは更新アイコンか[F5]キーをクリック。
画像→https://dl.dropboxusercontent.com/s/5s8qrq4nzfe2y60/2016-11-29_202820.png

【アドオンFireMobileSimulator】
●入手先→https://addons.mozilla.org/ja/firefox/addon/firemobilesimulator/

【アイコンをツールバーに登録する手順】
●右端の横棒3本アイコンを左クック、最下段の[カスタマイズする]を左クック。
画像→https://dl.dropboxusercontent.com/s/v36ggrthd1wphq6/2016-11-29_151413.png

●左側から黄色い丸い(カエル)アイコンを探し、左クリックしながら、下のバーか上のツールバーへ引きずって行って離す。(注記。画像中のアイコンは見やすい場所に配置しなおしている)
画像→https://dl.dropboxusercontent.com/s/hzhp0ompp3r6wpu/2016-11-29_151507.png
●[カスタマイズ終了]をクリック。

●アドオンの設定。黄緑丸アイコンを左クリック→[オプション設定]をクリック。
画像→https://dl.dropboxusercontent.com/s/901azlvsualvogh/2016-11-29_151648.png

●[全般]→[表示]→[表示領域の横幅を端末に合わせる]にチェック入れない。
画像→https://dl.dropboxusercontent.com/s/8f6thoq0gd5n856/2016-11-29_151706.png


【投稿欄の右端が切れた(よくある事例)場合の対処】
画像→https://dl.dropboxusercontent.com/s/3zvrpcwewel1fqd/2016-11-29_132556.png
○これは横幅を絶対値で指定するときよく起こる。
○横幅が大きすぎた。徐々に小さくして確認する。
○textarea { width:480px !important; }
 これで右端が切れていたので475に。
 右端の枠が出たのでよしとする。芸がなさ過ぎるけど。
画像→https://dl.dropboxusercontent.com/s/0vrv0v4j34tckor/2016-11-29_204349.png

【ついでながら、投稿欄のサイズ変更】
○右下隅にマウスを当てると、左右矢印付き右肩下がり45°のマウスに変わる。
画像→https://dl.dropboxusercontent.com/s/gm7abl5cjjqfn0q/2016-11-29_205021.png

○左クリックしたまま、下にずるっと引きずり、好きな箇所で離す。
画像→https://dl.dropboxusercontent.com/s/qfsaojue7icnqqw/2016-11-29_205039.png

○カキコしたあと、サイズを元に戻す必要なし。戻しても良いが。[書き込む]ボタンをクリックすればよい。
○この機能の存在をブログ用WordPressで気付いたが、投稿書き込み欄は今はどこでもこの機能付いている模様。
18:上州@大渡橋 :

2016/11/25 (Fri) 21:28:57

host:*.eaccess.ne.jp
【タイトル】第17回 Stylishコード編集の実地編その1 
放知技最下部投稿欄の文字を小さくしたいの件
【投稿者】上州@大渡橋(環境、Windows7、Firefox傍系のCyberfoxを利用。Firefoxより少し速いのが取り柄だったが、この二ヶ月くらい落ちまくり。動画再生で不調となるの報告多数。しばらく前バージョンアップとなり、以前の速さを取り戻している)

【編集するスタイル】
●[放知技CSS白黒第1版]。第1回で示した抹茶色背景版の変更版。その後掲示板を見ていて変えたくなった箇所多々発生、しかし後回しを決め込んでいたが、Stylishスタイルシート作成講座(?)連載中につき、自分が編集する作業工程をそのまま、あたかも言わば実況生中継のような形にして展示するほうが筆者にとって一石二鳥のようだと閃いた。
画像→https://dl.dropboxusercontent.com/s/q151vwuct6ua96n/2016-11-25_142918.png

●[放知技CSS白黒第1版]のスタイルシート
【CSSファイル】https://dl.dropboxusercontent.com/s/3t1vc5tlo0aoq3q/hohchigi-css-shirokuro_201.txt
 →ブラウザ上にスタイルシートとして現れる。
 →キーボードで[Ctrl]押しながら[A]押す(全て選択)。
 →キーボードで[Ctrl]押しながら[C]押す(コピー)。
●テキストエディタ(Notepad、ワード、一太郎その他)を開き、
 →キーボードで[Ctrl]押しながら[V]押す(貼り付けておく)。

●放知技開く。
 →ツーバー上の[S]アイコンを左クリック。
 →[新しいスタイルを書く]→[白紙のスタイル]と進み、
●真っ白編集画面が現れる。画面上のどこかで左クリックして再び、
 →キーボードで[Ctrl]押しながら[V]押す(貼り付け)。
 上記のブラウザ上でコピーしたコードが貼り付けられる。 
 →[名称]に「白黒版」とでも記入し[保存]左クリック。
●放知技に戻る。
上記スクリーンショットと同じ姿が現れる。

●ツールバー上の[S]アイコンを左クリックすると、
放知技適用スタイル名が並ぶ。名称上で左クリックすると、チェックが入ったり消えたりする。ここでは、抹茶色背景版のチェックを消し、白黒版にチェックを入れる。同時適用でもケンカは起きないが、どちらの指定が現れるか不明。
画像→https://dl.dropboxusercontent.com/s/18owj9amx5lm3ke/2016-11-24_140810.png


【改めて作業の目的を確認】
●放知技上で、問題の最下部投稿欄に移動。
画像→https://dl.dropboxusercontent.com/s/k0iliakbbrs7px8/2016-11-23_113924.png
――「書き込む」、「新規スレ作成」、項目などの文字が大きすぎるので私は小さくしたい。

●Stylish編集画面は恐ろしく文字が小さく、サイズ変更も不便で見にくい。これもスタイル変更したいが、ここはズルイことに指定対象外。そこでテキストエディタと併用する。目的の要素タグを探したいとき、また、その行番号を知りたいとき、こちらで検索を掛けるのが断然楽チンなり。勿論人の好みによる。
■スクリーンショットにすると、以下の通り。
画像→https://dl.dropboxusercontent.com/s/kd4xz9y23148kd3/2016-11-23_115246.png


【ここまでは実験台のスタイルシートをセットしただけの話。ここから以下が実際の修正作業です】
●放知技ページのどこかで右クリック。
 →選択肢の中から[要素の検査]を左クリック。
画像→https://dl.dropboxusercontent.com/s/izzkk7l68rcivpm/2016-11-23_075020.png
注。これは試し修正後に撮った画像の気配。撮り忘れ。
 →ブラウザ下部に検査用紙(?)が出現。
画像→https://dl.dropboxusercontent.com/s/5y7cpo3cy6uzyqf/2016-11-23_115528.png
 
●マウスを下部検査用紙の上端左隅の[四角に矢印入り]アイコンに当て左クリック。
 →淡いブルーに変わる。黒いカーソルは筆者のもの。
画像→https://dl.dropboxusercontent.com/s/2c4zumjm3shnhe8/2016-11-23_115945.png

●マウスを静かにゆっくり上方の放知技画面に移動させる。ここからはマウスの左右両クリックボタンから手を離した方が良いです。マウスの尻部を親指と人差し指で軽くつまみ、動かすというより押すという動作で臨む。繊細で微妙な世界(ビミョウは流行語だったが、今や殆どテレビで耳にしない)。イライラさせられるが決してムキにならないこと。
 →マウスが乗ると薄いブルーに変化する領域が現れる。
 →マウスが乗る位置により、ブルー領域が変化する。
 →「書き込む」を含む領域がいくつあるか探る。
 →ブルー領域の上部中央には必ず黒いボックスが表示され、要素タグが示される。要素タグ名を記憶のこと。
 
■ここでは3個。領域の広い順に並べると、
□[div.formbox]が出る領域。
画像→https://dl.dropboxusercontent.com/s/b60rei6dm9v5kk8/2016-11-23_120506.png
□[ul]が出る領域。
画像→https://dl.dropboxusercontent.com/s/twcngxf4u91g38b/2016-11-23_121806.png
□[li]が出る領域。
画像→https://dl.dropboxusercontent.com/s/jqv7ukbmtldhz6d/2016-11-23_122042.png

●一番狭いブルー領域[li]のときにその場で左クリック。
 →検査用紙の最下部行に不等号が表示される。
 →[div.formbox]>[form]>[ul]>[li]という並び。
画像→https://dl.dropboxusercontent.com/s/m87mu0j2s5a46z1/2016-11-23_122133.png

●こちらが手探りして得た領域の正しさがほぼ確認される。
このタグの上下関係の把握はスタイル作成では極めて重要。
●やっと文字サイズ指定。
 →どの要素の中に文字サイズを入れるか。
 →現在の指定がどうなっているか確認する。
注。専門家的には入れるべき箇所は決まっているようですが、ド素人は気にしない。指定がサイトに反映されればよしとする。

●コードをコピペしたテキストエディタに移動し、
 →上部ツールアイコンの双眼鏡をクリック。検索窓を出す。
 →formboxと記入。[下を検索]を左クリック。
 →formboxがマーカー付きで登場。行番号を記憶のこと。
 →font-size:100%;と書き込んでコピー。
画像→https://dl.dropboxusercontent.com/s/etu7gpcqzv585jx/2016-11-23_122520.png

●スタイルシート編集画面に戻り、行番号へ直行。
 →[div.formbox]タグ内に「font-size:100%;」を貼り付けるが、放知技上に変化現れず。空振りハズレとなる。ひょっとしたら「!important」を入れ忘れたかも知れないといま閃くが、この文章の訂正加筆が手間取るのでパス。

●大きな領域での指定がダメとなれば、小さな領域に入れてんべえとなる。上下少し移動して眺める。
 →要素[li]が見あたらない。
●[li]タグだったんかい。90くらいでいいだんべえ……
 →エディタにli { font-size:90% !important; }と書き込み、これをコピー。
●Stylish編集画面に戻り、
 →[formbox]検索で記憶した行に移動し、
 →そこら近辺に貼り付け。
画像→https://dl.dropboxusercontent.com/s/cjhp26nw3m9lpj2/2016-11-23_122139.png

●[お試し]左クリック。放知技画面を出す。確認。まあ、良しとす。
●編集画面に戻り、「新規スレッド作成」とある下の行の
 →[font-size:125%]を[font-size:115%]に
 →「書き込む」とある行の下の行の、
 →[font-size:125%]を[font-size:115%]に変更。
 →[お試し]左クリック。放知技画面に戻り確認。
●ほぼまあ希望通り。
画像→https://dl.dropboxusercontent.com/s/8ad8wkqxb0mgzxr/2016-11-23_122353.png
●下部の[要素の検査]欄の上端右隅にある[×]をクリックして終了。
●編集画面に戻って[保存]左クリックして終了。
●放知技の最下部を表示して眺める。
●小さな達成感が血管内を駆けめぐる。
17:上州@大渡橋 :

2016/11/24 (Thu) 10:50:59

host:*.eaccess.ne.jp
【タイトル】第17回 DropBoxからの画像直リンクを試す
【投稿者】上州@大渡橋
【趣旨】今回からStylishコード編集の実地編を始ようと考えた。画像があると理解が早いに違いないが、この掲示板では画像の転送は一枚のみで話にならず。画像をどこかに置いてリンクを張ろうと考えた。自分のブログに置く方法もあるが、 無料利用者による画像の直(じか)リンというのは鯖管理者が嫌がるはず。検索するとDropboxができるよと教えて貰った。

以前めぼしいクラウド系全てに登録し、直リンができるかどうか検査したことがあったが、どれもダメだった。Dropboxもダメだったが、リンクURLを変更すればできるとあり。知らなかった。新規登録したら、「Dropboxにまだたくさん容量があります。ファイルを追加しませんか?」だって。お言葉に甘えることに。その前に直リンが正しく機能するかの確認なり。

【直リン画像】阿修羅の小沢内閣待望論センセの一文。
いつも右に現れるはずの記事ランキングがでず、非常に見易い書式。ぱっと目にして内容の概要が分かる気がする風景。米国大統領選前後のセンセのカキコは大量で、ふざけた内容が影を潜め、マジというのかガチというのか、なかなかのご様子でした。この姿勢にむしろ驚く。

開票日、出だしはヒラリー大優勢、グラフ上部の境界線に張り付き状態、対してトランプは下部境界線に張り付き状態。これが数時間後、ヒラリー票急落下、トランプ急上昇、この二つの線はたちまち交差、出だしと逆の姿となる。

あの突然の変化はなんなんだ? 人が言うには、米軍がテロ総本山CIAに対して、不正集計を止めろ、止めないと攻撃するぞ、と宣戦布告をしたとのこと。米軍の偉いさんと言えば、米軍統合参謀本部長ジョセフ・ダンフォード将軍。この将軍がオバマと交代して新大統領になったと飯山教授博士が書いていた記憶あり(調べればすぐ分かるが、先を急ぐので構っていられない)。

そういえば、選挙の前だったかに、ダンフォード将軍は公務員は憲法を守れと厳命したとの記事をどっかで目にする。

そういえば、軍用車輌が貨物列車でしこたまたくさん運ばれている動画あり。踏切で長時間待たされる一般市民の車窓の風景として。内戦の準備だ、いや、定例の軍事演習だ、いや、米国以外の国も参加してるぞ、との分析並ぶ。武力による鎮圧が必要な局面が来るらしかった。

これを連想させる説が新たに登場。これから米国は3分割もしくは5分割になるとの説。私がビックリしたのは先の先、その先までもうスケジュールが決まっているらしいこと。私のスタイルシートが行き当たりばったり修正の、ド素人丸出しとはえらい違いなり。

さて、待望論センセ文の画像へのリンク。
【念のため注】タイトルの先頭2文字か3文字は情報源。「ベン」はベンジャミン・フルフォード。「板垣」は板垣英憲ブログ。よく出てくる「Bin」はBeforeitnewsサイト。飯山教授博士が縁故信頼関連、あるいは、有料で収集する情報に比べると、ちょっとふがふがもぐもぐ……
https://dl.dropboxusercontent.com/s/ql4206u7u3xcda1/2016-11-23_021421b.png
16:上州@大渡橋 :

2016/11/22 (Tue) 23:59:20

host:*.eaccess.ne.jp
http://bbs6.fc2.com//bbs/img/_422400/422306/full/422306_1479826760.png
【タイトル】第16回 阿修羅カルト部門の修正と追加
【投稿者】上州@大渡橋

【修正点】個別記事部のタイトルの文字サイズを少し小さく、行間を少し狭く。記事部の上と下の空白を広くした。この指定箇所のタグはPで、コメント欄にも使用されておりそちらにも影響。改善策のあて私の頭に全く閃かず。
【追加点】カルト部門は16から17に増強あり。「17」の目次一覧ページのURLを追加。本日珍しく小沢内閣待望論センセの投稿が「国際」部門に登録されてあり、この部門URLを追加。まもなくセンセの投稿は消え、カルト部門に出現。

【附記】文字サイズや行間の変更はこちらのPC内で文字サイズを変更したのが原因かも知れません。ヒラリー・クリントンが911追悼式の帰り、車に乗り込む際よろけ、2時間後、見掛けないおばさんが現れ、元気になりましたと手を振ったという動画を見ようとしたとき、PCが突然激重状態となり、以後絶不調となったことあり。あれでPC内の設定が勝手にかなり変化。それで文字マスターサイズをいじったのだろうと思われる。

【文字マスターサイズ指定の場所】
●タスクバー上のウィンドウズ・アイコンを左クリック。
●選択肢の中から[コントロールパネル]を左クリック。
●たくさん並ぶ項目の中から「ディスプレイ」を見つけて左クリック。
 →[画面上の文字を読みやすくします]ページが現れる。
●ここで私の場合[カスタム]で「115%」にしてあり。
この設定が元の指定より大きく(以前の数字記憶なし)、
このため多分、Stylish指定文字を大きく感じるようになったと推測す。

●小さくなって読みにくいという方は、[font-size]を探し、
その後ろにある数字を大きくし(元の数字を記憶のこと)、
[お試し]左クリックして阿修羅ページを確認、
よければそれで[保存]左クリック、関係ない文字が変化していたら
元の数字を書き込み、別の[font-size]に移動し、数字を変える。
●目指す箇所が見つからないとイライラしますが、我慢でつ。

【小沢内閣待望論センセ頌】頌はショウ。賛歌なり。
阿修羅常連歴長し。初めは普通の文章を書いていたが、途中から特徴ある文体に変貌。重要と思われる情報をあちこちから拾い、それらとそれらの分析をタイトルに並べる。殆ど本文を読まなくても用が足りるスタイルを確立。読者がわの収集情報との摺り合わせに重宝。311「予告」存在情報の取込にビックリ。その名はタイムトラベラー・ジョン・タイター。911もかなり前から「予告」、阪神淡路も「予告」。あり得ないほど半端ない的中確率の「予告」。アハハハ。わがネット依存症の重症化いよいよますます激しくなりぬ。
【Google検索「ジョン・タイター」1頁目】
https://www.google.co.jp/search?q=%E3%82%B8%E3%83%A7%E3%83%B3%E3%83%BB%E3%82%BF%E3%82%A4%E3%82%BF%E3%83%BC&ie=utf-8&oe=utf-8&client=firefox-b&gfe_rd=cr&ei=ffUzWIyDFMiQ8QeHk5PwCA

そんなことより缶詰だ、で、
【編集】
●ツールバー上の[S]アイコンをクリック。
 →選択肢の中から[スタイルの管理]をクリック。
 →スタイルの一覧表が現れる。
●阿修羅用のスタイルのある行で、右側にある[編集]をクリック。
 →コードが書いてある頁が現れる。
●頁のどこかで右クリック。
 →選択肢が現れる。
●一番下にある[すべて選択]を左クリック。
●キーボードの[Del]削除キーを押す。
 →まっさら画面になる。
●ここに以下のコードをコピーしてペースト貼り付ける。
●[お試し]左クリックして阿修羅ページに戻り確認。
●不都合なければ、編集画面に戻って[保存]を左クリックのこと。

▼▼▼ ここから ▼▼▼
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("www.asyura2.com") {
/*阿修羅個別投稿ページ*/
body {
width: 880px !important;
background-color: #ffffcc !important;}
div#post-content {margin: 40px 0px 0px 40px !important; }
div#bottom-left {margin-left: 70px !important;}
div#bottom-right [style="width:660px;height:1700px;background-color:#FFFFFF;"]{
margin-top: 40px !important;
clear:both !important;
float:right !important;
}

/*投稿文タイトル*/
div#main-content-left b{
font-size:90% !important;
line-height: 125% !important;
}

div#main-content-left {
width: 600px !important;
margin-left: 30px !important;
font-size: 115% !important;
}
div#main-content-left siname p {
margin-top: 60px !important;
}
div#main-content-left p {
line-height: 180% !important;
}
table.bluetable {
width: 600px !important;
font-size: 90% !important;
}
td.smallcell, td.cell {
line-height: 165% !important;
font-size: 110% !important;
padding-bottom: 18px !important;
border-bottom: solid 2px black;
}
textarea {
width: 600px !important;
}
a {
text-decoration: none !important;
}
a:link {
color: #0000cc !important;
}
a:hover {
color: #ff0000 !important;
background-color: #ffcccc !important;
}
a:visited {
color: #941d55 !important;
}
}

#bottom-right[style="width:660px;height:1700px;background-color:#FFFFFF;"]{margin-left: inherit !important; }
#bottom-left[style='width:660px;height:1700px;background-color:#FFFFFF;']{margin-left: inherit !important;}


/* 阿修羅カルト15の目次欄 適用ページ随時追加 */
@-moz-document url("http://www.asyura2.com/15/cult15/index.html"),
url("http://www.asyura2.com/16/cult16/index.html"),
url("http://www.asyura2.com/16/cult17/index.html"),
url("http://www.asyura2.com/16/kokusai16/index.html"){
body {
width: 650px !important;
margin-left: 100px !important;
background-color: #ffffcc !important;
}
div#bottom-left {
margin-left: 10px !important;margin-top: 40px !important;
}
div#bottom-right {
margin-left: -50px !important; margin-top: 40px !important;
}

ul {padding-left: 0px !important; }
li {
line-height: 150% !important;
margin-bottom: 10px !important;
font-size: 110% !important;
list-style-position: inside;
color: #800000 !important;
}
a {
text-decoration: none !important;
}
a:link {
color: #0000cc !important;
}
a:hover {
color: #ff0000 !important;
background-color: #ffcccc !important;
}
a:visited {
color: #9b3763 !important;
}

}
▲▲▲ ここまで ▲▲▲
15:上州@大渡橋 :

2016/11/19 (Sat) 10:16:28

host:*.eaccess.ne.jp
+++ 第一期「Stylish実例集」全12例の目次一覧 +++

第1回 「放知技」の書式を個人的に変更する
http://joren.bbs.fc2.com/reply/15596852/2/

第2回 放知技のカキコを編集削除できるように変更する
http://joren.bbs.fc2.com/reply/15596852/3/

第3回 放知技「投稿前プレビュー」ページの書式の変更
http://joren.bbs.fc2.com/reply/15596852/4/

第4回 植草教授の行間
http://joren.bbs.fc2.com/reply/15596852/5/

第5回 「なんちゃらかんちゃら」の書式を変更する
http://joren.bbs.fc2.com/reply/15596852/6/

第6回 櫻井ジャーナルのナビボタン
http://joren.bbs.fc2.com/reply/15596852/7/

第7回 阿修羅個別投稿ページの横幅を変更する
http://joren.bbs.fc2.com/reply/15596852/8/

第8回 文字が小さくて読むのがつらいサイトでアドオン「Default Fullzoom Level」を使う
http://joren.bbs.fc2.com/reply/15596852/9/

第9回 フリーのWebフォントを使う
http://joren.bbs.fc2.com/reply/15596852/10/

第10回 「グローバルスタイル」を使う
――全サイト対象の文字色やリンク色の設定編
http://joren.bbs.fc2.com/reply/15596852/11/

第11回 「スポニチ」の文字サイズ行間を変える。
http://joren.bbs.fc2.com/reply/15596852/12/

第12回 Twitterの文字サイズ行間を変える。
http://joren.bbs.fc2.com/reply/15596852/13/

第13回 RSSリーダー「sage++」を利用して、ブログに直接出掛けることなく、どのサイトも同じ文字サイズ同じ行間に書式変更して自分にとって読み易い形にする(ブログによっては変更できない場合あり)。
http://joren.bbs.fc2.com/reply/15596852/14/
14:上州@大渡橋 :

2016/01/21 (Thu) 21:02:35

host:*.bbtec.net
http://bbs6.fc2.com//bbs/img/_422400/422306/full/422306_1453377755.png 【スクリーンショット】sage++の景色(配色が臭かったかも)

【タイトル】第13回 「sage++」を利用して文字サイズ行間一挙変換
【投稿者】上州@大渡橋(琴奨菊モンゴル勢3人撃破。相撲記者からマグレと言われたのはちょっと心外だった。あからさまに勝負にこだわる二横綱の優勝は見たくなし。それはともかく、解説の北の富士さんが心配なり。力士の名前を間違える。あるいはすぐ出てこない。アナの質問の趣旨が理解できない。以前はこれほどじゃなかった。これもホの影響にかあらむ)

【RSSリーダー】各サイトごとにいちいち文字サイズと行間を変えているとふと思うに違いない――これは要するに、記事部をRSSリーダーで見ているのと同じではないかと。全サイトが同じ文字サイズ同じ行間で表示される(サイト指定書式が生きる場合あり)。こっちのほうが手っ取り早い。配置配色デザインの個性がなくなってしまうのが残念だが。

【sage++】Firefoxの場合、断然これ。
・サイト「ひぐまのひまグ」→http://himag.blog26.fc2.com/
・ダウンロードすると自動でFirefoxに取り込まれる(はず)。

【私の設定の場合】
・「ツール」→「設定」→「コンテンツエリア」
・「スタイルシート」で「カスタム」を選択。
・下記のスタイルシートはオリジナルのスタイルシートのうち、
・変更したい箇所だけ手直しし、名前付けてPC内のどこかに保存。
・「参照」クリックしてこのファイルを選択。
・Stylishでの変更も勿論可能。

▼▼▼ ここから ▼▼▼
html * {-moz-box-sizing: border-box;}
html {
line-height: 1.3;
background-color: #aca486;
}
body {
margin: 0px auto;
width:620px;
color: #222;
font-family: ;
}
a {
color: #1a282e;
font-weight: bold;
text-decoration: none;
}
a:visited {
color: #1a282e;
font-weight: normal;
}
a:hover {
background-color:#278d57;
color:#ffffff;
}
#rss-header {
background-color: #f3a727;
border: 1px solid #f3a727;
padding: 6px 8px;
margin: 10px 2%;
color:#FFFFFF;
}
#rss-title {
font-size: 130%;
line-height: 110%;
margin: 0px;
padding: 8px 10px 5px 10px;
}
#rss-title a:visited {
color: #436976;
font-weight: bold;
}
#rss-desc {
font-size: 100%;
margin: 0px;
padding: 5px 0px 0px 20px;
}
div.item {
border: 1px solid #8cacbb;
width: 96%;
min-width: 14em;
margin: 0px 0px 8px 2%;
padding: 0px;
float: left;
overflow: hidden;
display: block;
background-color:#ffffff;
}
h2.item-title {
background-color: #f1d58d;
font-size: 110%;
font-weight: normal;
line-height: 115%;
margin: 0px;
padding: 5px 12px 5px 12px;
}

span.item-ordinal {
padding-right: 0.2em;
}
div.item-desc {
min-height: 3em;
font-size: 110%;
margin: 0px;
padding: 10px 30px;
line-height:160%;
background-color:#ffffff;
}
div.item-enclosure {
font-size: x-small;
margin: 8px 8px 0px 8px;
padding: 8px;
border: 1px dashed;
}
div.item-enclosure:before {
content: "Enclosure: ";
}
div.item-footer {
width: 70%;
padding: 8px 10px;
float: left;
}
div.item-category:before {
content: "[";
}
div.item-category {
font-size: x-small;
color: #808080;
}
div.item-category:after {
content: "]";
}
div.item-author:before {
content: "Posted by ";
}
div.item-author {
font-size: x-small;
color: #202080;
}
div.item-pubDate {
font-size: x-small;
color: #202080;
}
div.item-technorati {
font-size: x-small;
margin: 0px;
padding: 8px 10px;
width: 30%;
float: right;
text-align: right;
}
img, video {
max-width: 100%;
height: auto;
}
div.item-technorati img {
vertical-align: bottom;
}
▲▲▲ ここまで ▲▲▲
13:上州@大渡橋 :

2016/01/16 (Sat) 21:55:39

host:*.bbtec.net
http://bbs6.fc2.com//bbs/img/_422400/422306/full/422306_1452948940.png 【スクリーンショット】ツイッター変更後の風景

【タイトル】第12回 Twitterの文字サイズ行間を変える
【投稿者】上州@大渡橋

【Twitter】文字が小さすぎ。きっと英文仕様にや。
・Twitterページを開く。
・「S」クリック→「新しいスタイルを書く」→「twitter.com 専用」
・編集画面が出る。このままにしておいて、
・Twitterページに戻り、右クリック→「ページのソースを表示」クリック。
・本文直前にくっついている要素を探す。
(ツイッターのソースは物凄い量)

▼▼▼ここから▼▼▼
<p class="TweetTextSize TweetTextSize--16px js-tweet-text tweet-text" lang="ja" data-aria-label-part="0">歌会始:御製が読み上げらる最中の陛下の表情は
▲▲▲ここまで▲▲▲

【要素タグ】p class="TweetTextSize。
・文字サイズが16pxとはいやはや。
・Stylish編集画面に戻り、数字を色々変え適切なものを見つける。
・私の場合、以下のように決定。

▼▼▼ ここから ▼▼▼
@-moz-document domain("twitter.com") {
/*ツイッター*/
p.TweetTextSize{
font-size: 130% !important;
line-height: 150% !important;
}
/*左サイドあれこれ非表示に*/
div.Trends.module.trends,
div.RelatedUsers,
div.flex-module,
div.SidebarCommonModules,
div.PhotoRail
{ display: none !important; }
}
▲▲▲ ここまで ▲▲▲
12:上州@大渡橋 :

2016/01/16 (Sat) 16:37:39

host:*.bbtec.net
http://bbs6.fc2.com//bbs/img/_422400/422306/full/422306_1452929860.png 【スクリーンショット】スポニチの変更後の風景

【タイトル】第11回 「スポニチ」の文字サイズ行間を変える
【投稿者】上州@大渡橋
【訂正】第2回編集削除ができるようになるアドオン紹介の中で、「装うした」とか「装うする」とか奇妙な表現が現れてあり。あれは漢字2字での表現が禁止用語らしく投稿ができなかったため、やや慌てふためいて漢字2字を装うに一括変換し、確認せずに投稿したための醜態なり。

【実地編】ここまでは実例集。ここからは文字サイズ行間変更主体の実地編。
【タグ要素の見つけ方】
・複数あるが(オーソドックスな順にすれば以下の通り)。
・右クリック→「ページのソースを表示」
・右クリック→「要素の調査」
・専用アドオン利用。Firebug、Web Developerなど。
・文字サイズ行間程度なら「ソースを表示」で間に合う。

【スポニチ】
・スポニチトップページを開く。
・「S」クリック→「新しいスタイルを書く」→「www.sponichi.co.jp 専用」→編集画面が出る。このままにしておいて、
・スポニチのページに戻り、目次から記事を選ぶ。

・記事の書き出し(例としてここでは「オレ流契約再び」とする)を記憶しておく。
・右クリック→「ページのソースを表示」をクリック。
・書き出しを探す。
・説明の都合上、空白行タブ無視で書き直すと、

▼▼▼ここから▼▼▼
<!-- 記事前文&本文 -->
<p class="news-textB01"><!-- google_ad_section_start(name=s1) -->
<!-- 前文下リンク -->
<!-- 本文 -->  オレ流契約再び!中日は15日
▲▲▲ここまで▲▲▲

・記事部直前にあるもの(p class="news-textB01")が要素タグ。
・「<!-- -->」は表には出ない目印コメント。
・Stylish編集画面に戻り以下のように書く。

▼▼▼ ここから ▼▼▼
@-moz-document domain("www.sponichi.co.jp") {
/*スポニチ*/
p.news-textB01{
font-size:●% !important;
line-height:●% !important;
}
}
▲▲▲ ここまで ▲▲▲
【注記】
・「class=」は「.」と表す。
・「p」はあってもなくても良い。

【修正したい書式】
・●印箇所に具体的数字を書き入れ、
・font-size:の後ろにたとえば「120」を書き入れ「お試し」クリック。
・スポニチに戻り確認。見やすい文字サイズを探す。行間も同様。

・私の場合、
・「font-size: 125% !important;」
・「line-height: 170% !important;」
・概して言って夜指定したものを朝見るとサイズが大きく感じる傾向あり。

【スポニチ開いて大局的に確認】
・記事部の左右の余白がなさ過ぎ。横幅を狭くしたい。
・width: 80% !important;
・左余白が出ないので、余白を作る。
・padding-left: 60px !important;
とする。
・トップページの記事目次一覧の文字も少し大きくしたい。
・li { font-size: 110% !important; }を追加。

【仕上がり】以下書き込んで保存をクリック。
▼▼▼ ここから ▼▼▼
@-moz-document domain("www.sponichi.co.jp") {
/*スポニチ*/
p.news-textB01{
font-size: 125% !important;
line-height: 170% !important;
width: 80% !important;
padding-left: 60px !important;
}

/*トップページ目次一覧*/
li { font-size: 110% !important; }
div.heading-newsB01 {
width: 88% !important;
padding: 2px 10px !important;
}

}
▲▲▲ ここまで ▲▲▲

【附記】タイトル行と画像も記事部と同じ横幅にすればスッキリするはずであるが、画像が横幅に収まってくれず、手間食いそうであるし、ムキになって変更したいサイトでもないのでパスした模様。今も対処法思い付かずこのままとす。それにしても、空白一行のあとの一字下げが残念だ。景観を悪くさせている。
11:上州@大渡橋 :

2016/01/04 (Mon) 20:52:31

host:*.bbtec.net
【タイトル】第10回 「グローバルスタイル」を使う
――全サイト対象の文字色やリンク色の設定編

【投稿者】上州@大渡橋
【前回の書き忘れ】
・モニターの文字を綺麗にするソフト「MacType」を入れる。
http://www.vector.co.jp/soft/winnt/writing/se501579.html

【グローバルスタイル】すべてのサイトに適用するの意。
・使い方は二通り。常時適用。一時的適用。
・後者の切り替えは「S」→「グローバルスタイル」→「設定名称」
・チェックマークを外す/付ける。

【常に適用】点滅文字や流れ文字(を見たくない人)は非表示に。
・アイコン「S」クリック→「新しいスタイルを書く」→「白紙のスタイル」。
・以下をコピペ。名称付けて保存。

▼▼▼ここから▼▼▼
/*点滅流れ文字の禁止*/
blink { text-decoration: none !important; }
marquee { -moz-binding: none; }
▲▲▲ここまで▲▲▲

【一時的に適用】
・サイト全体の文字色が黒でない薄い色に指定されている場合、読みにくい。
・手っ取り早くサイト全体の色を黒に指定してしまう。
【例1】
・たとえば「晴耕雨読」http://sun.ap.teacup.com/souun/
・うっすらぼんやり緑色で私には見にくい。引用文を一文ずつ分割してくれているので更に読みにくい。ケチ付けて申し訳ないけど。
・これを「グローバル」に問答無用で一律に黒にしてしまう。
・アイコン「S」クリック→「新しいスタイルを書く」→「白紙のスタイル」
・ここに以下をコピペ。

▼▼▼ここから▼▼▼
/*文字色の変更*/
* { color: #000000 !important; }
▲▲▲ここまで▲▲▲

・「*」はどこの要素(箇所)でもの意。かなり乱暴な設定。
・不都合箇所が出るが、文章部が読めりゃいいやという一時しのぎの技。

【例2】リンク文字がはやりの薄青色で見にくい。
・たとえば「Mozilla Re-Mix」アドオン情報一覧ページなど。お世話になっております。→ http://mozilla-remix.seesaa.net/category/1233318-1.html

▼▼▼ここから▼▼▼
/*リンク文字色を濃紺に変更*/
a:link { color: #000080 !important; }
▲▲▲ここまで▲▲▲
10:上州@大渡橋 :

2016/01/02 (Sat) 21:00:55

host:*.bbtec.net
http://bbs6.fc2.com//bbs/img/_422400/422306/full/422306_1451736055.png 【スクリーンショット】源柔ゴシックの表示見本

【タイトル】第9回 フリーのWebフォントを使う
【投稿者】上州@大渡橋(書体に目が行く種族。家族がかの群馬大学付属病院――略して群大病院という。腹腔鏡手術による事故死多数出すも、不思議とマスコミに叩かれなかった大病院――に入院、副婦長から入院治療費請求書を手渡され、見てすぐ思ったのが、こりゃ、ニィス社製JTCウィン丸ゴシックじゃないか。ある日、新聞に発売されたばかりのレクサスの広告が載った。本文が極細角ゴシック。余りのセンスの良さにひっくり返る。直ちにカタログ請求。自動車に用はないのだが)

【大変大きな出来事】しばらくまえのこと、グーグルとアドビが共同して日本語フォントを開発。老舗イワタも協力。Webサーバにフォントファイルを置き、ブラウザがここから読み込んでモニターに表示する「Webフォント」。サイト閲覧者のPC内にこのフォントがインストールされていなくても表示される。特許だの著作権だのケチ臭いお国柄にしては珍しくフリー。しかも改造再配布自由。

【このWebフォントは】
グーグル名としては、「Noto Sans CJK」。
アドビ名としては、「源ノ角(げんのかく)ゴシック」と命名。

【自家製フォント工房】太さが不満だったが、使い易さを高めた改造版に出くわす。プロポーショナル(文字幅可変)版、印刷用TrueType化まであり。太さ7種類もある、高品質の立派なファミリー・フォントに仕上げられていた。有料フォントは1万円から2万円が相場、太さ変われば別料金だから、有り得ない有り難さ(フォント改造ソフトの存在を伺わせる)。ファミリーとしても4種類あり。

●源真(げんしん)ゴシック(角ゴシック)
【Webサイト概略】http://jikasei.me/font/genshin/

●源柔(げんじゅう)ゴシック(上記を丸ゴシック化したもの)
【Webサイト概略】http://jikasei.me/font/genjyuu/

●Mugen+ (ムゲンプラス)
M+ OUTLINE FONTSと源ノ角ゴシックを合成したもの
約14,000文字以上(JIS第1~4水準すべてを含む)は凄い数。
【Webサイト概略】http://jikasei.me/font/mgenplus/

●Rounded Mgen+ (ラウンデッドムゲンプラス)
上記Mugen+を丸くしたもの。
【Webサイト概略】http://jikasei.me/font/rounded-mgenplus/

【感想】
・源柔(げんじゅう)ゴシックをMyフォントに選択。
・飾りがなくクセがなくシンプルな作り。このためかなり小さなサイズでも判読可能。「き」と「さ」が妙に漫画チックに見えてちょっと照れてしまうが。
・システムフォントに設定。
・これで「MeiryoKe_PGothic」ともサヨナラとなった。

・太さを確認するには、
・番地→http://jikasei.me/font/rounded-mplus/sample.html
・「Rounded M+」の見本であるが、他の書体の太さの見当が付く。

【Webフォントとしてレン鯖にもインストール】
・WordPressフォルダの「wp-content」以下のある場所に配置。
・Webフォントとして設定。スタイルシートにこれこれと書く。
・Stylish指定が個人的であるのに反し、Webフォントは万人対応となる。

【補記】フリーWebフォントは他にも多数あり。
9:上州@大渡橋 :

2016/01/02 (Sat) 17:26:31

host:*.bbtec.net
http://bbs6.fc2.com//bbs/img/_422400/422306/full/422306_1451723191.png 【スクリーンショット】「Default FullZoom Level」のインストールページ

【タイトル】第8回 文字が小さくて読むのがつらいサイトでアドオン「Default Fullzoom Level」を使う

【投稿者】上州@大渡橋(内山高志のファン。「太陽がいっぱい」のアラン・ドロン、「さらば友よ」のチャールズ・ブロンソンの胸板と細く長く見える腕の、均整の取れた美しい上半身を持つボクサー。腕に筋肉付けすぎて見栄え悪くなったハリウッド男優、胸板厚くして故障ばかりのピッチャー松坂の醜態の反対。このボクサーが外見的格好良さを求めない証し。浅黒い肌に黒髪短髪。昔風に言えばスポーツ刈り。侍ジャパンだなでしこだと言いながら黒髪を捨てる選手ではない。足幅大きく取り、フットワークは使わず、上体の動きのみでパンチをかわす。クリント・イーストウッドの映画にでも出てきそうな、正々堂々たるスタイルのファイター。だから猛烈に強いのか。猛烈に強いからこうなるのか)

【能書き】ブログの普及に伴い、文章部を読みにくくさせる3つの要因――文章部横幅、文字サイズ、行間――のうち2つが征服されつつあり。残るは文字サイズ。近頃よく出くわすのが異様に文字がちっこいサイト。これを書いている人のモニターには一体どのくらいのサイズで表示されているのだろうかとしばし考え込んでしまうことがあったが、先日テレビでWebデザイナー事務所の風景を見て納得。わが家のモニターの2倍はありそうなでっかいモニターだったなり。

【対策】巡回サイトでないサイトの場合、Stylishで設定するより、文字の拡大縮小アドオンを使ったほうが手っ取り早い。この手のアドオンは数件有るも私は以下が使いやすかった。
■「Default FullZoom Level」
■URL→https://addons.mozilla.org/ja/firefox/addon/default-fullzoom-level/

【作業】
・横棒3本のアイコン(「メニューを開きます」)クリック。
・最下部「カスタマイズ」クリック。
・左手のアイコン群の中から、「A」(フォントサイズだけ拡大縮小)と「P」(ページサイズを拡大縮小)と「T100%」(現在の設定状況)をドラッグしてツールバーに飾る。

【設定】
・「アドオン」→「拡張機能」→「Default Fullzoom Level」→「設定」
・既定のページズームを「100」
・その下の項目どれもチェック(で、いいんじゃないかと思料す)。

【使い方】
・文字を大きくしたいとき、「A」上でクリックか、
・▼マークをクリック、倍率リストから選択か。
8:上州@大渡橋 :

2015/12/26 (Sat) 21:03:23

host:*.bbtec.net
http://bbs6.fc2.com//bbs/img/_422400/422306/full/422306_1451131403.png 【スクリーンショット】「阿修羅カルト15」その後

【タイトル】第7回 阿修羅個別投稿ページの横幅を変更する
【投稿者】上州@大渡橋(TVラジオのニュース原稿に過敏に感応する人種。「今や国民的アイドルのAKB」、ウッソだろ。「折り畳み傘があると安心です」、大きなお世話だ。近頃の耳障りは「……、そのわけとは?」。NHK民放ともに使用頻度上がった気配。このあとCMを入れる局もあり。ひょっとして原稿ライターは同一人物なんじゃないかと疑う。それを各局がそのまま使う――そんなことがあるんかなあと自分を疑う人種)

【阿修羅カルト部門】異彩を放つ書き手がいる。名は「小沢内閣待望論」、旧名は「ポスト米英時代」で時代感覚正常を証明。「I have a dream」演説として愛読。余談ながら、あの演説は著作権だったか特許だったかがあり(遺族が主張してるらしい)、キング牧師映画を作る計画の障害になっていたという。キング牧師家にしていやはや。

【調整箇所】いつもの通り。但し最小限。
・文章部の横幅を狭く、行間を広く、文字大きく。
・この設定は他分野でも機能。

・阿修羅は色彩的に地味なので明るい色を配置す。
・一番下部にあるランキング欄が左に寄ってくれていないが、なんとなくわが実力では太刀打ちできそうもないので触らず放置とす。
・目次一覧ページも調整。この調整は他の目次ページでは通用せず。

【コードは以下の通り】
・アイコン「S」クリック→「新しいスタイルを書く」→「白紙のスタイル」
・ここに以下をコピペ。
・名前を付けて保存。

▼▼▼ここからコピー▼▼▼
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("www.asyura2.com") {
/*阿修羅の個別投稿ページ*/
body {
width: 880px !important;
background-color: #ffffcc !important;
}
div#main-content-left {
width: 600px !important;
margin-left: 30px !important;
font-size: 120% !important;
}
div#main-content-left p { line-height: 165% !important }
table.bluetable {
width: 600px !important;
font-size: 90% !important;
}
td.smallcell,
td.cell { line-height: 170% !important }
textarea { width: 600px !important }
a { text-decoration: none !important }
a:link { color: #0000cc !important }
a:hover {
color: #ff0000 !important;
background-color: #ffcccc !important;
}
a:visited { color: #941d55 !important }
}
/*阿修羅カルト15の目次欄*/
@-moz-document url("http://www.asyura2.com/15/cult15/index.html") {
body {
width: 700px !important;
margin-left: 100px !important;
background-color: #ffffcc !important;
}
ul { padding-left: 0px !important }
li {
line-height: 150% !important;
margin-bottom: 10px !important;
font-size: 115% !important;
list-style-position: inside;
color: #800000 !important;
}
a { text-decoration: none !important }
a:link { color: #0000cc !important }
a:hover {
color: #ff0000 !important;
background-color: #ffcccc !important;
}
a:visited { color: #9b3763 !important }
}▲▲▲ここまでコピー▲▲▲
7:上州@大渡橋 :

2015/12/24 (Thu) 21:16:52

host:*.bbtec.net
http://bbs6.fc2.com//bbs/img/_422400/422306/full/422306_1450959412.png 【スクリーンショット】「櫻井ジャーナル」その後

【タイトル】第6回 櫻井ジャーナルのナビボタン
【投稿者】上州@大渡橋(アドオン中毒患者。数日前なんの前触れもなく突然認証ログイン不許可となりかなりうろたえる。入れすぎのアドオンが原因に違いなく、潔くゼロから選択的に入れ直す。久方振りに初期化してみて仰天したのはこんなにも多くの広告バナーがあっちにもこっちにも表示されていることだった。全然知らなかった。しかしターゲティング広告は鮮やかに私の購買傾向を掴んであり。再びたくさん入れる)

【経緯】「櫻井ジャーナル」は難敵(原因はテーブルタブによるデザインの所為。これもう時代遅れ)だった。左カラムの横幅を狭くして右コラムの本文を左側に寄せ、横スクロールをしなくてもすむよう修正を何度も試みたがうまく行かず、結局力ずくの無様な姿で妥協しておいた。今回の「リフレッシュ」により、信じられないことに、ほぼ希望通りの姿に収まっていた。Stylishコードは以前のまま訂正加筆してないのだが。

【ナビボタン】これが一番目障りだった。右手下部に結構大きく(わが家の場合高さ4センチ、横1センチくらい)、本文に被さって表示され本文が読めない。縦スクロールを頻繁に余儀なくされる。今回このナビボタンが消えていた。Stylishコード無効にしても表示されないのでブログ側で無効にしてくれたらしい。

【調整箇所】格別展示するほどの技なしで恐縮ながら。
・全体の横幅を狭く。
・背景色を白に。
・本文の文字色、薄い青を黒に(本文のみ)。
・本文中のリンク文字色、薄いオレンジを青色に(本文のみ)。

【コードは以下の通り】
・アイコン「S」クリック→「新しいスタイルを書く」→「白紙のスタイル」
・ここに以下をコピペ。

▼▼▼ここからコピー▼▼▼
@-moz-document url-prefix("http://plaza.rakuten.co.jp/condor33/") {
/* 櫻井ジャーナル用 */
#sideNavi { width:0 !important; height:0 !important; }
.lo, .dText break-word {
color:black !important;
font-size: 140% !important;
}
.DIV { width:90% !important; margin-left:10px !important;}
body { background-color:white !important; }

div.lo a:link {color: #0000CC !important;}
div.lo a:visited {color: #80008b !important;}
div.lo a:hover {color: #CC0000 !important; position: relative; top: 1px; left: 1px !important;}
div.lo a:active {color: #CC0000 !important;}
div#title_out { width: 940px !important; }
div.mainNaviContents { width: 180px !important; }
}
}
▲▲▲ここまでコピー▲▲▲
6:上州@大渡橋 :

2015/12/18 (Fri) 16:06:05

host:*.bbtec.net
http://bbs6.fc2.com//bbs/img/_422400/422306/full/422306_1450422365.png
【スクリーンショット】書式変更した「なんちゃら」

【タイトル】第5回 「なんちゃらかんちゃら」の書式を変更する
【投稿者】上州@大渡橋(「ミッション・インポッシブル」新作、CIAがIMFを解体とありギョッとするが、IMFはあっちじゃなくてイーサン所属のスパイ組織だった。全然知らなかった。アハハ)

【特徴】「放知技」の色違いバージョン。行き当たりばったりのコード追加にて、確認の手間省く。見直しはトランプ遊びの神経衰弱のごとき面倒臭さなればなり。どこかに見苦しき箇所あるに違いなし。許されたし。

【作業】
・Stylishアイコン「S」→「新しいスタイルを書く」→「白紙のスタイル」
・真っ白い画面に以下をコピペする。

▼▼▼ここから なんちゃら用コード▼▼▼
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain('joren.bbs.fc2.com') {

dd {
/*カキコの行間 文字サイズ*/
font-size: 105% !important;
line-height: 165% !important;
}
dd br {
display: inline !important;
}
#container {
/*トップ頁全体の横幅 看板の横幅に近づける*/
width: 645px !important;
}
span[style="position:fixed;top:374px;right:15px;"]{
display: none !important;
}
body {
margin: 10px auto !important;
}
/*背景 #bf8083*/
html, body {
background-color: #d3a7a7 !important;
}
a {
font-weight: normal !important;
text-decoration: none !important;
}
a:link {
color:#7e3335 !important;
}
a:visited {
color: #1e4f66 !important;
}
a:hover {
background-color: #b3d01c !important;
color: #000000 !important;
}
/* Webサイトタイトル */
div#body p.title {
padding: 0px 20px 10px 20px !important
}
div#bbs_body p.title {
padding: 24px 20px 10px 20px !important
}
div.bbs_body p.title, div#body p.title, div#bbs_reply_body p.title {
/* 題字 明朝体 */
font-family: "MS P明朝, 細明朝体", selif !important;
font-size: 170% !important;
font-weight: normal !important;
text-align: center !important;
}

div.bbs_body p.title span#counter {
font-size: 40% !important;
color: red !important;
background-color: #fef2e7 !important;
}

div.bbs_body p.title span#counter:before {
/* カウンタの前で改行 */
content: '\A';
white-space: pre;
}
p.subtitle strong:after {
content: '\A \A ';
white-space: pre;
}
p.subtitle a[href="http://grnba.bbs.fc2.com/"]:before {
content: '\A ';
white-space: pre;
}
p.subtitle {
line-height: 115% !important;
}
div.bbs_box {
/*一番目のボックス*/
background-color: #fef2e7 !important;
}
/*スレ上位一覧のページ*/
div.bbs_body {
margin: 18px 18px 0px 19px !important;
}
div.bbs_body > br, #body br {
display: none;
}

/* 各個別スレのページ */
body#bbs_reply_body,
body#bbs_preview_body{
width: 580px !important;
padding: 20px 22px 1px 22px !important;
border: solid 1px black !important;
background-color: #ffffff !important;
}

div#bbslog .bbs_box.log_box {
background-color: #ffffff !important;
}
div.bbs_body, div.bbs_box {
/*枠線の撤去*/
border: 0 !important;
}
div#thread.bbs_box, div.bbs_box.log_box, div.bbs_box {
/*枠線の新設*/
border: solid 1px black !important;
}


div[style='color:navy;font-size:15pt;font-weight:bold;line-height:130%;margin-top:16px;'] {
font-size: 110% !important;
font-weight: normal !important;
margin-top: 8px !important;
}
b[style='color:red;font-size:18pt;'] {
font-size: 110% !important;
font-weight: normal !important;
}
div[style='color:#002200;font-size:15pt;font-weight:bold;line-height:130%;'] {
font-size: 110% !important;
font-weight: normal !important;
margin: 5px 0px !important;
}
b[style='color:#ff0000;'] {
font-weight: normal !important
}
div.bbs_box div.bbs_body center {/*リンクナビ*/
font-size: 100% !important;
text-align: left !important;
background-color: #ae4400 !important;
line-height: 100% !important;
padding: 4px 5px 4px 5px !important;
margin: 7px 0px 9px 0px !important;
}
center a:link, center a:visited {
color: #ffffff !important;
}
center a {
font-weight: normal !important;
text-decoration: none !important;
}
center a:hover {
background-color: #ae4400 !important;
color: #ffffff !important;
}
form.search {
font-size: 95% !important;
margin: 10px 0px 10px 0px !important;
text-align: left !important;
}
form.search input[type=text] {
width: 300px !important;
padding-left: 3px !important;
background-color: #fff9fa !important;
}
ul.menu {
/* メインナビ */
font-size: 90% !important;
padding: 3px 0px 3px 5px !important;
text-align: left !important;
background-color: #ae4400 !important;
color: #5e886b !important;
margin-bottom: 15px !important;
}
ul.menu a {
text-decoration: none !important;
color: #ffffff !important;
}
ul.menu a:hover {
background-color: #b3d01c !important;
color:#000000 !important;
}
h1#topic_title span.subj {
font-size: 180% !important;
margin: 30px 0 20px 0 !important;
font-weight: normal !important;
padding-left: 5px;
border-left: 20px solid #2c7046;
line-height: 150% !important;
}

.bbs_box#thread {
/*スレ上位一覧の文字サイズと行間*/
font-size: 110% !important;
line-height: 150% !important;
background-color: #ffffff !important;
}


/*▼各個別スレッドのページ▼*/
.log_nav a:link, .log_nav a:visited {color: #cb2100 !important;}
.log_nav a:hover {
color: #ffffff !important;
background-color: #ae4400 !important;
}
div#body > p.title > span#counter {
font-size: 40% !important;
color: red !important;
background-color: #ffffff !important;
}
div#body p.title span#counter:before {
/* カウンタの前で改行 */
content: '\A';
white-space: pre;
}
hr { display:none !important; }


div#body h1#topic_title { padding-top:35px !important;}
.log_header {
margin: 10px 0 10px 0 !important
}
td.log_title {
font-size: 85% !important
}
body#bbs_search_body .log_title {
/* 検索結果ページのタイトル */
padding: 0px 0px 0px 5px!important;
border-left: 20px solid #cb2100;
font-size: 180% !important;
font-weight:bold !important;
}
body#bbs_search_body center {
display: none !important;
}

.subj {
font-weight: normal !important;
padding-left: 5px !important;
border-left: 20px solid #2c7046 !important;
line-height: 150% !important;
display: table-cell !important;
}
dl {
font-size: 110% !important
}
dt {
/* カキコ名前その他欄 */
font-size: 95% !important;
margin-bottom: 30px !important;
padding: 5px 5px 5px 10px !important;
background-color: #af4f4a !important;
color:#ffffff !important;
line-height: 110% !important;
}
dt a:link {
color:#ebcfd0 !important;
}
dt a:hover {
color:#000000 !important;
}
span.name a {
color: #ebcfd0 !important;
}
span.name a:link {
text-decoration: none !important;
}
span.name a:hover {
background-color: #cedd88 !important;
color: #000000 !important;
}
dd a:link {
color: #d21100 !important;
}
dd a:visited {
color: #d21100 !important;
}
dd a:hover {
color: #000000 !important;
background-color: #b3d01c !important;
}
span[class='name'] {
font-size: 100% !important;
color :#ffffff !important;
}
p.date { color:#ffffff !important; }
p.date:before {
content: '\A ';
white-space: pre;
}

/* ▼▼最下部投稿欄▼▼ */
input, textarea {
font-size: 98% !important;
line-height: 150% !important;
border: solid 1px black !important;
background-color: #fff9fa !important;
}
input[type=text] {
width: 125px !important;
}
input[type=checkbox] {
width: 30px !important
}
div.formbox input[type=file] {
width: 400px !important;
border: 0 !important;
background-color: #ffffff !important;
}
ul.formbox input[type='file'] {
width: 400px !important;
border: 0 !important;
background-color: #fef2e7 !important;
}
input#pre_check {
width: 35px !important
}
textarea {
width: 520px !important;
word-wrap: break-word;
white-space: pre-wrap; /* IE,FF */
word-break:break-all;/* webkit */
}
.formbox {
margin-left: 15px !important
}
.formbox form ul {
font-size: 100% !important;
margin-top: 50px !important;
}
input[value='新規スレッド作成'] {
font-size: 125% !important;
margin-left: 20px !important;
padding: 1px 5px !important;
color: white !important;
background-color: #ca3627 !important;
}
input.thread_title {
width: 240px !important;
height: 28px !important;
}
input[value=' 書き込む '] {
font-size: 125% !important;
margin-bottom: 5px !important;
padding: 1px 5px !important;
color: white !important;
background-color: #5e886b !important;
}
iframe {
display: none !important;
}
/* ▲最下部投稿欄▲ */
form#bbsform, div#bbsform2 {
background: #d3a7a7 !important;
border-color: #d3a7a7 !important;
}
body#bbs_search_body center {
display: none !important;
}
body#bbs_search_body .log_title {
/* 検索結果ページのタイトル */
padding: 0px 0px 0px 5px;
border-left: 20px solid #2c7046;
font-size: 180% !important;
font-weight:bold !important;
}

}


/*▼スレッド一覧ページ▼*/
@-moz-document url("http://joren.bbs.fc2.com/?act=threadlist"){

body {
width: 645px !important;
font-size: 100% !important;
font-weight: bold !important;
text-align: center !important;
font-family: "MS P明朝, 細明朝体" !important;
padding-top: 20px !important;
color: #ffffff !important;
}
center {
font-size:120% !important;
}
a {/*タイトル題字*/
color: #ffffff !important;
font-weight: bold !important;
text-decoration: none !important;
}
a {
font-weight: normal !important;
text-decoration: none !important;
}
div[style="margin:10px;"] {
font-size: 105% !important;
line-height: 165% !important;
border: solid 1px black !important;
padding: 20px 30px !important;
margin-top: 25px !important;
word-break: break-all;
text-align: left !important;
font-family: san-serif !important;
color: #000000 !important;
background-color: #fef2e7 !important;
}
div[style="margin:10px;"] a:link {
color:#7e3335 !important;
}
div[style="margin:10px;"] a:visited {
color: #1e4f66 !important;
}
div[style="margin:10px;"] a:hover {
background-color: #b3d01c !important;
color: #000000 !important;
}
div.bbs_box {
border: none !important;
display: none !important;
}
span[ style="font-size:12px;"] {
font-weight: normal !important;
}

}
▲▲▲ここまで なんちゃら用コード▲▲▲
5:上州@大渡橋 :

2015/12/16 (Wed) 14:50:10

host:*.bbtec.net
http://bbs6.fc2.com//bbs/img/_422400/422306/full/422306_1450245010.png

【タイトル】第4回 植草教授の行間
【投稿者】上州@大渡橋(「ブラックリスト」シーズン2、ジェームズ・スペイダーの「手下」はもはや「私兵」、時代を取り込んだ脚本に感心す)

【問題点】個別ページの書式。一文ごとの改行、そのたびに空白行挿入。行間を広くして読み易くという気遣いは分かるが、各行しっかり読めと言われているようで、読み手はとてもつらい。人は通常複数行視野に入れて読むが、幼児向け絵本並の行間隔ではやりにくい。

【理想形】英文の文章形式。改行なしで数行をひとかたまりとし(当然横幅が長いとひどく読みにくくなる)、空白行入れる。基本は4行、ただし、3行やら5行やらを配してアクセントを付ける。空白行のあとのブロックでは一字下げせず(空白行が一字下げの役割を担っているから)。こうして左側の縦に直線が現れる。これが美しい。

【さて対策】改行brの行間隔を狭くする。
・Stylishアイコン「S」→「新しいスタイルを書く」→「白紙のスタイル」
・真っ白い画面に以下をコピペする。
【スクリーンショット】上記に書式変更後の画像表示。
【植草教授のブログ】
http://uekusak.cocolog-nifty.com/blog/2015/12/post-6ebe.html

▼▼▼ここから 植草教授の行間コード▼▼▼
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("uekusak.cocolog-nifty.com") {
br {
line-height:5px;
}
span {
font-size:105% !important;
}
}
▲▲▲ここまで 植草教授の行間コード▲▲▲
4:上州@大渡橋 :

2015/12/14 (Mon) 08:38:39

host:*.bbtec.net
【タイトル】第3回 放知技「投稿前プレビュー」ページの書式の変更
【投稿者】上州@大渡橋(007映画からユーモアが消えたのを嘆く映画ファン)
【変更点】「投稿前にプレビューする」の書式が変更し忘れてあり。言わば裏方なれば、ムキになって表ページと同じ書式に合わせる必要ないと考え、最小限のコード追加とす。

【準備】
・Stylishアイコンを左クリック→「スタイルの管理」→「放知技P」と進む。
・「放知技P」のコードが現れる。
・77行目あたり。

▼【旧・現在のコード】ここから▼▼▼
body#bbs_reply_body{
/* 各個別スレのページ */
width: 580px !important;
padding: 3px 22px 1px 22px !important;
border: solid 1px black !important;
background-color: #ffffff !important;
}
▲【旧・現在のコード】ここまで▲▲▲

▼【新・追加変更後のコード】ここから▼▼▼
body#bbs_reply_body,
body#bbs_preview_body{
/* 各個別スレのページ */
width: 580px !important;
padding: 3px 22px 1px 22px !important;
border: solid 1px black !important;
background-color: #ffffff !important;
}
▲【新・追加変更後のコード】ここまで▲▲▲

【作業】
・「旧・現在のコード」を削除、同じ場所に
・「新・追加変更後のコード」をコピペする。
・「保存」ボタンをクリックする。
3:上州@大渡橋 :

2015/12/13 (Sun) 20:48:34

host:*.bbtec.net
http://bbs6.fc2.com//bbs/img/_422400/422306/full/422306_1450007314.png
【タイトル】第2回 放知技のカキコを編集削除できるように変更する
【作成者】上州@大渡橋(「寒い国から帰ってきたスパイ」に仰天したミステリファン)
【作成者環境】パソコンWindows7でFirefox42.0。携帯ナシ。

【作成内容】さすらいの旅人さんが既に紹介されたように(注)、携帯からの書き込みだと装うとパスワード記入欄が表示され編集削除が可能となる。装う用拡張機能がFirefoxの場合「FireMobileSimulator」。書式については携帯版はタグ指定が殆どないため大幅変更不可。第1回PC版デザインをちょこっと反映させただけ。

【特典1】「SBiPhone3G」指定で装うした場合、装うオンオフの切替なしに――他携帯指定ではこの切替が必要――パソコン版と携帯版表示の往復が可能。ただし、この往復を繰り返していると、なんだか頭がこんぐらがってくる弊害あり。

【特典2】ユーザースタイルシートとは別の話として、携帯でネット見たことが一度もなかった者としては、携帯装うすると、どのサイトも携帯用の表示となり、ゴテゴテしたサイトがすっきりサッパリ表示となり、妙に見やすくなる場合あって新鮮なり。

(注)さすらいの旅人さんが「FireMobileSimulator」に言及したカキコ。
http://grnba.bbs.fc2.com/reply/13132665/622/
http://grnba.bbs.fc2.com/reply/13132665/619/
http://grnba.bbs.fc2.com/reply/13012521/41/

【スクリーンショット】上記にリンク展示。

【準備】
・「FireMobileSimulator」の入手インストール。
・URL → https://addons.mozilla.org/ja/firefox/addon/firemobilesimulator/

・アイコンをツールバーかステータスバーに表示させるには、
・ツールバー右端の三本線の入ったアイコンを左クリック。
・だらんと出てきたメニュー一番下の「カスタマイズ」クリック。
・左手に広がるアイコンの数々の中から「FireMobileSimulator」をクリックしたまま、
・ツールバーかステータスバーに引きずってきて離す。
・アイコンは芸のない緑色の小さな円形。

【使い方――携帯装うオンする場合】
・芸のない緑色の小さな円形アイコンを左クリック。
・携帯機種が並んでいる中から「SBiPhone3G」でクリック。
・もちろん他の機種でも可。
【使い方――携帯装うオフする場合】
・芸のない緑色の小さな円形アイコンを左クリック。
・「端末選択解除」でクリック。

【スタイルを書く】
・Stylishアイコンの「S」をクリック。
・「新しいスタイルを書く」→「白紙のスタイル」をクリック。
・真っ白い画面が現れる。ここに以下のコードをコピペする。

▼▼▼コピー開始▼▼▼
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("grnba.bbs.fc2.com") {
/*▼▼▼ 携帯用 ▼▼▼*/
body[style="color:#000000;background-color:#FFFFFF;"] {
background: #9fc469 !important;
padding: 0px !important;
text-align: center !important;
}
div[style="font-size:x-small"] {
width: 580px !important;
margin: 10px auto !important;
background-color: #ffffff !important;
padding: 0px 20px !important;
font-size: 105% !important;
}
body[style="color:#000000;background-color:#FFFFFF;"] a { text-decoration: none !important }
body[style="color:#000000;background-color:#FFFFFF;"] a:link { color: #d21100 !important }
body[style="color:#000000;background-color:#FFFFFF;"] a:visited { color: #d21100 !important }
body[style="color:#000000;background-color:#FFFFFF;"] a:hover {
background-color: #ae4400 !important;
color: #ffffff !important;
}
div#change_mobile {
background: none !important;
border: 0px !important;
height: 30px !important;
}
div#change_mobile_body {
text-align: right !important;
margin: 0px !important;
padding: 0px !important;
}
div#change_mobile_body >a>img {
width: 130px !important;
height: 30px !important;
margin-right: 5px !important;
}
#change_pc {
background: #5e886b !important;
border-top: solid 5px #ffffff !important;
margin-bottom: 0px !important;
}
div [style="text-align:center;"] {
padding: 10px 0px 20px 25px !important;
background-color: #5e886b !important;
text-align: center !important;
color: #ffffff !important;
}
div [style="text-align:center;"] a { color: #ffffff !important }
span[style="color:#000000;"] {
/*題字*/
margin: 0px !important;
font-size: 130% !important;
color: #ffffff !important;
}
div[style="margin:1px 0px;"] {
text-align: center !important;
background-color: #5e886b !important;
}
/*前へ後へ*/
div[ style="margin:2px 0px; text-align:center;"] {
text-align: center !important;
background-color: #9fc469 !important;
margin: 1px 0px 1px 0px !important;
}
div[style="margin:2px 0px;"] {
background-color: #9fc469 !important;
text-align: center !important;
margin: 0px 0px 1px 0px !important;
}
span[style="color:#FF0000"] { padding: 0px !important }
div[style="margin:2px 0;"] br { display: none !important }
div[style="margin:2px 0px;"] br { display: none !important }
div [style="text-align:center;"] br { display: none !important }
hr[style="width:100%; height:1px; margin:2px 0; padding:0; color:#999999; background:#999999; border:1px solid #999999;"] {
border: solid 1px #ffffff !important;
margin-top: 20px !important;
}
div[style="margin:2px 0px; text-align:right"] br { display: none !important }
form { display: inline-block !important }
textarea { width: 572px !important }
}
@-moz-document url-prefix(http://grnba.bbs.fc2.com/?#) {
form#bbsform div#bbsform2 {
margin: 0px auto !important;
text-align: center !important;
}
table {
margin-top: 50px !important;
margin-left: 200px !important;
}
}
▲▲▲コピー終了▲▲▲

【名称記入、保存】
・コピペした後、・頁上部にある「名称」欄に
・「放知技K」とでも書き「保存」クリック。
・これ以後、放知技サイトを開くと「S」アイコンの背景が赤地になる。
・赤地はユーザースタイルシート適用中を示す。

【スタイルシートの適用を一時的に止めたい場合】
・「S」アイコンを左クリック→「放知技K」でクリック、マーク消える。
【復活させたい場合】
・「S」アイコンを左クリック→「放知技K」上でクリック、マーク付く。

【削除したい場合】
・「S」アイコン左クリック→「スタイルの管理」クリック。
・スタイルシート一覧ページが現れる。
・「放知技K」の列の右手端にある「削除」ボタンをクリック。

【書き換えたい場合】
・「S」アイコン左クリック、「スタイルの管理」クリック。
・「放知技K」の列の右手にある「編集」ボタンをクリック。
・書き込んだコードが現れる。
・変更したい箇所を書き直す。
・修正後は忘れずに「保存」をクリックのこと。
2:上州@大渡橋(海外ドラマ本格ミステリ派) :

2015/12/13 (Sun) 17:28:52

host:*.bbtec.net
http://bbs6.fc2.com//bbs/img/_422400/422306/full/422306_1449995333.png
【タイトル】第1回 「放知技」の書式を個人的に変更する
【作成者】上州@大渡橋(海外ドラマ本格ミステリ派)
【作成者環境】パソコンWindows7でFirefox42.0。携帯ナシ。

【作成内容】行間を広く、サイト表示横幅を狭く、文字サイズやや大き目に。スレ上位一覧頁と個別スレ頁のデザインを統一。左寄せラインを強調し安定感を創出。あらびき茶パックの深い緑をメインカラーとす。
【スクリーンショット】上記にリンク展示。

【準備】
・アドオン「Stylish」を以下の番地よりブラウザに入れる。
・番地→https://addons.mozilla.org/ja/firefox/addon/stylish/
・インストールして再起動。上部ツールバーに白地に「S」のアイコン出現。

・もし出現しない場合、ツールバー右端の横棒が3本並んでいるアイコンを左クリック。
・アイコンがたくさん並んでいるメニュー出現。
・一番下の「カスタマイズ」をクリック。
・左側のアイコンの中から「S」文字アイコンを探し、
・左クリックしたまま、ツールバー上に引きずり、
・適当な位置で左クリック状態を解除。
・「カスタマイズ終了」をクリック。

【スタイルを書く】
・「S」アイコン左クリック→「新しいスタイルを書く」→「白紙のスタイル」
・真っ白い編集画面が現れる。ここに以下のコードをコピペする。

▼▼▼コピー開始▼▼▼
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain('grnba.bbs.fc2.com') {

img[ src='http://bbs6.fc2.com/bbs/img/_409100/409098/bg/title.jpg'] {
display: none !important;
}
dd {
/*カキコ行間 文字サイズ*/
font-size: 105% !important;
line-height: 165% !important;
word-break:break all !important;
}
dd br {
display: inline !important;
}
#container {
/*トップ頁全体の横幅を看板の横幅に*/
width: 645px !important;
}
img[src='http://grnba.jp/i/top.gif'] {
display: none !important;
}
body {
margin: 10px auto !important;
background-color: #9fc469 !important;
}
html {
background-color: #9fc469 !important;
}
a {
font-weight: normal !important;
text-decoration: none !important;
}
a:link {
color:#0a7a29 !important;
}
a:visited {
color: #1e4f66 !important;
}
a:hover {
background-color: #ae4400 !important;
color: #ffffff !important;
}
div#body p.title {
padding: 25px 20px 10px 20px !important
}
div#bbs_body p.title {
padding: 24px 20px 10px 20px !important
}
div.bbs_body p.title, div#body p.title {
/* 題字 */
font-family: "Times New Roman", "游明朝", YuMincho, "Hiragino Mincho ProN", Meiryo, serif !important;
font-size: 170% !important;
font-weight: normal !important;
text-align: center !important;
}
div.bbs_body p.title span#counter {
font-size: 40% !important;
color: red !important;
background-color: #d3f8d3 !important;
}
div.bbs_body p.title span#counter:before {
/* カウンタの前で改行 */
content: '\A';
white-space: pre;
}
div.bbs_box {
background-color: #d3f8d3 !important;
}
div.bbs_body {
margin: 0 18px 0 19px !important;
}
div.bbs_body > br, #body br {
display: none;
}
body#bbs_reply_body {
/* 各個別スレのページ */
width: 580px !important;
padding: 3px 22px 1px 22px !important;
border: solid 1px black !important;
background-color: #ffffff !important;
}


div#bbslog .bbs_box.log_box {
background-color: #ffffff !important;
}
div.bbs_body, div.bbs_box {
/*枠線の撤去*/
border: 0 !important;
}
div#thread.bbs_box, div.bbs_box.log_box, div.bbs_box {
/*枠線の新設*/
border: solid 1px black !important;
}
div[style='color:navy;font-size:15pt;font-weight:bold;line-height:130%;margin-top:16px;'] {
font-size: 110% !important;
font-weight: normal !important;
margin-top: 8px !important;
}
b[style='color:red;font-size:18pt;'] {
font-size: 110% !important;
font-weight: normal !important;
}
div[style='color:#002200;font-size:15pt;font-weight:bold;line-height:130%;'] {
font-size: 110% !important;
font-weight: normal !important;
margin: 5px 0px !important;
}
b[style='color:#ff0000;'] {
font-weight: normal !important
}
center {/*リンクナビ*/
font-size: 100% !important;
text-align: left !important;
background-color: #5e886b !important;
line-height: 100% !important;
padding: 4px 5px 4px 5px !important;
margin: 7px 0px 9px 0px !important;
}
center a:link, center a:visited {
color: #ffffff !important;
}
center a {
font-weight: normal !important;
text-decoration: none !important;
}
center a:hover {
background-color: #ae4400 !important;
color: #ffffff !important;
}
center a[href="http://iiyama16.blog.fc2.com/"]:before {
content: '\A';
white-space: pre;
}

form.search {
font-size: 95% !important;
margin-bottom: 10px !important;
text-align: left !important;
}
form.search input[type=text] {
/*検索*/
background-color: #f3ffe1 !important;
width: 300px !important;
color: #000000 !important;
}

ul.menu {
/* メインナビ */
font-size: 90% !important;
padding: 3px 0px 3px 5px !important;
text-align: left !important;
background-color: #5e886b !important;
color: #5e886b !important;
margin-bottom: 15px !important;
}
ul.menu a {
text-decoration: none !important;
color: #ffffff !important;
}
ul.menu a:hover {
background-color: #ae4400 !important;
color:#ffffff !important;
}

.bbs_box#thread {
/*スレ上位一覧の文字サイズと行間*/
font-size: 110% !important;
line-height: 150% !important;
background-color: #ffffff !important;
}


/*▼▼個別スレッド▼▼*/
.log_nav a:link, .log_nav a:visited {color: #cb2100 !important;}
.log_nav a:hover {
color: #ffffff !important;
background-color: #ae4400 !important;
}
div#body > p.title > span#counter {
font-size: 40% !important;
color: red !important;
background-color: #ffffff !important;
}
div#body p.title span#counter:before {
/* カウンタの前で改行 */
content: '\A';
white-space: pre;
}
hr { display:none !important; }


div#body h1#topic_title {
padding-top:35px !important;
margin: 20px 0px 0px 0px !important;
}
.log_header {
margin: 20px 0px 0px 0px !important;
}
td.log_title {
font-size: 90% !important;
margin-bottom:0px !important;
}
body#bbs_search_body .log_title {
/* 検索結果ページのタイトル */
padding: 0px 0px 0px 5px;
border-left: 20px solid #cb2100;
font-size: 180% !important;
font-weight:bold !important;
}
body#bbs_search_body center {
display: none !important;
}

.subj {
font-weight: bold !important;
padding-left: 5px;
border-left: 20px solid #cb2100;
line-height: 105% !important;
display: table-cell !important;
}
dl {
font-size: 110% !important
}
dt {
/* 投稿者名日時の帯 */
font-size: 95% !important;
margin-bottom: 30px !important;
padding: 5px 5px 5px 10px !important;
background-color: #5e886b !important;
color:#ffffff !important;
line-height: 110% !important;
}
span.name a {
color: #ffffff !important;
}
span.name a:link {
color:#cef9ff !important;
}
span.name a:hover {
background-color: #ae4400 !important;
color: #ffffff !important;
}
dd a:link {
color: #d21100 !important;
}
dd a:visited {
color: #d21100 !important;
}
dd a:hover {
color: #ffffff !important;
background-color: #ae4400 !important;
}
span[class='name'] {
font-size: 100% !important;
color :#ffffff !important;
}
p.date { color:#ffffff !important; }
p.date:before {
content: '\A ';
white-space: pre;
}

/* ▼▼最下部投稿欄▼▼ */
input, textarea {
font-size: 98% !important;
line-height: 150% !important;
border: solid 1px black !important;
background-color: #f3ffe1 !important;
padding-left: 4px !important;
}
input[type=text] {
width: 125px !important;
}
input[type=checkbox] {
width: 30px !important
}
div.formbox input[type=file] {
width: 470px !important;
border: solid 1px black !important;
background-color: #f3ffe1 !important;
}
ul.formbox input[type='file'] {
width: 470px !important;
border: solid 1px black !important;
background-color: #f3ffe1 !important;
}
input#pre_check {
width: 35px !important
}
ul.formbox textarea, div.formbox textarea {
width: 520px !important;
word-wrap: break-word;
white-space: pre-wrap; /* IE,FF */
word-break:break-all;/* webkit */
}
.formbox {
margin-left: 15px !important
}

input[value='新規スレッド作成'] {
font-size: 125% !important;
margin-left: 20px !important;
padding: 1px 5px !important;
color: white !important;
background-color: #ca3627 !important;
}
input.thread_title {
width: 240px !important;
height: 28px !important;
}
input[value=' 書き込む '] {
font-size: 125% !important;
margin-bottom: 5px !important;
padding: 1px 5px !important;
color: white !important;
background-color: #5e886b !important;
}
iframe {
display: none !important;
}
/* ▲最下部投稿欄▲ */
form#bbsform, div#bbsform2 {
background: #9fc469 !important;
border-color: #9fc469 !important;
}

}


/*▼全スレッド一覧▼*/
@-moz-document url-prefix("http://grnba.bbs.fc2.com/?act=threadlist") {

body {
width: 645px !important;
font-size: 190% !important;
font-weight: bold !important;
text-align: center !important;
font-family: selif !important;
padding-top: 20px !important;
color: #ffffff !important;
}
a {/*タイトル題字*/
color: #ffffff !important;
font-weight: bold !important;
text-decoration: none !important;
}
a {
font-weight: normal !important;
text-decoration: none !important;
}
div[style="margin:10px;"] {
font-size: 55% !important;
line-height: 160% !important;
border: solid 1px black !important;
background-color: #ffffff !important;
padding: 30px 30px !important;
margin-top: 25px !important;
word-break: break-all;
text-align: left !important;
font-family: san-serif !important;
}
div[style="margin:10px;"] a:link {
color:#0a7a29 !important;
}
div[style="margin:10px;"] a:visited {
color: #1e4f66 !important;
}
div[style="margin:10px;"] a:hover {
background-color: #ae4400 !important;
color: #ffffff !important;
}
div.bbs_box {
border: none !important;
display: none !important;
}
span[ style="font-size:12px;"] {
font-weight: normal !important;
}

}
▲▲▲コピー終了▲▲▲

【名称記入、保存】
・コピペした後、・頁上部にある「名称」欄に
・「放知技P」とでも書き「保存」クリック。
・これ以後、放知技サイトを開くと「S」アイコンの背景が赤地になる。
・赤地はユーザースタイルシート適用中を示す。

【スタイルシートの適用を一時的に止めてオリジナルとどこがどう違うのか確認したい場合】
・「S」アイコンを左クリック。メニューが出る。
・「放知技P」の頭にチョンマークがついている。
・「放知技P」上でクリック。マークが消える。
【復活させたい場合】
・「S」アイコンを左クリック。メニューが出る。
・「放知技P」の頭にチョンマークが付いていない。
・「放知技P」上でクリック、チョンマークが付く。

【削除したい場合】
・「S」アイコン左クリック、メニューが出る。
・「スタイルの管理」クリック。
・スタイルシート一覧ページが現れる。
・「放知技P」の列の右手端にある「削除」ボタンをクリック。

【書き換えたい場合】
・「S」アイコン左クリック、メニューが出る。
・「スタイルの管理」クリック。
・「放知技P」の列の右手にある「編集」ボタンをクリック。
・書き込んだコードが現れる。
・変更したい箇所を書き直す。
・修正後は忘れずに「保存」をクリックのこと。

【注記】
・末尾に必ずある「!important」はこれが最優先の書式だの意。
・その直前の数字や文字を変えるとサイトのデザインが変化する。
・その数字や文字の前にある文字を検索すると、
・数字や文字をどんなものにすればいいか選択肢が分かる。

【補足】
・フォントサイズは環境により見え方が異なるので要調整。

  • 名前: E-mail(省略可):
  • 画像:

Copyright © 1999- FC2, inc All Rights Reserved.