AFFINGER6(アフィンガー6)

【AFFINGER6】アイコンにアニメーション効果をつける方法

当ページのリンクには広告が含まれています。

筆者はこんな人

AFFINGER6とSWELLを使って、6つのブログを運営している人。(2023年8月実績は、総PV約52,000/月)

SWELLで特化ブログを4つ、雑記ブログを1つ、AFFINGER6で当ブログを運営中。

AFFINGER6とSWELLそれぞれのメリット・デメリットを理解している。

両テーマを同時に使っているからこそ発信できるリアルな声。

私が運営している6つのブログたちのドメイン

ばらもん。
結論から申し上げますと、AFFINGER6とSWELLの両方を使って雑記ブログと特化ブログを両方運営することが最適解だと感じています。
雑記ブログを運営していて、伸びてきているカテゴリーはありませんか?
伸びてきているカテゴリーがあるなら、特化ブログを立ち上げることをオススメします!

ココがポイント

SWELLとAFFINFER6の比較記事を書いている方は多くいらっしゃいます。
しかし、私は両テーマを同時進行で使っている希少価値のあるブロガーです。

ばらもん。
両テーマの違いを包み隠さずに解説しています。

SWELLとAFFINGERどっち?!12項目で徹底比較にオリジナル意見をとことんまとめました。

AFFINGER6とSWELLを徹底的に比較して、テーマ選びに悩まれている方へ手助けをすることが当ブログのコンセプト
当ブログを読むことで、答えにたどり着けるはずですよ

でも、ひとりで6つものブログを運営するのって大変なんじゃないの?

ブログを複数(6つ)運営をして感じているメリット・デメリットにリアルな感想をまとめています。

affinger6アイコンにアニメーション

 

 

ばらもん。
AFFINGER6でアイコンにアニメーションをつける方法を教えてほしい

 

上記のお悩みを解決します。

 

本記事の内容

  • AFFINGER6でアイコンにアニメーションをつける方法
  • マイブロック機能を利用して、効率化する方法

こんな方におすすめ

  • アイコンにアニメーション効果をつけておしゃれにしてみたい方

 

それでは、本題に入ります。

\公式からも期間限定で特典付き!/

SUGOI MOKUJI(すごいもくじ) [LITE]
AFFINGER(アフィンガー)EX版体験版
タグ管理マネージャー体験版
PVモニター体験版

\当ブログ限定特典付き!/

AFFINGER6(特典付き)を手に入れる

当ブログの限定特典は下記の2記事

約14,400文字数のボリュームたっぷり記事に仕上げました。

\本業情シスの大暴露記事も付いてくる!(約6,400文字)/

skyseaから身を隠す方法

\まとめ買いでお得!/

【まとめ買い】ACTION PACK3 - AFFINGER6EX版(特典付き)を手に入れる

EX版とは、「AFFINGER6」の特別機能追加バージョンのことです。

 

アイコンにアニメーション効果をつける

 

マイブロックにアニメーションを付けたアイコンを登録していきます。

マイブロックに登録をしておくことで、効率的に執筆作業をすることが可能になります。

 

step
1
マイブロックに追加

マイブロック→新規追加をクリックします。

ブロックタブの『クラシック』を選択

 

step
2
アニメーションをつけるパーツを選択

今回は例として、私が多用するパーツにアニメーションをつけてみます。

テキストパーツ→複合→ココがポイント

 

step
3
アニメーション記述を追加

『hand-o-right』の真横にカーソルをセット

 

step
4
アニメーションショートコード追加

ショートコード補助→アニメーション(クラス)→横揺れ

 

step
5
アニメーション記述が追加された

こんな感じで追記されます。

 

step
6
文字入力箇所をわかりやすくしておく

文字の入力個所をわかりやすくしておくために、『ここに文字入力』と追記しました。

必要のない方は、省略をしてもOK

 

step
7
カテゴリー名を追加

右のほうにカテゴリー欄があります。

分かりやすいように、カテゴリー名を付けておきます。

例として『動くアイコン』

 

マイブロックメニューからカテゴリー名を追加してもオッケーです。

 

お好きな方でOK

 

step
8
マイブロックにタイトルをつける

作成したマイブロックにタイトルをつけておきます。

ここがポイント(指横揺れ)

 

step
1
完成

こんな感じでマイブロックに登録することができました!

パチパチパチパチ

 

続いては、登録したマイブロックを使ってみます。

 

