ふじてん tag:www.fujiten.jp,2009-05-09:/2 2011-03-08T04:26:40Z WEBサイト構築等に、あると便利なツールの紹介と話です Movable Type Pro 4.27-ja おしゃれはエラーページから♪ tag:www.fujiten.jp,2011://2.123 2011-03-08T06:19:53Z 2011-03-08T04:26:40Z エラーページもサイトデザインに合わせるとおしゃれかも♪... 素材サーチふじてん http://www.fujiten.jp/ エラーページもサイトデザインに合わせるとおしゃれかも♪
「403 Forbidden」ページのアクセス権がない
「404 Not Found」ページが見つからない

このエラーは良く見かけますよね。
ふじてんみたいにCGIを多用してると「500 Internal Server Error」 なんてのも・・・

で、エラーページは使ってるサーバーのページが表示されるわけですが、あまりセンスよくないですよね♪
そこでお洒落なあなたのサイトはエラーページにもこだわってみましょう♪

「素材は直リン禁止です♪」で紹介した方法も「403 Forbidden」を返しますので 直リン禁止専用のエラーページを作ることもできます。

まず、表示したいエラーページを先につくりサーバーにアップし、間違いなく表示されることを確認しておきます。 これは「.htaccess」で指定したファイルがない場合、リダイレクトループが発生しサーバーに負荷をかけてしまう事を避けるためにも重要です。

【.htaccessの書き方と設置】

ErrorDocument 403 アップしたエラーページへのパス
ErrorDocument 404 アップしたエラーページへのパス

の2行だけです、他のエラーページも表示する場合は書き足してください。
ふじてんの例ですと「file_not_found」フォルダを作りその中にファイルがあるので

ErrorDocument 403 http://www.fujiten.jp/file_not_found/403.html
ErrorDocument 404 http://www.fujiten.jp/file_not_found/404.html

となります。

【注意点】
  1. スペースは半角
  2. 最後の行の末端で必ず改行する

書けたら「.htaccess」の名前で保存してサーバーにアップするのですが、サーバーによっては「.htaccess」の名前でアップできない場合があります。

その時は一旦ファイル名を「htaccess.txt」等に変更してアップし、サーバー上で「.htaccess」にリネームしてください。

パーミッションは「644」「604」でサーバーによって違いますので確認して下さい。
アップする場所はサイト全体のエラー表示ならルートに置きます。特定のフォルダだけに対する場合はそのフォルダ内に設置してください。

ご自分のURLの最後に適当な文字列を入れてエラーページが表示されることを確認して下さい。「500エラー」の場合「.htaccess」の記述ミスが考えられますので見直してください。

設置は慎重に自己責任でお願いしますね♪ ]]> 素材は直リン禁止です♪でドッキ★どき♪ tag:www.fujiten.jp,2011://2.121 2011-03-06T23:41:43Z 2011-03-08T04:52:59Z 規約違反の中で一番困るのが実害のある「素材への直リン」ではないでしょうか？... 素材サーチふじてん http://www.fujiten.jp/ 規約違反の中で一番困るのが実害のある「素材への直リン」ではないでしょうか？
画像の入ってるフォルダに「.htaccess」をひとつ置くだけで外部リンクは防げます。

無料サーバーの場合は「.htaccess」の使用ができないのですが、ほとんどの無料サーバーは外部からの画像へのリンクが出来ない仕様ですので直リンされる心配はないですね。

有料サーバーの場合はまず「.htaccess」の使用はできますが、念のためサーバーのマニュアル等で必ず確認して下さいね♪

「.htaccess」ファイルとは何か？の説明は省きますが、興味のある方は「.htaccessとは」「.htaccess 使い方」等で検索してくださいね、一杯ありますので♪

【書き方と設置】
エディタで次の5行を書きます。

SetEnvIf Referer "^http://www\.fujiten\.jp" ShowOK
SetEnvIf Referer "^$" ShowOK
order deny,allow
deny from all
allow from env=ShowOK

【注意点】
  1. 最後の行の末端には必ず改行を入れる
  2. URLは必ず「http://」から書く
  3. URLの前にハットマーク「^」を付ける
  4. URLのドット「.」の前にバックスラッシュ「\」を付ける
上の記述をコピペしてURLだけご自分のURLに書き換えでokです。
1は改行が入ってないとエラーを起こしますので重要です。
3と4はなくても動くのですがスキルのある人には突破されますので付けるようにしてください。

書けたら「.htaccess」の名前で保存してサーバーの画象のあるフォルダにアップするのですが、サーバーによっては「.htaccess」の名前でアップできない場合があります。

