スマホ料金を約70%安くする方法

ドケチの格安SIM

AFFINGER

ついに発見! AFFINGERの会話吹き出しのアイコンを大きくする方法

Affingerの会話アイコンは大きくできる

当ブログでも利用の有料テーマ「AFFINGER」は便利!

当ブログはWordPressで作成していますが、テーマには「WING(AFFINGER5)」を使用しています。

 

AFFINGERはその名の通り、アフィリエイトで収益を上げることに特化しているのが特長。

 

標準でSEO対策が施され、豊富な記事パーツ、詳細なカスタマイズが可能なデザイン設定など、大変すばらしいテーマです。

 

価格は14,800 円(税込)。決して安いとはいえませんが、2万円を超える有料テーマが多い中、比較的良心的な価格だと思います。

 

\SEO最強のWordPressテーマ/

「AFFINGER5」はコチラ

 

しかも、複数サイトに使うこともOKなので、コスパ面では申し分ありません。

 

CSSもPHPもチンプンカンプンだった筆者も、AFFINGERのおかげで大いに助けられています。なのですが…

 

でも会話吹き出しのアイコンが小さかった…(T_T)

「WING(AFFINGER5)」には数多くの機能がありますが、ブログで重宝なのが「会話」の機能。

 

アイコンと吹き出し形式で文章を入力できる機能で、堅苦しくなりがちな説明文もとっつきやすく表現できるのがメリット。

 

これ自体はホントに気に入っているのですが、実は会話アイコンのサイズが60pxに固定されているんですよね。

 

