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】実はこっちが正解! サイドバー見出しの文字サイズの本当の変更方法

当ブログ「賢者のインターネット」はWordPressで作成しており、有料テーマの「AFFINGER5(WING)」と専用子テーマの「JET」を使用して ...

続きを見る

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

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

実は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」はコチラ

 

迷ったらココ! 格安SIMおすすめランキング

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

mineo(マイネオ)

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

IIJmio

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

OCN モバイル ONE

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

しぶちん

アラフォードケチの格安SIM愛好家。業界歴19年のITライターでもあります。格安SIMに乗り換えてスマホ代を70%減らすことに成功。浮いたお金は子供の塾費用に使って無事に志望校に合格! 「しぶちん」名義では、ライブドアニュース等で執筆。別名義で雑誌・書籍でも執筆中。 格安SIM選びのご相談、各種お問い合わせ、お仕事依頼などは、お問い合わせフォームからお願いします!

人気のエントリー

1

  「mineo」(マイネオ)といえば、格安SIMの中でも特に人気が高く、テレビCMも放映されているので知名度もバツグンですよね。 &nbs ...

DMMモバイルのSNSフリー 2

  すでにDMMモバイルを利用している人、もしくは検討している人の中には、オプションサービスである「SNSフリー」が気になっている人も多いの ...

2019年お得な格安SIM割引キャンペーン 3

主要な格安SIM・格安スマホでは、初期費用や月額料金、端末が割引になるキャンペーンを随時行っています。 このページでは格安SIM・格安スマホの最新キャ ...

ドコモのギガホと格安SIMどっちがお得か? 4

かねてから導入が検討されていたドコモの新料金プランがついに発表されました。 その名も「ギガホ」と「ギガライト」。2019年5月22日(水)から予約受付 ...

IIJmioレビュー 5

  数ある格安SIMの中でも根強い人気を誇る「IIJmio」。   IIJmioへの乗り換えを検討している方が、いちばん気になるの ...

-AFFINGER

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