特定のディレクトリやファイルのみベーシック認証でパスワードを設定する

常時SSL化への対応のお仕事が増えてきました。
すでにお問い合わせフォームだけSSLで設置していたような企業サイトで、すべてSSLへ移行させるという作業も多いです。
そんな時、SSLへ移行させたデータを確認するために、新たに移行したデータにはベーシック認証を設定。すでに使用しているお問い合わせフォームに関連するファイルはそのままアクセスさせたいというニーズがあります。
そんな時にSSL全体にバーシック認証をかけて特定のファイルやディレクトリのみOKにするhtaccessの記述をメモ。

Posted in htaccess | Leave a comment

htaccessでの転送設定

.htaccessを使った転送設定のメモ。

お仕事で、スマホで回答してもらうWebでのアンケート調査をおこなうことがありますが、意外とQRコードを読み込めないという人が多く、手打ちができるような短いURLからアンケートのURLにリダイレクトするように.htaccessで設定することがよくあります。

iOS11で、やっとiphoneもデフォルトのカメラでQRコードを読み込めるようになったので、短縮URLの設定も必要なくなってくるかもしれません。

Posted in htaccess | Leave a comment

jQueryと「Pikachoose」でサムネイルをクリックして画像を切り替えるスライダー

サムネイルをクリックすると、画像が切り替わるjQueryスライダー。

条件

  • 建築関係のクライアントで、設計した建物の写真を見せたい。
  • 正方形にトリミングしたサムネイルをクリックすると、画像が変わる。
  • クライアントが更新する。
    →ソースはできるだけシンプルに。
  • クライアントはメイン画像のリサイズくらいはできるが、サムネイル画像を縮小して正方形にトリミングするところまではやれない。
    →サムネイルはメイン画像を縮小、トリミングして表示させることにする。
  • レスポンシブ対応はなし。対象ブラウザはIE7以上、Firefox、Chrome。

pikachoose

利用したjs

Pikachoose a jQuery Slideshow – Pikachoose
http://www.pikachoose.com/

ピカチュー。かわいい。

htmlファイルへの記述

headタグ内でjsを読み込む

body内のスライダーを表示させたいところに以下記述。

cssファイルへの記述

サムネイルはデフォルトでは、選択されていないサムネイルは透過で表示して、hoverで透過0になるが、クライアントの要望で、サムネイルを透過0で表示させておいてhoverで透過になるようにしたいとのこと。
htmlの内の設定でサムネイルの透過を0にしておいて、以下hoverの時に透過0.7になるように設定した。

追記(2013/12/20/ 20:45):画像の両端をクリックしたら次(前)の画像を表示することになったのだが、デフォルトの状態では、サムネイルが「フルサイズの画像と同じサムネイルが透過なしで、その他のサムネイルは透過している」状態。
デザインとしては逆で、「フルサイズの画像と同じサムネイルが透過していて、その他のサムネイルは透過なし」にしたい。
そのため、jquery.pikachoose.jsを3箇所書き換えた。

Posted in javascript, jQuery | Leave a comment

jQueryでブロック全体をリンク領域にする

jQueryでブロック全体をリンク領域にします。
今日、久しぶりに使って別タブで開く方法のコードが思い出せなかったのでメモ。

改めて検索して、こちらの記事を参考にさせていただきました。
jQuery:リンクのクリック領域をブロック全体にする簡単なスクリプト | THE HAM MEDIA BLOG
http://h2ham.seesaa.net/article/116517804.html

jQueryを読み込んでおいて、以下のように記述します。

html

javascript

別タブで開く場合

Posted in javascript, jQuery | Leave a comment