管理画面などにて画像が切り替わらない場合の対処法

2014-08-14 21:18:59
管理画面で画像を変更する処理をした際に、変更後の画面で画像がキャッシュのせいで古い状態のままになることがある。その場合の一番簡単な方法は、画像にランダムなパラメータを付け、新しい画像だとプラウザに認識させるといい。 phpStart $rand = rand(0,999999); echo ''; phpEnd これは管理画面での基本的なテクニックなので、必ず覚えておかないといけない。 ...続きを見る
カテゴリ: PHP

ファイルやディレクトリのパーミッションを一括で変更する方法

2013-07-28 16:57:37
レンタルしていたサーバー屋が廃業するということで、サイトのお引越しをせざるを得なくなってしまった。 ポータルサイトの引越しの際、ユーザーが管理画面からアップロードしたデータを新しいサーバーに移動した際に、パーミッションが初期状態になってしまった。パーミッションを変更しなければ、管理画面から変更ができなくなってしまう。 ディレクトリは【755】から【777】へ ログファイルは【644】から【666】へ変更しなくてはいけない。 普通ならFTPソフトで変更すれば終わりの話なのだが、ディレクトリが1000ファイル以上あり、各ディレクトリには無数の画像ファイルが存在し、FTPでの手作...続きを見る
カテゴリ: その他

外部サイト(他ドメイン)のファイル存在確認

2013-05-05 00:42:00
画像ファイルがあるかないかを判断して、必要に応じてノーイメージ(now printing)を表示する時などに使用するファイル存在確認の代表的関数file_exists()。 phpStart $path = './log/item/12345.jpg'; if(file_exists($path)){ $img = $path; }else{ $img = '/img/noimage.jpg'; } phpEnd しかし、自サーバーならfile_exists関数でファイルがあるかないかを判断できるが、他ドメイン&他サーバーでは使用できないので、その場合はget_hea...続きを見る

ボタンを押したらローディング画面を表示する

2013-04-30 01:36:10
管理画面で時間のかかる処理(例えば画像や動画などをアップロードする際)をする場合、画面が固まってしまったと勘違いされて閉じられたり、ボタンを何度も押されてバグを発生させてしまうこともあるかもしれない。 そこで、ローディング画面を表示して、ユーザーに「現在処理中ですよ」と知らせる必要があるのである。jQueryにローディング画像が必要のない便利な「Activity Indicator」というライブラリがあるので紹介しよう。 まずは、jQuery本体とcssを読み込む。#loadingは画面いっぱいにちょっと暗くするための箱。 htmlStart htmlEnd ...続きを見る

QRコードを手っ取り早く作る方法

2012-11-02 10:06:42
Google Chart APIを利用すればたった一行でQRコードが作れます。 htmlStart http://chart.apis.google.com/chart?chs=《サイズ》&cht=qr&chl=《URLやメールアドレスなど》 htmlEnd 画像タグに上記のコードを記載するだけ。 htmlStart htmlEnd パラメータの「chl」には日本語を使うこともできます。mailtoタグと同様で日本語を使う場合は文字化けの対処をしないといけないので、文字コードをパラメータの「choe」で指定しないといけない。 QRコードは携帯やスマホで読み取られるの...続きを見る
カテゴリ: PHP

SQL(データベース)で数値の先頭のゼロを消さない方法

2012-09-28 07:08:48
データベースに整数(数値)データを格納する際に先頭に0(ゼロ)が付いていると勝手に消されてしまいます。郵便番号はゼロから始まることがよくあるので、ゼロは必ず残さないといけません。 では早速ゼロを残す方法を記載します。下記の画像を見てください。 種別をINT型(整数型)にして、属性を「UNSIGNED ZEROFILL」にし、あとは長さを記入するだけです。 もう一つの邪道な方法としてはデータ型を整数ではなく文字列型の「varchar」にするというやり方もありますが、文字列型より整数型のほうが検索速度が速いのでオススメできません。なので、郵便番号はハイフンなしで整数型にしてデ...続きを見る
カテゴリ: PHP

Opacityをほとんどのブラウザで使えるようにする

2012-08-22 07:20:06
ロールオーバー用の画像を作るのが面倒な場合に活躍するオパシティー。 htmlStart a:hover img{ filter:alpha(opacity=25); -moz-opacity:0.25; opacity:0.25; } htmlEnd 数値は「0~100」「0~1」までの間で、数値が低いほど透明度が強くなります。なので、0にすると画像は見えなくなります。...続きを見る
  • 関連タグ:
カテゴリ: CSS

画像の保存形式について