その時は一旦ファイル名を「htaccess.txt」等に変更してアップし、サーバー上で「.htaccess」にリネームしてください。

パーミッションは「644」「604」でサーバーによって違いますので確認して下さい。終わったら画象URLをブラウザに直接入力して確認して下さい、表示してしまうときはキャッシュが原因ですので、リロードかキャッシュをクリアして試してください。

【画像ファイルとHTMLファイルが同じフォルダにある場合】
上記のままですとHTMLもリンクできなくなってしまいますので、リンク禁止ファイルを指定します。
「jpg」「gif」「png」だけを禁止する場合は

<Files ~ "\.(jpg|gif|png)$">〜</Files>で括ります

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

それ以外にも禁止したいファイルがある場合は禁止したい拡張子を追加してください

【注意点２】

設置したことにより「500 Internal Server Error」が出る場合はファイルの記述ミスが考えられますのでファイルを見なおしてください。

記述ミスによっては無限ループになりサーバーダウン等の重大な問題を引き起こすこともあり得ますので取り扱いには十分注意し、すべて自己責任で行なってくださいね♪]]> メールアドレスを暗号化してスパム対策 tag:www.fujiten.jp,2011://2.119 2011-03-05T00:34:06Z 2011-03-04T22:34:08Z メールアドレスを収集するソフトは、@「アットマーク」の前後をアドレスと認識して探... 素材サーチふじてん http://www.fujiten.jp/ メールアドレスを収集するソフトは、@「アットマーク」の前後をアドレスと認識して探し出すそうです。
@を全角にしたり★印にしたりするのも良いのですが、一般ユーザーに迷惑がかかります。

そこでこの【HTMLエンティティ生成】ソフトの登場です。

例えば、「fujiten@test.jp」というアドレスをエンティティ化すると
「&#x66;&#x75;%6A&#x69;&#116;e&#110;&#x40;&#x74;e%73&#116;&#46;jp」
となります。
この文字列をソースに書きブラウザでみると「fujiten@test.jp」となるわけです。

これなら一般ユーザーに迷惑がかからず収集ソフト対策ができそうですね。

ソフトは何種類かあるのですが有料だったり、インストールして使うタイプだったので ちょっと古いのですが【HTMLエンティティ生成 Ver2.10】を選んでみました。

作者さんのページ■オンラインソフトAppli Box ＆ Cup ■

通常版とインストール版がありますので、インストールして使いたい方は【インストール版】を、インストールに抵抗のある方は【通常版】をクリックしてください。 どちらも【Vector】のダウンロードページに移動します。 html.gif

【インストール版】はダウンロードしたファイルをクリックしてインストールしてください。
【通常版】はダウンロードしたファイルを適当な場所に解凍してそのまま使えます。 html_02.gif

とてもシンプルなインターフェースですのでマニュアルをみなくても使えますが、念のため目をとおしましょう♪ html_03.gif マニュアルでは対応がXPまでになっていますがWindows7（64bit）でも問題なく使えています♪

でも、でもご利用は自己責任で計画的（？）にお願いしますね♪ ]]> ページトップへ滑らかにスクロールさせる tag:www.fujiten.jp,2011://2.118 2011-03-04T07:58:42Z 2011-03-05T18:28:19Z ページトップにスクロールさせる方法はいろいろありますが、jqueryを使うと簡単... 素材サーチふじてん http://www.fujiten.jp/ ページトップにスクロールさせる方法はいろいろありますが、jqueryを使うと簡単に、しかも滑らかにスクロールができます。
まずjquery本体とscrolltopcontrol.js、戻るボタンに使う画像を用意します。

最初にjquery本体を
公式サイト ■http://jquery.com/■へ行き入手します。

画面上部に表示されている「Download」をクリックします jquery_01.gif

次のページで少しスクロールすると「Current Release 」とあり、ここに最新バージョン、その下に過去バージョンがあります jquery_02.gif それぞれに「Minified」と「Uncompressed」がありますがどちらも同じです。ソースの確認をするなら「Uncompressed」が見やすいのですが使うのなら少し軽い「Minified」がいいと思います。

「Minified」を右クリックして「名前をつけてリンク先を保存」をクリックして保存します jquery_03.gif



次に■http://www.dynamicdrive.com/■でscrolltopcontrol.jsを入手します。

少しスクロールしたところに「scrolltopcontrol.js」と矢印の画像がありますので、両方共右クリックで保存します jquery_04.gif

これで「jquery-1.5.1.min.js」「scrolltopcontrol.js」「画像」と必要なものが揃いましたので、いよいよサーバーにアップします♪、、、且⊂(ﾟ∀ﾟ*)ｳﾏｰ

