ログイン
英会話| 婚活| 北海道専門学校| 東北専門学校| 東海専門学校| 沖縄専門学校| ホームページ制作| 2万円HP制作|

DTP・Webデザイン系企業に就職したスタッフIhaのブログテンプレート制作目録です。イラスト、フォト、プログラム、呟きなどいろいろ投稿していきます。基本的にはブログテンプレートデザインを制作した過程を書いています。

 

グローバルナビにイメージ背景はめ込み

昨日からグローバルナビにイメージをはめ込んだと思いますが、背景イメージを挿入しても何故か反映されなかったので、省略していた下記赤文字部分を挿入したところ反映されました。

 

/*-- リンクエリア --*/
#sub_header ul.gnavi li a {

   ・

   ・
   ・
    background: #21a0ff url(http://blog.town-nets.com/blog/iha/file/dadb323e64.JPG) center top repeat-x;
   ・
   ・
   ・
}


修正したCSSソースは下記の「続きを読む」からどうぞ。今回はCSS3で出来る角丸メニューを追加しました。

gnavi01|グローバルナビにイメージ背景はめ込み|スタッフIHAのブログテンプレート制作目録

まあヘッダー部分を見ればわかると思いますが。

ちなみに今回使用した画像ですが、アメブロでやってる私のブログからパクってきました(笑)

訓練校に通ってるときに制作したものなので大丈夫です。


menu1_off|グローバルナビにイメージ背景はめ込み|スタッフIHAのブログテンプレート制作目録
こちらが通常リンク時(ON)で、
menu1_on|グローバルナビにイメージ背景はめ込み|スタッフIHAのブログテンプレート制作目録
こちらがポイント時(OFF)・アクティブ時です。

 

追記:角丸が反映されるブラウザは、Firefox、Google Chrome、IE9です。

/*-- グローバルナビ(テスト版) --*/
#sub_header {
    position: relative;
    width: 800px;
    margin: 5px auto 0;
}
#sub_header ul.gnavi {
    width: 800px; margin: 0 auto; padding: 0px;
    background-color: #0033ff;
    font-size: 85%;
    list-style-type: none;
    text-align: center;
}
#sub_header ul.gnavi li {
    width: 160px; float: left; line-height: 100%;
}
/*-- リンクエリア --*/
#sub_header ul.gnavi li a {
    display: block; position: relative; padding: 5px 2px; color: #ffffff;
    background: #21a0ff url(http://blog.town-nets.com/blog/iha/file/dadb323e64.JPG) center top repeat-x;
    border: solid 2px #0033ff;
    /*border-style: solid solid solid none;*/
    border-top-left-radius: 40px; /* CSS3の表記 左上角丸 */
    border-bottom-right-radius: 40px; /* CSS3の表記 右下角丸 */
    text-decoration: none;
}
/*-- 最初の項目 --*/
#sub_header ul.gnavi li.first a {
    border-left: solid 2px #0033ff;
}
/*-- ポイント時・アクティブ時 --*/
#sub_header ul.gnavi li a:hover,
#sub_header ul.gnavi li a:active {
    border: solid 2px #00ff00;
    background: #ffff66 url(http://blog.town-nets.com/blog/iha/file/86186fe9d5.JPG) repeat-x;
    color: #0033ff; outline: none;
}

Calendar

<< 2019年10月 >>
  12345
6789101112
13141516171819
20212223242526
2728293031  

Me

profile
プロフィールは個別に作りたいと思うのは自分だけでしょうか?上の画像は訓練校に居た頃制作。デッサンしたことあるけど、これはただのラクガキです。ちょっとレイヤー効果追加。

ブログテンプレート量産中!・・・でも今はPHPとjQueryで遊んでるラボの人です。

最近はラボよりもWordPressやタウンネットブログのエンジンを使ってサイト制作(仕事)をやってます。

QR Code

ihaのブログ

RSS

RSS1.0 RSS2.0