カスタマイズについて



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

基本 ワードプレス

心の声みたいな会話ふきだし

更新日:

アフィンガー5(wing)にデフォで入っている会話風ふきだしは8種類もアイコンを登録できて、背景色も個別設定できる優れもの!
なのですが…心の声風なのとかも欲しくない?って事でcssを使って簡単カスタマイズ!
基本的に貼り付けのみでいけるはず!

アイコンの表示位置(右か左か)でcssが変わるのと、枠線有り、無しバージョンでcss置いてます。
見たい項目を目次から選んでくださいね★
ちなみに、普通の会話風ふきだしに枠線を付けるカスタマイズはこちらで紹介してるよ!

REI
cssは問題なくアフィンガー4でも使えるはずだ…

どこに書く?

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

css内の日本語について

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

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

心の声風にする時の注意

紹介してるcssのまま張り付けると登録している会話風ふきだし全てがこのタイプになるので注意して下さいね。
また、色も背景色に合わせた方が違和感ないと思うので、面倒ですが心の声風にしたい会話1つ1つ指定してcssを書いてあげて下さいね。

個別に設定する

会話1、会話2と最大8まで登録できますが、個別に指定する場合は下記で紹介しているcssのセレクタ部分(青い字の部分)の前に「.kaiwaicon +したい会話の番号」を足します。
会話1なら「.kaiwaicon1」、会話2なら「.kaiwaicon2」という感じで指定したい会話番号を付ければ大丈夫です!
こんな感じになります。

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

枠有り左側アイコン

丸を2つ付けるので、その2つ分のcssになります。
上にも書いてますが、これをこのまま張り付けると登録している会話風ふきだし全てがこのタイプになるので注意!
【個別に設定する】に書いてるように、心の声風にしたい会話のみを指定してあげて下さいね!

枠有り左側用CSS

REI&RYOU
基本的に日本語部分はコピーできないようになってるよ(ブラウザによってはコピーされます)
.st-kaiwa-hukidashi:before{
content: "";
position: absolute;
margin-top:-11px;上下の位置
left: -26px;左右の位置
width: 10px;丸の横幅
height: 10px;丸の縦幅
background: #f7f5a3;丸の色
border-radius: 50%;
border:none;
box-shadow: 0 0 0 2.5px #565656;枠の太さ・色
}
↑上の丸
.st-kaiwa-hukidashi:after{
content: "";
margin-top:-3px;上下の位置
left: -13px;左右の位置
width: 14px;丸の横幅
height: 14px;丸の縦幅
background: #f7f5a3;丸の色
border-radius: 50%;
border:none;
box-shadow: 0 0 0 2.5px #565656;枠の太さ・色
}
↑下の丸

説明

丸の色はもちろん、線の色や太さはお好みで指定してもらって良いのですが、基本的に書き換えるのは赤色の部分だけで良いかと思います。
一応、私的にバランス良いかな?って丸のサイズと位置にしてますが、気になる方は適当に数字イジって下さいね。

枠無し左側アイコン

丸を2つ付けるので、その2つ分のcssになります。
上にも書いてますが、これをこのまま張り付けると登録している会話風ふきだし全てがこのタイプになるので注意!
【個別に設定する】で説明しているので、心の声風にしたい会話のみを指定してあげて下さいね!

枠無し左側用CSS

REI&RYOU
日本語部分はコピーできないようになってるよ(ブラウザによる)
.st-kaiwa-hukidashi:before{
content: "";
position: absolute;
margin-top:-11px;上下の位置
left: -26px;左右の位置
width: 10px;丸の横幅
height: 10px;丸の縦幅
background: #f7f5a3;丸の色
border-radius: 50%;
border:none;
}
↑上の丸
.st-kaiwa-hukidashi:after{
content: "";
margin-top:-3px;上下の位置
left: -13px;左右の位置
width: 14px;丸の横幅
height: 14px;丸の縦幅
background: #f7f5a3;丸の色
border-radius: 50%;
border:none;
}
↑下の丸

説明

丸の色はもちろん好きな色を指定してもらって良いのですが、基本的に書き換えるのは赤色の部分だけで良いかと思います。
一応、私的にバランス良いかな?って丸のサイズと位置にしてますが、気になる方は適当に数字イジって下さいね。

枠有り右側アイコン

丸を2つ付けるので、その2つ分のcssになります。
上にも書いてますが、これをこのまま張り付けると登録している会話風ふきだし全てがこのタイプになるので注意!
【個別に設定する】で説明しているので、心の声風にしたい会話のみを指定してあげて下さいね!

枠有り右側用CSS

REI&RYOU
基本的に日本語部分はコピーできないようになってるよ(ブラウザによる)
.st-kaiwa-hukidashi2:before{
content: "";
position: absolute;
margin-top:-11px;上下の位置
right: -26px;左右の位置
width: 10px;丸の横幅
height: 10px;丸の縦幅
background: #f7f5a3;丸の色
border-radius: 50%;
border:none;
box-shadow: 0 0 0 2.5px #565656;枠の太さ・色
}
↑上の丸
.st-kaiwa-hukidashi2:after{
content: "";
margin-top:-3px;上下の位置
right: -13px;左右の位置
width: 14px;丸の横幅
height: 14px;丸の縦幅
background: #f7f5a3;丸の色
border-radius: 50%;
border:none;
box-shadow: 0 0 0 2.5px #565656;枠の太さ・色
}
↑下の丸

説明

丸の色はもちろん、線の色や太さはお好みで指定してもらって良いのですが、基本的に書き換えるのは赤色の部分だけで良いかと思います。
一応、私的にバランス良いかな?って丸のサイズと位置にしてますが、気になる方は適当に数字イジって下さいね。

枠無し右側アイコン

丸を2つ付けるので、その2つ分のcssになります。
上にも書いてますが、これをこのまま張り付けると登録している会話風ふきだし全てがこのタイプになるので注意!
【個別に設定する】で説明しているので、心の声風にしたい会話のみを指定してあげて下さいね!

枠無し右側用CSS

REI&RYOU
日本語部分はコピーできないようになってるよ(ブラウザによる)
.st-kaiwa-hukidashi2:before{
content: "";
position: absolute;
margin-top:-11px;上下の位置
right: -26px;左右の位置
width: 10px;丸の横幅
height: 10px;丸の縦幅
background: #f7f5a3;丸の色
border-radius: 50%;
border:none;
}
↑上の丸
.st-kaiwa-hukidashi2:after{
content: "";
margin-top:-3px;上下の位置
right: -13px;左右の位置
width: 14px;丸の横幅
height: 14px;丸の縦幅
background: #f7f5a3;丸の色
border-radius: 50%;
border:none;
}
↑下の丸

説明

丸の色はもちろん好きな色を指定してもらって良いのですが、基本的に書き換えるのは赤色の部分だけで良いかと思います。
一応、私的にバランス良いかな?って丸のサイズと位置にしてますが、気になる方は適当に数字イジって下さいね。

その他のカスタマイズ

吹き出しや、アイコンにも好きな色で枠線を付けたり出来ますので、良かったらドウゾ。

どれも基本的に張り付けるだけでOKなcssになってますよー!

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

まとめ

心の声風ふきだしで、ちょっと会話風ふきだしの使い方の幅も広がるかなぁと!
しかし冒頭の注意にあるように初心者マークの私がメモとして書いているものなので、自己責任でオナシャス!

AFFINGER5(WING)

WING(AFFINGER5版)







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

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