最近の覚書やメモ

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

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

wordpress アイキャッチ画像を Lightbox のようなモーダルウィンドウで表示

2013年6月24日

ページに特定のサイズで表示したアイキャッチ画像をクリックすると、 Lightbox のようなモーダルウィンドウで拡大画像を表示する方法のメモ。 現在表示されているアイキャッチ画像の ID を get_post_thumbnail_id($post->ID) で取得。 wp_get_attachment_image_src() を利用して、拡大表示するアイキャ…

続きを読む

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

2013年6月24日

jQuery を使って簡単に Lightbox のようなモーダルウィンドウを表示する方法のメモ。 基本的な構造 サムネイル画像にモーダルウィンドウで表示する拡大画像のソースへのリンクを設定する。 ページの適当な個所に半透明のモーダルウィンドウと拡大画像を表示する領域を設定し、CSS で非表示にしておく。 半透明のモーダルウィンドウの領域:id=”…

続きを読む

wordpress カスタムフィールドに入力した値で表示件数を変更する

2013年6月22日

カスタムフィールドに入力した値で表示件数を変更する方法のメモ。 以下は「works」というカスタム投稿タイプを作成した場合の例。 「works」の最新の投稿を表示する固定ページ(スラッグ:recent_works)を作成(page-recent_works.php) 上記固定ページに「display_count」というカスタムフィールドを作成。 カスタムフィ…

続きを読む

wordpress WordPress でサイトを非公開にする場合

2013年6月21日

開発段階などで、WordPress でサイトを非公開にする場合のメモ。 WordPress ではブログ全体を非公開にするという設定はないので、非公開にしたい場合はサーバ側で認証機能を使うなどの設定をする必要がある。 (記事単位で非公開にすることはできる。) 検索エンジンにインデックスされないように設定を行なうことはできる。但し、公開後は必ずインデックスされる…

続きを読む

htmlcss ローカル環境(XAMPP)でサブドメインを使用

2013年6月21日

XAMPP でサブドメインを使用する方法のメモ。 C:\xampp\apache\conf\extra\httpd-vhosts.conf を開き、「##NameVirtualHost *:80」 の前についている#を外す。 最初の<VirtualHost>ブロックとして、従来の localhost を追加。1番目の VirtualHost セク…

続きを読む

php PHPでベーシック(Basic)認証をかける

2013年6月21日

.htaccess の設定をせずに、php の関数として認証をかける方法のメモ。(ベーシック認証は、パスワードがそのままHTTPのネットワークを流れるので、盗聴などセキュリティ上の危険性がある。) PHP による HTTP 認証 header() 関数を使うと、 “Authentication Required” メッセージをクライア…

続きを読む

wordpress ローカル環境(XAMPP)での BASIC 認証

2013年6月20日

ローカル環境(XAMPP)で BASIC 認証を使う際のメモ(WordPressの場合)。 サーバー環境で BASIC 認証を使う場合下記のような記述を .htaccess に追加してパスワードファイルを作成すればよいが、ローカル環境(XAMPP)の場合、パスワードの生成方法と保存場所の指定が異なる。 関連ページ:「WP インストール時の注意点とセキュリティ…

続きを読む

wordpress WordPress 制作工程メモ

2013年6月18日

WordPress でサイトを作成する際の工程に関するメモ。今後適宜修正する予定。まだ試行錯誤の段階なので参考にするには不向きです。 ローカル環境(XAMPP) XAMPP にサブディレクトリの形でサイトを作成すると、フォルダ構成が実際のサイトと異なるので、実際のサイトに近い構成にするため、XAMPP でサブドメインを使用できるようにする。 「ローカル環境(…

続きを読む

jquery 言語のリンクをクリックすると対応する言語のページに移動させる

2013年6月17日

日本語と英語の2ヶ国語のサイトを作成し、それぞれの言語のページが全く同じ構成の場合、言語のリンクをクリックするとそのページに対応する言語のページに移動するリンクを作成する例。 言語のリンクは、p 要素と a 要素で作成。 JavaScript が OFF の場合は、それぞれのトップページへ a 要素でリンク ディレクトリの構造は「en」フォルダの中に英語のペ…

続きを読む

htmlcss .htaccess ファイルのメモ

2013年6月17日

.htaccess ファイルについてのメモ。 目次 基本的事項 ウェブサーバとして「Apache」が使用されていて、サーバ管理者が「.htaccess」ファイルの設置を許可していれば使用可能。 .htaccess ファイルは、サーバの挙動を決定する設定ファイルのひとつ ウェブサーバの設定は httpd.conf ファイルに記述するが、サーバ管理者しか編集でき…

続きを読む