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

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

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

CSSで画像を右クリック保存させないようにする方法

最近(と言っても去年の8月くらい)から、仕事でWordPressを使うことが多くなってますが、今回書く記事はCSSなのでどの環境でも使えるネタかもしれません。

 

そこで今回は絶対配置を利用したレイヤー構造のようなCSSです。

続きを読む...

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

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

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

続きを読む...

記事URL
現在の位置:TOP >  プログラム

jQueryかFlashはどちらがいいのか?

今日は代休を使って仕事はお休み。有給休暇もフルで残ってるけど、まずは代休の処理が優先。でも使おうにも使う理由がないので困ります。

ってなわけで特に理由は無いけど、使わなかったらそのまま平気で年越して使いそうなので今日使いました^^;

そして暇人してます。ネカフェで。




ネカフェに居るついでに・・・

今取り扱っているHPの案件でjQueryかFlashはどちらがいいのか?って思ったので、実際にjQueryのソースを拾ってきました。拾ってこのブログに貼り付けて動作確認とかしてみたりしてます。

ちなみにGoogle APIが必要らしいのでそれも拾ってきました。



■Google API
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

1.4.2

これはバージョンかな・・

最新は1.7だったと思う。

■拾ってきたソース(リンクを新規タブで開く)
<script type="text/javascript">
//リンクを新規タブで開く
$(function(){
    $("a[href^='http://']").attr("target","_blank");
});
</script>

上記のソースを貼り付けて動作検証すると、全てのテキストリンクが新規タブで開けました。
ただ、全てを新規タブで開くと「うぜぇ!」って気になるので、今は隠してます。「/* */」で。

でも有ると無いとでは断然違いますね(^∀^)

 

Flashの場合、サイズが重いし制作時間が大幅に掛かっちゃうので、画像の映り変わりだけだったらjQueryでも良いかな、と思います。

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

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

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

 

/*-- リンクエリア --*/
#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です。

続きを読む...

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

即席グローバルナビ作成

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


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


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


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


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







こちらはおまけ


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


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

 

 

追記――――――

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

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

続きを読む...

記事URL
1 |2 |次へ>> 

Calendar

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

Me

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

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

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

QR Code

ihaのブログ

RSS

RSS1.0 RSS2.0