Font Awesomeアイコンをマウスカーソルに設定できる「Awesome Cursor」、WordPressでの使い方

今朝、購読ブログをチェックしていたら、Awesome CursorというjQueryのプラグインが紹介されていたので早速使ってみました。

Awesome Cursorを利用すると、Font Awesomeのアイコンフォントをマウスカーソルに使用することができるようになります。

主な手順

Awesome CursorをWordpressテーマ内で使用するには、主に以下のような3手順になります。

Awesome Cursorのダウンロード＆ファイルをテーマにコピー
ヘッダーでAwesome Cursorを呼び出す
Awesome Cursorを実行する

思ったより簡単に設定できます。

Awesome Cursorファイルの設定

まずは、Awesome Cursorファイルの設定を行います。

ファイルのダウンロード

Awesome Cursorページから、「jquery.awesome-cursor.min.js (production)」ファイルをダウンロードします。

ファイルの移動

ダウンロードした、jquery.awesome-cursor.min.jsをテーマ（子テーマ）フォルダ直下に移動します。

ヘッダーでファイルの呼び出し

ファイルの設定が終わったら、header.phpの<head></head>の間に、以下のようなファイルの呼び出しタグを貼り付けます。

<?php //wp_enqueue_script('jquery');//jQueryが読み込まれてない場合?>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="<?php echo get_stylesheet_directory_uri(); ?>/jquery.awesome-cursor.min.js" type="text/javascript"></script>
<!-- 親テーマを編集する場合は以下 -->
<!--<script src="<?php echo get_template_directory_uri(); ?>/jquery.awesome-cursor.min.js" type="text/javascript"></script>-->

既にテーマ内で、jQueryが呼ばれている場合、wp_enqueue_script(‘jquery’)部分を削除してください

同様に、既にテーマ内でFont AwesomeのCSSが呼ばれている場合は、Font Awesome部分を削除してください。

子テーマに、jquery.awesome-cursor.min.jsを置いた場合は、get_stylesheet_directory_uri()の部分を使用してください。

親テーマに、jquery.awesome-cursor.min.jsを置いた場合は、get_template_directory_uri()の部分を使用してください。

Awesome Cursorを実行する

Awesome Cursorを実行するには、jQueryで以下のように書きます。これは、リンクタグにマウスカーソルが乗ったときに、カスタムしたカーソルが表示されるように設定しています。

<script>
jQuery(function(){
  jQuery('a').awesomeCursor('reply', {//アイコンフォントの指定
      color: 'blue',//色の指定
      size: 40      //サイズの指定
    });
});
</script>

これも、<head></head>あたりに埋め込みます。（何処でも良い）

通常はこんな感じのマウスカーソルが、

こんな感じに変更できます。

Font Awesomeにあるフォントなら、どのようなものにでもカーソルを変更することができますし、色や大きさも変更することができます。

アイコンフォントの指定

Font Awesomeのアイコンフォントは、Font Awesome Iconsの一覧から取得してください。

Awesome Cursorの名前指定は、Font Awesomeのクラス名から「fa-」をなくしたものを利用します。

「fa-reply」なら「reply」を指定します。

jQuery('a').awesomeCursor('reply');

いろいろな設定

その他にも、以下のような設定もできます。

ホットスポットをセンターに

jQuery('#example3')
    .awesomeCursor('ban', {
      color: 'red',
      size: 24,
      hotspot: 'center'
    });

向きの変更

jQuery('#example4')
    .awesomeCursor('fighter-jet', {
      color: 'hotpink',
      size: 24,
      flip: 'horizontal'
    });

まとめ

てか、Wordpressでブログをしている分には、「マウスカーソルの見た目をちょっと変わったものにしたい」という以外には、そこまで使いどころはないような気がします。

WEBサービス開発などで、HTML要素部分の動作を視覚的に表現するのには、よさそうです。