CALENDAR
S M T W T F S
1234567
891011121314
15161718192021
22232425262728
293031    
<< July 2018 >>
ペパボ新聞ティッカー
ARCHIVES
CATEGORIES
<< 第4回JUGEMで高橋もんたメソッド | main | 第5回の修正版 >>
スポンサーサイト

一定期間更新がないため広告を表示しています

| - | | - | - |
第5回JUGEMでしおり機能
今回は、自分のブログを読んでくれる人に優しい機能を紹介します。

その機能とは、本などで使う「ここまで読んだ」という「しおり機能」です。非常に簡単でなかなかおもしろい機能なので、ぜひ使ってみてください。

やり方の詳細は、続き以降で紹介します。

参考1:いまどこカーソル(Marker Cursor)
参考2:Obtaining the Scroll Width and Height of a Document(英語)
まずは、JUGEMの管理者画面に入って「テンプレートの編集」を開いてください。やることは、このテンプレートの編集画面の「HTML」にJavascriptを組み込みむだけになります。

組み込むJavascriptは、以下の物になります。丸ごとコピーしちゃってください。

-----切り取り線------
<script type="text/javascript"><!--
document.write('<DIV id="htmlmarker" style="position:absolute;top:0;left:0;display:none;font-color:red;"><DIV style="position:absolute;font-size:36;filter:alpha(opacity=70)">●</DIV</DIV>');

document.ondblclick=htmlmark_exec;
function htmlmark_exec(e){
var _event;
if(window.event){
_event = window.event;
}else{
_event = e;
}
x=_event.clientX;
y=_event.clientY;
htmlmarker.style.pixelTop=y+getScrollHeight();
htmlmarker.style.pixelLeft=x+getScrollWidth();
htmlmarker.style.display='block';
}

function getScrollWidth()
{
var w = window.pageXOffset ||
document.body.scrollLeft ||
document.documentElement.scrollLeft;

return w ? w : 0;
}

function getScrollHeight()
{
var h = window.pageYOffset ||
document.body.scrollTop ||
document.documentElement.scrollTop;

return h ? h : 0;
}
--></script>
-----切り取り線------

このJavascriptを組み込む位置は、HTMLの一番下の方のBODYを閉じるタグの上に入れてください。別の場所に入れると動かない可能性があります。

-----境界線------
【ココらへんにJavascriptをコピー】
</body>
</html>
-----境界線------

上記の場所に挿入したら、忘れずにHTMLを更新してください。

さて、準備はこれだけです。後はブログを開いて、好きな場所でダブルクリックをしてみてください。そこにマーカーが現われるようになります。(このブログ上では、後述する変更を加えて画像を表示しています。)

後、気になるのはこのマーカーが格好悪すぎるという点なのですが、実は、上記Javascript内の一部分を変更するだけで、思いのままの文字や画像を貼ることができます。変更する場所は以下です。

-----境界線------
document.write('<DIV id="htmlmarker" style="position:absolute;top:0;left:0;display:none;font-color:red;"><DIV style="position:absolute;font-size:36;filter:alpha(opacity=70)">【ココ】</DIV</DIV>');
-----境界線------

最初に貼り付けたJavascriptと比較すると分かりますが、最初は「●」が入ってます。ココにはhtmlタグを入力できますので、好きな文字や画像に変更して利用すると良いでしょう。
| Javascript | 16:09 | comments(1) | trackbacks(3) |
スポンサーサイト
| - | 16:09 | - | - |
コメント
がーん。これって、Firefoxやネスケじゃ動いてないし、Safariではスクロールが取れてませんでした。IEとOperaでは正常に動作してます。

ちゃんと動くようにしてから、修正投稿をします…。
| hack | 2005/06/06 8:17 PM |
コメントする









この記事のトラックバックURL
http://hack.jugem.jp/trackback/5
トラックバック
第5回の修正版
第5回では、IEとOperaでしか動かないJavascriptを紹介してしまい申し訳ありませんでした。 新規投稿というスタイルで、第5回の修正版を投稿いたします。 っと、あまりに堅苦しいのはココまでにして、後はいつもの調子で不親切な感じでカスタマイズ方法を紹介
| JUGEM HACKS | 2005/06/08 1:02 AM |
いじくりこねくり倒しても
テンプレート変えたいなーと思ってるんだけど… 編集がどうしてもうまくいかない こういう テキストボックス の中に画像(直リンクみたいなの)とかいれたいんだけど HTMLタグがそのままでてきちゃう… できないのかなー… しおり
| 緑豆もやし | 2006/01/13 1:20 AM |
-
管理者の承認待ちトラックバックです。
| - | 2006/10/23 3:34 PM |