2012-08-16 20:58:34
現在、WEBの画像ファイルはJPG(ジェイペグ)・GIF(ジフ)・PNG(ピング)の3つが標準規格で一般的に使用されている保存形式です。 それぞれ違う特徴があるので、ちゃんと知っておけばサイトの高速化を計ることが出来ます。画像はなるべく綺麗にできるだけ軽い容量で保存することが大切で、画像の容量が軽ければWEBページの表示速度が上がりますし、重ければ表示に時間がかかってしまいます。PCサイトでは気にならないかもしれませんが、通信速度の遅いモバイルやスマホ版のサイトでは表示速度が大きく違ってきます。 サンプル画像の上段は写真画像のケースの出力結果です。3つともほぼ見た目が変わりませ...続きを見る
カテゴリ: WEBの知識

【フリー素材】スマホ用ボタン素材

2012-08-12 19:38:59
スマホ用素材をネットで探しましたが、なかなか大きいサイズのものがなかったので、結局自分で作っちゃいました。スマホは解像度がPCより2倍大きいので、例えば300pxのボタンを設置する場合は600pxの画像を使わないと画質がにじんでしまいます。指でボタンを押すのでボタンを大きく作るのがスマホサイトの基本ですね。 <スマホで画像を綺麗に表示する> htmlStart htmlEnd <スマホで背景を綺麗に表示する> htmlStart sample htmlEnd ダウンロード[PNG] ダウンロード[PSD] ※自由に使っていただいてかまいませんが、再配...続きを見る
カテゴリ: WEB素材

写真をイラスト風に加工する

2012-08-10 09:32:32
今一番売れてるバラドルの大島麻衣の写真を元にPhotoShopでイラスト風に加工しました。やり方は下記の参考サイトをご覧下さい。写真付きですごく分かりやすく説明されています。 ザッと言葉だけで説明すると、元画像を3枚ほど複製して、それぞれにカットアウト・鉛筆・輪郭検出のフィルター加工をし、加工したレイヤーを乗算やスクリーンなどのレイヤースタイルにして元画像になじませるというものです。 写真素材に困ったときはイラスト風に化けさせれば、タレントの画像を使っちゃっていいかも!?元がばれなければね。ただ、写真をイラスト調にするとサイト全体をイラスト調のデザインにしないと統一感がとれなく...続きを見る
カテゴリ: photoshop

【フリー素材】フォーム用のボタン

2012-08-09 03:04:20
個人的に好きな色のボタンを3パターン作りました。CSS3で表現できるものですが、IEが対応していないので、グラデーションや角丸はまだまだ画像を使っていった方が無難ですよね。ボタンの文字を編集したい方もいると思うのでPSDファイルもアップしてあります。 ダウンロード[PNG] ダウンロード[PSD] ※自由に使っていただいてかまいませんが、再配布はご遠慮ください。 ...続きを見る
カテゴリ: WEB素材

thickboxでダイアログを表示する

2012-08-08 13:00:08
Jqueryのプラグインであるthickboxを使ってダイアログを表示してみよう。まずはheadタグ内でjqueryを読み込んだ後にthickbox.jsを読み込む。順番が逆だと動きません。 htmlStart htmlEnd あとはテキストリンクにclass指定でthickboxを宣言し、リンクを貼るだけで設置完了です。リンクのパラメータにはheightとwidthを必ず指定しなければいけません。リンク先はHTMLや画像、PHPでさらに独自のパラーメーターを付け足すことも可能です。 <テキストリンク~ダイアログ表示> htmlStart サンプル htm...続きを見る
カテゴリ: Javascript

あると便利なリスト用アイコン

2012-08-04 04:13:26
画像をダウンロードして、フォトショップで切り抜き加工をして使ってください。CSSの宣言方法も記載しておきます。 <HTML> htmlStart サンプル1 サンプル2 htmlEnd <CSS> htmlStart ul.listMark li{ background:url(/img/list.gif) 0 2px no-repeat; padding-left:15px; } htmlEnd 背景ポジション(0 2px)←この部分はline-heightの設定値により数値の調節が必要になります。ポジションの数値はマイナスの値も使えます。 ...続きを見る
カテゴリ: WEB素材

floatの回り込み解除にclearfixを使う

2012-08-04 02:47:58
<サンプル> ヘッダーなどでサイトロゴの横にバナーを置く時に回り込みの解除が必要になってきます。背景画像があるカラムの中でfloatを使って回り込みをすると、背景画像が表示されなくなります。そこで背景画像を指定しているタグにclearfixを使えばちゃんと背景が表示されるようになります。clearfixは便利なのでサイト毎に必ず宣言しています。オーストラリア人のTony Aslettという方が、cleafixを考案したらしい。 <CSS> htmlStart .cf:after{ content: "."; display:block; clear:both; he...続きを見る
カテゴリ: CSS