"AFFINGER6生活"も、かれこれ3ヶ月ほど。相変わらずの使いやすさに、ほれぼれ感が全く薄れないSHINです。
今回は、タグパーツの一つ「クリップメモ」のアイコンを、いろんなバリエーションに変えられるカスタマイズをまとめてみました。
「fontawesome v4.7」を使って、ものすごく簡単にアイコンを変更できるので、ぜひ試してみてください。
fontawesome v4.7とは？
fontawesome v4.7は、アイコン素材がフリーで入手できるサイトです。
アイコンはシンプルさがウリ。公式のものや日常生活でよく目にするアイコンなどカテゴリ分けされていて、なんと多種多様に675個ものアイコンが豊富に揃っています。
AFFINGER5では、このサイトで扱っている全てのアイコンをコードで簡単に表示できるようになっています。非常に便利ですよね。
クリップメモのアイコンをカスタマイズする手順
では早速クリップメモのアイコンを、fontawesome v4.7にあるアイコンにカスタマイズする手順を解説していきます。
step
1「fontawesome v4.7」にアクセスして、好きなアイコンを選び、そのコードを参照します。
step
2クリップメモを表示するコードへ左から、アイコンコード、アイコンカラー、ボーダーカラー、テキストカラー、アイコンサイズそれぞれ好みで書き換えしていきます。
サンプル
[st-cmemo fontawesome="fa fa-diamond" iconcolor="#ffffff" bgcolor="#03A9F4" color="#ffffff" iconsize="100"]サンプル[/st-cmemo]
太赤部分のコードを変えるだけで、いろんなクリップメモにカスタマイズできます。
ではここから、僕が「コレは使える！」っていうアイコンをカスタマイズして作ってみましたので、良かったらコピペでどうぞ♪
コレは使える！アイコンカスタマイズ集
ここで紹介する公式アイコンで、オフィシャルカラーが判明できたコードは「オフィシャル」としています。
その他アイコンは、完全に僕の"センス"でカラーは決めています（笑）
SNS系アイコンクリップメモ集
Twitter（オフィシャル）
ツイッター
[st-cmemo fontawesome="fa fa-twitter" iconcolor="#ffffff" bgcolor="#00aced" color="#ffffff" iconsize="150"]ツイッター[/st-cmemo]
Facebook（オフィシャル）
フェイスブック
[st-cmemo fontawesome="fa fa-facebook-official" iconcolor="#ffffff" bgcolor="#305097" color="#ffffff" iconsize="150"]フェイスブック[/st-cmemo]
LINE（オフィシャル）
ライン
[st-cmemo fontawesome="fa fa-comment-o" iconcolor="#ffffff" bgcolor="#5ae628" color="#ffffff" iconsize="150"]ライン[/st-cmemo]
Pocket（オフィシャル）
ポケット
[st-cmemo fontawesome="fa fa-get-pocket" iconcolor="#ffffff" bgcolor="#ee4056" color="#ffffff" iconsize="150"]ポケット[/st-cmemo]
G+（オフィシャル）
グーグルプラス
[st-cmemo fontawesome="fa fa-google-plus" iconcolor="#ffffff" bgcolor="#db4437" color="#ffffff" iconsize="150"]グーグルプラス[/st-cmemo]
インスタグラム
[st-cmemo fontawesome="fa fa-instagram" iconcolor="#ffffff" bgcolor="#CF2E92" color="#ffffff" iconsize="150"]インスタグラム[/st-cmemo]
YouTube1
ユーチューブ1
[st-cmemo fontawesome="fa fa-youtube" iconcolor="#db4437" bgcolor="#f8f8ff" color="#000000" iconsize="150"]ユーチューブ1[/st-cmemo]
YouTube2
ユーチューブ2
[st-cmemo fontawesome="fa fa-youtube-play" iconcolor="#db4437" bgcolor="#f8f8ff" color="#000000" iconsize="150"]ユーチューブ2[/st-cmemo]
チャット
チャット
[st-cmemo fontawesome="fa fa-weixin" iconcolor="#ffffff" bgcolor="#5ae628" color="#ffffff" iconsize="150"]チャット[/st-cmemo]
Web系アイコンクリップメモ集
設定（歯車）
設定
[st-cmemo fontawesome="fa fa-cog" iconcolor="#ffffe0" bgcolor="#e6e6e6" color="#000000" iconsize="150"]設定[/st-cmemo]
link（リンク）
リンク
[st-cmemo fontawesome="fa fa-link" iconcolor="#c0c0c0" bgcolor="#f5f5f5" color="#000000" iconsize="150"]リンク[/st-cmemo]
WordPress（オフィシャル）
ワードプレス
[st-cmemo fontawesome="fa fa-wordpress" iconcolor="#ffffff" bgcolor="#21759b" color="#ffffff" iconsize="150"]ワードプレス[/st-cmemo]
Wi-Fi（ワイファイ）
ワイファイ
[st-cmemo fontawesome="fa fa-wifi" iconcolor="#ffffff" bgcolor="#4169e1" color="#ffffff" iconsize="150"]ワイファイ[/st-cmemo]
tags（タグ）
タグ
[st-cmemo fontawesome="fa fa-tags" iconcolor="#3cb371" bgcolor="#00ff7f" color="#ffffff" iconsize="150"]タグ[/st-cmemo]
ブラウザ系アイコンクリップメモ集
Google chrome（グーグルクロム）
グーグルクロム
[st-cmemo fontawesome="fa fa-chrome" iconcolor="#db4437" bgcolor="#f8f8ff" color="#000000" iconsize="150"]グーグルクロム[/st-cmemo]
Firefox（ファイアフォックス）
ファイアフォックス
[st-cmemo fontawesome="fa fa-firefox" iconcolor="#ffa500" bgcolor="#f8f8ff" color="#000000" iconsize="150"]ファイアフォックス[/st-cmemo]
Internet Explorer（インターネットエクスプローラー）
インターネットエクスプローラー
[st-cmemo fontawesome="fa fa-internet-explorer" iconcolor="#ffffff" bgcolor="#00aced" color="#ffffff" iconsize="150"]インターネットエクスプローラー[/st-cmemo]
Android（アンドロイド）
アンドロイド
[st-cmemo fontawesome="fa fa-android" iconcolor="#ffffff" bgcolor="#5ae628" color="#ffffff" iconsize="150"]アンドロイド[/st-cmemo]
Safari（サファリ）
サファリ
[st-cmemo fontawesome="fa fa-safari" iconcolor="#ffffff" bgcolor="#00aced" color="#ffffff" iconsize="150"]サファリ[/st-cmemo]
OS系アイコンクリップメモ集
Windows（ウィンドウズ）
ウィンドウズ
[st-cmemo fontawesome="fa fa-windows" iconcolor="#ffffff" bgcolor="#00aced" color="#ffffff" iconsize="150"]ウィンドウズ[/st-cmemo]
Mac（マック）
マック
[st-cmemo fontawesome="fa fa-apple" iconcolor="#c0c0c0" bgcolor="#f8f8ff" color="#000000" iconsize="150"]マック[/st-cmemo]
クリップメモアイコンをアニメーションにする
いろんなアイコンへカスタマイズする例をご紹介しましたけど、このアイコンをアニメーション化することも可能。
例えば・・・
マック
マック
以下のアニメーションしたいコードを追加で記述するだけ。簡単なのでぜひお試しください。
≫ <i class="fa fa-snowflake-o faa-wrench animated" aria-hidden="true"></i>
≫ <i class="fa fa-snowflake-o faa-ring animated" aria-hidden="true"></i>
≫ <i class="fa fa-snowflake-o faa-horizontal animated" aria-hidden="true"></i>
≫ <i class="fa fa-snowflake-o faa-vertical animated" aria-hidden="true"></i>
≫ <i class="fa fa-snowflake-o faa-flash animated" aria-hidden="true"></i>
≫ <i class="fa fa-snowflake-o faa-bounce animated" aria-hidden="true"></i>
≫ <i class="fa fa-snowflake-o faa-spin animated" aria-hidden="true"></i>
≫ <i class="fa fa-snowflake-o faa-float animated" aria-hidden="true"></i>
≫ <i class="fa fa-snowflake-o faa-pulse animated" aria-hidden="true"></i>
≫ <i class="fa fa-snowflake-o faa-shake animated" aria-hidden="true"></i>
≫ <i class="fa fa-snowflake-o faa-tada animated" aria-hidden="true"></i>
≫ <i class="fa fa-snowflake-o faa-passing animated" aria-hidden="true"></i>
≫ <i class="fa fa-snowflake-o faa-passing-reverse animated" aria-hidden="true"></i>
≫ <i class="fa fa-snowflake-o faa-burst animated" aria-hidden="true"></i>
まとめ
クリップメモで需要があるアイコンを、クリップメモにカスタマイズしてご紹介してみました。
これだけバリエーションある装飾ができると、訴求力も上がりますよね。ぜひカッコよく可愛く作ってみて下さい♪
AFFINGER5カスタマイズ記事
-
【AFFINGER6】フォントをカスタマイズして最適化する設定方法
WordPressテーマ「AFFINGER6」のフォント設定を完全版でお届けします。 テーマAFFINGER6を愛用しているSHINですが、先日フォントに「Noto Sans（400）」と「游明朝（5 ...
続きを見る
-
【AFFINGER6】アドセンス広告を横並び表示する方法＋αカスタマイズあり
WordPressテーマ「AFFINGER6」で設定する「Googleアドセンス広告を横並び（ダブルレクタングル）で表示する方法」を解説していきます。 こんにちは。WordPressテーマ研究家SHI ...
続きを見る
-
【2022最新版】カエレバ・ヨメレバをコピペで実装するカスタマイズ5選
こんにちは。WordPessテーマ研究家SHINです。 カエレバ＆ヨメレバは、Amazonや楽天市場、Yahoo!ショッピングなど複数サイトの商品アフィリエイトリンクを、ボタンに設置して告知できるツー ...
続きを見る
-
【AFFINGER6】スマホフッターに固定メニューを設置する方法
こんにちは。WordPressテーマ研究家SHINです。 スマホユーザーへ訴求する重要なポジションとも言えるのがフッターメニューですよね。 スマホフッターメニューと言えば、パソコンで言う ...
続きを見る
-
【AFFINGER6】テキストやアイコン画像をアニメーション化できる機能紹介
AFFINGER6に実装されている機能に、テキストやアイコン、画像を簡単にアニメーションにできる機能をご紹介していきます。 こんにちは。WordPressテーマ研究家SHINです。 AF ...
続きを見る
![Pinterest](https://www.pinterest.com/pin/create/button/?url=https%3A%2F%2Fwptheme-navi.jp%2Fclipmemo_icon_customize%2F&media=https://i0.wp.com/wptheme-navi.jp/wp-content/uploads/2019/03/f9d228bb0b49a3d19a80e0c107aaabc4.png?fit=825%2C401&ssl=1&description="AFFINGER6生活"も、かれこれ3ヶ月ほど。相変わらずの使いやすさに、ほれぼれ感が全く薄れないSHINです。 今回は、タグパーツの一つ「クリップメモ」のアイコン){kind=link}