#topicpath * サイトの見た目をいじる [#h2cca65d] >別にやらなくてもいいことをワザワザやるというコンセプトのもとに~ >pikiwikiのCSSを操作してみる。 >[[pikiwiki公式の情報>http://pukiwiki.sourceforge.jp/?%E3%82%B9%E3%82%AD%E3%83%B3]]なんかも参考にしつつ暇なときに付け足していきます。 >>[[http://notarejini.orz.hm/up3/s/exp001328.jpg>http://notarejini.orz.hm/up3/img/exp001328.jpg]] >>ここまでする必要はありませんがやろうと思えばこんな感じにもなります。CSSって何?っていうひとはググりましょう。 :必要環境| Firefox及びアドオンStylish [[Google:stylish アドオン 使い方]] #contents **完成品 さくっと導入したい人向け[#u16169b0] [[Chrome版のStylish>http://notarejini.orz.hm/up3/img/exp004605.png]]ではnamespaceの指定は不要なのでCSSコードをそのまま記述してセーブしましょう。~ #memo(@namespace url(http://www.w3.org/1999/xhtml);\n\n@-moz-document domain(notarejini.orz.hm) {\n/* 文字組みのマージンを2文字分とる */\npre,\ndl,\nol,\np,\nblockquote,\nmemo {\n margin-left: 2em!important;\n margin-right: 2em!important;\n line-height: 160%!important;\n}\n/* IE対策 */\ndiv.ie5 { text-align: left!important }\n/* テーブルを左寄せにして背景色を無効に */\n.style_table {\n margin-left: 2%!important;\n background-color: inherit!important;\n color: black!important;\n}\n/* 罫線を入れる */\nli { border-bottom: 1px dotted gray }\n.style_td {\n background-color: inherit!important;\n color: black!important;\n}\n/* リスト行の行間 マージン */\nul,\nli {\n line-height: 145%!important;\n margin: 0.5em;\n text-align: left;\n}\n/* 角丸 背景色 幅のフィット */\ndiv#body {\n width: -moz-fit-content;\n -moz-border-radius: 10px;\n background: #f2f9fd;\n border: 1px solid #c8ebf9;\n}\n\n/* コメント欄 */\n\n.list2,\nlist1,\nlist3 {\n width: -moz-fit-content;\n -moz-border-radius: 10px;\n border-top: 3px dashed #c8ebf9;\n border-left: 3px dashed #c8ebf9;\n border-right: 3px dashed #c8ebf9;\n border-bottom: 3px dashed #c8ebf9;\n}\n\n/* 背景画像 使う場合は コメントアウトから出す\nbody {\n background-image: url(file:c:/bg/bg_grey_top.gif);\n background-repeat: repeat-x;\n}\n*/\n\n/* コメント欄 */\n.list1 ul {\n -moz-border-radius: 10px;\n margin: 1em;\n padding: 1px;\n background: white;\n border-bottom-width: 3px;\n}\n.list2 li {\n -moz-border-radius: 10px;\n padding: 10px;\n margin: 1em;\n background: white;\n border-bottom-width: 0px;\n}\n.list3 li {\n -moz-border-radius: 10px;\n margin: 1em;\n list-style-type: decimal;\n background: #F6F6F6;\n border-bottom-width: 0px;\n}\n/* メニューバー */\n#menubar {\n width:200px!important;\n\n}\ndiv#menubar ul li {\n list-style-type: decimal;\n margin-left: 2em;\n}\n/* 見出し */\nh2,\nh3,\nh4,\nh5 { -moz-border-radius: 5px }\n\n/* 内部リンク切れの黄色を白に */\nspan.noexists {\n color:inherit;\n background-color:white!important;\n}\n/* 入力フォーム */\nform{\nmargin: 1em;\n}\n}) **実用的なもの [#n3615a4e] >デフォルトだと中心に表示されるtableを左寄せにするコード~ [[http://notarejini.orz.hm/up3/s/exp001348.jpg>http://notarejini.orz.hm/up3/img/exp001348.gif]]~ >ひらいたスペースはリンク先の[[サムネイルビュースペース>Google:coolpreviews]]にすると活用できます。リンク先をPOPアップするツールと合わせて使うと便利。 >>[[http://notarejini.orz.hm/up3/s/exp001349.jpg>http://notarejini.orz.hm/up3/img/exp001349.gif]]~ coolPreviewの設定 >>[[http://notarejini.orz.hm/up3/s/exp001350.jpg>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; } } **三点リーダーが...となるのを防ぐ [#s47bed0c] div{ font-family:"メイリオ","Meiryo","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","MS Pゴシック", "MS P Gothic","Osaka", Verdana,Arial, Helvetica, sans-serif;!important } *** 全体的に真っ白になって目が疲れる人は [#zdddf980] >以下のコード足すと 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/s/exp001352.jpg>http://notarejini.orz.hm/up3/img/exp001352.gif]] >>>こうなります。 *** 破線で囲う [#mfe7f743] .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; } *** 罫線をいれる [#s4f24a1a] >[[http://notarejini.orz.hm/up3/s/exp001356.jpg>http://notarejini.orz.hm/up3/img/exp001356.gif]] >liタグをまとめて指定 /* 罫線を入れる */ li{ border-bottom: 1px dotted gray; } *** 罫線 Div要素をコンテンツ内容に応じて適用させる [#s73770f3] >ピンとこない場合は追記してみるとわかります。表示をすっきりさせたい時に。 li{ width: -moz-fit-content; } div { width: -moz-fit-content; } *** コメントを見やすく [#u3b3e873] >[[http://notarejini.orz.hm/up3/s/exp001358.jpg>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; } *** 奇数行に色付け [#m2592315] .list3 li:nth-child(odd) { background-color: #f2ffff; } *** コメントを横並びにする [#t55c0910] >全体に適用してもアレなのでFrontページのみ等の限定した使用法を推奨 [[http://notarejini.orz.hm/up3/s/exp001384.jpg>http://notarejini.orz.hm/up3/img/exp001384.gif]] .pcmt {padding: 10px; display: table-cell; } *** 最新60件をナンバリング [#m7ba6b08] >http://notarejini.orz.hm/up3/img/exp001374.gif div#menubar ul li{ list-style-type: decimal; margin-left: 16px; } *** menu幅をひろげる [#oa77baf2] #menubar { width:200px!important; } *** ロダ2を見やすく [#o5bd918c] ページメニューを下に持ってゆきます。 .bline{ display:table-footer-group; } table{ display:table-header-group; } *** 日付を消します [#g2161347] span.comment_date { display: none; } *** 検索フォームをメニューから右上に移動 [#g0c36f2b] 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; } ***合わせるとこうなる [#kd13a6e6] >[[http://notarejini.orz.hm/up3/s/exp001359.jpg>http://notarejini.orz.hm/up3/img/exp001359.gif]] [[http://notarejini.orz.hm/up3/s/exp001385.jpg>http://notarejini.orz.hm/up3/img/exp001385.gif]] **背景画像 [#a407464c] >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; をくわえましょう ***トマトづくし [#o3a5351f] >http://notarejini.orz.hm/up3/img/exp001377.gif div#body{ background-image: url(http://notarejini.orz.hm/up3/img/exp000916.png)!important; }