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

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

 

即席グローバルナビ作成

headerに簡易的な即席グローバルナビを作ってみました。


全部CSSで出来るから簡単です(^^)


別に意味は無いけど、ずーーーーっとIllustrator触ってたから気晴らしに、という事で作成。


やっぱDTPメインが長いとソースの書き方忘れてヤバいやっさ。TAG indexを参考に、あとに残ったmarginとpaddingの計算は自力でやって完成。


でも配色だけだと詰まらんなぁ・・・( ̄. ̄;) ま、即席の簡易版なので仕方ないけど。







こちらはおまけ


リンクボタン(全アピアランス)|即席グローバルナビ作成|スタッフIHAのブログテンプレート制作目録リンクボタン(パス)|即席グローバルナビ作成|スタッフIHAのブログテンプレート制作目録


青が、文字に全部アピアランスで作成したもの(文字の塗りを量産)。
赤が、パスと文字で作成したもの(オブジェクト一つひとつに効果入り)。

 

 

追記――――――

枠が角丸になるようCSS3のソースを追加しました。

Firefox4と5、Google Chromeで確認できます。ていうかIE以外。

以下、グレーの部分がソース。どうぞ、コピって使って下さい(゚∀゚)アヒャヒャ
▼▼▼CSS▼▼▼

/*-- グローバルナビ(テスト版) --*/
#header ul.gnavi {
    width: 780px;
    margin: 0 auto;
    padding: 0;
    background-color: #c9171e;
    font-size: 85%;
    list-style-type: none;
    text-align: center;
}
#header ul.gnavi li {
    width: 156px;
    float: left;
    line-height: 100%;
}
/*-- リンクエリア --*/
#header ul.gnavi a {
    display: block;
    position: relative;
    padding: 10px 2px;
    background-color: #f09199;
    color: #ffffff;
    border: 2px #ffffff;
    border-style: solid solid solid none;
    border-top-left-radius: 20px; /* CSS3の表記 左上角丸 */
    border-bottom-right-radius: 20px; /* CSS3の表記 右下角丸 */
    text-decoration: none;
}
/*-- 最初の項目 --*/
#header ul.gnavi li.first a {
    border-left: solid 2px #ffffff;
}
/*-- ポイント時・アクティブ時 --*/
#header ul.gnavi li a:hover,
#header ul.gnavi li a:active {
    border: solid 2px #00ff00;
    background-color: #ffff66;
    color: #0033ff;
    outline: none;
}


#header内に height: 130px; /*-- ヘッダの高さ(数値の調整は任意) --*/ を追加。


▼▼▼トップページ・シングルページ・アーカイブページ▼▼▼
<div id="header">~</div>内のブログ説明文の下に貼り付け

    <ul class="gnavi">
    <li class="first"><a href="<$blog_url>">トップ</a></li>
    <li><a href="URL">リンク名</a></li>
    <li><a href="URL">リンク名</a></li>
    <li><a href="URL">リンク名</a></li>
    <li><a href="URL">リンク名</a></li>
    </ul>

Calendar

<< 2024年03月 >>
     12
3456789
10111213141516
17181920212223
24252627282930
31      

Me

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

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

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

QR Code

ihaのブログ

RSS

RSS1.0 RSS2.0