2011年8月アーカイブ

さて、ここまでの出来上がり

topimg-s.jpg

ここまでの説明は、「ホームページを作ってみよう」前篇を見てね。

メニューの下に、■wrapper-inner」のdivを作成

新規CSS作成 ボックス width:800」

その中に、「sidebar」divを左に「contents」divを右に作成

その下に「footer」divを作成

■footer 上の横メニューの色に合わせブルー背景画像を入れる

repeat x 文字の色 #FFF width:800 hight:36(画像の高さ) line-height:220%

■sidebar デザインでいろいろCSSのかけ方はあるけど、

周りにborder:実践・1・collor:#999で線で囲むようにデザイン

float:left ボックス:margin top10 bottom 15 width:223

その中にsidebarBox1とsidebarBox2のdiv作成

同じ内容のCSSを作成

上にボーダーの画像を背景として入れる

background-imageで高さ25の画像を入れる

この画像の位置を決める。background-position x:center y:top no-repeat

ボックス:padding top:30 bottom 25

■sidebarBox1の中に製品のメニューを作成

例:製品名 ああああ

プロパティからリストをクリック

文字「あああ」にヌルリンク設定

コピーして6つのメニュー作成

文字のところを変更

<p>あああ</p>

     ↓

<ul>
<li><a href="#">あああ</a></li>
<li><a href="#">いいい</a></li>
<li><a href="#">ううう</a></li>
<li><a href="#">えええ</a></li>
<li><a href="#">おおお</a></li>
<li><a href="#">かかか</a></li>
</ul>

ul:ボックス width:180 margin top10

li:background-image左端にリストのような小さい画像をに入れる 。

  background-position x:lrft y:center no-repeat

  border-bottom dahed・1・collor:#999

  ブロック:display block

    ボックス width:175 hight25 margin top8 bottom 5 lift 23 padding top 3

sidebar Box1 a

  font-size 14 text-decoration none(リンク時の下線なし)

  margin left 25(テキストの外側に25pxの空きを作る)

  マージンかパディングか迷うところ aに対してなのでマージンに

sidebar Box1 a:hover

  マウスが来たときに、色を変更 テキストカラーを#039

■sidebarBox2

にはカレンダーを入れる。

 

これでテンプレートを作成

テンプレートの作成は次回とします。

テンプレートから各ページ作成

各ページのcontents部分を仕上げていく。

  

 

 

 

メニューに背景画像を入れてテキストを隠す方法


「至極のCSS」では、テキストにemをかけて、位置のところでhiddenにすると

テキストが隠すことができる。見えているのは画像だけど、テキストも入っていて

SEO的にいいんだとか。


しかし、chromefirefoxでみるとテキストが見えてしまう。


それで、emをやめて「a」にblockのところでtext-indentを-9999にすると

IEchromefirefoxもOKでした。


こちらの方がいいみたいですわ。

 

ところが・・・

 

年月がたって、この方法は、SEO的にダメになったようです。

時代とともにへんかしていくんですね。2012年8月

2017年6月

        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30  

このアーカイブについて

このページには、2011年8月に書かれたブログ記事が新しい順に公開されています。

前のアーカイブは2011年7月です。

次のアーカイブは2011年10月です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

ウェブページ

Powered by Movable Type 5.2