coding ブログ

【AFFINGER5】フキダシのしっぽを調整する

2020年4月10日

 

このブログのWordPressテーマは「WING(AFFINGER5)」を使用しています。

会話風のアイコンとフキダシを簡単にレイアウトできる便利な「会話ふきだし機能」がついてるんですが、そのフキダシの形をカスタマイズ。

フキダシのしっぽ(吹き出しににょろっとついてるヤツ、しっぽという名称でいいんですよね?)を修正してみました。

修正前

直線バージョン

曲線バージョン

 

 

やること

 

次のコードをカスタマイザの「追加CSS」に記述するか、各自のスタイルシート(style.css等)に追記します。

 

直線バージョン

/* フキダシのしっぽ */
.st-kaiwa-hukidashi:after {
  left: -15px;
  border-width: 5px 15px 5px 0;
}
.st-kaiwa-hukidashi2:after {
  right: -15px;
  border-width: 5px 0 5px 15px;
}

 

曲線バージョン

/* フキダシのしっぽ */
.st-kaiwa-hukidashi:after,
.st-kaiwa-hukidashi2:after {
  width:26px;
  height:26px;
  background: none;
  border: none;
  margin-top: 0;
 top: 18px; 
}
.st-kaiwa-hukidashi:after {
  border-radius: 0 0px 10px 16px; 
  box-shadow: -8px -14px 0 -8px #f9f9f9 inset;
 left: -22px; 
} 
.st-kaiwa-hukidashi2:after {
  border-radius: 0 0 16px 10px; 
  box-shadow: 8px -14px 0 -8px #f9f9f9 inset;
 right: -22px;
}
 

 

追加CSSに記述する場合

 

 

やってること

 

まず、テーマの「WING(AFFINGER5)」がどうやってフキダシのしっぽを表現してるのか調べてみます。

開発者ツールとか(Safari だったらWebインスペクタ)を開くとわかるんだけど、フキダシのブロックのafter擬似要素で作ってるんですね。

 

Webインスペクタを表示

 

ファイルはテーマファイル「affinger5」直下の「style.css」で、該当箇所は次の部分。

まず、左側のフキダシのしっぽ。

.st-kaiwa-hukidashi:after {
	content: "";
	position: absolute;
	top: 30px;
	left: -10px;
	margin-top: -10px;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 10px 10px 10px 0;
	border-color: transparent #f9f9f9 transparent transparent;
}

右側のフキダシのしっぽ。

.st-kaiwa-hukidashi2:after {
	content: "";
	position: absolute;
	top: 30px;
	right: -10px;
	margin-top: -10px;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 10px 0 10px 10px;
	border-color: transparent transparent transparent #f9f9f9;
}

 

しっぽの形は、この擬似要素のborderの設定で作っている(6926行目〜,6981行目〜)。

borderでどうやってしっぽの形になるのかというと、たとえば、要素のwidthとheightが10pxで、border-widthが20pxで、paddingが0だったら次のようになりますよね(わかりやすいように上右下左で色を変えてます)。

 

要素のwidthとheightが0だったら...

 

borderのwidthを上右下左で個別に、上10px 右10px 下10px 左0、と指定すれば...

 

それから、上、下、左のborderを透明(transparent)にしたのがAFFINGER5のオリジナルのしっぽですね(6928行目)。

 

なるほど。

 

直線バージョンの場合

 

直線バージョンの場合は、AFFINGER5オリジナルのCSSのborder-widthを上書きしています。

左側のフキダシでは、上5px 右15px 下5px 左0にしています。

 

右側はその反対で上5px 右0 下5px 左15pxにすればよい。それから幅が15pxに変わったので、あわせて位置を調整しています(3行目6行目)。

 

 

曲線バージョンの場合

 

フキダシのブロックのafter擬似要素で表現してるのは直線バージョンと同じですが、こちらは擬似要素のborderではなく、box-shadowプロパティで表現しています。

 

box-shadow プロパティのおさらい

 

ここで、box-shadowプロパティについておさらい。

box-shadowプロパティは、要素に影を追加するプロパティ。その影の詳細を値で指定する。

box-shadowプロパティの書式


プロパティの値は次のように解釈されます。

  • 1つ目の長さの値は、対象要素と影との水平方向の距離で、正の値を指定すると影は対象要素の右へ、負の値を指定すると左となる。
  • 2つ目の長さの値は、対象要素と影との垂直方向の距離で、正の値を指定すると影は対象要素の下へ、負の値を指定すると上となる。
  • 3つめの長さの値は、影のぼかし距離で、値が大きいほどぼかしが強くなり、値が0のときぼかしのない影となる。負の値は指定できない。
  • 4つめの長さいの値は、影の広がり距離で、正の値を指定すると、上下左右それぞれに指定した値分拡大、負の値を指定すると縮小する。
  • 色の値を指定すると、影がその色になる。
  • insetキーワードを指定すると、影が対象要素の外側から内側に変更される。

具体例で確認していきます。

まず、box-shadowを適用するための、要素<div>を定義。(図は実寸表示ではありません)

div.box {
  width: 260px;
  height: 260px; 
  background: #ddd; 
  border: none;
}

 

box-shadowの値を、右に50px、下に40px、ぼかし0、拡大0で、色をskyblue(以下同色)に設定した場合。

div.box {
  width: 260px;
  height: 260px; 
  background: #ddd; 
  border: none;
  box-shadow: 50px 40px 0 0 skyblue;
}

 

右に50px、下に40px、ぼかし20px、拡大0の場合。

