‘WEBデザインの小技’ Category

画像の直リンクを防ぐ方法

アクセス解析等と見ていると、フリー素材として配布している素材に直リンクがすごく多いんですよね~・・
一応、「直リンクはしないで下さい」と、注意事項に書いてはいるものの、無駄なようです。

特に海外サイトからやられているよう・・・

で、アクセス制限をして画像への直リンクを防ぐ方法です。

サイト全てにアクセス制限をしてしまうと、HTMLファイルにも制限がかかるので
GIF・PNG・JPEGの3種類のファイルのみを対象にします。

「.htaccess」というファイルを作り、対象ファイルを限定する記述を加えます。

まずは、メモ帳でいいので、以下のように記述します。

<Files ~ "\.(gif|png|jpg)$">
SetEnvIf Referer "^http://bluegreen\.jp" ShowOK
SetEnvIf Referer "^http://www\.bluegreen\.jp" ShowOK
SetEnvIf Referer "^$" ShowOK
order deny,allow
deny from all
allow from env=ShowOK
</Files>

メモ帳に保存したら、「 htaccess.txt 」とファイル名で保存し、 FTPソフトでアップロードする際に、ファイル名を「 .htaccess 」に変更して下さい。

最後の行の末尾は必ず改行をして下さい。(改行しないと動かない場合があります。)

~ 書き換え ~
■1・2行目 ・・・ 許可するURLを入れます。

SetEnvIf Referer "^http://bluegreen\.jp" ShowOK
SetEnvIf Referer "^http://www\.bluegreen\.jp" ShowOK

Referer(参照元)に 「http://bluegreen.jp」という文字列が含まれていた場合に
画像ファイルを表示するという意味になります。

外部サイトからの直リンクだと、Refererには外部サイトのURLが含まれてしまうので、その場合は画像が表示されなくなるというわけです。
2行目にはwwwありの場合のURLも入れておきます。

画像配布をしている素材屋さんなんかは、直リンクをされるとサーバーに負担がかかったりするので、入れておいた方が良いかもしれませんね♪

にほんブログ村 デザインブログ Webデザインへ
↑WEBデザインブログランキングです
良かったら応援お願いします♪


にほんブログ村 デザインブログ Webデザインへ
↑ブログランキングに参加しています♪よかったらクリックしてくださいね

このエントリをTwitterに追加このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加

WWWありとなしのどちらかに統一

同じサイトでも、「wwwwあり」と「wwwなし」では検索エンジンは「別サイト」として認識してしまうらしいです。

ドメインを取って、サイトを公開したらどちらかに統一しておいた方が良いですね!
せっかく色んなサイトからリンクを貼ってもらうのに、もったいないです。

特にSEO的に良くないので、htaccessを使って、すぐに回避しましょう。
そのhtaccessを簡単に出力してくれるサイトです。

htaccess Editor

「WWWあり・なし統一」をクリックしてURLを入れます。

htaccess

すると、下にこのような画面が出ます。

結果

このソースをコピーして「.htaccess」として保存。
サーバーにアップロードします。

そうすると、希望しない方にアクセスがあった場合は希望のアドレスへ飛ばしてくれます。

にほんブログ村 デザインブログ Webデザインへ
↑WEBデザインブログランキングです
良かったら応援お願いします♪


にほんブログ村 デザインブログ Webデザインへ
↑ブログランキングに参加しています♪よかったらクリックしてくださいね

このエントリをTwitterに追加このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加

WordPressアクセス解析プラグイン

ブログを設置したら、一体どれだけのアクセスがあるのか知りたいですよね?
という事で、ワードプレスに簡単に設置できるアクセス解析がないか調べたところ、
StatTraqという便利なプラグインがあったので、早速設置してみました。

 インストール自体も簡単で、日本語版なのですぐに設置できました。
ちゃんと解析できるかどうか、しばらく使ってみて様子をみようと思います。

にほんブログ村 デザインブログ Webデザインへ
↑WEBデザインブログランキングです
良かったら応援お願いします


にほんブログ村 デザインブログ Webデザインへ
↑ブログランキングに参加しています♪よかったらクリックしてくださいね

このエントリをTwitterに追加このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加

WordPress2.5 画像アップロード不具合

新しくお客さまのサーバーに設置したwordpress2.5で、投稿時に画像アップロードが出来ず、こんなエラーメッセージが出てきました。