登録したマイブロックを使ってみる

アイコンにアニメーション効果を付けたマイブロックを使ってみます。

 

step
1
『+』をクリック

『+』をクリックします。

 

step
2
マイブロックを挿入

パターンタブをクリックして、登録しておいたマイブロックを選択します。

 

実際にはこんな感じ

ココがポイント

ここに文字入力

 

ほかのアニメーションもご紹介しておきます。

自由なメモ

AFFINGER6の装飾はとても豊富です。

 

ココがおすすめ

他のテーマとの差別化を図ることが可能

 

ココがダメ

あえてデメリットを挙げるとすれば、装飾が多すぎて何を選ぶか悩んでしまうこと

 

ココに注意

アニメーションを多用すると逆に見づらくなってしまう可能性があるよ

 

さらに詳しく

アニメーションはほかにも種類があります。

 

◯才女性

私が求めていたアニメーションはコレよ!

 

◯才男性

なんて素敵なアニメーションなんだ!

 

ざっとご紹介してきましたが、これでもごく一部のアニメーションです。

さらに、ほかにもアイコンは多くあります。

アイコン×アニメーションの組み合わせは、莫大です。

 

 

あなただけのオススメアニメーションを探してみるのも楽しいですね。

 

 

\公式からも期間限定で特典付き!/

SUGOI MOKUJI(すごいもくじ) [LITE]
AFFINGER(アフィンガー)EX版体験版
タグ管理マネージャー体験版
PVモニター体験版

\当ブログ限定特典付き!/

AFFINGER6(特典付き)を手に入れる

当ブログの限定特典は下記の2記事

約14,400文字数のボリュームたっぷり記事に仕上げました。

\本業情シスの大暴露記事も付いてくる!(約6,400文字)/

skyseaから身を隠す方法

\まとめ買いでお得!/

【まとめ買い】ACTION PACK3 - AFFINGER6EX版(特典付き)を手に入れる

EX版とは、「AFFINGER6」の特別機能追加バージョンのことです。

 

まとめ

AFFINGER6は、装飾がほんと~~に豊富です。

アニメーション効果だけを見てみても、多種多様です。

 

アニメーション効果とアイコンを組み合わせることによって、読者に効果的に伝えることも可能になると考えています。

AFFINGER6って、カスタマイズをしていて楽しくなるテーマです。以上です。

 

もしかしたら、あなたもドメイン更新料で損をしているかもしれません。

私は、お名前.comとムームードメインからエックスドメインへ移管をしました。
結果、更新料を大幅に安くすることに成功しています。

ブログをこれから先も継続していこうと考えているなら、下記の表をぜひともご覧になってください。

2023.9月時点

※割と頻繁にキャンペーンを開催しているので、料金は変動する可能性があります

.com お名前ドットコム ムームードメイン エックスドメイン
取得料金1年目 0円 750円 1円
更新料金2年目 1,408円 1,728円 1,428円
更新料金3年目 2,816円 1,728円 1,428円
更新料金4年目 4,224円 1,728円 1,428円
更新料金5年目 1,408円 1,728円 1,428円
更新料金6年目 1,408円 1,728円 1,428円
更新料金7年目 1,408円 1,728円 1,428円
合計(仮に7年目まで) 12,672円 11,118円 8,569円

 

ココがポイント

契約期間が長くなれば長くなるほどに、金額差が広がっていくことがわかりますね。

ブログは長くやればやるほどに成長(ドメインエイジが増す)していきます。
ドメインをどこで契約するのかは一目瞭然ではないでしょうか。

 

お得情報

私はエックスサーバーでサーバー&ドメインを同時契約して、キャンペーンドメインをゲットしました(更新料が永久無料)

しかもこれ、ドメイン移管でもオッケーなんです。(※諸条件あるので、公式ページを要チェック。)

 

ばらもん。
私自身、お名前ドットコムとムームードメインからエックスサーバーにドメイン移管してエックスサーバーで一元管理しています

ここだけの話、更新料永久無料キャンペーンドメインを2個もっています。
くわしくは下記の記事をご覧ください。

ドメイン更新料は、独自ドメインでブログを運営する上で絶対に必要な経費。
安く抑えていきたいところです。

【エックスサーバー】独自ドメインキャンペーンがすごすぎる?!

 

\現在開催中のキャンペーンを公式ページでチェックすることをオススメします/

エックスサーバー でお得なキャンペーン情報をチェックしてみる

 

