「ブログ初心者なりに、ブログの吹き出しをおしゃれにデザインしてみたい。」
WordPressのテーマの多くは、隅々まで洗練されたデザインが行き届いていて本当に使いやすいものばかりです。
しかし多くの人が同じテーマを使っているので、どうしてもブログの雰囲気が似てきてしまいます。
そんな時、WordPressの醍醐味として、ちょっとした色味や幅の変更など、自分の好みに合わせてデザインすることができます！
ということで、この記事ではブログ初心者でもできる『おすすめカード』のカスタマイズを紹介します。
『吹き出し』の完成形はこちらです。
このページにも使われているとおり、『吹き出し』の完成形はコチラです。
✔ タイプ1【普通の吹き出し】
「これがタイプ1【普通の吹き出し】です。」
✔ タイプ2【考え事の吹き出し】
「これがタイプ2【考え事の吹き出し】です。」
以上の2パターンの吹き出しについて、コピペでできるカスタマイズを紹介します。デザインは、モバイル表示にも対応しています。
※このブログはWordPress/Cocoonをベースにカスタマイズしています。
コードはこちらです。
タイプ1とタイプ2について、両方をカスタマイズします。
「外観」の「テーマエディター」から「style.css」を開き、以下のコードをコピペしてください。メモ書きも残しておいたので、参考にしていただけたらと思います。
✔ style.cssにコピペするコード
/************************************
** 吹き出し
************************************/
.sbp-l {/*吹き出し本体*/
margin: 4em 3em 5em 0;
}
div.sbs-think.sbp-l {
margin: 4em 2em 5em 0;
}
.speech-person {/*アイコン*/
width: 16%;
min-width: 16%;
min-width:5em;
min-height:5em;
margin-right:1em;
margin-left:2em;
}
.speech-icon-image {/*アイコン影非表示*/
box-shadow:none!important;
}
.sbis-cn .speech-icon-image {/*普通の吹き出しだけspeach personを右寄せ*/
margin-left:.5em;
}
div.speech-balloon {
border: 3px solid #f9fff4;
border-radius: 10px;
box-shadow: 0px 2px 4px 0 rgba(0,0,0,.2);
margin-left: 2em!important;
padding:1em;
}
div.sbs-think.sbp-l .speech-balloon {/*考え事の吹き出し*/
margin-right: 1em;
}
div.speech-balloon::before {/*普通の吹き出しの左の出っ張り*/
border-right: 8px solid rgba(0,0,0,.05);
}
div.speech-balloon::after {/*普通の吹き出しの左の出っ張り*/
border-right: 8px solid #f9fff4;
}
div.sbs-think .speech-balloon::before {/*考え事のもくもく大*/
border: 3px solid #f9fff4;
width: 15px;
height: 15px;
box-shadow: 0px 2px 4px 0 rgba(0,0,0,.2);
}
div.sbs-think .speech-balloon::after {/*考え事のもくもく小*/
border: 3px solid #f9fff4;
width:8px;
height: 8px;
box-shadow: 0px 2px 4px 0 rgba(0,0,0,.2);
}
@media screen and (max-width: 480px){
.speech-person {/*アイコン*/
margin-right:0;
margin-left:0;
}
.sbp-l {
margin: 3em 0 4em;
}
div.sbs-think.sbp-l {
margin: 3em 0 4em ;
}
div.speech-balloon::before {/*普通の吹き出しの左の出っ張り*/
left:-10px!important;
}
div.speech-balloon::after {/*普通の吹き出しの左の出っ張り*/
left:-8px!important;
}
div.sbs-think.sbp-l .speech-balloon {/*考え事の吹き出し*/
margin-right: 0;
}
div.sbs-think .speech-balloon::before {/*考え事のもくもく大*/
width: 10px!important;
height: 10px!important;
left:-22px!important;
}
div.sbs-think .speech-balloon::after {/*考え事のもくもく小*/
width: 2px!important;
height: 2px!important;
left:-30px!important;
}
}
コピペができたら「ファイルを更新」をクリックします。
「ふきだしのカスタマイズはこれで完了です！お疲れ様でした！」
この記事が少しでもお役に立てたら幸いです。最後まで読んでいただき、ありがとうございました！
・【その画像の著作権、大丈夫ですか？】僕がおすすめする『安心のフリー素材サイト』9選！
・【Twitterデータ公開してます】14日間でフォロワーを2,000人増やすノウハウ。
・【2020年最新版】キャッシュレス初心者向け、おすすめのQRコード決済4選！
・【本を聞くアプリで効率アップ】オーディオブックおすすめTOP5を徹底比較！
コメント