(2006/12/05) いいのか?コレで・・・( ̄∀ ̄;) (No.255)
(2006/10/27) アクセス制限・・・なのかな? (No.241)
(2006/10/11) 戻りたい?戻りたくない?? (No.228)
(2006/10/05) TOPへの戻り方 (No.223)
(2006/09/11) トラックバック先のサムネイルを表示してみる? (No.203)
(2006/08/29) コメント投稿時のプレビューする?って機能 (No.179)
リンクを表示しているトコがガクガクブルブル震え出すってモノを拾ってきたりしました(・∀・;)
oitake blog | ブルブル!(ブルブル 4)
「ブルブル!」は、マウスカーソルをテキストリンクから外すと、リンクの1文字1文字をブルブルさせるJavaScriptです。その点は、初代「ブルブル」から変わりありません。特長を列挙します。
・インストールするだけで全てのテキストリンクがブルブルします。
・ソースコードのユーザー定義変数(■で始まるコメントの直下にある変数)を変更することで、ブルブルの挙動をカスタマイズできます。
・ユーザー定義変数「brbr.f」にtrueを設定することで、class属性値に「brbr」と設定されたリンクにのみ反応するようになります。oitake blogより引用
これはデフォルトのままで実装していますが、もうチョイ手を加えて面白みを残しつつ実用的にしていきたいと思います。
プラグインのリンク先とかはもうメチャクチャ(爆)
でもチョット面白い・・・( ̄m ̄*)
ウチはさして困る状況にはなく、TBも英文のみは拒否という忍ブロの設定のみで対応が可能な程度です。
それでも以前、HPを公開していた頃にアクセス制限を設けたいと思ったコトがありました。
ソコで活用していたのが.htaccessでした。
.htaccessとは - 意味・解説 : IT用語辞典 e-Words
ApacheなどのWebサーバで使用できる、Webサーバの動作をディレクトリ単位で制御するためのファイル。
具体的には、CGIやSSIなどを実行するための宣言(命令)や、拡張子ごとにファイルタイプを指定するMIMEタイプの設定、ユーザ認証、IPアドレスやドメイン単位でのアクセス制限などを書き込むことができる。
.htaccessファイルで設定した内容は、.htaccessファイルがあるディレクトリとそのサブディレクトリに効果があり、効果があるディレクトリに入っているファイルすべてに影響をおよぼす。
また、サブディレクトリにも.htaccessファイルを別に置くこともでき、この場合は両方のファイルの効果が発生する(矛盾するときはサブディレクトリの設定を優先)。
Webサーバの設定ファイル(httpd.conf)を使用すると.htaccessファイルで設定できる内容を制限できるため、Apacheなどが動作しているサーバでも.htaccessを使用できなかったり、一部の機能しか使用できなかったりすることもある。IT用語辞典 e-Wordsより抜粋
ですが。
コレって使えないサーバーとかも多いとのことで、当時の友達から教えてもらってチョコっと使ったJavaScriptのコトをふと思い出しました。
body内に置けばOKだったハズです。
・・・といっても、スパムTBやコメントに有効な手立てだとはあまり思えませんし、私はBLOGで試したコトはナイので正常に動くかどうかすら保証できません(爆)
試される勇気のある方やわらをもすがる想いをされている方は、必ずバックアップをとってからチャレンジしてみてください。
<SCRIPT language = "JavaScript">
<!--
deniedURL = new Array();
deniedURL[0] = "禁止したいアドレス";
deniedURL[1] = "禁止したいアドレス";
for(n = 0;n < deniedURL.length;n++){
if(document.referrer.indexOf(deniedURL[n]) >= 0){
history.go(-1);
location.href = "about:blank";
}
}
//-->
</SCRIPT>
※禁止したいアドレスは、http://以下を入れます。(←http://を省くという意味です)
ただですね・・・
このスクリプトは完全なアクセス制限をするというモノではありません。
ココで指定されたサイトからのアクセスは制限される・・というダケです。
気休めにしかならないかもしれませんが、設置してみたという方がいましたらどんなカンジか知らせていただけるとありがたいです(・∀・;)
あと、もっと別案があるという方や、改良版等を発案された方等いらっしゃいましたら、教えていただけるともっと嬉しいです( ̄∀ ̄;)
それから.htaccessを設置しようとされる方や「そもそも.htaccessって何??」って方は、いろんなサイトで設置方法等をわかりやすく説明して下さってる方がいますので、ソチラを参照してみて下さい。
参考までに解説がわかりやすいなぁと思ったいくつかのサイトを挙げておきます。
・.htaccess実践活用術
・ミケネコの htaccess リファレンス
・ホームページ作成の第一歩
・.htaccessの使用法
そこでふと思い付いたネタを一つ。
戻れないボタンとかって作れないのかなぁ~って(゚▽゚;)
やってみて、BLOGでは全く持って使い道が浮かびません(爆)
ま、ネタってゆーコトで、試してみようかという方は下記のリンク先へ飛んでみてください。
リンク先は、テストページのかわりに1コ前の記事詳細ページを設定してみました。
※リンク先からブラウザの戻るボタンや右クリックのメニューからでは、現在見ているページには戻れません(爆)
HOMEのリンクできっと帰ってきて下さいねぇっ・・・(T▽T*)(笑)
だいたい使い道ナイし(爆)
・・・といいつつ、リンクに通常表示とボタン表示と2通り用意してみたり(笑)
ちなみに見ての通りなのですが、私はボタン表示の方を使用してみました。
理由は、アンカー指定だとJavaScriptを使用してしまうから。
ん~、結構ココのBLOGでも使ってしまってますが(先日のTOPへ戻るヤツとか・・)、やっぱり極力避けたいとは思ってる矛盾だらけなアタクシなのでございます(゚▽゚;)
通常(?)の表示<a href="JavaScript:location.replace('リンク先のアドレス')">「リンク先タイトル」へ</a>
ボタンでの表示<FORM><INPUT type="button" value="「リンク先タイトル」へ" onClick="location.replace('リンク先のアドレス')" style="border-style:枠線の種類; border-width:枠線の太さ; border-color:枠線の色; background:背景色; font-size:文字の大きさ; color:文字色"></FORM>
実際に私が記事で使用したソース (リンク先のアドレスのみ一部削除しています)<FORM><INPUT type="button" value="テストページ(10/9の記事)へ" onClick="location.replace('http://pavloba.blog.shinobi.jp/×××・・・')" style="border-style:solid; border-width:1px; border-color:#cc0000; background:#FFFFFF; font-size:10pt; color:#cc0000"></FORM>※青字の部分を任意で置き換えて使用して下さい
TOPへ戻る時に、スクロールして戻るかのように見せてくれるスクリプト。
いざやってみようって思ったら、ドコで見かけたんだかわからなくなって・・・。
「自力でスクリプト書けないし~

