CSS
最終更新：ID:5NM+35pu9Q 2022年11月11日(金) 23:38:10履歴
現在の実行中のCSSをそのままコピペしたものです。
管理人tanaka203がCSSの編集に疎いため、詳しい方に見てもらうために置いています。
項目ページだとSeesaawikiのタグが実行されてしまうので差分をみてください
管理人tanaka203がCSSの編集に疎いため、詳しい方に見てもらうために置いています。
項目ページだとSeesaawikiのタグが実行されてしまうので差分をみてください
@charset "EUC-JP";
body {
font-size: 15px;
line-height: 1.6em;
letter-spacing: 0.06em;
font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, sans-serif;
color: #e5e5e5;
background: #101010;
margin: 0;
padding: 0;
}
a:link {color: #ead38f;text-decoration: none;}
a:visited {color: #ff8484;text-decoration: none;}
a:hover {text-decoration: underline;}
a:active {text-decoration: underline;}
/* メインカラムの位置と余白取り
--------------------------------------------------- */
div#wiki-content div#main {
margin: 0 0 0 -200px;
}
div#wiki-content div#main div.column-inner {
margin: 0 0 0 200px;
}
div#wiki-content {
margin:10px 10px;
}
div#main div.column-inner {
padding: 0 10px;
}
/* 各カラムの幅の指定。初期値は「#sub = 250px」「#extra = 200px」
--------------------------------------------------- */
div#wiki-container {
min-width: 760px;
max-width: 1300px;
margin: 0 auto;
}
div#wiki-content div#sub {
width: 200px;
}
div#wiki-content div#extra {
width: 200px;
}
div#page-container,
div#wiki-content div#sub,
div#wiki-content div#extra {
border-radius: 4px;
}
/* #フッター
--------------------------------------------------- */
div#common-footer {
padding: 10px 0 20px;
}
div#common-footer a:visited {
color: #ffe8a4;
}
div#common-footer a:hover {
text-decoration: none;
}
div#common-footer p.partner {
margin-bottom: 5px;
}
/* ヘッダー
--------------------------------------------------- */
div#wiki-header {
height: 30px;
}
div#wiki-header div.column-inner {
padding: 4px 0 0 20px;
}
div#wiki-header div#wiki-title h1 {
color: #fff;
font-size: 22px;
font-weight: bold;
line-height: 1;
}
div#wiki-title a {text-decoration: none;}
div#wiki-title a:link {color: #fff;}
div#wiki-title a:visited {color: #fff;}
div#wiki-title a:hover {color: #90b6cf;}
div#common-header {
background: #333;
}
/* メニューバー
--------------------------------------------------- */
div#wiki-menu {
height: 20px;
}
ul#navigation-m {
top: 0;
bottom: 0;
left: 10px;
}
ul#navigation-m li {
display: block;
float: left;
}
ul#navigation-m li a {
display: block;
padding: 5px 10px;
background: none;
font-size: 12px;
}
ul#navigation-m li a:visited {
color: #ffe8a4;
}
ul#navigation-m li a:hover {
text-decoration: none;
color: #90b6cf;
/* background:#666 url(https://static.seesaawiki.jp/img/usr_second/grade_dark/bg_menubar_on.gif) repeat-x 0 0;} */
}
ul#navigation-m li.top {
margin-left: 15px;
background: transparent;
}
div#wiki-menu div.search-box ul li {
margin-right: 6px;
}
/* メインページ
-------------------------------------------------------- */
-------------------------------------------------------- */
div#page-container {
padding: 8px;
}
div#page-container,
div#page-container .user-area {
background: #1c1c1c;
line-height: 1.7;
}
div#page-header div.title {
border-bottom: #fff solid 2px;
margin-bottom: 5px;
}
div#page-header div.title h2 {
font-size: 20px;
color: #fff;
}
div#page-header div.title h2 a {
color: #fff;
text-decoration: none;
}
div#page-header div.title h2 a:hover {
color: #90b6cf;
}
div#page-header div.title p.history {
top: 5px;
}
div#page-header div.title p.history a {
color: #fff;
text-decoration: none;
}
div#page-header div.title p.history a:hover {
color: #90b6cf;
text-decoration: underline;
}
div#page-header p.update {
font-size: 11px;
}
div#page-body {
margin: 10px 5px;
}
/* サイドコラム
-------------------------------------------------------- */
div#wiki-content div#sub {
font-size: 13px;
line-height: 1.3;
letter-spacing: 0.02em;
}
div#wiki-content div#extra {
margin-top: 10px;
font-size: 13px;
line-height: 1.3;
letter-spacing: 0.02em;
}
/* */
div.sidecolumn div.column-inner {
background: #202020;
padding: 6px 6px 0px 6px;
}
div.side-box div.title, div.free-box div.title, div.sidecolumn div.form-box div.title {
color: #fff;
padding: 5px 6px;
margin-bottom: 5px;
background: #444444;
}
div.side-box div.body,div.free-box div.body,div.sidecolumn
div.form-box div.body {
margin-bottom:0px;
}
div.side-box ul.parent-list li h3 {
font-weight:bold;
font-size:120%;
}
div.side-box ul.parent-list li h3 a {
color:#b9b9b9;
text-decoration:none;
}
div.side-box ul.parent-list li h3 a:hover {
color:#61a9e7;
}
div.side-box ul.child-list {
margin:0;
}
div.side-box ul.child-list li {
padding-left:10px;
background:url(https://image02.seesaawiki.jp/o/d/overlord/oFgu3rhbbo.png) no-repeat 0 7px;
margin-bottom:5px;
}
div.side-box ul.child-list li a {}
div.side-box ul.child-list li a:hover {}
div.side-box div.tagcloud {
padding:5px;
background:#333;
}
div.ld-plugin p.button {
padding:10px 0 0;
}
div.sidecolumn div.form-box form input.form-text {
width:140px;
}
/* メインページフッター
-------------------------------------------------------- */
div#information-box {
padding:5px 10px;
background:#1c1c1c;
}
div#information-box ul {
margin-top: 10px;
}
/* メインページのテーブルデザイン
--------------------------------------------------- */
div.user-area table th,
div.user-area table td {
padding:5px;
border:#666 solid 1px;
}
div.user-area table th {
color:#fff;
background:#333;
}
div.user-area table td {
color:#e1e0e0;
background:#151515;
}
/* 見出しのデザイン
--------------------------------------------------- */
div.user-area div.title-1 h3,
div.user-area div.title-2 h4,
div.user-area div.title-3 h5 {
font-size: 19px;
color: #fff;
}
div.user-area div.title-1 {
padding: 2px 12px 0px;
background: #444;
margin-top: 1em;
}
div.user-area div.title-2 {
padding: 2px 12px 0px;
border: #707070 solid;
border-width: 0 0 1px 0;
margin-top: 1.2em;
}
div.user-area div.title-3 {
padding: 2px 12px;
margin-top: 1.2em;
}
div.user-area ul.list-1 li,
div.user-area ul.list-2 li,
div.user-area ul.list-3 li {
margin-bottom: 7px;
}
div.user-area ul.list-1,
div.user-area ul.list-2,
div.user-area ul.list-3 {
margin:7px 0 10px 10px;
}
div.user-area ol.list-1,
div.user-area ol.list-2,
div.user-area ol.list-3 {
margin:10px 0 10px 10px;
}
/* タイトル横にある、部分編集ボタンのデザイン
--------------------------------------------------- */
div#main div.user-area div.title-1 a img {
margin-left: 8px;
background: #666;
padding: 4px;
border-radius: 6px;
border-bottom: none;
}
div#main div.user-area div.title-2 a img,
div#main div.user-area div.title-3 a img {
margin-left: 8px;
border-bottom: underline;
display: inline-block;
}
div#page-header div.title h2 a img {
margin-left: 16px;
border-bottom: underline;
}
/* Twitter関係のデザイン？ 引用文
--------------------------------------------------- */
div.user-area blockquote {
color: #c7ced5;
border: #434343 solid 1px;
padding: 10x;
margin: 10px auto;
background: #25252a;
}
div#main div.user-area pre.prettyprint {
color: #000;
background-color: #f3f3f3;
padding: 10px;
border: #ccc solid 1px;
}
div.sidecolumn div.user-area pre.prettyprint {
padding:5px;
}
/* 用途不明
--------------------------------------------------- */
div.user-area hr {
background:#9a9a9a;
color:#9a9a9a;
}
/* コメント一覧・トラックバック一覧
コメントは個別ページ（個数制限あり、「#page-footer」内に配置）、コメントページ（全件表示「#page-body」内に配置）
--------------------------------------------------- */
div#comment-box div.title h3,
div#trackback-box div.title h3 {
font-size: 18px;
}
div#comment-box div.body div.text,
div#trackback-box div.body div.text {
font-size: 18px;
line-height: 1.6em;
padding-bottom: 10px;
border-bottom: #999 dashed 1.5px;
margin-bottom: 20px;
}
/* 個別ページ内での設定
--------------------------------------------------- */
div.page-index div#comment-box {
border-top: #999 solid 1px;
padding-top: 10px;
margin: 20px auto 1px;
font-size: 15px
}
div.page-index div#comment-box div.title {
margin-bottom: 5px;
}
div.page-index div#comment-box div.body div.text {
margin-bottom: 20px;
}
div.page-index div#comment-box div.body div.text p {
font-size: 15px;
line-height: 1.6em;
}
div.page-index div#comment-box div.body div.text span.posted {
font-size: 12px;
}
/* コメントページ内での設定？？？
--------------------------------------------------- */
div.page-comment div#comment-box div.body div.text {
margin-bottom: 20px;
}
div.page-comment div#comment-box div.body div.text p {
font-size: 15px;
line-height: 1.5;
}
div.page-comment div#comment-box div.body div.text span.posted {
font-size: 12px;
}
div#comment-box div.body div.comment-reply {
border-bottom: dashed 1px #999;
}
/* 「このコメントに返信する」のアンダーライン（下部）*/
div#comment-box div.body div.form-box {
font-size: 15px;
}
/* 投稿フォーム */
div.page-comment div#page-body div.form-box div.title {
padding: 0 0 0 20px;
margin: 0 0 10px 0;
/* background:transparent url(https://static.seesaawiki.jp/img/usr_second/common/icon_comment.gif) no-repeat 0 0; */
}
div.page-comment div#page-body div.form-box table td textarea{
width: 600px;
height: 200px;
}
#pageroot-form-box table td textarea {
width: 600px;
height: 200px;
}
div.form-box div.title {
color: #fff;
padding-bottom: 2px;
margin-bottom: 10px;
}
/* 「このコメントに返信する」のアンダーライン*/
div#comment-box div#pageroot-form-box div.title,
div#comment-box div.form-box div.title {
color: #333;
}
/* コメントの「返信」のボタン*/
div#comment-box div.body span.reply-btn {
font-size: 15px;
}
/* トラックバックフォーム */
div#trackback-box div.entry label {
padding:0 0 0 20px;
margin:0 0 10px 0;
/* background:transparent url(https://static.seesaawiki.jp/img/usr_second/common/icon_comment.gif) no-repeat 0 0; */
}
/* 検索フォーム */
div.search-box-main {
height:64px;
border:#666 solid 1px;
background:#222;
}
div.search-box-main div.box-inner {
padding:0!important;
background:transparent!important;
height:64px;
text-align:center;
}
div.search-box-main div.box-inner form {
padding-top:7px;
}
div.search-box-main input {
vertical-align:middle;
}
div.search-box-main label {
vertical-align:middle;
margin:0 3px 0 2px;
}
div.search-box-main ul {
padding:0;
margin:3px auto 0;
}
div.search-box-main ul li.title {
color:#fff;
}
div.search-box-main ul li {
display:inline;
}
div.search-box-main ul li.form-text {
margin-left:5px;
}
div.search-box-main ul li.form-text input#keywords {
width:300px;
font-size:15px;
padding:3px 2px 2px;
border:#000 solid;
border-width:1px 0 1px 1px;
}
*:first-child+html div.search-box-main ul li.form-text input#keywords {
padding:4px 2px 3px;
}
* html div.search-box-main ul li.form-text input#keywords {
padding:4px 2px 3px;
}
/* 差分表示・囲み */
div.page-diff div.diff-box {
color:#000;
}
/* 添付一覧
--------------------------------------------------- */
div.page-attachment div.paging-top {
padding:10px 0 0;
}
div.page-attachment ul.page-list li.even {
background:transparent;
}
div.page-attachment ul.page-list li.odd {
background:#666;
}
/* 「div.side-box」と並列なもの
「recent」更新情報「category」カテゴリ「comment」 -- リストを使用
-------------------------------------------------------- */
div.sidecolumn div.category ul.parent-list li h3 {
font-weight:bold;
font-size:120%;
}
div.sidecolumn div.category ul.parent-list li h3 a {}
div.sidecolumn div.category ul.parent-list li h3 a:hover {
text-decoration:none;
}
div.sidecolumn div.comment ul li {
padding-left: 10px;
background: url(https://image02.seesaawiki.jp/o/d/overlord/oFgu3rhbbo.png) no-repeat 0 7px;
margin-bottom: 5px;
}
div.sidecolumn div.banner div.body {
padding:0 5px;
text-align:center;
}
div.sidecolumn ul.editorList li {
display:block;
float:left;
margin:0 3px 3px 0;
}
div.sidecolumn ul.editorList li img {
width:32px;
height:32px;
}
/* google adsense
--------------------------------------------------- */
div#main div.adsense-box {
padding:0px 0 0;
margin:10px auto;
background:#101010;
display:block!important;
}
div.sidecolumn div.adsense-box {
padding:5px;
margin:0 auto;
display:block!important;
background:#333;
}
div#main div.adsense-main-inner {
border:none;
margin:0 auto 10px;
}
div.adsense-box {}
div.adsense-box p {
color:#b9b9b9;
text-align:right;
font-size:90%;
font-weight:bold;
line-height:100%;
padding:0 5px 5px 0;
}
div.adsense-box ul {
list-style:none;
margin:0;
padding:0;
}
div.adsense-box ul li {}
div.adsense-box ul li a {
padding:5px;
}
div.adsense-box ul li a:hover {
background:#666;
}
div#main div.adsense-box ul li a {
line-height:1;
background:url(https://static.seesaawiki.jp/img/usr_second/common/icon_pr.gif) no-repeat 5px 5px;
padding-left:30px;
}
div#main div.adsense-box ul li a:hover {
background:#666 url(https://static.seesaawiki.jp/img/usr_second/common/icon_pr.gif) no-repeat 5px 5px;
padding-left:30px;
}
div.adsense-box ul li span.ads-title {
color:#7193aa;
font-weight:bold;
text-decoration:none!important;
}
div.adsense-box ul li span.ads-url {
color:#fff;
font-size:80%;
}
div.adsense-box ul li span.ads-text {
color:#b9b9b9;
font-size:80%;
}
div.sidecolumn div.adsense-box ul li span.ads-url {
display:block;
margin:5px 0;
}
div.sidecolumn div.adsense-box ul li span.ads-text {
line-height:1.5;
}
/* tagcloud
---------------------------------------------------------------------------------------------------------------- */
div.side-box div.tagcloud {
background:#000;
}
.tagcloud_base a:link{color:#fff;text-decoration:none;}
.tagcloud_base a:visited{color:#fff;text-decoration:none;}
.tagcloud_base a:active{color:#f00;text-decoration:none;}
.tagcloud_base a:hover{color:#f00;text-decoration:underline;}
.tagcloud_used a:link{color:#ffa;}
.tagcloud_used a:visited{color:#ffa;}
.tagcloud_used a:active{color:#f30;}
.tagcloud_used a:hover{color:#f30;}
.tagcloud_t0 a:link{color:#333;}
.tagcloud_t0 a:visited{color:#333;}
.tagcloud_t0 a:active{color:#f30;}
.tagcloud_t0 a:hover{color:#f30;}
.tagcloud_t1 a:link{color:#666;}
.tagcloud_t1 a:visited{color:#666;}
.tagcloud_t1 a:active{color:#f30;}
.tagcloud_t1 a:hover{color:#f30;}
.tagcloud_t2 a:link{color:#aaa;}
.tagcloud_t2 a:visited{color:#aaa;}
.tagcloud_t2 a:active{color:#f30;}
.tagcloud_t2 a:hover{color:#f30;}
.tagcloud_t3 a:link{color:#eee;}
.tagcloud_t3 a:visited{color:#eee;}
.tagcloud_t3 a:active{color:#f30;}
.tagcloud_t3 a:hover{color:#f30;}
.tagcloud_t4 a:link{color:#fff;}
.tagcloud_t4 a:visited{color:#fff;}
.tagcloud_t4 a:active{color:#f30;}
.tagcloud_t4 a:hover{color:#f30;}
/* トグル
------------------------------------- */
div.user-area a.toggle-link-close {
cursor: pointer;
background:url(https://static.seesaawiki.jp/img/usr_second/common/design_black/icon_close.gif) no-repeat 0 0;
}
div.user-area a.toggle-link-open {
cursor: pointer;
background:url(https://static.seesaawiki.jp/img/usr_second/common/design_black/icon_open.gif) no-repeat 0 0;
}
div.user-area div.toggle-display {
padding-left: 5px;
}
/* 関連タグ
------------------------------------- */
div.tags-box p.title a.imageLink {
width:48px;
height:18px;
}
div.tags-open a.imageLink {
/* background: url(https://static.seesaawiki.jp/img/usr_second/common/design_black/btn_tag.gif) no-repeat; */
}
div.tags-close a.imageLink {
/* background: url(https://static.seesaawiki.jp/img/usr_second/common/design_black/btn_tag_on.gif) no-repeat; */
}
/* フィードボックス
------------------------------------- */
div.feed-box {
color:#fff;
border:none;
background:#000;
padding:0 0 5px;
border:#535353 solid 1px;
margin-bottom:10px;
}
div.feed-box a {
color:#fff;
text-decoration:underline;
}
div.feed-box a:visited {
color:#ead38f;
}
div.feed-box a:hover,
div.feed-box a:active {
text-decoration:none;
}
div.feed-box p.title {
color:#fff;
padding:5px;
background:#1c1c1c;
}
div.feed-box p.title a {
color:#fff;
text-decoration:none;
}
div.feed-box p.title a:hover {
text-decoration:underline;
}
div.feed-box p.title span {
padding-top:5px;
padding-left:5px;
display:inline;
margin-right:0;
background:transparent;
}
/* 編集画面のテキストエリア
------------------------------------- */
div.edit-entry textarea {
font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, sans-serif;
font-size: 15px;
}
/* 掲示板のフォント
------------------------------------- */
div#bbs-box {
font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, sans-serif;
}
/* 掲示板の文字サイズ変更 レスに対して
------------------------------------- */
#bbs-box p.comment {
font-size: 15px;
}
/* ：｜の見出し
--------------------------------------------------- */
div.user-area dt {
font-weight: bold;
margin-bottom: 5px;
font-size: 110%;
padding: 5px 0 5px 0;
border-bottom: #707070 solid 0px;
}
div.user-area dd {
margin-left: 30px;
margin-bottom: 5px;
}
div.user-area dl {
margin-bottom: 10px;
line-height: inherit;
}
/* ページ一覧・編集履歴
--------------------------------------------------- */
ul.page-list li span {
display: block;
width: 40%;
float: left;
font-size: 80%;
}
|=
タグ
tanaka203
このページへのコメント
これCSSはバックアップの方でお話しましょうか。
掲示板でもいいですけど掲示板は移動がめんどくさい
コメントが増えると改行されるのはSeesaaに要望ださないと……
今日は長く付き合ってくれてありがとうございます
心から感謝しています
■サイドコラムの余白
div#wiki-content div#extra {
margin-top: 8px;
}
ありがとうございます。覚えます
■思ったんですがサイドコラムのコメントの表示件数を少し減らしても良いのでは？と感じました。
現在スマホユーザーが全体の７割です。最近コメント一覧が実装されてスマホユーザーがコメントを追うことができるように成りました。
この一覧はPCユーザーと共通の件数なので、現在、PCユーザーには泣きを見てもらっている状態です。
今日のようにコメントが多いと流れるので、どのくらいまで減らすかは難しいところです。
■seesaawikiのヘッダーについて
色々と色を変更していくとここの#000が気になりだします。
こちらもグレー配色にして見やすくしちゃいましょう。
採用したいと思います。
ただ、コメントページで広告ある余白は削除。色指定は背景色と同じ#101010に指定します。
広告を邪魔するつもりは無いですが、ギリギリまで詰めます。ブロックツール使ってヘッダー丸ごと消すこともできるので、個人ごとにやってほしい範囲ではありますが。
■横幅サイズの最低値 div#wiki-container { min-width: 760px; } こうすることで、ウィンドウを狭めても760pxは最低でも維持されます。ウィンドウ狭めて文字ごちゃごちゃより圧倒的に良いでしょう。 この状態での全体の幅は1000pxに収まっています。 ウィンドウ幅に合わせるよりwidth:760で固定した方が全ページを通したページのデザインバランスがやりやすいですが、ここらへんはお好みで。
これですが、先に述べたとおり現在スマホユーザーが非常に多いので、スマホユーザーの環境では大丈夫なのでしょうか？
メモ（その１のCSS）
１．コメント返信の「このコメントに返信する」が白色
２．コメント画面の広告の背景と余白の削除
３．div#main div.user-area pre.prettyprintの調整
スマホの事を全く考えていませんでした、これは失敬。
ページのデザインバランスは4~500pxが目安になりますね...
widthの設定はスマホ向けのCSSには影響しないのでご安心を。
基本的にスマホユーザーはスマホ画面でみるので、CSS変更はPCやiPad向けのものになります。
スマホ画面はユーザーが設定したCSSの影響はほぼ受けません。
ただPC画面をみるスマホユーザーも一定数いますので、当wikiではテーブルの横幅を６００くらいまでで抑えるようにしてます。
基本的には現在調整中のCSSでいいと思います
改行されなかったので改めて。というかseesaawikiのコメント欄本当に使いづらいなぁ...
追記
■横幅サイズの最低値
div#wiki-container {
min-width: 760px;
}
こうすることで、ウィンドウを狭めても760pxは最低でも維持されます。ウィンドウ狭めて文字ごちゃごちゃより圧倒的に良いでしょう。
この状態での全体の幅は1000pxに収まっています。
ウィンドウ幅に合わせるよりwidth:760で固定した方が全ページを通したページのデザインバランスがやりやすいですが、ここらへんはお好みで。
■その他の調整について
恐らく、現在のコンテンツを詰める方式からcssで行える調整はこれくらいだと思います。
残ってる事はコンテンツの文字サイズを下げるなりでしょう。(サイドコラムのコメント一覧とか)
部分的に文字色を薄くして強弱ハッキリなんかはライターの仕事かな。
オーバーロードは情報量も多い上、seesaawikiは自由が聞き辛くデザインに悩み考える事も多いでしょうが頑張ってください。
私もあるwikiを管理していますが、見やすさを考える余り情報の量が少なくなってしまいました。結局の所、デザインなんてものは後から付ければいいので悩んだら誰かに丸投げです（笑）
また何かいい案が思いついたら明日にでも書き込みます。
おぉー。掲示板のフォントが変更されている。すごいですね出来ないと思ってました。
でも11pxは小さいので14pxにしてます
時間が掛かってしまいましたが変更出来たようで何よりです。
一度、CSSの整理をしては如何でしょうか、不慮の削除の時などに発見がしやすいでしょう。
CSS内のスクロールも早くなるのでいい事尽くめかと思われます。
CSS下部でURLが改行されてたりする場所も気になりますし...
もし誰でも編集可能ページを作ってくださればそこに整理後のCSSを貼り付けましょう。
トラックバックフォームと関連タグの話ですね。
URLが改行されているのは、私自身詳しくないので、ここにURLを設定すればいいというのがわかりやすいように改行していました
見出し、リスト、トグルなども前は画像を指定してなかったんですが、今は使ってます
暇つぶしに関連タグのURL復帰させてみようかな
background:transparent url
(http://static.seesaawiki.jp/img/usr_second/common/icon_comme
>もし誰でも編集可能ページを作ってくださればそこに整理後のCSSを貼り付けましょう。
ありがたいですが大変ですよ。見返りも感謝しかできません。
模試やってくださるなら、バックアップは項目の自由編集が可能なので、そちらをご利用ください
ttp://seesaawiki.jp/overload2/d/css_user_test
こちらにCSSを貼り付けました。特にCSSを纏めれた訳ではありません。
{}だけで使われてない無駄なCSSを消して1072行 → 734行程度になりました。あんま変わらないですね...
■角っぽさを和らげる
main sub extraのコラムの角に4px程丸みを設けました。0よりマシだと思い入れましたが、気に入らなければ削除してください。
■変な余白の削除
mainとsubとの間に変な段差が出来てたので消しました。
■サブメニュー間の余白の追加
やや見やすく感じるのではないでしょうか？こちらも気に入らなければ削除です。
■フォントの字間の調整
bodyにletter-spacing: 0.05emを追加し可読性を上げました。
長文の多いオーバーロードではあった方が良いと主張します。line-heightも1.35から少し上げても良いのではないでしょうか？最大1.8の1.6などが推奨だったりします。
letter-spacingに関してはレイアウトが崩れる可能性も無きにしもあらずなのでご注意を。
(テーブルの幅固定してたりだとか、サイドコラムで改行が発生したりだとか。この場合はサイドコラムに個別で設定必要。)
角丸等は反映しない場合の為、上記の余白の段差と無駄なCSSを削除したバージョンも用意してあります。
お疲れ様です！
現在、「その1 色々変更したバージョン」をバックアップで使用中です。
まず、検索バー、検索ボタン、検索条件が改行されているので、検索バーを140から130に変更します。
サブメニューに膨大なメニューが有るオバロで改行が多くなるとマウススクロールが大変になるので。
div.sidecolumn div.form-box form input.form-text
width:140px; →130
■letter-spacing: 0.05em
これすごくいいですね。
長文か著しい私の文章にはありがたい機能です。ぜひ採用したいと思います。
ただおっしゃっている通り、ギリギリの幅指定をシているテーブル内で改行が発生すると思いますので、特にキャラデータのテーブルは注意します。
■main sub extraのコラムの角に4px程丸みを設けました。
問題ないと思います。
■line-heightも1.35から少し上げても
検討します
■最近更新したページ
せっかくなので伺いたいのですが、サブメニューの下にある余白をもう少しだけ詰めることはできますでしょうか？
実は余白をあけたいと思っていた箇所なので、メインとサブメニューの間にあるくらいの幅にしてほしいです。
■サイドコラムの余白
div#wiki-content div#extra {
margin-top: 8px;
}
ここの部分をイジれば幅を変更可能です。修正前は20pxでした。
ただ、今の色設定だと若干別れてる感じがしませんね。サイドだけ薄くするといいかもしれません。
div.sidecolumn div.column-inner {
#181818 ~ 202020くらいが良いかも？
}
思ったんですがサイドコラムのコメントの表示件数を少し減らしても良いのでは？と感じました。
■seesaawikiのヘッダーについて
色々と色を変更していくとここの#000が気になりだします。
こちらもグレー配色にして見やすくしちゃいましょう。
div#common-header {
color: #333;
}
一応、上記の修正はcss_user_testページの項目2にて修正してあるので、こちらからコピペおｋです。
div.user-area div.toggle-display {
padding-left: 5px;
ここの「}」が消えてますね、これが原因でしょう。
トグルボタンの話ですか？
修正しましたがだめでした！
私の画面だと、掲示板の方にCSS適応されてますね...