div.box {
  width: 260px;
  height: 260px; 
  background: #ddd; 
  border: none;
  box-shadow: 50px 40px 20px 0 skyblue;
}

 

右に-50px、下に-40px、ぼかし0、拡大0の場合。

div.box {
  width: 260px;
  height: 260px; 
  background: #ddd; 
  border: none;
  box-shadow: -50px -40px 0 0 skyblue;
}

 

右に50px、下に40px、ぼかし0、拡大が20pxの場合。

div.box {
  width: 260px;
  height: 260px; 
  background: #ddd; 
  border: none;
  box-shadow: 50px 40px 0 20px skyblue;
}

 

右に50px、下に40px、ぼかし0、拡大が−20pxの場合。

div.box {
  width: 260px;
  height: 260px; 
  background: #ddd; 
  border: none;
  box-shadow: 50px 40px 0 -20px skyblue;
}

 

右に50px、下に40px、ぼかし0、拡大0、内側指定(inset)をした場合。

div.box {
  width: 260px;
  height: 260px; 
  background: #ddd; 
  border: none;
  box-shadow:50px 40px 0 0 skyblue inset;
}

 

右へ−50px、下へ−40px、ぼかし0、拡大0、内側指定(inset)の場合。

div.box {
  width: 260px;
  height: 260px; 
  background: #ddd; 
  border: none;
  box-shadow: -50px -40px 0 0 skyblue inset;
}

 

右へ−50px、下へ−40px、ぼかし0、拡大20px、内側指定(inset)の場合。

div.box {
  width: 260px;
  height: 260px; 
  background: #ddd; 
  border: none;
  box-shadow: -50px -40px 0 20px skyblue inset;
}

 

右へ−50px、下へ−40px、ぼかし0、拡大-20px、内側指定(inset)の場合。

div.box {
  width: 260px;
  height: 260px; 
  background: #ddd; 
  border: none;
  box-shadow: -50px -40px 0 -20px skyblue inset;
}

 

ここまでは、対象要素が長方形のブロックの場合ですが、対象要素に、border-radiusが指定された場合は、影もその丸みを反映します。

この仕組みを組み合わせてしっぽの形をつくっています。

 

曲線バージョンのしっぽをつくる

 

ここでは仮に<div class="box"></div>という要素で、仕組みを確認しながら設定していきます。
※図は、拡大してあります。

 

まず、box-shadowプロパティを適用する角丸長方形の設定。border-radiusプロパティで右下左下が角丸の長方形を作ります。

div.box {
  width: 26px;
  height: 26px; 
  background: #ddd; 
  border: none;
  border-radius: 0 0 10px 16px;
}

 

box-shadowプロパティを、右に-5px、下に-4px、ぼかし0、拡大0で、色をskyblue(以下同色)、内側指定(inset)に設定します。

div.box {
  width: 26px;
  height: 26px; 
  background: #ddd; 
  border: none;
  border-radius: 0 0 10px 16px;
  box-shadow: -5px -4px 0 0 skyblue inset;
}

影の形は、対象要素のborder-radiusプロパティで設定した丸みと同じ形になります。

 

box-shadowプロパティの拡大を−2pxに変更します。

div.box {
  width: 26px;
  height: 26px; 
  background: #ddd; 
  border: none;
  border-radius: 0 0 10px 16px;
  box-shadow: -5px -4px 0 -2px skyblue inset;
}

影の形は、対象要素で指定したborder-radiusの角丸の半径よりも2px大きい半径の角丸の形状になります。

拡大(影の広がり)の値を設定することで、影の形の角丸の半径が、対象要素の角丸の半径と異なる半径になるところがミソです。

 

box-shadowプロパティの値を、右に-8px、下に-14px、拡大-8pxに変更します。

div.box {
  width: 26px;
  height: 26px; 
  background: #ddd; 
  border: none;
  border-radius: 0 0 10px 16px;
  box-shadow: -8px -14px 0 −8px skyblue inset;
}

影の形は、対象要素で指定したborder-radiusの角丸の半径よりも8px大きい半径の角丸の形状になります。

拡大(影の広がり)の値を大きく設定すると、影の形の角丸の半径と、対象要素の角丸の半径との差がより大きくなります。

 

対象要素の背景色をnoneに変更。

div.box {
  width: 26px;
  height: 26px; 
  background: none;
  border: none;
  border-radius: 0 0 10px 16px;
  box-shadow: -8px -14px 0 −8px skyblue inset;
}

 

完成. 左側のフキダシです。

.st-kaiwa-hukidashi:after {
  width:26px;
  height:26px;
  background: none;
  border: none;
  border-radius: 0 0px 10px 16px; 
  box-shadow: -8px -14px 0 -8px #f9f9f9 inset;
  margin-top: 0;
  top: 18px;
 left: -22px;
}

AFFINGER5の「会話ふきだし機能」のフキダシの背景色はデフォルトで「#f9f9f9」ですが、カスタマイザで変更している場合は、それに合わせて変更してください。

「margin-top: 0」では、「会話ふきだし機能」のデフォルトで「−10px」になっているのをリセットしてあります。

「top」と「left」でフキダシの本体ブロック(.st-kaiwa-hukidashi)との相対位置を設定しています。

蛇足ながら、「top」と「left」を指定するときに必須な「position: absolute;」は、すでにAFFINGER5のスタイルシートで設定済みなので不要です。

 

 

以上、どなたかのお役に立てば。

-coding, ブログ
-,

Copyright© 自炊自賛 , 2020 All Rights Reserved.