一服が終わったらアップしましょう♪

適当なフォルダーを作り「jquery-1.5.1.min.js」「scrolltopcontrol.js」「画像」を入れサーバーにUPします。フォルダー名は分かりやすいように「js」等がいいでしょう（属性の変更は必要ありません）

次にスクロールさせたいページの<head>〜</head>の間に

<script type="text/javascript" src="アップしたフォルダへのパス/jquery-1.5.1.min.js"></script>

<script type="text/javascript" src="アップしたフォルダへのパス/scrolltopcontrol.js"></script>

の2行を書き加えます。

書き換えたファイルをアップして動作確認をしてみましょう♪

どうですか？右下（デフォルト）の画像をクリックしてTOPへスクロールしたでしょうか？

動作確認ができたら「scrolltopcontrol.js」の数値を色々変更して自分好みにしてください。、11行目あたりで設定変更できます。

【startline:100】
どれだけスクロールしたらボタンが現れるかを設定します、「0」で最初から表示、数字を大きくすればスクロールしてから表示されます。

【scrollto:0】
初期設定は0=topです。数字を大きくすると戻り先が下がります。また任意の戻り先(id)を指定できます。
戻り先を文字で指定する場合はシングルクオーテーション「'」で括ります scrollto: '指定する文字列'　　#は不要です。

【scrollduration:1000】
TOPへ戻る速度を指定します、大きくするとゆっくリに、０で瞬間です

fadeduration:[500, 100]
画像のフェードイン/アウトの所要時間の設定です、この機能を使うには画像が「png」であることが必須です。

【offsetx:5, offsety:5】
画像の表示位置の微調整です、大きく変える場合は後ろの文章を変更したほうが早いです。

最後に画像を好きなものに変更しましょう。

画像の変更、フォルダ変更するときは12行目の【controlHTML】の変更も忘れずにね♪

動作確認済ブラウザ
【Firefox3.6】【Google Chrome9】【IE8】]]> 気になる色のカラーコードを簡単に取得する tag:www.fujiten.jp,2011://2.120 2011-03-03T02:16:13Z 2011-03-05T03:32:44Z PC画面上、WEBサイト閲覧中に気になる色があった時に簡単にカラーコードが取得で... 素材サーチふじてん http://www.fujiten.jp/ PC画面上、WEBサイト閲覧中に気になる色があった時に簡単にカラーコードが取得できます。
インストールの必要がなく解凍してそのまま使えます。使い方はとても簡単、ソフトを起動して調べたい色の上にマウスを置くだけ♪ スペースキーでコードの固定ができます。

レジストリをいじらないのでアンイストールもフォルダごと削除するだけのお手軽ソフトです、是非使ってみてください♪

ダウンロード先　【vector】

解凍したフォルダの中はこれだけ♪ ps_01.gif

windows7でも問題なく動作していますが何故か文字化けが・・・
XPは文字化けする場合としない場合があるようです ps_02.gif

ps_03.gifXPでのスクリーンショットです
文字化けしてても問題ないようなので気にしないことにします♪]]> アップロード先のフォルダーを固定する tag:www.fujiten.jp,2011://2.102 2011-02-02T14:19:19Z 2011-03-17T10:15:21Z tmpl/cms/include/asset_upload.tmpl asset... 素材サーチふじてん http://www.fujiten.jp/
asset_upload.tmplの一行目に
<$mt:setvar name="extra_path" value="フォルダ名"$>を追加 ]]> ページ分割（MT5専用） tag:www.fujiten.jp,2010://2.129 2010-11-21T09:36:03Z 2011-03-17T14:42:29Z 素材サーチふじてん http://www.fujiten.jp/
<div align="center" id="page_bute">
<font style="FONT-SIZE: 1.2em">
<MTIfPageBefore>
<$MTPageBefore delim="前のページ"$>
</MTIfPageBefore>
<$MTPageLists delim="｜"$>
<MTIfPageNext>
<$MTPageNext delim="次のページ"$>
</MTIfPageNext>
</font>
</div>
<MTPageContents count="2">
   <mt:Entries limit="$limit">
<$mt:Include module="ブログ記事の概要"$>
   <$MTPageSeparator$>
   </mt:Entries>
   </MTPageContents>

<div align="center" id="page_bute">
<font style="FONT-SIZE: 1.2em">
<MTIfPageBefore>
<$MTPageBefore delim="前のページ"$>
</MTIfPageBefore>
<$MTPageLists delim="｜"$>
<MTIfPageNext>
<$MTPageNext delim="次のページ"$>
</MTIfPageNext>
</font>
</div>

]]>

