CSSで画像を右クリック保存させないようにする方法
最近(と言っても去年の8月くらい)から、仕事でWordPressを使うことが多くなってますが、今回書く記事はCSSなのでどの環境でも使えるネタかもしれません。
そこで今回は絶対配置を利用したレイヤー構造のようなCSSです。
最近(と言っても去年の8月くらい)から、仕事でWordPressを使うことが多くなってますが、今回書く記事はCSSなのでどの環境でも使えるネタかもしれません。
そこで今回は絶対配置を利用したレイヤー構造のようなCSSです。
今日は代休を使って仕事はお休み。有給休暇もフルで残ってるけど、まずは代休の処理が優先。でも使おうにも使う理由がないので困ります。
ってなわけで特に理由は無いけど、使わなかったらそのまま平気で年越して使いそうなので今日使いました^^;
そして暇人してます。ネカフェで。
ネカフェに居るついでに・・・
今取り扱っているHPの案件でjQueryかFlashはどちらがいいのか?って思ったので、実際にjQueryのソースを拾ってきました。拾ってこのブログに貼り付けて動作確認とかしてみたりしてます。
ちなみにGoogle APIが必要らしいのでそれも拾ってきました。
1.4.2
これはバージョンかな・・
最新は1.7だったと思う。
上記のソースを貼り付けて動作検証すると、全てのテキストリンクが新規タブで開けました。
ただ、全てを新規タブで開くと「うぜぇ!」って気になるので、今は隠してます。「/* */」で。
でも有ると無いとでは断然違いますね(^∀^)
Flashの場合、サイズが重いし制作時間が大幅に掛かっちゃうので、画像の映り変わりだけだったらjQueryでも良いかな、と思います。
昨日からグローバルナビにイメージをはめ込んだと思いますが、背景イメージを挿入しても何故か反映されなかったので、省略していた下記赤文字部分を挿入したところ反映されました。
/*-- リンクエリア --*/
#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で出来る角丸メニューを追加しました。
まあヘッダー部分を見ればわかると思いますが。
ちなみに今回使用した画像ですが、アメブロでやってる私のブログからパクってきました(笑)
訓練校に通ってるときに制作したものなので大丈夫です。
こちらが通常リンク時(ON)で、
こちらがポイント時(OFF)・アクティブ時です。
追記:角丸が反映されるブラウザは、Firefox、Google Chrome、IE9です。
headerに簡易的な即席グローバルナビを作ってみました。
全部CSSで出来るから簡単です(^^)
別に意味は無いけど、ずーーーーっとIllustrator触ってたから気晴らしに、という事で作成。
やっぱDTPメインが長いとソースの書き方忘れてヤバいやっさ。TAG indexを参考に、あとに残ったmarginとpaddingの計算は自力でやって完成。
でも配色だけだと詰まらんなぁ・・・( ̄. ̄;) ま、即席の簡易版なので仕方ないけど。
こちらはおまけ
青が、文字に全部アピアランスで作成したもの(文字の塗りを量産)。
赤が、パスと文字で作成したもの(オブジェクト一つひとつに効果入り)。
追記――――――
枠が角丸になるようCSS3のソースを追加しました。
Firefox4と5、Google Chromeで確認できます。ていうかIE以外。