☆ なんちゃら かんちゃら ☆ 302193

▲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入手サイト。
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.