カスタマイズについて



バリバリの初心者マークの私が、自分でやったカスタマイズを記録として書いています。
にわかがニュアンスで書いたフワッフワした記事ですので参考程度にどうぞ!
そしてカスタマイズは自己責任でお願いいたします。
どうなるのか分からないので、バックアップやコピーはしっかり行って下さいね!

基本 ワードプレス

吹き出しに枠線を付ける

更新日:

アフィンガー5(wing)には会話風ふきだしがデフォで入っていて、カラー設定も個別で出来て超便利なのですが…
そのままだと、ちょっとボヤっとしてるのが気になるんですよね…

背景色と吹き出しのカラーによるとは思うのですが、このサイトなんて記事内を透過してるせいで尚更、見づらい!
ってことで、枠線を付けてみました!
アイコンの表示位置(右か左か)でcssが変わるので、気になる項目を目次よりどうぞ!

REI
cssは多分アフィンガー4でも問題ないと思います!

どこに書く?

cssを使ったカスタマイズになりますが、カスタマイザーを使って書きます。
ワードプレスのメニューの【外観】→【カスタマイズ】→【CSSの追加】の部分になります。

css内の日本語について

cssに説明文で「(ここから下のcssは)会話の枠線」みたいなのを付ける場合は「/*ほにゃらら*/」みたいな感じで書く方法があります。
ただ、なぜか私の場合はエラーになり保存できないんですよね…
詳しくは後程、別記事で書きますがそれについては個人で判断して書き込みをお願いします。
このページで説明するcssには、cssの最後に日本語で説明をつけています。
基本的にその説明部分はコピー出来ないようにしていますが、ブラウザによっては一緒にコピーになるようです。(IEがそうでした)
面倒ですが、その場合はペースト後に消して下さい。

RYOU
希望があれば「/*ほにゃらら*/」式にするよ

左側アイコンの場合

簡単に説明すると、本体部分(文字が入る部分)と三角の色部分と三角の線部分の3つを指定します。

左アイコン用CSS

REI&RYOU
日本語部分はコピーできないようにしていますー(ブラウザによってはコピーになるみたいです)
.st-kaiwa-hukidashi{
border: solid 3px #565656;線の種類・太さ・色
}
↑本体枠
.st-kaiwa-hukidashi:after {
left: -9.5px;
}
↑三角の色部分
.st-kaiwa-hukidashi:before {
border-color: rgba(194, 225, 245, 0);透明にしてるので何色でもOK
border-right-color: #565656;線の色
content: "";
position: absolute;
top: 50%;(または30px)バージョンで違うので後で説明
left: -14.5px(13px) ;線の太さによって計算・カッコ内は新バージョンの場合
margin-top: -14.5px(13px);線の太さによって計算・カッコ内は新バージョンの場合
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 14.5px(13px) 14.5px(13px) 14.5px(13px) 0;線の太さによって計算・カッコ内は新バージョンの場合
}
↑三角の枠線部分

説明

線の色や太さはお好みで指定してもらって良いのですが、基本的に書き換えるのは赤色の部分だけの方が良いかと思います。
そして、ピンク下線を引いている50%または30pxとなっている部分についてです。
バージョンによって、デフォルトの三角の位置が違います。
1行だと分かりずらいですが、複数行になった際に三角が旧バージョンは吹き出しの真ん中、最新は上部に配置されています。
真ん中に表示される場合は50%、上部の場合は30pxにして下さい。

線については直線(solid)にしてますが、やりたければ点線(dotted)とかにしてドウゾ!

さて、一番ややこしそうなcssになっている三角の枠線部分について補足です。

【border-color】は透明にしているだけなので、気にしなくて大丈夫です。そのまま張り付けてOK。

三角の枠線部分で線の太さによって計算と書いていますが、難しいことはありません。

旧バージョン【10px + 線の太さ + 線の太さの半分】
新バージョン【10px + 線の太さ 】

上記の計算でOK!3pxの場合は10+3+1.5で14.5pxになっています。(新バージョンは10+3で13px)

RYOU
計算は自信ないので色々試してみて下さいー!

