施設/webおしゃれさん/css
の編集
http://notarejini.orz.hm/?%BB%DC%C0%DF%2Fweb%A4%AA%A4%B7%A4%E3%A4%EC%A4%B5%A4%F3%2Fcss
[
トップ
] [
編集
|
差分
|
バックアップ
|
添付
|
リロード
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
#topicpath * サイトの見た目をいじる [#h2cca65d] >別にやらなくてもいいことをワザワザやるというコンセプトのもとに~ >pikiwikiのCSSを操作してみる。 >[[pikiwiki公式の情報>http://pukiwiki.sourceforge.jp/?%E3%82%B9%E3%82%AD%E3%83%B3]]なんかも参考にしつつ暇なときに付け足していきます。 >>[[http://notarejini.orz.hm/up2/s/qst074982.jpg>http://notarejini.orz.hm/up2/file/qst074982.png]] >>ここまでする必要はありませんがやろうと思えばこんな感じにもなります。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@charset "utf-8";\n\nhtml\n{\n background: -moz-linear-gradient(top, rgba(242,245,246,1) 0%, rgba(227,234,237,1) 37%, rgba(200,215,220,1) 100%);\n /* FF3.6+ */\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(242,245,246,1)), color-stop(37%, rgba(227,234,237,1)), color-stop(100%, rgba(200,215,220,1)));\n /* Chrome,Safari4+ */\n background: -webkit-linear-gradient(top, rgba(242,245,246,1) 0%, rgba(227,234,237,1) 37%, rgba(200,215,220,1) 100%);\n /* Chrome10+,Safari5.1+ */\n background: -o-linear-gradient(top, rgba(242,245,246,1) 0%, rgba(227,234,237,1) 37%, rgba(200,215,220,1) 100%);\n /* Opera11.10+ */\n background: -ms-linear-gradient(top, rgba(242,245,246,1) 0%, rgba(227,234,237,1) 37%, rgba(200,215,220,1) 100%);/* IE10+ */\n}\n\n*\n{\n font-family:'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;\n}\n\nh1.title\n{\n font-family: Arial, Helvetica, sans-serif!important;\n color: #504f4f;\n text-shadow: 0px 2px 1px #bbbaba;\n}\n\nbody, td\n{\n background-color: rgba(255, 255, 255, 0);\n background: rgba(255, 255, 255, 0);\n}\n\n/* 文字組みのマージンを2文字分とる */\npre, dl, ol, p, blockquote, memo\n{\n margin-left: 2em!important;\n margin-right: 2em!important;\n line-height: 160%!important;\n}\n\ndiv#header\n{\n background-color: #d7e5f5;\n background-image: -webkit-gradient(linear, left top, left bottom, from(#d7e5f5), to(#cbe0f5));\n /* Saf4+, Chrome */\n background-image: -webkit-linear-gradient(top, #d7e5f5, #cbe0f5);\n background-image: -moz-linear-gradient(top, #d7e5f5, #cbe0f5);\n background-image: -ms-linear-gradient(top, #d7e5f5, #cbe0f5);\n background-image: -o-linear-gradient(top, #d7e5f5, #cbe0f5);\n background-image: linear-gradient(top, #d7e5f5, #cbe0f5);\n /*border*/\n border-top: 1px solid #abbbcc;\n border-left: 1px solid #a7b6c7;\n border-bottom: 1px solid #a1afbf;\n border-right: 1px solid #a7b6c7;\n /*角丸*/\n -webkit-border-radius: 12px;\n -moz-border-radius: 12px;\n -ms-border-radius: 12px;\n -o-border-radius: 12px;\n border-radius: 12px;\n /*シャドウ*/\n -webkit-box-shadow: inset 0 1px 0 1px white;\n -moz-box-shadow: inset 0 1px 0 1px white;\n -ms-box-shadow: inset 0 1px 0 1px white;\n -o-box-shadow: inset 0 1px 0 1px white;\n box-shadow: inset 0 1px 0 1px white;\n color: #1a3e66;\n line-height: 2;\n padding: 6px 0 7px 0;\n text-shadow: 0 1px 1px #fff;\n width: 1200px;\n padding: 6px 1px 7px 1px;\n margin: 2em;\n}\n\nhr.full_hr\n{\n border-style: none;\n margin: 2em;\n}\n\n/*段落*/\np\n{\n border:none 5px #000000;\n /* firefox*/\n-moz-border-radius-topleft: 5px;\n -moz-border-radius-topright:5px;\n -moz-border-radius-bottomleft:5px;\n -moz-border-radius-bottomright:5px;\n /*chrome*/\n-webkit-border-top-left-radius:5px;\n -webkit-border-top-right-radius:5px;\n -webkit-border-bottom-left-radius:5px;\n -webkit-border-bottom-right-radius:5px;\n /*opera*/\nborder-top-left-radius:5px;\n border-top-right-radius:5px;\n border-bottom-left-radius:5px;\n border-bottom-right-radius:5px;\n}\n\np:hover\n{\n}\n\n/* IE対策 */\ndiv.ie5\n{\n text-align: left!important\n}\n\n/* テーブルを左寄せにして背景色を無効に */\n.style_table\n{\n background-color: rgba(255, 255, 255, 0.6);\n background: rgba(255, 255, 255, 0.6);\n border: 1px solid #bbb;\n -webkit-border-radius: 3px;\n -moz-border-radius: 3px;\n -ms-border-radius: 3px;\n -o-border-radius: 3px;\n border-radius: 3px -webkit-box-shadow: inset 0 0 1px 0 #f6f6f6;\n -moz-box-shadow: inset 0 0 1px 0 #f6f6f6;\n -ms-box-shadow: inset 0 0 1px 0 #f6f6f6;\n -o-box-shadow: inset 0 0 1px 0 #f6f6f6;\n box-shadow: inset 0 0 1px 0 #f6f6f6;\n text-shadow: 0 1px 0 1px #fff;\n color: #333;\n line-height: 1;\n padding: 8px 0 9px;\n width:430px!important;\n margin-left: 2%!important;\n border-spacing:1;\n border-collapse:collapse;\n}\n\n.style_table th\n{\n color: #504f4f!important;\n text-shadow: 0px 2px 1px #fff;\n font-weight: bold;\n border-top:1px solid #e5eff8;\n border-right:1px solid #e5eff8;\n background: -moz-linear-gradient(top, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 50%, rgba(181,198,208,1) 51%, rgba(224,239,249,1) 100%); /* FF3.6+ */\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(242,246,248,1)), color-stop(50%, rgba(216,225,231,1)), color-stop(51%, rgba(181,198,208,1)), color-stop(100%, rgba(224,239,249,1))); /* Chrome,Safari4+ */\n background: -webkit-linear-gradient(top, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 50%, rgba(181,198,208,1) 51%, rgba(224,239,249,1) 100%); /* Chrome10+,Safari5.1+ */\n background: -o-linear-gradient(top, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 50%, rgba(181,198,208,1) 51%, rgba(224,239,249,1) 100%); /* Opera11.10+ */\n background: -ms-linear-gradient(top, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 50%, rgba(181,198,208,1) 51%, rgba(224,239,249,1) 100%); /* IE10+ */\n}\n\n/* 罫線を入れる */\nli\n{\n border-bottom: 1px dotted #F6F6F6;\n}\n\n.style_td\n{\n background-color: inherit!important;\n color: black!important;\n border-bottom:1px solid #e5eff8;\n border-left:1px solid #e5eff8;\n}\n\n/* リスト行の行間 マージン */\nul, li\n{\n line-height: 145%!important;\n margin:1em 0 1em 0;\n text-align: left;\n}\n\n/* 角丸 背景色 幅のフィット */\ndiv#body\n{\n width: 960px;\n -webkit-border-radius: 10px;\n background: #f2f9fd;\n border: 1px solid #c8ebf9;\n}\n\n/*Navigator*/\ndiv#navigator\n{\n color: rgba(255, 255, 255, 0);\n}\n\ndiv#navigator a, .navi_left, .navi_right\n{\n border: 1px solid #bbb;\n background: rgb(255,255,255);\n /* Old browsers */\n background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);\n /* FF3.6+ */\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(237,237,237,1)));\n /* Chrome,Safari4+ */\n background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);\n /* Chrome10+,Safari5.1+ */\n background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);\n /* Opera11.10+ */\n background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);\n -moz-border-radius-topleft: 6px;\n -moz-border-radius-topright:6px;\n -moz-border-radius-bottomleft:6px;\n -moz-border-radius-bottomright:6px;\n -webkit-border-top-left-radius:6px;\n -webkit-border-top-right-radius:6px;\n -webkit-border-bottom-left-radius:6px;\n -webkit-border-bottom-right-radius:6px;\n border-top-left-radius:6px;\n border-top-right-radius:6px;\n border-bottom-left-radius:6px;\n border-bottom-right-radius:6px;\n -webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;\n -moz-box-shadow: inset 0 0 1px 1px #f6f6f6;\n -ms-box-shadow: inset 0 0 1px 1px #f6f6f6;\n -o-box-shadow: inset 0 0 1px 1px #f6f6f6;\n box-shadow: inset 0 0 1px 1px #f6f6f6;\n text-align: center;\n text-shadow: 0 1px 0 #fff;\n padding: 6px 20px 4px;\n}\n\ndiv#navigator a:hover\n{\n background: -moz-linear-gradient(top, rgba(254,255,255,1) 0%, rgba(210,235,249,1) 100%);\n /* FF3.6+ */\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(254,255,255,1)), color-stop(100%, rgba(210,235,249,1)));\n /* Chrome,Safari4+ */\n background: -webkit-linear-gradient(top, rgba(254,255,255,1) 0%, rgba(210,235,249,1) 100%);\n /* Chrome10+,Safari5.1+ */\n background: -o-linear-gradient(top, rgba(254,255,255,1) 0%, rgba(210,235,249,1) 100%);\n /* Opera11.10+ */\n background: -ms-linear-gradient(top, rgba(254,255,255,1) 0%, rgba(210,235,249,1) 100%);/* IE10+ */\n}\n\n/* コメント欄 */\n.list1\n{\n font-size:14px!important;\n}\n\n.list2, list1, list3\n{\n -moz-box-shadow: 0px 3px 8px #b3b3b3;\n -webkit-box-shadow: 0px 3px 8px #b3b3b3;\n box-shadow: 0px 3px 8px #b3b3b3;\n width: -webkit-fit-content;\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 -webkit-border-radius: 10px;\n color: #000000;\n}\n\n/* コメント欄 */\n\n.list1 ul\n{\n color: #000000!important;\n -webkit-border-radius: 10px;\n -moz-border-radius: 10px;\n margin: 1em;\n padding: 1px;\n background: white;\n border-bottom-width: 3px;\n}\n\n.list2 li\n{\n color: #000000!important;\n -webkit-border-radius: 10px;\n -moz-border-radius: 10px;\n padding: 10px;\n margin: 1em;\n background: white;\n border-bottom-width: 0px;\n}\n\n.list3 li\n{\n -webkit-border-radius: 10px;\n -moz-border-radius: 10px;\n margin: 1em;\n list-style-type: decimal;\n background: #F6F6F6;\n border-bottom-width: 0px;\n color: #000000!important;\n -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;\n -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;\n box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;\n}\n\n.pcmt li\n{\n font-size:16px!important;\n}\n\n.new1\n{\n font-size:large!important;\n}\n\n.new1:hover\n{\n}\n\n.new1:active\n{\n}\n\n/* メニューバー */\n#menubar\n{\n width:230px!important;\n}\n\ndiv#menubar ul li\n{\n list-style-type: none;\n background:-webkit-gradient(radial, 165 0, 0, 220 -257, 465, from(#FFFFFF), to(#B4D7FF));\n border: 1px solid #bbb;\n -moz-border-radius-topleft: 6px;\n -moz-border-radius-topright:6px;\n -moz-border-radius-bottomleft:6px;\n -moz-border-radius-bottomright:6px;\n -webkit-border-top-left-radius:6px;\n -webkit-border-top-right-radius:6px;\n -webkit-border-bottom-left-radius:6px;\n -webkit-border-bottom-right-radius:6px;\n border-top-left-radius:6px;\n border-top-right-radius:6px;\n border-bottom-left-radius:6px;\n border-bottom-right-radius:6px;\n -webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;\n -moz-box-shadow: inset 0 0 1px 1px #f6f6f6;\n -ms-box-shadow: inset 0 0 1px 1px #f6f6f6;\n -o-box-shadow: inset 0 0 1px 1px #f6f6f6;\n box-shadow: inset 0 0 1px 1px #f6f6f6;\n color: #333;\n font: bold 12px "helvetica neue", helvetica, arial, sans-serif;\n line-height: 1;\n padding: 8px 0 9px;\n text-align: center;\n text-shadow: 0 1px 0 #fff;\n width: 180px;\n}\n\ndiv#menubar ul li:nth-child(odd)\n{\n -webkit-box-shadow: 0px 3px 8px #b3b3b3;\n -moz-box-shadow: 0px 3px 8px #b3b3b3;\n box-shadow: 0px 3px 8px #b3b3b3;\n}\n\ndiv#menubar ul li:hover\n{\n background:-webkit-gradient(linear, 100% 0%, 0% 0%, from(#FFFFFF), to(#89C4FF));\n}\n\ndiv#menubar h5\n{\n width: 150px;\n}\n\n/* 見出し */\n\nh2, h3, h4, h5\n{\n background-color: #d7e5f5;\n background-image: -webkit-gradient(linear, left top, left bottom, from(#d7e5f5), to(#cbe0f5));\n /* Saf4+, Chrome */\n background-image: -webkit-linear-gradient(top, #d7e5f5, #cbe0f5);\n background-image: -moz-linear-gradient(top, #d7e5f5, #cbe0f5);\n background-image: -ms-linear-gradient(top, #d7e5f5, #cbe0f5);\n background-image: -o-linear-gradient(top, #d7e5f5, #cbe0f5);\n background-image: linear-gradient(top, #d7e5f5, #cbe0f5);\n border-top: 1px solid #abbbcc;\n border-left: 1px solid #a7b6c7;\n border-bottom: 1px solid #a1afbf;\n border-right: 1px solid #a7b6c7;\n -webkit-border-radius: 12px;\n -moz-border-radius: 12px;\n -ms-border-radius: 12px;\n -o-border-radius: 12px;\n border-radius: 12px;\n -webkit-box-shadow: inset 0 1px 0 1px white;\n -moz-box-shadow: inset 0 1px 0 1px white;\n -ms-box-shadow: inset 0 1px 0 1px white;\n -o-box-shadow: inset 0 1px 0 1px white;\n box-shadow: inset 0 1px 0 1px white;\n color: #1a3e66;\n line-height: 1;\n padding: 6px 0 7px 0;\n text-align: center;\n text-shadow: 0 1px 1px #fff;\n width: 330px;\n}\n\nh2\n{\n width: 430px!important;\n}\n\n/* 内部リンク切れの黄色を白に */\nspan.noexists\n{\n color:inherit;\n background-color:white!important;\n}\n\n/* 入力フォーム */\nform\n{\n margin: 1em;\n}\n\n.list3 li:nth-child(odd)\n{\n background-color: #f2ffff;\n}\n\n.bline\n{\n display:table-footer-group;\n}\n\ntable\n{\n display:table-header-group;\n}\n\n#body\n{\n color: #000000;\n!important\n}\n\ndiv#menubar ul li form\n{\n position: absolute;\n z-index: 1;\n top: 1em;\n right: 0;\n width: 25%;\n opacity: 0.8;\n font-size: 10px;\n display: table-cell;\n}\n\nbody::before\n{\n content: "";\n position: fixed;\n top: -10px;\n left: 0;\n width: 100%;\n height: 10px;\n z-index: 100;\n -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);\n -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);\n box-shadow: 0px 0px 10px rgba(0,0,0,.8);\n}\n\ndiv#lastmodified, div#footer\n{\n font-family: Arial, Helvetica, sans-serif;\n color: #504f4f;\n text-shadow: 0px 2px 1px #bbbaba;\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 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; } *** ロダ２を見やすく [#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; }
タイムスタンプを変更しない
#topicpath * サイトの見た目をいじる [#h2cca65d] >別にやらなくてもいいことをワザワザやるというコンセプトのもとに~ >pikiwikiのCSSを操作してみる。 >[[pikiwiki公式の情報>http://pukiwiki.sourceforge.jp/?%E3%82%B9%E3%82%AD%E3%83%B3]]なんかも参考にしつつ暇なときに付け足していきます。 >>[[http://notarejini.orz.hm/up2/s/qst074982.jpg>http://notarejini.orz.hm/up2/file/qst074982.png]] >>ここまでする必要はありませんがやろうと思えばこんな感じにもなります。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@charset "utf-8";\n\nhtml\n{\n background: -moz-linear-gradient(top, rgba(242,245,246,1) 0%, rgba(227,234,237,1) 37%, rgba(200,215,220,1) 100%);\n /* FF3.6+ */\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(242,245,246,1)), color-stop(37%, rgba(227,234,237,1)), color-stop(100%, rgba(200,215,220,1)));\n /* Chrome,Safari4+ */\n background: -webkit-linear-gradient(top, rgba(242,245,246,1) 0%, rgba(227,234,237,1) 37%, rgba(200,215,220,1) 100%);\n /* Chrome10+,Safari5.1+ */\n background: -o-linear-gradient(top, rgba(242,245,246,1) 0%, rgba(227,234,237,1) 37%, rgba(200,215,220,1) 100%);\n /* Opera11.10+ */\n background: -ms-linear-gradient(top, rgba(242,245,246,1) 0%, rgba(227,234,237,1) 37%, rgba(200,215,220,1) 100%);/* IE10+ */\n}\n\n*\n{\n font-family:'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;\n}\n\nh1.title\n{\n font-family: Arial, Helvetica, sans-serif!important;\n color: #504f4f;\n text-shadow: 0px 2px 1px #bbbaba;\n}\n\nbody, td\n{\n background-color: rgba(255, 255, 255, 0);\n background: rgba(255, 255, 255, 0);\n}\n\n/* 文字組みのマージンを2文字分とる */\npre, dl, ol, p, blockquote, memo\n{\n margin-left: 2em!important;\n margin-right: 2em!important;\n line-height: 160%!important;\n}\n\ndiv#header\n{\n background-color: #d7e5f5;\n background-image: -webkit-gradient(linear, left top, left bottom, from(#d7e5f5), to(#cbe0f5));\n /* Saf4+, Chrome */\n background-image: -webkit-linear-gradient(top, #d7e5f5, #cbe0f5);\n background-image: -moz-linear-gradient(top, #d7e5f5, #cbe0f5);\n background-image: -ms-linear-gradient(top, #d7e5f5, #cbe0f5);\n background-image: -o-linear-gradient(top, #d7e5f5, #cbe0f5);\n background-image: linear-gradient(top, #d7e5f5, #cbe0f5);\n /*border*/\n border-top: 1px solid #abbbcc;\n border-left: 1px solid #a7b6c7;\n border-bottom: 1px solid #a1afbf;\n border-right: 1px solid #a7b6c7;\n /*角丸*/\n -webkit-border-radius: 12px;\n -moz-border-radius: 12px;\n -ms-border-radius: 12px;\n -o-border-radius: 12px;\n border-radius: 12px;\n /*シャドウ*/\n -webkit-box-shadow: inset 0 1px 0 1px white;\n -moz-box-shadow: inset 0 1px 0 1px white;\n -ms-box-shadow: inset 0 1px 0 1px white;\n -o-box-shadow: inset 0 1px 0 1px white;\n box-shadow: inset 0 1px 0 1px white;\n color: #1a3e66;\n line-height: 2;\n padding: 6px 0 7px 0;\n text-shadow: 0 1px 1px #fff;\n width: 1200px;\n padding: 6px 1px 7px 1px;\n margin: 2em;\n}\n\nhr.full_hr\n{\n border-style: none;\n margin: 2em;\n}\n\n/*段落*/\np\n{\n border:none 5px #000000;\n /* firefox*/\n-moz-border-radius-topleft: 5px;\n -moz-border-radius-topright:5px;\n -moz-border-radius-bottomleft:5px;\n -moz-border-radius-bottomright:5px;\n /*chrome*/\n-webkit-border-top-left-radius:5px;\n -webkit-border-top-right-radius:5px;\n -webkit-border-bottom-left-radius:5px;\n -webkit-border-bottom-right-radius:5px;\n /*opera*/\nborder-top-left-radius:5px;\n border-top-right-radius:5px;\n border-bottom-left-radius:5px;\n border-bottom-right-radius:5px;\n}\n\np:hover\n{\n}\n\n/* IE対策 */\ndiv.ie5\n{\n text-align: left!important\n}\n\n/* テーブルを左寄せにして背景色を無効に */\n.style_table\n{\n background-color: rgba(255, 255, 255, 0.6);\n background: rgba(255, 255, 255, 0.6);\n border: 1px solid #bbb;\n -webkit-border-radius: 3px;\n -moz-border-radius: 3px;\n -ms-border-radius: 3px;\n -o-border-radius: 3px;\n border-radius: 3px -webkit-box-shadow: inset 0 0 1px 0 #f6f6f6;\n -moz-box-shadow: inset 0 0 1px 0 #f6f6f6;\n -ms-box-shadow: inset 0 0 1px 0 #f6f6f6;\n -o-box-shadow: inset 0 0 1px 0 #f6f6f6;\n box-shadow: inset 0 0 1px 0 #f6f6f6;\n text-shadow: 0 1px 0 1px #fff;\n color: #333;\n line-height: 1;\n padding: 8px 0 9px;\n width:430px!important;\n margin-left: 2%!important;\n border-spacing:1;\n border-collapse:collapse;\n}\n\n.style_table th\n{\n color: #504f4f!important;\n text-shadow: 0px 2px 1px #fff;\n font-weight: bold;\n border-top:1px solid #e5eff8;\n border-right:1px solid #e5eff8;\n background: -moz-linear-gradient(top, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 50%, rgba(181,198,208,1) 51%, rgba(224,239,249,1) 100%); /* FF3.6+ */\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(242,246,248,1)), color-stop(50%, rgba(216,225,231,1)), color-stop(51%, rgba(181,198,208,1)), color-stop(100%, rgba(224,239,249,1))); /* Chrome,Safari4+ */\n background: -webkit-linear-gradient(top, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 50%, rgba(181,198,208,1) 51%, rgba(224,239,249,1) 100%); /* Chrome10+,Safari5.1+ */\n background: -o-linear-gradient(top, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 50%, rgba(181,198,208,1) 51%, rgba(224,239,249,1) 100%); /* Opera11.10+ */\n background: -ms-linear-gradient(top, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 50%, rgba(181,198,208,1) 51%, rgba(224,239,249,1) 100%); /* IE10+ */\n}\n\n/* 罫線を入れる */\nli\n{\n border-bottom: 1px dotted #F6F6F6;\n}\n\n.style_td\n{\n background-color: inherit!important;\n color: black!important;\n border-bottom:1px solid #e5eff8;\n border-left:1px solid #e5eff8;\n}\n\n/* リスト行の行間 マージン */\nul, li\n{\n line-height: 145%!important;\n margin:1em 0 1em 0;\n text-align: left;\n}\n\n/* 角丸 背景色 幅のフィット */\ndiv#body\n{\n width: 960px;\n -webkit-border-radius: 10px;\n background: #f2f9fd;\n border: 1px solid #c8ebf9;\n}\n\n/*Navigator*/\ndiv#navigator\n{\n color: rgba(255, 255, 255, 0);\n}\n\ndiv#navigator a, .navi_left, .navi_right\n{\n border: 1px solid #bbb;\n background: rgb(255,255,255);\n /* Old browsers */\n background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);\n /* FF3.6+ */\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(237,237,237,1)));\n /* Chrome,Safari4+ */\n background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);\n /* Chrome10+,Safari5.1+ */\n background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);\n /* Opera11.10+ */\n background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);\n -moz-border-radius-topleft: 6px;\n -moz-border-radius-topright:6px;\n -moz-border-radius-bottomleft:6px;\n -moz-border-radius-bottomright:6px;\n -webkit-border-top-left-radius:6px;\n -webkit-border-top-right-radius:6px;\n -webkit-border-bottom-left-radius:6px;\n -webkit-border-bottom-right-radius:6px;\n border-top-left-radius:6px;\n border-top-right-radius:6px;\n border-bottom-left-radius:6px;\n border-bottom-right-radius:6px;\n -webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;\n -moz-box-shadow: inset 0 0 1px 1px #f6f6f6;\n -ms-box-shadow: inset 0 0 1px 1px #f6f6f6;\n -o-box-shadow: inset 0 0 1px 1px #f6f6f6;\n box-shadow: inset 0 0 1px 1px #f6f6f6;\n text-align: center;\n text-shadow: 0 1px 0 #fff;\n padding: 6px 20px 4px;\n}\n\ndiv#navigator a:hover\n{\n background: -moz-linear-gradient(top, rgba(254,255,255,1) 0%, rgba(210,235,249,1) 100%);\n /* FF3.6+ */\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(254,255,255,1)), color-stop(100%, rgba(210,235,249,1)));\n /* Chrome,Safari4+ */\n background: -webkit-linear-gradient(top, rgba(254,255,255,1) 0%, rgba(210,235,249,1) 100%);\n /* Chrome10+,Safari5.1+ */\n background: -o-linear-gradient(top, rgba(254,255,255,1) 0%, rgba(210,235,249,1) 100%);\n /* Opera11.10+ */\n background: -ms-linear-gradient(top, rgba(254,255,255,1) 0%, rgba(210,235,249,1) 100%);/* IE10+ */\n}\n\n/* コメント欄 */\n.list1\n{\n font-size:14px!important;\n}\n\n.list2, list1, list3\n{\n -moz-box-shadow: 0px 3px 8px #b3b3b3;\n -webkit-box-shadow: 0px 3px 8px #b3b3b3;\n box-shadow: 0px 3px 8px #b3b3b3;\n width: -webkit-fit-content;\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 -webkit-border-radius: 10px;\n color: #000000;\n}\n\n/* コメント欄 */\n\n.list1 ul\n{\n color: #000000!important;\n -webkit-border-radius: 10px;\n -moz-border-radius: 10px;\n margin: 1em;\n padding: 1px;\n background: white;\n border-bottom-width: 3px;\n}\n\n.list2 li\n{\n color: #000000!important;\n -webkit-border-radius: 10px;\n -moz-border-radius: 10px;\n padding: 10px;\n margin: 1em;\n background: white;\n border-bottom-width: 0px;\n}\n\n.list3 li\n{\n -webkit-border-radius: 10px;\n -moz-border-radius: 10px;\n margin: 1em;\n list-style-type: decimal;\n background: #F6F6F6;\n border-bottom-width: 0px;\n color: #000000!important;\n -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;\n -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;\n box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;\n}\n\n.pcmt li\n{\n font-size:16px!important;\n}\n\n.new1\n{\n font-size:large!important;\n}\n\n.new1:hover\n{\n}\n\n.new1:active\n{\n}\n\n/* メニューバー */\n#menubar\n{\n width:230px!important;\n}\n\ndiv#menubar ul li\n{\n list-style-type: none;\n background:-webkit-gradient(radial, 165 0, 0, 220 -257, 465, from(#FFFFFF), to(#B4D7FF));\n border: 1px solid #bbb;\n -moz-border-radius-topleft: 6px;\n -moz-border-radius-topright:6px;\n -moz-border-radius-bottomleft:6px;\n -moz-border-radius-bottomright:6px;\n -webkit-border-top-left-radius:6px;\n -webkit-border-top-right-radius:6px;\n -webkit-border-bottom-left-radius:6px;\n -webkit-border-bottom-right-radius:6px;\n border-top-left-radius:6px;\n border-top-right-radius:6px;\n border-bottom-left-radius:6px;\n border-bottom-right-radius:6px;\n -webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;\n -moz-box-shadow: inset 0 0 1px 1px #f6f6f6;\n -ms-box-shadow: inset 0 0 1px 1px #f6f6f6;\n -o-box-shadow: inset 0 0 1px 1px #f6f6f6;\n box-shadow: inset 0 0 1px 1px #f6f6f6;\n color: #333;\n font: bold 12px "helvetica neue", helvetica, arial, sans-serif;\n line-height: 1;\n padding: 8px 0 9px;\n text-align: center;\n text-shadow: 0 1px 0 #fff;\n width: 180px;\n}\n\ndiv#menubar ul li:nth-child(odd)\n{\n -webkit-box-shadow: 0px 3px 8px #b3b3b3;\n -moz-box-shadow: 0px 3px 8px #b3b3b3;\n box-shadow: 0px 3px 8px #b3b3b3;\n}\n\ndiv#menubar ul li:hover\n{\n background:-webkit-gradient(linear, 100% 0%, 0% 0%, from(#FFFFFF), to(#89C4FF));\n}\n\ndiv#menubar h5\n{\n width: 150px;\n}\n\n/* 見出し */\n\nh2, h3, h4, h5\n{\n background-color: #d7e5f5;\n background-image: -webkit-gradient(linear, left top, left bottom, from(#d7e5f5), to(#cbe0f5));\n /* Saf4+, Chrome */\n background-image: -webkit-linear-gradient(top, #d7e5f5, #cbe0f5);\n background-image: -moz-linear-gradient(top, #d7e5f5, #cbe0f5);\n background-image: -ms-linear-gradient(top, #d7e5f5, #cbe0f5);\n background-image: -o-linear-gradient(top, #d7e5f5, #cbe0f5);\n background-image: linear-gradient(top, #d7e5f5, #cbe0f5);\n border-top: 1px solid #abbbcc;\n border-left: 1px solid #a7b6c7;\n border-bottom: 1px solid #a1afbf;\n border-right: 1px solid #a7b6c7;\n -webkit-border-radius: 12px;\n -moz-border-radius: 12px;\n -ms-border-radius: 12px;\n -o-border-radius: 12px;\n border-radius: 12px;\n -webkit-box-shadow: inset 0 1px 0 1px white;\n -moz-box-shadow: inset 0 1px 0 1px white;\n -ms-box-shadow: inset 0 1px 0 1px white;\n -o-box-shadow: inset 0 1px 0 1px white;\n box-shadow: inset 0 1px 0 1px white;\n color: #1a3e66;\n line-height: 1;\n padding: 6px 0 7px 0;\n text-align: center;\n text-shadow: 0 1px 1px #fff;\n width: 330px;\n}\n\nh2\n{\n width: 430px!important;\n}\n\n/* 内部リンク切れの黄色を白に */\nspan.noexists\n{\n color:inherit;\n background-color:white!important;\n}\n\n/* 入力フォーム */\nform\n{\n margin: 1em;\n}\n\n.list3 li:nth-child(odd)\n{\n background-color: #f2ffff;\n}\n\n.bline\n{\n display:table-footer-group;\n}\n\ntable\n{\n display:table-header-group;\n}\n\n#body\n{\n color: #000000;\n!important\n}\n\ndiv#menubar ul li form\n{\n position: absolute;\n z-index: 1;\n top: 1em;\n right: 0;\n width: 25%;\n opacity: 0.8;\n font-size: 10px;\n display: table-cell;\n}\n\nbody::before\n{\n content: "";\n position: fixed;\n top: -10px;\n left: 0;\n width: 100%;\n height: 10px;\n z-index: 100;\n -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);\n -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);\n box-shadow: 0px 0px 10px rgba(0,0,0,.8);\n}\n\ndiv#lastmodified, div#footer\n{\n font-family: Arial, Helvetica, sans-serif;\n color: #504f4f;\n text-shadow: 0px 2px 1px #bbbaba;\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 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; } *** ロダ２を見やすく [#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; }
テキスト整形のルールを表示する
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")