サイトの見た目をいじる Edit

別にやらなくてもいいことをワザワザやるというコンセプトのもとに

pikiwikiのCSSを操作してみる。

pikiwiki公式の情報なんかも参考にしつつ暇なときに付け足していきます。

http://notarejini.orz.hm/up2/file/qst074982.png

ここまでする必要はありませんがやろうと思えばこんな感じにもなります。CSSって何?っていうひとはググりましょう。

必要環境
Firefox及びアドオンStylish Google:stylish アドオン 使い方

完成品 さくっと導入したい人向け Edit

Chrome版のStylishではnamespaceの指定は不要なのでCSSコードをそのまま記述してセーブしましょう。


実用的なもの Edit

デフォルトだと中心に表示されるtableを左寄せにするコード
http://notarejini.orz.hm/up3/img/exp001348.gif

ひらいたスペースはリンク先のサムネイルビュースペースにすると活用できます。リンク先をPOPアップするツールと合わせて使うと便利。

http://notarejini.orz.hm/up3/img/exp001349.gif
coolPreviewの設定

http://notarejini.orz.hm/up3/img/exp001350.gif


@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("notarejini.orz.hm") {
/* 文字組みのマージンを2文字分とる 行間を広めに取る*/
pre, dl, ol, p, blockquote, memo{
	margin-left: 2em!important;
	line-height:160%!important;
}
ul  {
 	line-height:160%!important;
 	margin-bottom:0.5em;
 	margin-top:0.5em;
 	text-align:left;
}
/* IE対策 */
div.ie5 {
	text-align:left!important; 
}
/* テーブルを左寄せにして背景色を無効に */
.style_table {
	margin-left:2%!important;
background-color:inherit!important;
	}
.style_td {
	background-color:inherit!important;
	}
}

三点リーダーが...となるのを防ぐ Edit

div{
font-family:"メイリオ","Meiryo","ヒラギノ角ゴ Pro W3",
 "Hiragino Kaku Gothic Pro","MS Pゴシック", "MS P Gothic","Osaka",
 Verdana,Arial, Helvetica, sans-serif;!important 
}

全体的に真っ白になって目が疲れる人は Edit

以下のコード足すと

div#body { 
	background:#f2f9fd;
	border-top:1px solid #c8ebf9;
	border-left:1px solid #c8ebf9;
	border-right:1px solid #c8ebf9;
	border-bottom:1px solid #c8ebf9;
}

http://notarejini.orz.hm/up3/img/exp001352.gif

こうなります。

破線で囲う Edit

.list2, list1, list3 {
	-moz-border-radius: 10px;
	border-top:3px dashed #c8ebf9;
	border-left:3px dashed #c8ebf9;
 	border-right:3px dashed #c8ebf9;
	border-bottom:3px dashed #c8ebf9;
}

 罫線をいれる Edit

http://notarejini.orz.hm/up3/img/exp001356.gif

liタグをまとめて指定

/* 罫線を入れる */
li{
border-bottom: 1px dotted gray;
	}

罫線 Div要素をコンテンツ内容に応じて適用させる Edit

ピンとこない場合は追記してみるとわかります。表示をすっきりさせたい時に。

li{
width: -moz-fit-content;
}
div {
width: -moz-fit-content;
}

 コメントを見やすく Edit

http://notarejini.orz.hm/up3/img/exp001358.gif

.list1 ul {
-moz-border-radius: 10px;
margin: 1em; 
padding: 1px;
	background:white;
border-bottom-width:3px;

}
.list2 li{
-moz-border-radius: 10px;
padding: 1px; 
margin: 1em; 
	background:white;
border-bottom-width:0px;	

}
.list3 li{
-moz-border-radius: 10px;
margin: 1em; 
list-style-type: decimal;
	background:#F6F6F6;
border-bottom-width:0px;

}

 奇数行に色付け Edit

.list3 li:nth-child(odd)       {
        background-color: #f2ffff;
        }

 コメントを横並びにする Edit

全体に適用してもアレなのでFrontページのみ等の限定した使用法を推奨 http://notarejini.orz.hm/up3/img/exp001384.gif

.pcmt {padding: 10px; 
	display: table-cell;
}

 最新60件をナンバリング Edit

http://notarejini.orz.hm/up3/img/exp001374.gif

div#menubar ul li{
list-style-type: decimal;
margin-left: 16px;
}

 menu幅をひろげる Edit

#menubar {
width:200px!important;
}

 ロダ2を見やすく Edit

ページメニューを下に持ってゆきます。

.bline{
display:table-footer-group;
	
}
table{
display:table-header-group;
}

 日付を消します Edit

span.comment_date {
display: none;
}

検索フォームをメニューから右上に移動 Edit

div#menubar ul li form{
position: absolute;    
	z-index: 1;
	top: 1em;
	right: 0;
width: 25%;
 opacity: 0.8; 
        font-size: 10px;
	display: table-cell;
}

合わせるとこうなる Edit

http://notarejini.orz.hm/up3/img/exp001359.gif http://notarejini.orz.hm/up3/img/exp001385.gif

背景画像 Edit

url(file:c:/bg/headbg.jpg)の部分はサイトから保存して、自分のPCのCドライブ直下にfgフォルダにある画像を読み込んでます。
ここはロダのURLでも構いませんがローカルの方が速いでしょう。

body{
background-image: url(file:c:/bg/headbg.jpg)!important;
/* 繰り返し表示をしない */
background-repeat: no-repeat;
/* 画像に合わせて背景色を */
background-color:#F9F9F9!important;
}
}
要素を半透明にするときは
 opacity: 0.5; 
をくわえましょう

トマトづくし Edit

http://notarejini.orz.hm/up3/img/exp001377.gif

div#body{
background-image: url(http://notarejini.orz.hm/up3/img/exp000916.png)!important;
}

Last-modified: 2011-10-06 Thu 17:37:42 JST (2988d)