<MTPageContents count="10">
<MTEntries>
<MTPageContentsHeader><dl></MTPageContentsHeader>
<dt><$MTEntryTitle$></dt>
<dd><$MTEntryExcerpt$></dd>
<MTPageContentsFooter></dl></MTPageContentsFooter>
<$MTPageSeparator$>
</MTEntries>
</MTPageContents>
<MTPageEmpty><p>記事は未登録です</p></MTPageEmpty>
<MTIfPageBefore>
<span><$MTPageBefore delim="前の10件"$></span>
</MTIfPageBefore>
<$MTPageLists$>
<MTIfPageNext>
<span><$MTPageNext delim="次の10件"$></span>
</MTIfPageNext>

<MTPageContents>〜</MTPageContents>
区切りたい部分（Entriesなど）を囲むタグ。
このタグに囲まれた部分は、countで指定した件数ごとに区切られて表示される。

count="*"
MTPageContentsのアトリビュート。*部分に任意の数字を入れることで、区切る単位を指定。指定しない場合は10件。navi_count="11" 3.xxにて実装。MTPageListsで出力されるページリンク数を変更する為のアトリビュート。指定しなかった場合は11が初期値。

<$MTPageSeparator$>
MTPageContents内に記述、分割する位置を指定。

<$MTPageLists$>
各ページへのリンク

delim="*"
MTPageListsのアトリビュート、ページ番号とページ番号の間の区切りの指定が可能。指定しない場合は &nbsp; が入る。

link_start="<li>" New!
各ページへのリンクや現在のページ番号を表示する前に指定された文字列を挿入。通常link_closeと併せて利用、指定されなかった場合には何の文字も挿入されない。MT4.x でのみ動作確認済み

link_close="</li>" New!
各ページへのリンクや現在のページ番号を表示する前に指定された文字列を挿入。通常はlink_startと併せて利用、指定されなかった場合には何の文字も挿入されない。MT4.x でのみ動作確認済み

show_always="0" New!
 0 を指定すると、分割されたページが 1 つにしかならなかった場合、ページリストの 1 を表示しい。デフォルト設定は従来と同じ動作のため 1 が指定されたものとする。

<MTIfPageFirst>〜</MTIfPageFirst>
2ページ以降の場合、1ページへ戻るためのリンクが出力。

<MTIfPageBefore>〜</MTIfPageBefore>
前のページが存在する時に、本タグ内に書かれた内容が出力。

<MTIfPageNext>〜</MTIfPageNext>
次のページが存在する時に、本タグ内に書かれた内容が出力。

<MTIfPageLast>〜</MTIfPageLast>
2ページ以上ある場合、最後のへ戻るためのリンクが出力。

<$MTPageFirst$>
最初のページへのリンクを出力。

<$MTPageBefore$>
前のページへのリンクを出力。

delim="*"
前のリンクへの表示部分を指定可能です。指定しない場合は &lt;&lt が入る。

<$MTPageNext$>
次のページへのリンクを出力。

delim="*"
次のリンクへの表示部分を指定可能です。指定しない場合は &gt;&gt; が入る。

<$MTPageLast$>
最後のページへのリンクを出力。

<$MTPageCount$> (3.4.0-)
現在のページ番号(1以上)を出力。

<$MTPageMaxCount$> (3.4.0-)
最大のページ番号(1以上)を出力。

<MTPageContentsHeader>〜</MTPageContentsHeader> (3.5.0-)
ページ分割後の各ページ内で最初のコンテンツの場合に有効になるブロック。 　　　　　　　　　　
※MTPageSeparatorより前に記述すること。また、MTPageContents内のMTEntries等のブロック内に指定。

<MTPageContentsFooter>〜</MTPageContentsFooter> (3.5.0-)
ページ分割後の各ページ内で最後のコンテンツの場合に有効になるブロック。 　　　　　　　　　　
 ※MTPageSeparatorより前に記述してください。また、MTPageContents内のMTEntries等のブロック内に指定。

<MTPageEmpty>〜</MTPageEmpty> (3.5.0-)
 MTPageContents内の記事、コメントなどが一件も無い場合、MTPageEmptyで指定された内容をMTPageContentsの場所で表示。

<MTIfPageNoEmpty>〜</MTIfPageNoEmpty> (3.5.0-)
MTPageContents内の記事、コメントが一件でもある場合に有効になるブロック。逆に一件も無い場合はブロック内は表示されない。 MTPageContentsやMTPageEmptyの外で利用。また、この条件タグは複数指定できるが入れ子指定は出来ない。]]>