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

file000555011112

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

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

スポンサーリンク
レクタングル(大)広告

主な手順

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

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

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

Awesome Cursorファイルの設定

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

ファイルのダウンロード

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

jquery.awesome-cursor.min.js (production)」

ファイルの移動

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

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

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

既にテーマ内で、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で以下のように書きます。これは、リンクタグにマウスカーソルが乗ったときに、カスタムしたカーソルが表示されるように設定しています。

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

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

マウスカーソル変更前

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

マウスカーソル変更後

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

アイコンフォントの指定

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

Font Awesome Icons

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

Awesome Cursorの名前指定

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

いろいろな設定

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

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

Red Banned Circle With Centered Hotspot

向きの変更

Pink Horizontally Flipped Fighter Jet

まとめ

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

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