下の画面のようにちょっと小さく感じるんです…(´・ω・`)

 

デフォルトの会話アイコン

 

このサイズだとせっかくのアイコンの印象が弱すぎ。

 

しぶちん
もっと大きくしたいなあ…

 

何とか吹き出しアイコンを大きくしたい

AFFINGERの設定項目を必死で探したものの、残念ながらアイコンサイズを変更する項目は存在せず。

 

以前にも申し上げましたが、筆者にはほぼほぼCSSやPHPの知識がありません(^_^;)

 

でも、以前は試行覚悟の末にサイドバータイトルの文字サイズを大きくできました。

関連
サイドバータイトルの文字サイズ変更
【AFFINGER】サイドバー見出しの文字サイズを変更する方法

続きを見る

 

というわけで、今回も無い知恵を絞って試行錯誤してみました。

 

会話吹き出しのアイコンを大きくする方法を発見!

実はWebを検索すると、オリジナルのショートコードで会話吹き出しを実装する方法が見つかります。

 

 

 

でも、この方法だとテキストエディターからしか呼び出せないし、せっかくAFFINGER標準の会話機能があるんだから、これをそのまま活かしたいところ…。

 

ここからは必死で知恵を絞りつつ、親テーマに該当項目がないか確認したり、カスタマイズしたコードを試したり…。

 

その結果、何とかAFFINGER標準のままサイズを大きくする方法を発見しました!

 

以下でカスタマイズ方法を解説しますので、今まで悩んでいたAFFINGERユーザーの皆さんはぜひ実践してみてください。

 

これで解決! 会話吹き出しアイコンのサイズ変更手順

ここからは、AFFINGER標準の会話アイコンのカスタマイズ方法を解説していきましょう。

 

今回はアイコンサイズを90pxにしていますが、もちろん必要に応じて数値を変更すればお好みのサイズに変更できます。

 

なお、AFFINGERでは会話1~会話8までアイコンを登録できますので、ここではすべてのアイコンを90pxにするケースを想定しています。

 

利用するコードは少々長くなりますが、ご容赦くださいませ。

 

コピーしたコードを子テーマの「functions.php」に貼り付け

まずは以下のコードを全コピーし、WordPressの「外観」→「テーマの編集」へ移動します。

 

 

ここで、子テーマの「テーマのための関数(functions.php)」を表示。一番下に貼り付けて、「ファイルを更新」をクリックします。

 

この作業により、まずは60pxに制限されていたアイコンサイズの上限を90pxに変更しています。

 

functions.phpのカスタマイズ

 

 

「追加CSS」にコードを貼り付け

以下のコードをコピーして、WordPressの「外観」→「カスタマイズ」→「追加CSS」を開きます。

 

 

「追加CSS」画面の一番下に、コピーしたコードを貼り付けて「公開」ボタンをクリックします。

 

この作業により、最初に変更した上限値いっぱいの90pxまでアイコンサイズを変更しています。

追加CSS

 

 

過去記事も含めて自動的に会話アイコンが変更される

これでカスタマイズは完了! コピペだけなので、とっても簡単です。

 

完了したら、実際に会話を入力してプレビューでアイコンサイズを確認しましょう。

 

もちろん、過去の記事も含めて自動的に反映されますので、過去記事で確認してもOKです。

 

会話アイコンのサイズを確認

 

 

応用で自由にアイコンサイズは変更可能

今回はアイコンサイズを90pxにしましたが、もちろんこの方法の応用で好きなサイズに変更できます。

 

さらに大きく100pxにしたい場合は、「functions.php」に貼り付けたコードの「90px」の部分を全て「100px」に変更したうえで、「追加CSS」に貼り付けたコードの「90px」も全て「100px」に変更すればOK。

 

逆にサイズを小さくしたい場合は、上限値の変更は不要なので、追加CSSのコードの方だけを全て数値変更すればOKです。

 

アイコン名のフォントサイズや色、枠線の太さや色も変更可能

ちなみに、今回カスタマイズしたコードをベースにすれば、アイコンの下に表示されるフォントサイズやカラー、アイコン周囲の枠線の太さやカラーも変更できます。

 

アイコン名のフォントサイズの変更など

 

今回の方法で「追加CSS」に追加したコードの、「st-kaiwa-fase」の部分にある「border」の数値がアイコン周囲の枠線の太さで、初期状態では「1px」になっています。

 

その横の「#ccc」は枠線のカラーで、初期状態はグレー色の「#ccc」になっています。

 

これらの数値や色コードを変更すれば自由にアイコンの印象を変更できます。

 

また、アイコンサイズを大きくすると、その下に表示される名前が小さく感じることがあります。

 

その場合は、「st-kaiwa-fase-name」の部分にある「font-size」のパーセンテージを大きくすれば、文字サイズを大きく変更できます。

 

名前の文字カラーは初期状態では「#616161」ですが、ここも番号を変更することで、カラーを変更できます。

 

例えば、こんな感じにもできますので、会話アイコンの印象を大きく変えられますね。

 

会話アイコンの印象

 

 

まとめ

今回は、「【AFFINGER】ついに発見! 会話ふきだしのアイコンを大きくする方法」をお送りしました。

 

AFFINGERを使い始めた当初より、この「会話アイコンのサイズ問題」はずっと悩みの種でしたが、どうにかこうにか解決できました。

 

こうやって試行錯誤して成長できるのもAFFINGERの面白さのひとつかもしれません。

 

これからブログ運営にチャレンジしたい方、また有料テーマに興味のある方は、AFFINGERを検討してみてはいかがでしょうか。

 

\SEO最強のWordPressテーマ/

「AFFINGER5」はコチラ

関連
サイドバータイトルの文字サイズ変更
【AFFINGER】サイドバー見出しの文字サイズを変更する方法

続きを見る

管理人おすすめ! 格安SIMベスト3

企業の信頼性、料金体系、サービス内容など、管理人が自信を持っておすすめできる格安SIMです。

mineo(マイネオ)

mineo(マイネオ)
  • 関西電力の関連会社であるケイ・オプティコムが運営
  • ドコモ、au、ソフトバンクのトリプルキャリアに対応
  • 「フリータンク」「マイネ王」などの個性的なサービスが充実

IIJmio

IIJmio(みおふぉん)
  • ドコモとauのマルチキャリア対応
  • ファミリー向けのプランが強い
  • 2年以上の継続利用でオプション無料などの特典がある

OCN モバイル ONE

  • 安心のNTTグループ企業が運営
  • 音楽系アプリの通信量が使い放題の「MUSICカウントフリー」が無料
  • 無料で全国8万ヶ所のWi-Fiスポットが使える
  • この記事を書いた人

しぶちん

出版業界歴19年のITライター&編集者。スマホ代を約70%節約できる「格安SIM」を完全自腹でレビューしています。 各種お問い合わせ、お仕事依頼などは、こちらからどうぞ!

-AFFINGER

Copyright© ドケチの格安SIM , 2020 All Rights Reserved.