ここでは画面クリックでわっかを表示jQuery pointerの紹介をしていきます。

デモはこちら
https://office-goto.info/demo/pointer/

pointer.jsのダウンロード
http://nejimaki-act.com/lab/pointer/
nejimakiact様

head内で読み込み

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script><script type="text/javascript" src="pointer.js"></script>

pointer.jsを読み込んでください。これだけでわっかが表示されるようになります。

カスタマイズ

pointer.js

var settings = {
    size : 130,
    spd : 500,
    color : "#ffc3dd"
}
settings = $.extend(settings, options);

var circle_style = {
    "position":"absolute",
    "z-index":9999,
    "height":10,
    "width":10,
    "border":"solid 4px "+settings.color,
    "border-radius":settings.size
}

サイズ、スピード、色を設定できます。
var settings = {} 内をお好みに設定してください。

ここではjQuery jdtRunAwayでクリックさせないリンクを紹介していきます。

デモはこちら
https://office-goto.info/demo/runaway/

ダウンロードはこちら
http://5509.me/log/jdtrunaway/trackback
5509様

head内で読み込み

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jdtrunaway.js"></script>

jdtrunaway.jsを読み込んでください。

script

jQuery(function($){
    $('a').jdtRunAway();
});

ターゲット指定した要素が逃げていきます。

ここではjQuery画像拡大プラグインのZoomを紹介していきます。

デモはこちら
https://office-goto.info/demo/zoom/

jQuery Zoomをダウンロード
http://www.jacklmoore.com/zoom

headで読み込み

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="zoom-master/jquery.zoom-min.js"></script>

jquery.zoom-min.jsまたはjquery.zoom.jsを読み込んでください。

CSS

<style type="text/css">
    .zoom {
        display:inline-block;
        position: relative;
    }
    .zoom img {
        display: block;
    }
    .zoom img::selection { background-color: transparent; }

    #ex2 img:hover { cursor: url(grab.cur), default; }
    #ex2 img:active { cursor: url(grabbed.cur), default; }
</style>

script

$(document).ready(function(){
    $('#ex1').zoom();
    $('#ex2').zoom({ on:'grab' });
    $('#ex3').zoom({ on:'click' });			 
    $('#ex4').zoom({ on:'toggle' });
});

マウスオーバー、ドラッグ、クリックを設定できます。

html

<span class="zoom" id="ex1">
    <img src="img/daisy.jpg" width="555" height="320">
</span>
<span class="zoom" id="ex2">
    <img src="img/roxy.jpg" width="290" height="320">
</span>
<span class="zoom" id="ex3">
    <img src="img/daisy.jpg" width="555" height="320">
</span>
<span class="zoom" id="ex4">
    <img src="img/roxy.jpg" width="290" height="320">
</span>

spanタグでimgタグを囲みターゲット指定してください。

ここではSyntaxHighlighterを使いソースコードをきれいに表示させます。

WordPressで使う場合はこちら
https://office-goto.info/wordpress/syntaxhighlighter-2/

SyntaxHighlighter3.0.83をダウンロード
http://alexgorbatchev.com/SyntaxHighlighter/download/

head内で読み込み

<link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCore.css">
<link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shThemeDefault.css">
<script type="text/javascript" src="syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushBash.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJava.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushSql.js"></script>

4行目以降を自分が使用する言語に合わせて読み込んでください。

改行などの設定

<script type="text/javascript">
    SyntaxHighlighter.config.bloggerMode=true;
    SyntaxHighlighter.config.stripBrs=true;
    SyntaxHighlighter.defaults['toolbar'] = false;
    SyntaxHighlighter.all();
</script>

htmlでの使い方

<pre class="brush: js;"></pre>

jsの箇所を使用するソースコードに適した設定をしてpreタグで表示させるソースを囲んでください。

パラメーター一覧
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

ブログなどで使用する際はこちらで特殊文字のエスケープを行ってください。
http://www.mapee.jp/tools/pretagmaker/
Mapee様

WardPressにはプラグインがありますのでインストールして使用できます。

知らなかったので今回の解説どおり読み込んでました。