\特化ブログを立ち上げる流れを詳しく解説!/

step
1
特化ブログを立ち上げる下準備

下記を考えておくとスムーズに特化ブログを立ち上げることができるよ!

ポイント

新しいサイト名

新しいドメイン名

新しいサイトのユーザー名

新しいサイトのログインパスワード

引っ越しする記事

引っ越しするカテゴリー

ココがポイント

パソコンのメモ帳やEvernoteに設定情報をメモしておくと便利!

step
2
独自ドメインを取得

独自ドメインをセルフバックでお得にゲットしちゃいましょう。
エックスサーバーがキャンペーン期間中なのかは要チェック!

ポイント&注意点

エックスドメインのセルフバック
【エックスドメイン】セルフバックを2回やってみた

続きを見る

関連

エックスサーバーじゃない方は、これを機にサーバー移転をすることもオススメ。
私自身も、カゴヤサーバーからエックスサーバーに乗り換えました。

【エックスサーバー】独自ドメインキャンペーンがすごすぎる?!

step
3
エックスサーバーの設定

独自ドメインがゲット出来たら、エックスサーバーの設定をササっと済ませておきます!
当ブログが推奨しているエックスサーバーには、『WordPress簡単インストール』機能もあって便利です。

ポイント&注意点

エックスサーバーでドメイン取得したらやっておくこと
【エックスサーバーでドメイン取得したらやっておくこと】

続きを見る

step
4
SWELLのダウンロード→インストール

SWELLをまだ持っていない人は、SWELLのテーマファイルをダウンロードしましょう!
WordPressに命の風を吹き込んでいきます!

ポイント&注意点

【SWELL導入手順】ポイントと注意点を画像多めでくわしく解説

続きを見る

step
4
SWELLに最適なプラグインをインストール

WordPressにSWELLがインストールできたら、SWELLに必要なプラグインをセットしていきましょう!

ポイント&注意点

SWELLにインストールしているプラグイン
【SWELL】インストールしているプラグインをご紹介

続きを見る

step
5
SWELLにGoogleアナリティクスとGoogleサーチコンソールを設定

プラグインのインストール→有効化が完了したら、GoogleアナリティクスとGoogleサーチコンソールの設定をしていきましょう!

ポイント&注意点

SWELLでアナリティクスとサーチコンソールの設定
SWELLでアナリティクス→サーチコンソール設定【2023最新版】

続きを見る

step
6
サイトアイコン作成

ブログの顔でもある『サイトアイコン』を無料&最速で作っておきましょう!

ポイント&注意点

swellでサイトアイコンを作った方法
SWELLでサイトアイコンを最速&無料で作った方法

続きを見る

step
7
お問い合わせフォームの設置

お問い合わせフォームの設置しておくことをオススメします。
WPFormsというプラグインを使えば、簡単にオシャレなお問い合わせフォームを作ることができます。

ポイント&注意点

SWELLでお問い合わせフォームの設置
SWELLでWPFormsを使って問い合わせを設置する手順

続きを見る

step
8
プライバシーポリシーページの設置

ブログを運営していくためには、自分自身を守るためにもプライバシーポリシーページが必要です。

ポイント&注意点

SWELLでプライバシーポリシーページを設置する方法
SWELLでプライバシーポリシーページを設置する手順

続きを見る

step
9
トップページ作成

オシャレなトップページを作成して、訪問ユーザーをビックリさせちゃいましょう!

ポイント&注意点

SWELLで画像に文字入れする方法
SWELLで画像の上に文字を置く方法4選!

続きを見る

step
10
記事一覧ページの作成

ユーザーの回遊率アップを狙うために、記事一覧ページを用意しておきましょう!

ポイント&注意点

swell一覧ページの設置
SWELLの記事・人気・カテゴリー一覧ページの作り方

続きを見る

step
11
記事のお引越し

GoogleアナリティクスとGoogleサーチコンソールの設定ができたら、記事を引っ越ししていきましょう!
私自身、引っ越しさせた記事は50記事は超えています。

ポイント&注意点

記事を引っ越しして特化ブログを作ってみよう!ポイントや注意点は?

続きを見る

step
12
余裕があれば高速化しておこう

SWELLをさらに高速化させて、ユーザービリティ向上を狙いましょう!

ポイント&注意点

swell高速化9選
【SWELL高速化9選】モバイル99点・デスクトップ100点

続きを見る

-AFFINGER6(アフィンガー6)