施設/webおしゃれさん/css

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

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

pikiwikiのCSSを操作してみる。

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

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

必要環境

Firefox及びアドオンStylish Google:stylish アドオン 使い方

• サイトの見た目をいじる
  • 完成品 さくっと導入したい人向け
  • 実用的なもの
  • 三点リーダーが...となるのを防ぐ
    • 全体的に真っ白になって目が疲れる人は
    • 破線で囲う
    • 　罫線をいれる
    • 罫線　Div要素をコンテンツ内容に応じて適用させる
    • 　コメントを見やすく
    • 　奇数行に色付け
    • 　コメントを横並びにする
    • 　最新60件をナンバリング
    • 　menu幅をひろげる
    • 　ロダ２を見やすく
    • 　日付を消します
    • 検索フォームをメニューから右上に移動
    • 合わせるとこうなる
  • 背景画像
    • トマトづくし

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

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

実用的なもの †

デフォルトだと中心に表示されるtableを左寄せにするコード

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

coolPreviewの設定

@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;
	}
}

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

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

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

以下のコード足すと

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

こうなります。

破線で囲う †

.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;
}

　罫線をいれる †

liタグをまとめて指定

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

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

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

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

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

　コメントを見やすく †

.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;

}

　奇数行に色付け †

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

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

全体に適用してもアレなのでFrontページのみ等の限定した使用法を推奨

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

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

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

　menu幅をひろげる †

#menubar {
width:200px!important;
}

　ロダ２を見やすく †

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

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

　日付を消します †

span.comment_date {
display: none;
}

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

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;
}

合わせるとこうなる †

背景画像 †

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; 
をくわえましょう

トマトづくし †

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