jQuery ドロップダウンメニュー(ポップアップメニュー)

ドロップダウンメニューの備忘録です。
垂直型メニューで使えるものを探しています。

■jdMenu階層メニュー
アスクルでもつかっているもので、良い感じだったが、IE9で動作しない。(2012.04.17)


■suckerFish(コバンザメ)
これの垂直型が理想的です。


■メニューがいろいろ載っているサイト


■jQueryとCSSで作るドロップダウンメニューのスクリプトまとめ | TOPICK(トピック) 


最終的には、こちらのものが最適でした。


A List Apart: Articles: Drop-Down Menus, Horizontal Style


ただ、子メニューを選択中に親メニューの色が戻ってしまうので、ここだけ何とか修正したいです。できるのか。






京都ホームページ制作 ホピデザイン

Dreamweaverのブラウザプレビューでchromeを設定(Vista)

 Dreamweaverでブラウザチェックをする際、IEは普通ですが、Firefoxからchromeに設定しようと思いchromeのフォルダを探してみましたが見つからず、調べてみるとぜんぜん違う場所にありました。

C¥Users¥ユーザー名¥AppData(隠しフォルダ)¥Local¥Google¥Chrome





ちなみにXPだと

C:¥Documents and Settings¥Windowsアカウント¥Local Settings¥Application Data¥Google¥Chrome



京都ホームページ制作 ホピデザイン

reset.cssからNormalize.cssへ



今までは、各ブラウザによって解釈の違う表示を統一させる必要があり、reset.cssというもので、それを均一化させてから、ウェブサイトを作成していくという段取りでした。 

最近のウェブ制作は、HTML5、CSS3などの規格が位置段階進み、それに対応しているブラウザ増えたため、できることが増えました。(インターネットエクスプローラーなど一部見対応なのが残念ですが)

角丸やテキストなどのシャドウが画像を使わずともCSSだけでできるようになったので、スマートフォンサイトなどでは重宝します。(ブラウザが対応している)

そのHTML5、CSS3でのリセットを含めたNormalize.cssというものをわかりやすく日本語表記にしてくれている方がいました。感謝です。

◆よさげなリセットCSS Normalize.cssを適当に日本語にしました | nevermind http://nvm.jp/web/xhtml_css/normalize-css-japanese/


京都ホームページ制作 ホピデザイン

2つのファイルの違いを探しだすソフト CSSファイルの同期に便利

 先日、複数で同時にホームページ制作の作業することがありました。お互いが触る箇所は違うのでhtmlは最終的に統合ができるのですが、CSSファイルは同じものをさわるので、相手がどこを触ったのかあとで調べて統合する必要がありました。

結局どこを触ったのかわからないので、何か2つのファイルの違いを明らかにするソフトがないだろうかと探していたら見つかりました。

WinMerge


このように違いがあるところは黄色で表示されます。
画像左部分は黄色くなっていますね。
上の画像は、サンプルなので実際にはこんな黄色は多くありません。

これで違いを発見し、修正することができました。




京都ホームページ制作 ホピデザイン

EC-CUBE ASP Facebookいいねボタンを設置してみる



最近、流行りのFacebook。
ちょくちょく楽しんでます。

ご存知のとおり、FaceBookは実名で登録されている方が多いので、mixiよりもカタい分、大人な人が多いようで、ビジネスなどにもよく利用されています。

手軽ですね。

こちらのブログのしたの方にある「いいねボタン」をお客様のショップサイトに設置してみました。

普通のサイトだと良いのですが、EC-CUBE というショッピングサイトのシステムを利用しているので、普通のサイトの様にサーバーにファイルを自由にアップして、ソースコードを自由に書き換えるという訳にはいきません。

そのショップサイトでは、更新管理がしやすいASPというもので、あらかじめサーバーに組み込まれたサービスを利用しています。

(ASP=あらかじめ、ショップサイトが、プリインストールされているの略ではありませんw)

更新しやすい分、自由度が低いということが言いたかっただけですが、そこにFacebookのいいねボタンを設置するやり方を紹介します。

この記事が誰かの参考になれば、幸いです。

といってもやり方はたくさんあります。

一番いいのは、http://www.facebook-japan.com/iine.html こちらに載っている方法。一般的なブログなどにもこの方法でOKだと思います。

で、今回もこのやり方で十分だろうと思いましたが、何故かブロックに反映されませんでした。

そこで、こちらの記事を参照しました。
http://itra.jp/jquery_socialbutton_plugin/

大まかな流れ

  1. 上記サイトをよく読んで、デザイン管理→ファイル管理で新しいフォルダを作成する。
  2. そこにjsをアップする。
  3. アップしたファイルへのパスを正確に書き込み新しいブロックを作成する

注意点としては、
  • cssのクラス名を間違えないようにすること
  • ファイルのパスを間違えないようにすること
  • 商品詳細ページでは、何故かレイアウト設定でメインの上部分に入れておかないと、商品管理のところには反映されなかったです。(なぜだろうか、わかり次第報告します。)



JUGEMテーマ:インターネット
 


京都ホームページ制作 ホピデザイン

profile


名前 horseface(ホピデザイン)
現在地 京都府/京都市
Web http://www.hopi-design.com/
自己紹介 京都でWeb制作の仕事をしています。音楽、麺類、猫が好きです。
制作中に調べたことなど綴っていきます。 書いた記事数:363 最後に更新した日:2012/04/17

search this site.

最新情報

RSS表示パーツ

selected entries

categories

others

mobile

qrcode

powered


recent comment

  • iPhone ボイスメモ 取り出す
    air max 90
  • iPhone ボイスメモ 取り出す
    iPhoneボイスメモの取り出し
  • 一体、いつ使うのか? 炊飯器・ジャーのイラスト フリー無料素材。商用OK。
    ななし
  • 一体、いつ使うのか? 炊飯器・ジャーのイラスト フリー無料素材。商用OK。
    あん子
  • 2点ですが、人物のイラスト(夫婦・カップル)フリー無料素材。商用OK。
    dajiiTube
  • 一体、いつ使うのか? 炊飯器・ジャーのイラスト フリー無料素材。商用OK。
    教員
  • カウント・ベイシー
    anyany5750
  • カウント・ベイシー
    hf
  • カウント・ベイシー
    anyany5750
  • カウント・ベイシー
    hf

Related Posts Plugin for WordPress, Blogger...