【AFFINGER6】コレは使える！クリップメモのアイコンカスタマイズ集

"AFFINGER6生活"も、かれこれ3ヶ月ほど。相変わらずの使いやすさに、ほれぼれ感が全く薄れないSHINです。

今回は、タグパーツの一つ「クリップメモ」のアイコンを、いろんなバリエーションに変えられるカスタマイズをまとめてみました。

「fontawesome v4.7」を使って、ものすごく簡単にアイコンを変更できるので、ぜひ試してみてください。

fontawesome v4.7とは？

fontawesome v4.7

fontawesome v4.7は、アイコン素材がフリーで入手できるサイトです。

アイコンはシンプルさがウリ。公式のものや日常生活でよく目にするアイコンなどカテゴリ分けされていて、なんと多種多様に675個ものアイコンが豊富に揃っています。

alt=fontawesome v4.7アイコン

AFFINGER5では、このサイトで扱っている全てのアイコンをコードで簡単に表示できるようになっています。非常に便利ですよね。

クリップメモのアイコンをカスタマイズする手順

では早速クリップメモのアイコンを、fontawesome v4.7にあるアイコンにカスタマイズする手順を解説していきます。

step
1「fontawesome v4.7」にアクセスして、好きなアイコンを選び、そのコードを参照します。

alt=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]

Instagram

インスタグラム

[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]

クリップメモアイコンをアニメーションにする

いろんなアイコンへカスタマイズする例をご紹介しましたけど、このアイコンをアニメーション化することも可能。

例えば・・・

マック

以下のアニメーションしたいコードを追加で記述するだけ。簡単なのでぜひお試しください。

≫

≫

≫

≫

≫

≫

≫

≫

≫

≫

≫

≫

≫

≫

まとめ

クリップメモで需要があるアイコンを、クリップメモにカスタマイズしてご紹介してみました。

これだけバリエーションある装飾ができると、訴求力も上がりますよね。ぜひカッコよく可愛く作ってみて下さい♪

AFFINGER5カスタマイズ記事

: 【AFFINGER6】フォントをカスタマイズして最適化する設定方法
WordPressテーマ「AFFINGER6」のフォント設定を完全版でお届けします。 WordPressテーマ研究家SHINです。テーマAFFINGER6を愛用しているSHINですが、 ...
続きを見る

: 【WordPress】10分で完了！Twitterタイムラインを埋め込み表示する方法
SNS（ソーシャル・メディア・サービス）のひとつ「Twitter」のタイムラインを、サイドバーやフッターエリアに埋め込んで表示する方法を解説していきます。こんにちは。WordPressテーマ研究家S ...
続きを見る

: 【AFFINGER6】アドセンス広告を横並び表示する方法＋αカスタマイズあり
WordPressテーマ「AFFINGER6」で設定する「Googleアドセンス広告を横並び（ダブルレクタングル）で表示する方法」を解説していきます。こんにちは。WordPressテーマ研究家SHI ...
続きを見る

: 【2022最新版】カエレバ・ヨメレバをコピペで実装するカスタマイズ5選
こんにちは。WordPessテーマ研究家SHINです。カエレバ＆ヨメレバは、Amazonや楽天市場、Yahoo!ショッピングなど複数サイトの商品アフィリエイトリンクを、ボタンに設置して告知できるツー ...
続きを見る

: 【AFFINGER6】スマホフッターに固定メニューを設置する方法
こんにちは。WordPressテーマ研究家SHINです。スマホユーザーへ訴求する重要なポジションとも言えるのがフッターメニューですよね。スマホフッターメニューと言えば、パソコンで言う ...
続きを見る

: 【AFFINGER6】テキストやアイコン画像をアニメーション化できる機能紹介
AFFINGER6に実装されている機能に、テキストやアイコン、画像を簡単にアニメーションにできる機能をご紹介していきます。こんにちは。WordPressテーマ研究家SHINです。 AF ...
続きを見る