スマホ用メニューボタンに良さそうな2Wayトグルボタンを手軽に作成できる「Transformicons」がステキ

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

Transformiconsというアニメーションボタンを生成できるジェネレータを使ってみました。

これが、CSSとJavaScriptをジェネレーターで生成するだけで「メニューボタン←→閉じるボタン」のような、トグルボタンを簡単に作成することができました。

WordPressでも、結構簡単にツーウェイボタンを利用することができたので、その方法などの紹介です。

photo by Kumar’s Edit

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

こんなボタンがつくれる

Transformiconsでを生成すると以下のようなボタンを手軽に作ることができます。

クリックするとアニメーションで切り替わります。

メニューボタン

     

グリッド

 

追加

 

メール


読み込み中

loading

Transformiconsの使い方

Transformicons

Transformiconsを実際に、使ってみたんですが、以下のような手順が必要のようです。

主な手順

主な手順は、以下の4手順です。

  1. Transformiconsファイルのダウンロード
  2. 利用したいアイコンの選択
  3. HTMLとCSSの取得
  4. Transformiconsスクリプトの呼び出し

TransformiconsでJavaScriptも生成されるんですけど、僕の場合、うまくいかなかったので、スクリプトファイルを呼び出す形の方法です。

Transformiconsファイルのダウンロード

まずは、grayghostvisuals/transformicons · GitHubから、ファイルをダウンロードします。

Transformiconsのダウンロード

「transformicons-master.zip」という圧縮ファイルがダウンロードされるので、解凍します。

利用するのは、「transformicons-master/dist/js/transformicons.js」ファイルのみです。

TransformiconsのJavaScriptファイル

僕は、「js/transformicons.js」ごと、Wordpressの子テーマに放り込んで利用してみました。

利用したいアイコンの選択

次に、Transformicons Builderから利用したいアイコンを選択します。

Transformicons Builder

利用したり、Transformiconsボタンを、以下のようなトグルボタンで選択します。(トグルボタンが緑色になったら選択されています。)

利用したいTransformiconsボタンを選択

HTMLとCSSの取得

利用するボタンを選択したら、次は生成です。

同じページの下の方にある、「Build」ボタンをクリックします。

Buidボタン

オプションで、CSSかSassが、JavaScriptを縮小化するかなどが選択できます。

「Build」ボタンを押すと以下のように、コードが生成されます。

コードが生成される

あとは、生成されたコードを貼り付けて使用します。

今回は、この中の、マークアップとスタイルのコードを利用します。

最初の、メニューボタンのコードを取得するとこんな感じです。

以下のマークアップは、表示したい場所に貼り付けます。

以下のスタイルシートは、CSSファイルに保存して、ヘッダーで呼び出しても良いですし、<style></style>で囲んでHTMLの中で呼び出しても良いかと思います。

ボタン一つ誰でも結構長いスタイルシート指定が必要です。

Transformiconsスクリプトの呼び出し

最後に、TransformiconsのJavaScriptファイルを呼び出し、コードを記入します。

利用するには、以下のようなコードを</body>タグ手前で呼び出せばOKかと思います。(※マークアップより先に呼び出すと動作しなかった。)

WordPressの子テーマなどで呼び出すには、以下のように書いてもOKかと思います。

動作確認

上記の手順で、コードを貼り付けていくと、以下のようなトグルメニューボタンを利用することができます。

まとめ

このような感じで、ウェブアイコンフォントも不要で綺麗なボタンを、簡単に作成することができます。

モバイル用の、左側からニュッと出るメインメニュー用のボタンなどに利用すると、自前で、「閉じる」用のインターフェースを作ったり、コーディングしたりする手間が省けるので、その分楽ができるのではないかと思います。