賢威の吹き出しを使わない3つの理由。そして改善へ

※テンプレートを賢威7から変更したため上記吹き出しは画像になっています。

賢威7に実装されている吹き出しの問題点

※テンプレートを賢威7から変更したため上記吹き出しは画像になっています。

賢威7の吹き出し改善方法

※テンプレートを賢威7から変更したため上記吹き出しは画像になっています。

賢威7子テーマbase.cssでの修正

下記コードをbase.cssにコ～ピペッと追加します。これだけです。

/*-------------------------------------------------------
  吹き出し
-------------------------------------------------------*/
/*吹き出しサイズ調整*/
.bubble{
	margin-top: 25px;
	width: auto;
	max-width: 68%;
	min-height: 30px;
	padding: 5px 10px 5px 10px;
	border: 0px solid #ccc;
}
/*吹き出し位置調整*/
.chat-l .bubble{
	float: left;
	margin-left: -10px;
}
.chat-r .bubble{
	float: right;
	margin-right: -10px;
}
/*吹き出ししっぽ*/
.chat-l .bubble .bubble-in:after{
	top: 0px;
	margin-top: 0px;
	margin-right: -5px;
	border-width: 5px 7px;
	border-color: transparent;
	border-top-color: inherit;
	border-right-color: inherit;
}
.chat-l .bubble .bubble-in:before{
	top: 0px;
	margin-top: 0px;
	margin-right: -6px;
	border-width: 6px 8px;
	border-color: transparent;
	border-top-color: inherit;
	border-right-color: inherit;
}
.chat-r .bubble .bubble-in:after{
	top: 0px;
	margin-top: 0px;
	margin-left: -5px;
	border-width: 5px 7px;
	border-color: transparent;
	border-top-color: inherit;
	border-left-color: inherit;
}
.chat-r .bubble .bubble-in:before{
	top: 0px;
	margin-top: 0px;
	margin-left: -6px;
	border-width: 6px 8px;
	border-color: transparent;
	border-top-color: inherit;
	border-left-color: inherit;
}

賢威7子テーマrwd.cssでの修正

つづいてrwd.cssの修正も下記のコードをぺっぺぺ～と貼り付けるだけです。

@media only screen and (max-width : 1200px){
	.bubble{
		width: auto;
		max-width: 78%;
	}
	.talker{
		width: 20%;
	}
}

このカスタマイズでの問題点

実はこのカスタマイズを適用すると吹き出しの枠線がなくなってしまうという問題点があります。 吹き出しの形を「角丸」にすると四隅ともradiusが適用されてしまうため、しっぽの部分を吹き出し本体に食い込ませて形を整えており、そこに枠線を引いてしまうとおかしくなってしまうためです。 しっぽの部分だけradiusを解除すればいいのですが、共通の処理になっているため、radiusをいじると他の部分にも影響がありそうなのであきらめました。 また、これは問題点ではないのですが、Speech bubbleのような「考え中吹き出し」が使えません… 吹き出しの形設定の中に「表示しない」という必要性がわからない項目があったので、そこに「考え中」を割当てようと思いましたが、shortcodes.phpの変更が必要なことと、色の引き継ぎがうまくできなかったこともあり、今回は見送りという名の挫折に至ったので、賢威吹き出しの改善はここまでとなります。

まとめ

このカスタマイズを行うことでSpeech bubbleから卒業できるかもしれません。 更新のないプラグインを外せるということは、大きなメリットになります。以前「ブログの表示改善に行った2つのこと」という記事を書きましたが、不要なプラグインを外すことで表示改善につながることもあるので、ぜひ試してみてはいかがでしょうか。 ※テンプレートを賢威7から変更したため上記吹き出しは画像になっています。