カスタマイズ

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

更新日:

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

"AFFINGER5生活"も、かれこれ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]

 

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

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

例えば・・・

マック

マック

 

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

 ≫ <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カスタマイズ記事

AFFINGER5
【AFFINGER5】サイドバー最上部の新着記事を非表示にする方法

こんにちは!SHINでございます♪   AFFINGER5でサイトページ構成を2カラム以上、つまりサイドバーのあるデザインで運営するなら必見。 今回は、AFFINGER5の導入初期時にデフォ ...

続きを見る

AFFINGER5,フォントカスタマイズ
【AFFINGER5】フォントカスタマイズでイメージをガラッと変えてみよう!

こんにちは、SHINでございます♪   今回、AFFINGER5のフォントデザインをガラッと変える2つの方法を解説していきます。   デフォルトでも十分ですけど、もっとポップにした ...

続きを見る

AFFINGER5
【AFFINGER5】ブログサイトの背景画像をオシャレに変える方法

こんにちは!SHINです♪ 今回は、ブログサイトの背景画像をオシャレに変えてみよう!というテーマでお話していきます♪   ただ注意してほしいのは、背景画像で大きくイメージが変わるということ。 ...

続きを見る

超簡単!サイドバーへTwitterタイムラインを埋め込む方法
【AFFINGER5】超簡単!サイドバーへTwitterタイムラインを埋め込む方法

こんにちは!SHINです♪ 今回Twitterのタイムラインを、サイドバーに表示させる方法をお話していきます♪   何で「サイドバー」なのかと言うと、2カラムサイトであればトップページはもち ...

続きを見る

【AFFINGER5】記事下にアドセンス横並び+リンク広告をセット表示する方法
【AFFINGER5】記事下にアドセンス横並びとリンク広告をセット表示する方法

こんにちは。SHINです♪   Googleアドセンス広告の設置方法に、PHPやカスタムCSSにコードを記述する方法がありますけど、正直・・・ めんどくさい! ややこしい! むずかしい! わ ...

続きを見る

【AFFINGER5】カエレバ・ヨメレバを実装!カスタマイズデザイン6選
【2019最新版】カエレバ・ヨメレバをコピペで実装するカスタマイズ5選

こんにちは。WordPessテーマ研究家SHINです。 カエレバ&ヨメレバは、Amazonや楽天市場、Yahoo!ショッピングなど複数サイトの商品アフィリエイトリンクを、ボタンに設置して告知できるツー ...

続きを見る

【AFFINGER5】スマホフッターに固定メニューを設置する方法-min
【AFFINGER5】スマホフッターに固定メニューを設置する方法

こんにちは。WordPressテーマ研究家SHINです。 スマホユーザーへ訴求する重要なポジションとも言えるのがフッターメニューですよね。   スマホフッターメニューと言えば、パソコンで言う ...

続きを見る

alt=【AFFINGER5】テキストやアイコン画像をアニメーション化できる機能紹介
【AFFINGER5】テキストやアイコン画像をアニメーション化できる機能紹介

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

続きを見る

  • この記事を書いた人
  • 最新記事
SHIN

SHIN

WordPressテーマ研究家のSHINです。WPテーマとコーヒーをこよなく愛し、日々マウスをカチカチ!キーボードをパチパチ!しながら研究をしている人。

-カスタマイズ
-

Copyright© WordPress theme NAVI , 2019 All Rights Reserved.