☆ なんちゃら かんちゃら ☆ 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入手サイト。
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;
}

}
▲▲▲ ここまで ▲▲▲

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

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

Copyright © 1999- FC2, inc All Rights Reserved.