AFFINGER

【AFFINGER】できたっ! 会話吹き出しに枠線を付ける方法

当ブログでは高機能な有料テーマの「WING(AFFINGER5)」を使用しています。

AFFINGERには多彩な機能が揃っていますが、中でもブロガーにとって重宝するのが「会話吹き出し」の機能。

好きなアイコンを設定して、吹き出し形式で会話コンテンツを手軽に作れるのがメリットです。

当ブログでは以前に、吹き出しのアイコンサイズを変更するCSSカスタマイズをご紹介しました。

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

当ブログでも利用の有料テーマ「AFFINGER」は便利! 当ブログはWordPressで作成していますが、テーマには「WING(AFFINGER5)」 ...

続きを見る

吹き出しはAFFINGERユーザーにとってはおなじみの機能ですが、筆者は以前から「会話吹き出しの周囲に枠線を付けられればいいのになあ…」と考えていたんです。

しかし、デフォルトではAFFINGERには枠線を付ける機能は搭載されていません…。

となれば、行き着くのはCSSのカスタマイズ。

CSSやPHPの知識がほとんどない筆者ですが、今回もひたすら試行錯誤してみました。

※追記

ついにAFFINGER5のWING ver20190314アップデートで枠線の機能が追加されました!

もちろんCSSでカスタマイズする方法を知っておいて損はありませんが、面倒な人はぜひアップデートして利用しましょう!

参照先

デフォルトの会話吹き出しは何となく締まらない印象が…

非常に便利な「WING(AFFINGER5)」ですが、デフォルトの会話風吹き出しは背景のみなので何となく印象が弱いんですよね。

同じ感想を抱いているユーザーさんも多いかと思います。

デフォルトの会話風ふきだし

背景色は「外観」→「カスタマイズ」→「オプションカラー」で変更できるので、ビビッドカラーを使えば目立たせることができますが、かえって悪目立ちしてしまう可能性も。

もし枠線を付けることができれば、吹き出しが締まった印象になるはずです。

吹き出しに枠線を付けられる? ネットで有益な情報を発見!

というわけで、CSSをカスタマイズするべくネットを検索していたのですが、会話吹き出しの枠線に関してはほとんど情報がありません。

そんな中、やっと見つけたのが以下のリンク先の情報(39様参考にさせていただきましたm(_ _)m)

参照先

これはすばらしい! さっそく試してみました。

左側の会話吹き出しは成功!…と思われたが…

参照先のサイトに記載されていたコードを「外観」→「カスタマイズ」→「追加CSS」に追記してみると、左側の吹き出しには見事に反映されました!

ところが喜んだのも束の間、吹き出しを複数行にしてみると…。

このように背景部分の三角とボーダーの三角部分がズレてしまいました(^_^;)

右側の会話吹き出しはなぜか上手くいかず…

そして、今度は右側の吹き出し用のコードを試してみると…

こちらは行数にかかわらず、三角部分にボーダー色が入りません…。

このままだとちょっと使えないなあ…。

それでもあきらめない! 自分で試行錯誤してみました

筆者にはCSSやPHPの知識が絶望的にありませんので、正直もう諦めようかと思いました。

でも、以前の会話アイコンの成功例もあるので、とりあえず期待せずに粘ってみることに。

親テーマに参考になりそうな箇所を発見!

まずはAFFINGERの親テーマの「style.css」を見てみると…

このように、会話吹き出しのボーダーについて書かれている箇所を発見!

これは参考になりそうです。このコードを元に必死にいじくり倒しました。

その結果、かなり苦労はしましたが以下のように枠線を付けることができました!(※枠線の太さは2px)。

吹き出しに枠線

コピペするだけで会話吹き出しに枠線が付けられます

以下のコードを「追加CSS」にコピペするだけで吹き出しに2pxの太さで枠線を付けることができます。

なお、枠線の太さや色は自由に変更できます。

変更方法は後述しますので参考にしてください。

まずはコードの貼り付け手順を以下に解説します。

コードの貼り付け手順

