セミナー用の独自レイアウトを紹介します。
Jimdoセミナー横浜のホームページは、独自レイアウトで制作されています。
そして、独自レイアウトのhtmlとcssをセミナー受講者様だけにご紹介します。
画面一番上からH1【大見出し】、テキスト右寄せ「ホームページ制作支援のJimdoCafe 神奈川」の文字が入っています。
その下にメイン画像【jimdecafe1166.jpg】横幅1166PXが入ります。
左よせでnavigationの上からロゴマーク【220jimdocafe.gif】横幅220PXが入ります。
そして、その下にメニューナビが入ります。
又、右寄せでcontentが定義され、
一番下に
下記のhtmlとcssをそっくりコピーして
独自レイアウトへ貼り付ければ、同じようなデザインになります。
更に、jimdecafe1166.jpgと220jimdocafe.gifを自由に変更してお使い下さい。
ファイル
下記のダウンロードファイルをデスクトップにダウンロードしてください。
jimdecafe1166.jpg メイン画像で横幅は1166PX
220jimdocafe.gif ロゴマークで横幅は220PX
ファイルダウンロード
独自レイアウトのファイルにアップロードします。
①右の操作パネルの一番上のレイアウトをクリック
②左上の「独自レイアウト」をクリック
③ファイルを選択クリック
④左下の「ファイルを選択」をクリック
⑤先ほどダウンロードしたファイルを選択して、「開く」をクリック
⑥「アップロード」をクリック
⑦もう一方のファイルも同じようにアップロードしてください。
html&cssの設定
下記のhtml及びcssをコピーして独自レイアウトに貼り付けます。
完了後、「保存」をクリックします。
html
<div id="container">
<div id="header">
<h1 style="text-align: right;">
<strong><span style="font-size: 24px;line-height: 170%;">ホームページ制作支援の暮らしの研究会 【横浜市】</span></strong>
</h1>
<img src="1167header.jpg" alt="" />
</div>
<div id="navigation">
<img src="220kurashi.jpg" alt="" /><br />
<br />
<var>navigation[1|2|3]</var>
<div id="sidebar">
<var>sidebar</var>
</div>
</div>
<div id="content">
<var>content</var>
</div>
<div id="footer">
<div class="gutter">
<var>footer</var>
</div>
<!-- ｈ１テキスト挿入 -->
<br />
<br />
<p style="text-align: right;">
<a href="http://kanagawaku-cafe.jimdo.com/" target="_blank" title="Jimdoセミナー横浜"><span style="font-size: 16px;">JIMDOセミナー横浜 </span></a>
</p>
</div>
</div>
CSS
/* Typo
----------------------------------------------- */
a:link, a:visited
{
text-decoration: underline;
color:#ffffff;
}
a:active { text-decoration: underline; }
a:hover { text-decoration:none; }
h1 { background-image:url(h1rogo1.jpg);}
h2 { background-image:url(h2.jpg) }
h3 { background-image:url(h3.jpg) }
p { font: 24px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;}
/* 特定futidoriの黒テキストに白縁取りを付ける---------------------------------- */
.futidori {
color: #000000;
font-size: 50px;
font-weight: bold;
text-shadow:
3px 3px 3px #FFFFFF,
-3px 3px 3px #FFFFFF,
3px -3px 3px #FFFFFF,
-3px -3px 3px #FFFFFF;
}
}
/* Layout
----------------------------------------------- */
body {
background: #F3E2A9
}
#container
{
margin:0 auto;
width:1200px;
background:white;
}
#header
{
padding:17px;
}
#header h1,
#header a
{
padding:0;
font-family:"Helvetica","Lucida Sans Unicode",Tahoma,Verdana,Arial,Helvetica,sans-serif;
font-size:20px;
font-weight:normal;
text-decoration:none;
line-height:1.3em;
color:#666666;
text-align:right;
}
#header a:hover { text-decoration:none; }
#navigation
{
float:left;
width:220px;
padding:17px;
}
#sidebar
{
padding-top:10px;
}
#content
{
float:right;
width:900px;
padding:17px;
}
#footer
{
clear:both;
margin-top:10px;
background:#90ee90
}
#footer .gutter
{
height:30px;
padding:35px 15px 0 90px;
}
/* Navigation
----------------------------------------------- */
ul.mainNav1,
ul.mainNav2
{ margin: 0; padding: 0;}
ul.mainNav1 li,
ul.mainNav2 li
{ display: inline; margin: 0;padding: 0;}
ul.mainNav1 li a,
ul.mainNav2 li a
{ font:normal 18px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none; display: block; color:#333; border-bottom:1px solid #CCC;
background-image:url(nav1.jpg); }
ul.mainNav1 li a { padding:4px 4px 4px 34px; }
ul.mainNav2 li a { padding:4px 4px 4px 54px; }
ul.mainNav3 li a { padding:4px 4px 4px 34px; }
ul.mainNav1 a:hover {background-image:url(nav2.jpg);color:black;}
ul.mainNav1 a.current {background-image:url(nav3.jpg);color:#ffffff;font-weight:bold; }
レイアウトの確定
「このレイアウトを使いますか？」と聞いてきますので、
宜しければ、「はい」をクリックすると
レイアウトが確定します。
このページの独自レイアウト
HTML
<div id="container">
<div id="header">
<h1 style="text-align: right;">
<strong><span style="font-size: 24px;line-height: 170%;">ホームページ制作支援の暮らしの研究会 【横浜市】</span></strong>
</h1>
<img src="1167header.jpg" alt="" />
</div>
<div id="navigation">
<img src="220kurashi.jpg" alt="" /><br />
<br />
<var>navigation[1|2|3]</var>
<div id="sidebar">
<var>sidebar</var>
</div>
</div>
<div id="content">
<var>content</var>
</div>
<div id="footer">
<div class="gutter">
<var>footer</var>
</div>
<!-- ｈ１テキスト挿入 -->
<br />
<br />
<p style="text-align: right;">
<a href="http://kanagawaku-cafe.jimdo.com/" target="_blank" title="Jimdoセミナー横浜"><span style="font-size: 16px;">JIMDOセミナー横浜 </span></a>
</p>
</div>
</div>
CSS
/* Typo
----------------------------------------------- */
a:link, a:visited
{
text-decoration: underline;
color:#ffffff;
}
a:active { text-decoration: underline; }
a:hover { text-decoration:none; }
h1 { background-image:url(h1rogo1.jpg);}
h2 { background-image:url(h2.jpg) }
h3 { background-image:url(h3.jpg) }
p { font: 24px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;}
/* 特定futidoriの黒テキストに白縁取りを付ける---------------------------------- */
.futidori {
color: #000000;
font-size: 50px;
font-weight: bold;
text-shadow:
3px 3px 3px #FFFFFF,
-3px 3px 3px #FFFFFF,
3px -3px 3px #FFFFFF,
-3px -3px 3px #FFFFFF;
}
}
/* Layout
----------------------------------------------- */
body {
background: #F3E2A9
}
#container
{
margin:0 auto;
width:1200px;
background:white;
}
#header
{
padding:17px;
}
#header h1,
#header a
{
padding:0;
font-family:"Helvetica","Lucida Sans Unicode",Tahoma,Verdana,Arial,Helvetica,sans-serif;
font-size:20px;
font-weight:normal;
text-decoration:none;
line-height:1.3em;
color:#666666;
text-align:right;
}
#header a:hover { text-decoration:none; }
#navigation
{
float:left;
width:220px;
padding:17px;
}
#sidebar
{
padding-top:10px;
}
#content
{
float:right;
width:900px;
padding:17px;
}
#footer
{
clear:both;
margin-top:10px;
background:#90ee90
}
#footer .gutter
{
height:30px;
padding:35px 15px 0 90px;
}
/* Navigation
----------------------------------------------- */
ul.mainNav1,
ul.mainNav2
{ margin: 0; padding: 0;}
ul.mainNav1 li,
ul.mainNav2 li
{ display: inline; margin: 0;padding: 0;}
ul.mainNav1 li a,
ul.mainNav2 li a
{ font:normal 18px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none; display: block; color:#333; border-bottom:1px solid #CCC;
background-image:url(nav1.jpg); }
ul.mainNav1 li a { padding:4px 4px 4px 34px; }
ul.mainNav2 li a { padding:4px 4px 4px 54px; }
ul.mainNav3 li a { padding:4px 4px 4px 34px; }
ul.mainNav1 a:hover {background-image:url(nav2.jpg);color:black;}
ul.mainNav1 a.current {background-image:url(nav3.jpg);color:#ffffff;font-weight:bold; }