プロフィール

mshp0723(旧Mikaん星人アワー)

Author:mshp0723(旧Mikaん星人アワー)
ごらんいただきありがとうございます。マルチクリエイタ・クリエイティブ起業家のmikaん星人アワーです。webコンテンツ関連お仕事をしています。

■お仕事関連サイト■
仙台スマホ対応ワードプレスサイト制作・アトリエSS


webサイト制作・運用関連事例
・食品店さま ネットショップ制作
・音楽スクールさま webサイト制作
・楽器奏者さま 再生プラグイン埋め込みサイト制作
・エクステリア施工企業さま webサイト企画
・飲食店さま webサイト制作
・支援団体さま サイト制作
・一般企業さま 会社案内サイト企画
・支援団体さま fc2ブログカスタマイズ
・その他 メディア/アフィリエイト運用ブログカスタマイズ



よろしくお願いいたします。

最近の記事

カテゴリー

jqueryエフェクト&CSSねた~ お仕事サイト更新お知らせ・ぬるぬる動くlavalampでグローバルメニュー&メニューの項目背景を、マウスオーバー透過ねたなど

おばんです♪


jqueryとか昔はよくわからんかったけど、お取引先さまに『こういうのありましたよ』ってお話したり、実際にサイトに組み込んだりしてたら、だんだんできるようになった


mikaん星人アワーです。スキルをパワーアップさせていただき、ありがとうございます。


まあせっかくいろいろ覚えたので、『自分のおしごとサイトにも使ってみるか』という感じで、
(&便乗するわけでないけど、今やらないとしばらくやらないから(笑)

ちょっと昔のやつですが、jqueryエフェクトを使ってみました。



グローバルメニューに・・
201303034.jpg
マウスオーバーした部分がぬるぬる動くlavalampを導入。700バイトと軽いらしいです。
(以下のサイトより)
http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

つけ方は他のサイトのほうが詳しいので割愛しますが、cssもついてくるので、ちょっと見た目をいじりました。


lavalampサイトのサンプルでは、マウスオーバーしたときのリストの背景、濃かったよね?


この部分ですが、
201303032.jpg
サイトにあったままのサンプルでは色が濃かったので、エディットしました。CSSがついてくるので、それを少し変えて、見栄えを変えることができました。


サンプルにあった、リスト背景部分css

.lavaLampNoImage li.back
{opacity: 0.5; filter: alpha(opacity=50); top: 4px;
border: 0px solid #ffcc99; background-color: #ffffff;
width: 9px; height: 30px; z-index: 8;
position: absolute;}

を、background-colorを変えると共に

opacity: 0.5; filter: alpha(opacity=50);で、透過を加えています。

filter: alphaは、古いIE用で、『opacityだけだと、IEじゃスケないよね(^_-)=☆』というときに重宝。両方書いておくと、ある程度いろんなブラウザで見られます。


余談ですが・・・


上記のほかに、このように
201303033.jpg
フッターエリアをサイトマップみたいに、というのもやってみました。ワンクリックですべてのページに行ける&サイト全体構造伝えるみたいな狙いです。



しかし管理人は少し失敗
『10ページくらいソースコピペならすぐだな』と思ってたところ、やり始めてから『コラムページを大量に足した』ことに気づいて青ざめます(笑)


たぶん次にやるときは
『独自ドメインブログで、カテゴリ・月間アーカイブ表示変数を、フッターに移動したプラグインエリアに貼る』
『最初からサーバーに、WordPressなどを入れる』


という感じでやるでしょう。
『ガンガン更新&強力な検索エンジン対策効果&別ページへのアクセシビリティ』
みたいなのを狙えますからね♪






まあ、あとは『画像入れが前提』のため、『文字が増えてくると窮屈になってくる』という問題がありましたが、カラム幅変更などで対処します。最近作ってたサイトが横900px以上なので、800px代はちとつらいです(笑)





○コンテンツをしっかり見ていただいて、ってのがベストだね(^_-)=☆


と思う方は

にほんブログ村 ベンチャーブログへ

↓↑クリックお願いいたします♪
関連記事
スポンサーサイト
このエントリーのタグ: jquery cssレイアウト lavalamp
トラックバック
トラックバック送信先 :
コメント

リンク(相互大歓迎♪)

月別アーカイブ