Web Design Leaves

jQuery で要素を操作する際に使用するメソッドに関するメモ。 要素にコンテンツを追加 ラップ集合の全要素（既存のコンテンツ）に対して渡されたコンテンツ（引数で指定した要素等）を追加するメソッドは以下のようなものがある。 append：コンテンツを要素の子要素の末尾に追加 prepend：コンテンツを要素の子要素の先頭に追加 after：コンテンツを要素の…

続きを読む

Youtube の動画を Lightbox のようなモーダルウィンドウで表示できるプラグインを探していたところ見つけた「Magnific Popup」。レスポンシブ・デザインに対応している上に機能も豊富で Goole map なども表示可能。使い方などに関するメモ。 目次 Magnific Popup のダウンロードと読み込み Magnific Popup …

続きを読む

Youtube の映像をプラグインを使わずに Lightbox のようなモーダルウィンドウで表示しようと試した際の失敗例。結果的にはプラグインを使用することにしたが、後日何か別の方法が見つかればその際の参考にするためのメモ。 概要 Firefox では問題なく表示・再生できたが、それ以外のブラウザでは以下のような問題が発生。 「停止ボタン」を押さずにモーダル…

続きを読む

特定のページに記述してある情報を他のページでも使用している場合に、元のページの情報を更新すると他のページの情報も自動的に更新されるようにする方法のメモ。 概要 例えば、スケジュールが記述されている「schedule.html」のサマリーをトップページなどにも表示する場合、内容を更新するにはそれぞれのページを更新しなければならない。 これを jQuery の …

続きを読む

高さの異なる要素をフロートさせて並べる時に、jQuery を使ってそれぞれの高さを揃えて並べる方法に関するメモ。 横に並んだ要素の高さを揃える 以下のサンプルは div 要素（class=”foo”）をフロートで並べて表示する例。それぞれの高さが異なるので、同じ高さを指定しなければきれいに横には並ばない。 サンプル１ サンプルの「高さ…

続きを読む

ブラウザの言語設定を元にその言語のファイルを表示させる方法のメモ。（不確かな内容があります） 目次 概要 トップのフォルダに以下のような英語、日本語のトップページがある場合。 英語：http://www.mysite.com/index.html 日本語：http://www.mysite.com/indexjp.html http://www.mysite…

続きを読む

カルーセルパネル（パネルをスライドして１周すると元のパネルに戻る）やスライドパネルを使う際のメモと練習（実用的でないものがほとんど）。 カルーセルパネルの表示（サンプル１） サンプル１ シンプルなカルーセルパネルを表示する。 カルーセル全体を囲む div 要素を配置（id=”slider_wrap”） その内側に「戻る」（slider…

続きを読む

WordPress のフォルダにあるファイルの一覧を取得して、画像ファイルであれば出力して表示する方法のメモ。 フォルダ内のファイル一覧を取得 ファイルの一覧を取得して出力するには以下のようにする。 この時、URL からサーバー内部のファイル一覧を取得することはできないので「get_template_directory()」を使用する。（ http:// で…

続きを読む

注意 10/12/2014 つい先日気が付いたのですが、この方法を使った場合ページによっては、読み込みが非常に遅くなる場合があることがわかりました。今までは問題がなかったのですが、ある程度投稿の数やアップロードした画像の数が増えるとそうなるのか、WP のバージョンアップに伴いどれかの関数がうまく機能しなくなったのか、原因は今のところ不明です。 よって、この方…

続きを読む

投稿に挿入した画像のリンクをクリックすると Lightbox のような感じで表示するようにしていたが、画像によってはサイズや位置が正しく表示されないことがあったので調べてみた際のメモ。 画像（メディア）の挿入 「メディアを追加」で「添付ファイルの表示設定」の「リンク先」を「メディアファイル」に指定すると画像（メディア）にその画像へのリンクが設定される。 ge…

続きを読む