まずは先ほどご紹介したコードをコピーします。

 

WordPressのメニューから「外観」→「カスタマイズ」→「追加CSS」を開いて、最下部にコピーしたコードを貼り付けます。

 

コードが貼り付けられたのを確認して、右上の「公開」をクリックすれば過去も含めてすべての会話吹き出しに反映されます。

 

吹き出しに枠線

会話吹き出しの枠線の太さや色を変更するには?

今回ご紹介したコードの数値を変更することで、枠線の太さや色を変更できます。

太さを変更する場合

枠線の太さを変更したい場合は、下の画面の赤枠の部分の数値を変更すればOK。

左側の吹き出しは「.st-kaiwa-hukidashi」の下の行にある数値を、右側の吹き出しは「.st-kaiwa-hukidashi2」の下の行にある数値を変更します。

この数値を高くすれば太く、低くすれば細くできます。

左側の吹き出しの場合

右側の吹き出しの場合

枠線の色を変更する場合

枠線の色を変更したい場合は、下の画面の赤枠部分の色コード番号を変更すればOK。

上の赤枠部分は吹き出し周囲の枠線の色、下の赤枠部分は吹き出しの突起部分の枠線の色になります。

吹き出し周囲と突起部分は通常は同じ色を指定しますが、あえて違う色にすることも可能です。

もちろん、左側の吹き出し、右側の吹き出しで色を変えることもできます。

「.st-kaiwa-hukidashi」で始まる箇所が左側の吹き出し、「.st-kaiwa-hukidashi2」で始まる箇所が右側の吹き出しになります。

左側の吹き出しの場合

右側の吹き出しの場合

枠線の太さを変更した場合は微調整が必要になる場合も

なお、枠線の太さを変更した場合は吹き出しの突起部分がずれてしまうことがあります。

そんなときは、以下の赤枠の箇所の数値を微調整することで修正できます。

左側の吹き出しの微調整は「.st-kaiwa-hukidashi:before」で始まる部分の「left」の数値を、右側の吹き出しの微調整は「.st-kaiwa-hukidashi2:before」で始まる部分の「right」の数値を変更します。

左側の吹き出しの場合

右側の吹き出しの場合

有料ならAFFINGERの「会話用プラグイン」が便利

CSSのカスタマイズなんてめんどくさい、有料でもいいからもっと手っ取り早く使いたいという人もいるかもしれません。

そんな場合は、AFFINGERの「会話用プラグイン」がオススメです。

会話用プラグインのポイント

  • 吹き出しキャラを(ほぼ)無限に作成できる
  • キャラ別に色やカテゴリを設定できる
  • 会話ごとに左右の向きも変更できる
  • 価格は1980円(税込)

このプラグインで、会話コンテンツの作成がさらに便利になるので、興味のある人は導入を検討してみましょう。

まとめ:カスタマイズの自由度が高いのがAFFINGERの特徴

今回は「【AFFINGER】できたっ! 会話吹き出しに枠線を付ける方法」と題してお送りしました。

それにしても、今回は本当に苦労しました。途中は絶対に無理だと思いましたが、ダメ元でいろいろ弄ってみたのが功を奏しましたね。

カスタマイズの自由度が高く、ユーザーも一緒に成長できるのがAFFINGERのいいところだと思います。

これからWordPressでブログを始めたい方はもちろん、現在別のテーマを使っている人も、ぜひ導入を検討してみてはいかがでしょうか。

\SEO最強のWordPressテーマ/

「AFFINGER5」はコチラ

 

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

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

mineo(マイネオ)

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

IIJmio

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

OCN モバイル ONE

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

しぶちん

業界歴19年のドケチなITライター。スマホ代を約70%節約できる「格安SIM」の賢い選び方をお届けします。 各種お問い合わせ、お仕事依頼などは、お問い合わせフォームからどうぞ!

人気のエントリー

1

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

DMMモバイルのSNSフリー 2

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

3

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

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

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

IIJmioレビュー 5

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

-AFFINGER

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