javascriptの使用ができるトコならカップ麺が出来上がる前に作業完了できます(?)
参考サイト:
ニンブロラボ. ページトップへスクロールさせる
スクリプトはコチラにあります↓
このページの先頭へ、をちょこっとおしゃれに | S i M P L E * S i M P L E
ちなみに元ネタはコチラな模様・・・(英語です)
wg:A (slightly) better technique for "Back to Top" links.
S i M P L E * S i M P L E - Smart Designs by 100SHIKI.COMさんトコにスクリプトも設置方法も載せてありますので、そちらを参照していただければいいかと思います。
・・・が、一応ってカンジでいつも通り『作業メモ』として私の設置した方法を続きに載せています。
スクリプトも置いてますので、よかったらどうぞご覧ください(゚ー゚;)
ドコでも構わないようですが、私はbody内で一番上に置いてみました。
<script type="text/javascript" language="JavaScript">
<!--
function backToTop() {
var x1 = x2 = x3 = 0;
var y1 = y2 = y3 = 0;
if (document.documentElement) {
x1 = document.documentElement.scrollLeft || 0;
y1 = document.documentElement.scrollTop || 0;
}
if (document.body) {
x2 = document.body.scrollLeft || 0;
y2 = document.body.scrollTop || 0;
}
x3 = window.scrollX || 0;
y3 = window.scrollY || 0;
var x = Math.max(x1, Math.max(x2, x3));
var y = Math.max(y1, Math.max(y2, y3));
window.scrollTo(Math.floor(x / 2), Math.floor(y / 2));
if (x > 0 || y > 0) {
window.setTimeout("backToTop()", 25);
}
}
//-->
</script>
でもって、TOPへのリンクは以下のようになります。
<a href="#" onclick="backToTop(); return false">TOP</a>
しかしながら、なんかTOPへ戻る時の動作がウチで見るとギコチなく見えるのは私ダケでしょうか?(・∀・;)
BlogPetとか、載せてるモノの具合なのかなぁ?
きっとjavascriptとか使っててややこしいんだろうと思って二の足踏んでいたのですが、チョット調べてみると実にカンタンそうなのでチャレンジしてみました。
参考サイト:SimpleAPI - ウェブサイト・サムネイル化ツール
SimpleAPIでウェブサイトのサムネイル化ツールがあるので、そのソースを入れ込むダケ(爆)
コレじゃよくわからないので、もうチョット具体的に説明をしますと・・・。
SimpleAPIのサイト内に置いてあるサムネイル生成ツールを使って見てください。
自分のサイトでもいいですし、デフォルトなままYahooでもなんでもいいです。
するとこんなソースが表示されます。
<a href="http://www.yahoo.co.jp/"><img src="http://img.simpleapi.net/small/http://www.yahoo.co.jp/" alt="" width=128 height=128 hspace=4 vspace=4 align=left border=0></a>
そしてソースの上には画像URLが表示されており、それはこんなカンジなはず。
http://img.simpleapi.net/small/http://www.yahoo.co.jp/
コレをそのまま使ってしまおうというのが、今回私の行なった作業そのものになります。
ココからサイトのサムネイルを表示させるためには
http://img.simpleapi.net/small/の後ろに表示させたいサイトのURLを続けて置くコトでサムネイルが表示されるんじゃナイの?ってコトがわかるかと思います。
この場合はhttp://www.yahoo.co.jp/が続きます。
というワケで。
実際にTB表示部分への作業に取り掛かります。
実際にテンプレートのHTMLソースを開いて、表示させたい場所にこのサムネイル生成の為のソース(または画像URL)を置けばいいというコトになります。
この場合、後ろに続けたいのはTBを送信してくれた人でしょうから、URLを直接書き込むのでは手間がかかり過ぎです(゚▽゚;)
なので、お使いのBLOGにあるトラックバック送信元のURLを示す構文を入れます。
忍ブロの場合は<!--trackback_url-->でいいかと思います。
私は上のソースを参考に、トラックバックのテキストエリア内にこんなソースを設置してみました。
<div class="TrackbackText">
<a href="<!--$trackback_url-->"><img src="http://img.simpleapi.net/small/<!--$trackback_url-->" style="float:left; margin:10px" alt="<!--$trackback_blog_title-->" width="125" height="125" /></a><!--$trackback_excerpt-->
</div>追加した部分
忍ブロ仕様な部分
ふと思って9/12に追加した部分(笑)
ただですね、問題が1つ・・・(。。;)
忍ブロのBLOGがBLOG TOPの画像になってしまうだなんて衝撃的事実が発覚

