タチバナ式SweetBitterNoteスマートフォン用の表示で見るタチバナ式SweetBitterNoteこの広告は、90日以上更新していないブログに表示しています。wordpress前置き実は今、趣味のサイトをWordPressで作っています。いろんなプラグインを入れたりテンプレートを弄ってアレコレしているのですが、中身がどう考えてもヘッポコ確定なのに入れ物だけ立派にしてどうするんだ、と自分にツッコミ入れつつ、日々新たな発見でかなり楽しいです。そんな訳でしばらくの期間、自分がWordPressで経験したあんなコトやこんな事を、素人まるだしで備忘録としてまとめていこうと思います。ページを開いてくださった方の、何がしかのお役に立てれば何よりです。GeneratorSuckerfishという、CSSとHTMLだけでできるドロップダウンメニューのジェネレーターであります。Design」をクリックすると、上のナビゲーションが変化します。これでオッケー、なら、下に表示されるCSSをコピーしてテキストエディタの新規ファイルに貼付け保存します。一例:navistyle.cssメニューの構成を決めるこの「はてなダイアリー」でもいいですし、各種Wikiでも、WordPressでもいいので、お手軽に「番号なしリスト」を作れるもので構成を考えていきます。はてな記法ならこうですね。-top--page1--page2javascript:;--page3---page3-1---page3-2---page3-3-works--page-a--page-b--page-c-contact-link-blog--category実際に表示させるとtoppage1page2page3page3-1page3-2page3-3workspage-apage-bpage-ccontactlinkblogcategory構成が決まったら編集画面からプレビューで表示して、さらにその「ソース」を表示させ、該当部分の<ul>〜</ul>をコピーしてhtmlファイルとして保存します。(idやclassが付いていたら削除しておきます)(別に必要ないかもだけど)Javascriptでアニメーション効果も付けようあとはaタグで各ページへのリンクを張り、〜など付け加えてやれば一丁上がり...なはずなのですが、Javascriptでアニメーション効果もつけてみます。「Superfish」からzipをダウンロードして展開、右記サイトのExampleやOptionsのページ、example.htmlを参考にして先程保存したhtmlファイルに色々付け加えていきます。今回Javascriptの設定は以下のようにしてみました。});</script>デフォルトは「ふわりとした表示」だけですが、オプションで「下に向かってスルッと伸びる」アニメーションも加えています。dropShadowsは今回シャドウ画像を使わないのでtrueのままでもシャドウ効果はでないのですが一応falseで。<ul>〜</ul>のあたりはこんな感じ。id="suckerfishnav"は先ほど作ったCSSで指定されてるIDです。class="sf-menu"でSuperfishが適用されます。href="http://hogehoge.com/category">category</a></li></ul></li></ul>んで、出来上がったのがこちら↓globaldemo.html※ソースを見たい場合はブラウザでソース表示かファイルをダウンロードで。※デモのリンク先はすべてこのブログになっております。只今キャンペーン実施中(2010/08/04まで)さらに追記すみません。読者になる検索リンクはてなブログブログをはじめる週刊はてなブログはてなブログPro最新記事wp-Vicunaのグローバルナビゲーションをドロップダウンメニューにする(前編)2010年07月23日のツイート2010年07月22日のツイート2010年07月21日のツイート2010年07月20日のツイート月別アーカイブはてなブログをはじめよう!T_Tachibanaさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。