Jimdoで独自CSSを試す

自分で作成したCSSをJimdoで試すには「独自レイアウト」を選択しなければなりません。

自分のJimdoページで初めて「独自レイアウト」を選択すると、そのときの「HTML」と「CSS」は次のようになっています。

この「HTML」はHTMLファイルの<body> 〜 </body>内にあたる内容です。

☞次『レイアウトを確認する』

独自レイアウト「HTML」

1 <div id="container">
2     <div id="header">
3         <h1>Headline</h1>
4         <img src="header.jpg" alt="" />
5     </div>
6     <div id="navigation">
7         <var>navigation[1|2|3]</var>
8         <div id="sidebar">
9             <var>sidebar</var>
10         </div>
11     </div>
12     <div id="content">
13         <var>content</var>
14     </div>
15     <div id="footer">
16         <div class="gutter">
17             <var>footer</var>
18         </div>
19     </div>
20 </div>

独自レイアウト「CSS」

1   /*  Typo    文字の設定
2   ----------------------------------------------- */
3   a:link, a:visited {
4       text-decoration: underline;
5       color:#EC4413;
6   }
7   a:active { text-decoration: underline; }
8   a:hover { text-decoration:none; }
9   h1 { font:bold 18px/140% "Trebuchet MS", Verdana, sans-serif; }
10   h2 { font:bold 14px/140% "Trebuchet MS", Verdana, sans-serif; }
11   p { font: 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;}
12   /*  Layout    レイアウトの設定
13   ----------------------------------------------- */
14   body {
15       background: #333333 url(bg.gif) no-repeat top left;    /* 背景色、画像 */
16       padding:35px 0 0 0;
17       margin:0;
18       font: 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;
19   }
20   #container {    /* コンテンツ全体 */
21       margin:0 auto;
22       width:834px;    /* ページ幅 */
23       background:white;
24   }
25   #header {    /* ヘッダー */
26       padding:17px;
27   }
28   #header h1,
29   #header a
30   {
31       padding:0;
32  

    font-family:"Helvetica","Lucida Sans Unicode",

        Tahoma,Verdana,Arial,Helvetica,sans-serif;

33       font-size:30px;
34       font-weight:normal;
35       text-decoration:none;
36       line-height:1.3em;
37       color:#666666;
38       text-align:right;
39   }
40   #header a:hover { text-decoration:none; }
41   #navigation {    /* メニュー */
42       float:left;
43       width:220px;
44       padding:17px;
45   }
46   #sidebar {    /* サイドバー */
47       padding-top:10px;
48   }
49   #content {    /* コンテンツ */
50       float:right;
51       width:530px;
52       padding:17px;
53   }
54   #footer {    /* フッター */
55       clear:both;
56       margin-top:10px;
57       background:url(footer-bg.gif) repeat-x top;
58       height:65px;
59   }
60   #footer .gutter {
61       height:30px;
62       padding:35px 15px 0 90px;
63   }
64   /*  Navigation    メニュー
65   ----------------------------------------------- */
66   ul.mainNav1,
67   ul.mainNav2
68   {
69       margin:0;
70       padding: 0;
71   }
72   ul.mainNav1 li,
73   ul.mainNav2 li
74   {
75       display: inline;
76       margin: 0;
77       padding: 0;
78   }
79   ul.mainNav1 li a,
80   ul.mainNav2 li a
81   {
82       font:normal 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;
83       text-decoration: none;
84       display: block;
85       color:#333;
86      border-bottom:1px solid #CCC;
87   }
88   ul.mainNav1 li a { padding:4px 4px 4px 4px; }    /* メニュー階層の位置調整 */
89   ul.mainNav2 li a { padding:4px 4px 4px 14px; }
90   ul.mainNav3 li a { padding:4px 4px 4px 24px; }
91   ul.mainNav1 a:hover {
92       background:#EEE;
93       color:black;
94   }
95   ul.mainNav1 a.current { font-weight:bold; }    /* 現在表示しているページ */