ディレクトリ…/wp-content/uploads/2008/04 を作成できませんでした。この親ディレクトリのアクセス権はサーバーによる書き込みを許可していますか ?

パーミッションを変更してみようと思い、サーバーの中をみたのですが
「uploads」というフォルダがなかったので手動でフォルダを作成し、言われた通りにパーミッションを変更。

が、しかし・・・

ファイルのアップロードに失敗しました。

みたいなエラーメッセージで、はやり上手く行かない。
サーバー側を見てみると、確かにフォルダは作成されており、画像もアップロードされているようなのが・・

そこで調べてみたのですが、以下の回避方法を見つけたのでメモです。

WordPress2.5の画像アップロード不具合の解消

修正対象ファイル:/wp-admin/includes/media.php
修正場所:817行目
修正前:debug:false.

(↓flaseの後の赤いコンマを削除)

修正後:debug:false

修正対象ファイル:/wp-includes/js/swfupload/handlers.js
修正場所:99行目
修正前:debug:.animate({minHeight:0,height:36,}, 400, null, function(){jQuery(this).children(’.describe’).remove()})

(↓height:36の後の赤いコンマを削除)

修正後:debug:.animate({minHeight:0,height:36}, 400, null, function(){jQuery(this).children(’.describe’).remove()})

これで、投稿時の画像アップロードが出来るようになりました!

にほんブログ村 デザインブログ Webデザインへ
↑WEBデザインブログランキングです
良かったら応援お願いします


にほんブログ村 デザインブログ Webデザインへ
↑ブログランキングに参加しています♪よかったらクリックしてくださいね

このエントリをTwitterに追加このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加

Dreamweaverでテキストを一気に変更

サイト内で何度も出てくる同じ文字を全て一気に変更したい時に便利な
Dreamweaverの機能です。

例えば、全てのページのフッターに「copyright (C)2006 」の文字があったとします。
年度が変われば、「copyright (C)2007 」になりますよね。
全部のページをいちいち変更していくのは、結構面倒な作業になるので
Dreamweaverの「検索/置換」機能で一発で変更しちゃいます。

「編集」→「検索/置換」を選択します。
Dreamweaver検索/置換

「検索および置換」というウィンドーが開きます。
1)「検索対象」で「フォルダ」を選択。
2)「検索」で「テキスト」を選択
※この時、ソースを変更したい場合は「ソースコード」を選択
3)置き換える対象が入っているフォルダを選択
※ここで選択したフォルダ内にあるものが置き換えされます。
4)「検索」に現在のものを、「置換」に置き換えたい文字を入れる
5)「全て置換」を選択

Dreamweaver検索/置換2

これで、指定したフォルダ内のテキストが全て置換えられるので後は
アップロードで完了です!

一回置換してしまうと取り消しできなくなるので、不安な場合は
「すべて検索」を一旦クリックし、「結果」を確認したあと、右クリックで
「検索置換」へ戻り、「全て置換」を選択します。

ちなみに私は今までずっと何年も・・・
「けんさく・おきかえ」と読んでいましたが、最近セミナーで「けんさく・ちかん」と読むと知りました~(^^;)

にほんブログ村 デザインブログ Webデザインへ
↑WEBデザインブログランキングです
良かったら応援お願いします♪


にほんブログ村 デザインブログ Webデザインへ
↑ブログランキングに参加しています♪よかったらクリックしてくださいね

このエントリをTwitterに追加このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加

Dreamweaverでバリデート

バリデートとは、(X)HTML文法のチェックをすることで、閉じタグの忘れがないかとか、間違ったソースがないかなどをチェックすることです。
以前は、サイト構築をしてからAnother HTML-lint gatewayというサイトでチェックしていたのですが、ローカルでも確認できる方法がないかな~と、思っていました。
で、Dreamweaverにもこの機能があることを発見!!
なんと、こんな所にあったんですね!
しかも、「サイト全体のチェック」まで可能です。
これで「エラーや警告は見つかりませんでした」と結果表示されると、何だかめっちゃ嬉しい気分になります♪Dreamweaverでバリデート
にほんブログ村 デザインブログ Webデザインへ
↑WEBデザインブログランキングです
良かったら応援お願いします♪


にほんブログ村 デザインブログ Webデザインへ
↑ブログランキングに参加しています♪よかったらクリックしてくださいね

このエントリをTwitterに追加このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加