カスタマイズについて



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

基本 ワードプレス

会話アイコンに枠線をつける

更新日:

アフィンガー5にデフォで入っている会話風ふきだしは使ってますか?
ちょっとした事でオリジナル感を出してオシャレにカスタマイズしようぜ!って事でアイコンに枠線を付ける方法です。
会話の配置(左右)でcss違うので、目次より選んで下さいねー!

どこに書く?

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

css内の日本語について

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

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

左側アイコン

普通にborderでも良いのですが、それだとただでさえ小さいアイコンが線の太さの半分ですが小さくなっちゃうんですよね。
なので影をつけるやり方で線をつけてます。
ちなみに、私は2重線にしてるのでついでにそれも載せてます。
注意点としては、あまりに太くすると記事枠や吹き出し自体に干渉しだすので程々(太くても7pxくらい?)が良いかと!

RYOU
PCでOKでもスマホじゃ枠線に被ってる!とかあるよ

普通に1本線

REI&RYOU
基本的に日本語部分はコピーできないようになってるよ(ブラウザによってはコピーされます)
.st-kaiwa-face img{
box-shadow: 0 0 0 4px #F9FC6D;線の太さ・色
border:none;
}

2本線

最初に書いてる方が内側、次が外側になります。
内側の線が4px、外側の線が7-4(内側線の太さ)=3で3pxの表示になってます。

REI&RYOU
基本的に日本語部分はコピーできないようになってるよ(ブラウザによってはコピーされます)

.st-kaiwa-face img{
box-shadow: 0 0 0 4px #F9FC6D, 0 0 0 7px #78d3b9;線の太さ・色
border:none;
}

どちらも赤文字以外のところは書き換え不要です。
色や線の太さはお好きにイジって下さいー

右側アイコン

こちらも左と一緒で、普通にborderでも良いのですが、それだとただでさえ小さいアイコンが線の太さの半分ですが小さくなっちゃうんですよね。
なので影をつけるやり方で線をつけてます。
ちなみに、私は2重線にしてるのでついでにそれも載せてます。
注意点としては、あまりに太くすると記事枠や吹き出し自体に干渉しだすので程々(太くても7pxくらい?)が良いかと!

RYOU
PCでOKでもスマホじゃ枠線に被ってる!とかあるよ

普通に1本線

REI&RYOU
基本的に日本語部分はコピーできないようになってるよ(ブラウザによってはコピーされます)
.st-kaiwa-face2 img{
box-shadow: 0 0 0 4px #F9FC6D;線の太さ・色
border:none;
}

2本線

最初に書いてる方が内側、次が外側になります。
内側の線が4px、外側の線が7-4(内側線の太さ)=3で3pxの表示になってます。

REI&RYOU
基本的に日本語部分はコピーできないようになってるよ(ブラウザによってはコピーされます)

.st-kaiwa-face2 img{
box-shadow: 0 0 0 4px #F9FC6D, 0 0 0 7px #78d3b9;線の太さ・色
border:none;
}

どちらも赤文字以外のところは書き換え不要です。
色や線の太さはお好きにイジって下さいー

個別に設定

会話ふきだしの色に合わせてアイコンの枠色も個別に設定したい場合もあるかと思います。
そんな場合は上記したcssの青字の部分前に「.kaiwaicon +したい会話の番号」を足します。
会話1なら「.kaiwaicon1」、会話2なら「.kaiwaicon2」という感じで指定したい会話番号を付ければOK!
こんな感じになります。

.kaiwaicon1 .st-kaiwa-face2 img{
css内容ほにゃららら
}

その他のカスタマイズ

アイコンや吹き出しに枠線つけたり、心の声風のカスタマイズもcssで簡単に出来ちゃいます!

アイコン名も色を変えれるので枠線の色に合わせるのも良いかもですね。

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

まとめ

枠線の色や太さを変えるだけで、グッと見た目が変わるのかなぁと思ってます。

RYOU
自己満足だよ…

もう少しシンプルかつオシャレサイトにしたいのですが、ガチャガチャしちゃう現状。
精進致します…!

AFFINGER5(WING)

WING(AFFINGER5版)







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

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