こんな自信満々にカスタマイズの説明なんてやっちゃってますケド、何か大きな欠点・欠陥があるのでしょうか(´・ω・`)
このサイトを見てカスタマイズされる方は、こんな管理人がやってますってコトをよく理解した上で、必ずバックアップをとってから作業をするようにして下さい。
切にお願いいたします・・・m(_ _)m
忍ブロでは、管理者のコメント返信用の画面上ではプレビューできるんですよね。
で、こんなカンジでプレビューできたらいいなぁと思ってはいたのですが・・・。
先日、コメント投稿ボタンに加えて「やっぱヤメ」のクリアボタンを設置する方が安易にできたモノで(・∀・;)
なんかこの上にプレビューボタンまでつけたらゴチャゴチャするなぁと懸念していたんです。
そんな矢先に!!
yozoさんトコでの『コメントプレビューを設置』の記事を見てみると、チェックボタンでプレビューするかしないかをコメント作成者が選ぶコトができるってハナシで

そういや、前にstrollさんトコで見たなぁと思ってたら、やっぱり出所はstrollさんトコでした(笑)
そんなワケで、さっそく設置をしてみました。
:::追記(8/29):::
追記記事内で紹介しているソースで、忍ブロ(新規テンプレート)用に私が書き換えた部分がわかるように明示しました

:::追記2(9/11):::
同様のコメントプレビュー設置されていたBLOGを発見しましたので、TBさせていただきました。
今日現在でTB先は以下の4件になります。
当記事の投稿時のTB
stroll::blog | コメントをプレビュー表示
yozoの気が向いたと記2.0
記事を紹介していただいた方のTB
Benjamin's Forum Site - べんじゃみんのブログ : コメントのプレビューを表示できるようにする
本日追加したTB
きまぐれ日記|ちょっぴりカスタマイズ。
テンプレートによっては異なると思いますので、是非、参考記事の方も目を通してくださいね。
参考記事:
yozoの気が向いたと記2.0(yozoさん):
『コメントプレビューを設置』
strollblog(strollさん):
『コメントをプレビュー表示』
『コメントプレビューを必要なときだけ実行するには?』
で、作業は大きく分けて3つ。
1.コメント投稿フォームで、textareaのidをつける
2.プレビューの表示部分を設置
3.プレビューを動かす為のscriptを埋め込む
ココではテンプレートの編集→HTML画面とにらめっこです(・∀・;)
HTMLの中からコメントフォーム部分を探します。
そして、コメントを記載する部分にあたる<textarea~・・・>という部分を探します。
忍ブロの新しいテンプレートから作成したテンプレートなら、以下の通りになっているハズです。
<textarea class="CommentForms" name="comment" cols="40" rows="4"></textarea>
コレを以下のように書き換えます。
尚、この色の部分は、忍ブロ(新規テンプレート)用に修正した部分になります。
<textarea class="CommentForms" id="comment" name="comment" cols="40" rows="4" onkeyup="doCommentPreview()" onblur="doCommentPreview()"></textarea>
そして次に、プレビューを表示させたい場所へ、以下のソースを入れ込んでしまいます。
<input type="checkbox" name="checkboxCommentPreview" value="" onClick="changeCommentPreview()" /> コメントをプレビューしますか?<br />
<label for="comment_preview">comment preview:</label><br />
<div class="CommentFormBlock" id="comment_preview">ご利用のブラウザ、設定ではご利用になれません。</div><br />
場所については、テンプレートのデザインやそれぞれの好みもあると思うのですが、私は記事作成部分のすぐ下に入れてしまいました。
「同じでいいや☆」って人は、ココまでの作業を全て盛り込んだ下記のソースをお使い下さい。
この部分を探します!!
<tr>
<td class="CommentFormTh">Comment</td>
<td class="CommentFormTd"><textarea class="CommentForms" name="comment" cols="40" rows="4"></textarea></td>
</tr>
コレを↓のソースへ書き換えてしまいます。
<tr>
<td class="CommentFormTh">Comment</td>
<td class="CommentFormTd"><textarea class="CommentForms" id="comment" name="comment" cols="40" rows="4" onkeyup="doCommentPreview()" onblur="doCommentPreview()"></textarea></td>
</tr>
<tr>
<td class="CommentFormTh"><label for="comment_preview">preview?</label></td>
<td class="CommentFormTd"><input type="checkbox" name="checkboxCommentPreview" value="" onClick="changeCommentPreview()" /><br/><div class="CommentFormBlock" id="comment_preview">ご利用のブラウザ、設定ではご利用になれません。</div></td>
ここまで済んだら、あとは以下のscriptを埋め込みます。
埋め込む場所については、もっと他の場所でも構わないのかもしれませんが・・・。
とりあえず私は、投稿画面のスグ下、</table></form>の下に続けて入れ込んでしまいました。
<script type="text/javascript">
<!--
// コメントプレビューを制御
// ↓コメントプレビューをデフォルトでONにする場合は 1 、OFFにする場合は 0
var isCommentPreview = 0;
function changeCommentPreview() {
isCommentPreview = (isCommentPreview == 0) ? 1 : 0;
doCommentPreview();
}
// -->
</script>
<script type="text/javascript">
<!--
// コメントプレビュー
function doCommentPreview(mode) {
// コメント入力テキストエリアのid属性
var textAreaId = 'comment';
// プレビューを表示するタグのid属性
var previewAreaId = 'comment_preview';
// コメントプレビュー欄初期表示文字 または、画像タグ
var initString = '※チェックするとココにコメントのプレビューが表示されます。';
if ((null == mode || mode != 'init') && isCommentPreview == 0) return;
if (!isDoCommentPreview()) return;
if (!getElementCommentPreview(textAreaId) || !getElementCommentPreview(previewAreaId)) {
return;
} else if (null != mode && mode == 'init') {
getElementCommentPreview(previewAreaId).innerHTML = initString;
return;
}
var s = getStringCommentPreview(textAreaId);
if (null == s || '' == s || '<br />' == s) {
s = initString;
}
if (getElementCommentPreview(previewAreaId)) {
getElementCommentPreview(previewAreaId).innerHTML = s;
}
}
function getStringCommentPreview(e) {
var s = '';
s = getElementCommentPreview(e).value;
s = s.split('&').join('&');
s = s.split('<').join('<');
s = s.split('>').join('>');
s = s.split('\'').join('"');
s = s.split('\n').join('<br />');
return s;
}
function getElementCommentPreview(e, f) {
var l = (document.layers) ? 1 : 0;
if(l) {
f=(f) ? f : self;
var a = f.document.layers;
if (a[e]) return a[e];
for (var w = 0; w < a.length;) {
return getElementCommentPreview(e, a[w++]);
}
}
if (document.all) return document.all[e];
return document.getElementById(e);
}
function isDoCommentPreview() {
var ua = navigator.userAgent;
var doNotAgentList = [
ua.indexOf('Opera/6') != -1,
ua.indexOf('Mac') != -1 && ua.indexOf('MSIE 5') != -1
]
for (var i = 0; i < doNotAgentList.length; i++) {
if (doNotAgentList[i]) return false;
}
return true;
}
doCommentPreview('init');
//-->
</script>
以上で作業は終了です。
記事詳細画面のプレビューで『※チェックするとココにコメントのプレビューが表示されます。』と表示されていれば成功☆
更新して確認してみてください。
- customize
- template
- games
- comics & animations
- hobbies
- blog
- Firefox
- internet
- mixi
- 更新履歴?(42)
- ぽー(BlogPet)のにっき(34)
- mixiからの転載(259)
- はじめてお越しの方へ(1)
- テトリスDSのスタッフロール
- コピーブランド(06/11)
- FF3
- DennisTetry(06/11)
- Phillipspica(06/08)
- VanoERese(06/08)
- 12/13のツイートまとめ
- SvetaRut(06/08)