CocoonからSWELL移行後「吹き出し」のスマホ表示くずれの直し方

先日、無料テーマ『Cocoon』から有料テーマ『SWELL』へ移行しました！

SWELLでは「乗り換えサポートプラグイン」のおかげで、移行直後でもある程度のデザイン崩れを防止できます。

みなみ

ただし、乗り換えプラグインをもってしても気になるデザイン崩れがいくつか…

特に、「スマホでのふきだし表示幅が狭くなる問題」に悩む人が多いのではないでしょうか…？

（例）移行直後のスマホ表示

本記事では、私がSWELL移行時に自作した【吹き出しのデザイン崩れを修正するCSS】をご紹介します。

みなみ

素人の力業CSSですが、移行リライトに時間がかかりそうな場合の応急処置としてご利用ください！

Cocoonテーマ時の設定等によっては、うまく修正できない可能性やさらに表示が崩れる可能性があります。
設定後は表示が変になっていないか、しっかりとご確認お願いします。

＼ おすすめWordPressテーマ ／

SWELL公式サイトはこちら

CocoonからSWELL移行での「吹き出し」の崩れ

CocoonからSWELL移行時に発生する、「ふきだし」の主なデザイン崩れは下記３つです。

Cocoonテーマ時の設定によっては、上記以外のデザイン崩れの可能性もあります。

移行前（Cocoon）

移行後（SWELL）

本記事のCSS修正をしない場合も、「乗り換えサポートプラグイン」のおかげで大きな問題はありません。
ただ、吹き出し内に長めの文章を入れていると「読みづらさ」による離脱率増加が心配です…

「Cocoon吹き出し」のデザイン崩れを直す方法

SWELL移行後の「Cocoon吹き出し」のデザイン崩れを解消する自作CSSをご紹介します。

このCSS追加によってできることは下記3点です。

カスタマイズ画面「追加CSS」に貼付するだけ

これから紹介するCSSをSWELLカスタマイズ画面の「追加CSS」にコピー&ペーストすることで、移行によるCocoonふきだしのデザイン崩れを一時的に解消できます。

CSSを貼り付ける部分

【WordPress設定画面】→【カスタマイズ（上部バー、もしくは外観メニュー内）】→【追加CSS】

CSS追加後

目的別にCSSを紹介しますので、必要なCSSだけコピーしてください。

もし３つの全部に対応するCSSをコピーしたい場合は、【一括コピペ用】の見出しまでどうぞ。

CSS①スマホ表示での吹き出しの横幅を修正

スマホでの吹き出しの横幅を画面いっぱいまで広くするCSSです。

/*スマホ吹き出し横幅広く*/	
@media screen and (max-width: 600px){
	.sbp-l {
	margin-right: 10px!important;
}
	.sbp-r {
	margin-left: 10px!important;
}
}

CSS②色変更していた吹き出しの余白を調整

Cocoonテーマ時に吹き出しのカラー変更をしていると、カラー変更した吹き出しだけ余白が広くなってしまいます。

カラー変更の有無に関係なく吹き出しの余白を統一するCSSです。

/*吹き出しの余白統一*/	
.speech-wrap .speech-balloon {
  padding: 12px;
 }

CSS③吹き出し（フラット）の色を変更

Cocoonテーマ時に「フラット設定」だった吹き出しのカラーを変更するCSSです。

ブログの雰囲気に合わせて色を変えたい方は、こちらのCSSをご利用ください。

/*Cocoon吹き出しのフラットカラー変更*/	
.sbs-flat .speech-balloon {
	background-color: #f2fafd;
	border-color: #f2fafd;
}
.sbs-flat .speech-balloon::before, .sbs-flat .speech-balloon::after {
    border-right-color: #f2fafd;
    border-left-color: #f2fafd;
}

Cocoonテーマ時に設定していた吹き出しカラーに関係なく、「フラット設定」だった吹き出しがすべて上記のCSSで指定したカラーに変わります。

【一括コピペ用】すべて修正する場合のCSS

上記３つすべて修正したい方は、下記のCSSをコピー&ペーストください。

/*スマホ吹き出し横幅広く*/	
@media screen and (max-width: 600px){
	.sbp-l {
	margin-right: 10px!important;
}
	.sbp-r {
	margin-left: 10px!important;
}
}

/*吹き出しの余白統一*/	
.speech-wrap .speech-balloon {
  padding: 12px;
 }

/*Cocoon吹き出しのフラットカラー変更*/	
.sbs-flat .speech-balloon {
	background-color: #f2fafd;
	border-color: #f2fafd;
}
.sbs-flat .speech-balloon::before, .sbs-flat .speech-balloon::after {
    border-right-color: #f2fafd;
    border-left-color: #f2fafd;
}

Cocoonテーマ時に設定していた吹き出しカラーに関係なく、「フラット設定」だった吹き出しがすべて上記のCSSで指定したカラーに変わります。

まとめ：CSSで応急処置すればリライトはゆっくりでOK！

CSSで応急処置することによって、移行リライト中でも「読みやすい見た目」を維持できます。

すぐに移行リライトできる場合はいいのですが、記事数が多くて移行リライトに時間が掛かりそうな方はぜひこちらの追加CSSをご活用ください。

みなみ

何度も言ってますが、CSS初心者の自作です。
CSS追加後はブログ内の表示が変になっていないか、ご自身でしっかりとご確認お願いします。

公式サイトにおいて、「乗り換えサポートプラグイン」は移行リライト終了後に削除することが推奨されています。
こちらのCSSについても、「Cocoon吹き出し」から「SWELL吹き出し」への修正が終わったら削除してください。

＼ おすすめWordPressテーマ ／

SWELL公式サイトはこちら

>>SWELLの移行レビュー記事はこちら

あわせて読みたい

PVを増やすなら！WindowsでもRankTrackerがおすすめ【体験談】 ブログが伸び悩んでる・・・有料の検索順位チェックツールって実際どう？ 「検索順位チェックツールは絶対導入するべき！」とよく聞きます。 でも実際のところ、ブログ…

「ブログ運営」に関するオススメ記事