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

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

現在の位置:TOP >  Webデザイン

CSS3でグローバルナビにグラデーションをかける

ただの実験ですが、背景画像ではなくCSS3を用いてwidth:100%のグラデーションを作ってみました。上から下へのグラデーションも良いけど、横型で画面の幅100%使ってやってみたくなったので実行しました(゜∀゜)
 
色見本はAdobe社のKulerを参考にしました。色相環のようなカラーピッカーになっていて選択した色に合う他色をプログラムで出力しているようです。
 
今回の配色は、このブログのベースカラーである青を基調として(ちょいっといじって)、Kulerから出力された色の値を参考にしています。この配色のグラデーションをグローバルナビの背景に適用。オンマウス時は不透明度60%にぼかされるようセット。IEではCSS3が使えないっぽいので、CSSハックで以前の背景画像をセットして対応しています。ソースを見たときに</head>の上にあるのがソレです。

続きを読む...

記事URL
現在の位置:TOP >  Webデザイン

SEO用にグローバルナビのURL編集

SEO対策用にグローバルナビ編集したのは昨日ですが、なんかトップページ(ボタンだけ)が、"../"になってたので、こちらを修正。これだとタウンネットブログにリンクされます。

 

何でこんなリンク先の書き方してるかと言うと、自分がまだ相対パスのリンク付けに慣れてないからです。だからいち早く覚えるためにこの書き方にしてます。

 

相対パス → ../iha/

絶対パス → http://blog.town-nets.com/iha/

 

"./"で今居る階層(ディレクトリ)から。

"../"でひとつ上の階層(ディレクトリ)から。

"../../"で二つ上の階層(ディレクトリ)から。

"/"からでも、おk。階層(ディレクトリ)が分かってれば。

 

でも"/"だけのリンクにすると、「タウンネットブログ」に行くんじゃないかな?

一旦、トップページの「トップページ」ボタンだけテスト・・・

 

*** オリジナルデザインでテスト中 ***

 

2012.04.01 17:45

テスト完了!

やっぱタウンネットブログにリンクされますね。という事で"../iha/"に戻しました。

 

でもサイトマップのソースだけは絶対パスになってますね。修正したいけど、アレ、PHP側でしかできないから一般管理ページからは無理だな。

 

2012.04.21 21:10

サイトマップのリンクソースですが、考えてみればindex.htmlと同じディレクトリにあるわけですから"./sitemap.html"で出来ました。一般管理ページから修正できます。

記事URL
現在の位置:TOP >  追加HTML&CSS

即席グローバルナビ作成

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


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


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


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


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







こちらはおまけ


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


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

 

 

追記――――――

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

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

続きを読む...

記事URL
1 |2 |次へ>> 

Calendar

<< 2018年10月 >>
 123456
78910111213
14151617181920
21222324252627
28293031   

Me

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

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

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

QR Code

ihaのブログ

RSS

RSS1.0 RSS2.0