右側アイコンの場合

基本的に左アイコンと同じです。
「hukidashi2」になってleftとrightが入れ替わるだけなイメージ!

右アイコン用CSS

REI&RYOU
こちらも日本語部分はコピーできないようにしてるよ!(ブラウザによる)
.st-kaiwa-hukidashi2{
border: solid 3px #565656;線の種類・太さ・色
}
↑本体枠
.st-kaiwa-hukidashi2:after {
right: -9.5px;
}
↑三角の色部分
.st-kaiwa-hukidashi2:before {
border-color: rgba(194, 225, 245, 0);透明にしてるので何色でもOK
border-right-color: #565656;線の色
content: "";
position: absolute;
top: 50%;(または30px)バージョンで違うので後で説明
righit: -14.5px(13px);線の太さによって計算・カッコ内は新バージョンの場合
margin-top: -14.5px(13px);線の太さによって計算・カッコ内は新バージョンの場合
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 14.5px(13px) 0 14.5px(13px) 14.5px(13px);線の太さによって計算・カッコ内は新バージョンの場合
}
↑三角の枠線部分

説明

ここからは右側アイコンと一緒の説明になります。
同じこと書いてるので右側アイコンで読んだ人は飛ばしてOK!

線の色や太さはお好みで指定してもらって良いのですが、基本的に書き換えるのは赤色の部分だけの方が良いかと思います。
そして、ピンク下線を引いている50%または30pxとなっている部分についてです。
バージョンによって、デフォルトの三角の位置が違います。
1行だと分かりずらいですが、複数行になった際に三角が旧バージョンは吹き出しの真ん中、最新は上部に配置されています。
真ん中に表示される場合は50%、上部の場合は30pxにして下さい。

線については直線(solid)にしてますが、やりたければ点線(dotted)とかにしてドウゾ!

さて、一番ややこしそうなcssになっている三角の枠線部分について補足です。

【border-color】は透明にしているだけなので、気にしなくて大丈夫です。そのまま張り付けてOK。

三角の枠線部分で線の太さによって計算と書いていますが、難しいことはありません。

旧バージョン【10px + 線の太さ + 線の太さの半分】
新バージョン【10px + 線の太さ 】

上記の計算でOK!3pxの場合は10+3+1.5で14.5pxになっています。(新バージョンは10+3で13px)

RYOU
この計算に自信はないから色々お試しして下さい…

個別に設定したい

例えば会話1の線は赤にして、会話2の線は緑にしたいとかありますよね。
そんな場合は上記したcssの青字の部分前に「.kaiwaicon +したい会話の番号」を足します。
会話1なら「.kaiwaicon1」、会話2なら「.kaiwaicon2」という感じで指定したい会話番号を付ければ大丈夫です!
こんな感じになります。

.kaiwaicon1 .st-kaiwa-hukidashi{
css内容ほにゃららら
}
.kaiwaicon1 .st-kaiwa-hukidashi:after{
css内容ほにゃららら
}
.kaiwaicon1 .st-kaiwa-hukidashi:before{
css内容ほにゃららら
}

その他のカスタマイズ

吹き出しの枠線を付けたなら、アイコンにもオリジナルカラーで枠線付けたりするのもオススメ!

その他にもcssで簡単に出来る会話風吹き出しのカスタマイズを紹介してますので、気になるのがあれば見て下さいませー!

吹き出しの個別カラー設定
心の声風にする
アイコンに好きな色の枠線をつける
アイコン名のカスタマイズ

まとめ

少し長ったらしいcssではありますが、仕組みは簡単で貼り付けで行けると思うので、どうぞ使ってあげて下さい。
しかし冒頭の注意にあるように初心者マークの私がメモとして書いているものなので、自己責任でオナシャス!
枠線付けたなら、アイコンの枠線のカラーを変えるのもオススメなので、良かったらそちらも読んでみて下さい★

AFFINGER5(WING)

WING(AFFINGER5版)







-基本, ワードプレス
-, , ,

Copyright© 3ism+9ality , 2019 All Rights Reserved.