最近の覚書やメモ

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

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

jquery Youtube を Lightbox のようなモーダルウィンドウで表示

2014年2月7日

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

続きを読む

jquery ajax を使って更新を自動的に行う

2014年1月26日

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

続きを読む

jquery jQuery を使って要素の高さを揃える

2014年1月24日

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

続きを読む

htmlcss Apache「MultiViews」オプションを使って2ヶ国語対応

2014年1月15日

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

続きを読む

jquery カルーセルパネル(スライドパネル)の表示

2014年1月14日

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

続きを読む

wordpress フォルダ内のファイル一覧を取得して画像ファイルであれば表示する

2014年1月11日

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

続きを読む

wordpress WordPress 投稿に挿入した画像を Lightbox のように表示(2)

2014年1月8日

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

続きを読む

wordpress 投稿コンテンツに挿入した画像(メディア)のリンクを抽出する

2014年1月8日

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

続きを読む

Illustrator の基本的なこと

2014年1月2日

Illustrator の基本的なことに関する非常に個人的なメモ。 基本設定 環境設定 環境設定ダイアログ:Ctrl + K (Command + K) 単位 「一般」「線」「文字」「日本語オプション」を「ピクセル」に設定 一般 「キー入力」を「1px」に設定 スマートガイド メニューの「表示」→「スマートガイド」にチェックが入っていることを確認 新規作成 …

続きを読む

Photoshop の基本的なこと

2014年1月1日

Photoshop の基本的なことに関する個人的なメモ。 環境設定 環境設定ダイアログ:Ctrl + K (Command + K) 単位・定規 「定規」と「文字」を pixel に設定 ガイド・グリッド・スライス 「グリッド」の例 カラー:カスタム(#CCCCCC) スタイル:点線 グリッド線:「値(グリッドの間隔の値)」:100、「単位」:pixel、 …

続きを読む