アフィンガー5にはデフォで入っている会話風ふきだしですが…アイコン名って2行になったりしてません？
アイコンの下に好きな名前を入れられるのですが、5文字を超すと2行に改行されちゃうんでうすよね。
そんな時は簡単にcssでリサイズしてサイズを少し小さくして、1行にスッキリ表示しちゃいましょう！
ついでに、カラーを変えたりも出来るので紹介！
右と左でcssが違うので、目次より選んで下さいませ。
どこに書く？
cssを使ったカスタマイズになりますが、カスタマイザーを使って書きます。
ワードプレスのメニューの【外観】→【カスタマイズ】→【CSSの追加】の部分になります。
css内の日本語について
cssに説明文で「(ここから下のcssは)会話の枠線」みたいなのを付ける場合は「/*ほにゃらら*/」みたいな感じで書く方法があります。
ただ、なぜか私の場合はエラーになり保存できないんですよね…
詳しくは後程、別記事で書きますがそれについては個人で判断して書き込みをお願いします。
このページで説明するcssには、cssの最後に日本語で説明をつけています。
基本的にその説明部分はコピー出来ないようにしていますが、ブラウザによっては一緒にコピーになるようです。(IEがそうでした)
面倒ですが、その場合はペースト後に消して下さい。
左側アイコンの名前
一応、カラーの変更方法なども付けてますが、必要な物だけ使ってドウゾ！
color:#565656;文字色
font-weight:bold;太文字にする
font-size: 60%;サイズ
}
必要ない部分は1行そのまま消してしまって構いません。
サイズについては60％程度で1行に入るかなって感じなのですが、様子見ながら任意のサイズで変更されて下さい。
右側アイコンの名前
こちらも一応、カラーの変更方法なども付けてますが、必要な物だけ使ってドウゾ！
color:#565656;文字色
font-weight:bold;太文字にする
font-size: 60%;サイズ
}
必要ない部分は1行そのまま消してしまって構いません。
サイズについては60％程度で1行に入るかなって感じなのですが、様子見ながら任意のサイズで変更されて下さい。
個別に設定したい
会話1の名前だけ長いからサイズを小さくしたいとか、会話ごとに名前の色を変えたいとかありますよね。
そんな場合は上記したcssの青字の部分前に「.kaiwaicon ＋したい会話の番号」を足します。
会話1なら「.kaiwaicon1」、会話2なら「.kaiwaicon2」という感じで指定したい会話番号を付ければOK!
こんな感じになります。
css内容ほにゃららら
}
その他のカスタマイズ
アイコンや吹き出しに枠線つけたり、心の声風のカスタマイズもcssで簡単に出来ちゃいます！
どうぞついでに気になるのあればカスタマイズされて下さい★
吹き出しの個別カラー設定
吹き出しに枠線をつける
心の声風にする
アイコンに好きな色の枠線をつける
まとめ
ちょっとした事なんですが、2行に改行されると見た目的に嫌ですよね。
最初は私も気にしてなくて2行になるからーと違う名前を付けてたのですが、よく考えたらリサイズすりゃいいじゃん！って話でした。
AFFINGER5（WING）
WING（AFFINGER5版）
