最近の覚書やメモ

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

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

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、 …

続きを読む

jquery パララックス効果を使ってみる

2013年12月29日

パララックスをあまりよく理解できていないので練習を兼ねたメモ。 サンプル スクロールにより背景画像を動かす スクロールしてある位置まで来ると、背景画像を動かす単純な例。 「div1 」の位置までスクロールすると、「クラス picture」の背景画像を下方向に動かす例。 背景画像は 960×800 のサイズの画像を用意 画像を表示する領域「クラス p…

続きを読む

jquery 背景画像を使ったパララックス

2013年12月28日

背景画像を使ったパララックスに関するメモ。 参考にさせていただいたサイト: 「HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基本」 CSSを使ったパララックス jQuery を使用しないで CSS で単純なパララックス(背景画像を固定して表示)を実現する方法。 各 div 要素(#first, #second, …

続きを読む

jquery パララックス(基本的なことに関するメモ)

2013年12月28日

jQuery と CSS を使っての基本的なパララックス効果に関するメモ。 参考にさせていただいたサイト:「パララックスサイトを作ろう」ドットインストール スクロールで要素を動かす 以下は、スクロールすると3つの要素がそれぞれ動くようにするサンプル。 サンプル用の構造 jQuery を読み込む jQuery を記述する pallarax.js を読み込む C…

続きを読む

jquery jPlayer (2.5.0) を使ってみる

2013年12月15日

目次 以前「audio.js」を使用したが、環境によっては IE8 以下ではエラーが発生してしまったので別のオーディオ再生用のプラグインを探したら見つかった「jPlayer」に関するメモ。「jPlayer」はビデオの再生も可能だがまだ試していない。 以下は「jPlayer 2.5.0 Quick Start Guide」から。 ダウンロードと配置 jPlay…

続きを読む