最近の覚書やメモ

Web 制作に関する個人的な覚書やメモです。記事中の内容やコード等には、誤りなどもある可能性があることをご了承ください。また、内容を利用される場合は、あくまでもご自身の責任においてご利用ください。

New Web 制作リファレンス
もう少し整理された形式のWeb制作参考資料です。

wordpress wp_nav_menu の出力をドロップダウンメニューで表示

2013年5月18日

wp_nav_menu 関数は、デフォルトでは以下のように ul 要素( li 要素)を使ってメニューの各項目を出力する。 親の ul 要素には「menu」の class が付く 子の ul 要素には「sub-menu」の class が付く 全ての li 要素には「menu-item」の class が付く 現在表示されているページの li 要素には「cu…

続きを読む

jquery 基本的なドロップダウンメニュー

2013年5月18日

CSS による基本的な記述 メニューの幅や背景、テキストの位置などの指定は様々な方法が考えられるが、ここでは単純に幅はメニューの文字数に合わせ、右側にパディング(20px)を設け、背景は背景色で指定する。 HTML は ul 要素を入れ子にしてマークアップする。 CSS や jQuery で指定しやすいように id 「header-nav」を指定した div…

続きを読む

jquery jQuery を使った縦にスライドするメニュー

2013年5月17日

親メニューをクリックすると、それに属するサブメニューをスライドアニメーションで表示するメニュー。 ul 要素を入れ子にして、ツリー構造を記述 例:親メニュー「News」をクリックすると、そのサブメニュー「Events」、「Activities」がスライドアニメーションで表示される。 「+」「-」「■」の3つの画像を用意。 親メニュー(div.parentme…

続きを読む

jquery jQuery の fadeOut() を使ったスライドショー

2013年5月17日

プラグインを使わずに、jQuery を使って簡単なスライドショーを行う方法のメモ。 シンプルなスライドショー そのページにアクセスすると自動的にスライドショーを行う単純なもの。 サンプル1 基本的な構造 最初に表示する写真とそのタイトルを HTML に記述。 スライドショーで表示する写真のファイル名と情報をカンマ区切りで、非表示に指定した div 要素内に …

続きを読む

wordpress WordPress で多言語化(2ヶ国語)

2013年5月17日

ネットワーク機能を使ってマルチサイトにして、1つのサイトの言語を「英語」、他を「日本語」に設定した場合等の2ヶ国語化する際のメモ。 目次 おおまかな流れ 多言語化ファイル(.po と .mo)を作成する。 functions.php で load_theme_textdomain()を 使ってテーマ用のmoファイルをロードする。 __()と_e()を使って翻…

続きを読む

htmlcss Google Web Fonts がブラウザによって表示が異なる

2013年5月15日

Google Web Fonts をタイトルのロゴに使用しようとしたが、ブラウザによっては文字がきれいに表示されない。自分の Windows の環境では Firefox と IE ではきれいに表示されるが、Chrome、Safari、Opera では、文字の周りがぎざぎざしていてちょっとそのまま使用するのは難しい。 検索したところ、CSS3 の text-s…

続きを読む

wordpress ログインしているユーザーのみに表示する方法

2013年5月8日

WordPress でユーザーがログイン済みかを判定するには is_user_logged_in() を使用する。 ユーザーがログインしているかどうかで処理を分けたい場合などに便利。 例えば、ログインしているユーザーのみにあるコンテンツへのリンクを表示する場合など。 以下の例は、 ログインしているユーザーのみに表示するカテゴリー(usage)を作成 このカテ…

続きを読む

htmlcss www の有無

2013年5月5日

301リダイレクトを利用 「www あり」で運用するのか、「www なし」で運用するのか。 どちらにしても、301リダイレクトを利用しどちらかに統一するようにする。以下は「Google ウェブマスターツール」からの引用。 「www あり」に統一する場合は、以下を「.htaccess」ファイルに記述。(example.com の部分を自分のドメインに変更) R…

続きを読む

jquery jQuery position(), animate() メソッドと css の display プロパティ

2013年5月3日

jQuery の position(), animate() メソッドを使用する際のメモ。 画像などを最初は非表示にしてその後表示するような場合、css の display プロパティを「none」にしておいて fadeIn() や show() などを使うことで可能だが、animate() メソッドの場合、css の display プロパティを「none…

続きを読む

jquery 見出しタグ(h1~h6)へのリンクリストを動的に生成する

2013年5月2日

ページの内容が多くなった場合などに、各見出しタグ(h1~h6)へのリンクのリストを jQuery を使って動的に生成する方法。 概要 リストとそれを表示する領域を ul 要素と div 要素で生成し、表示する位置へ配置(prependTo)。 見出しタグ(h1~h6)要素のラップ集合「$(‘:header’)」のそれぞれの要素を調べる…

続きを読む