【応急処置】WordPress Stingerテーマで「フキダシ風会話」のCSSを修正

フキダシcss

昨日こんな記事を書きました↓↓

コピペでOK!WordPressのCSSで「フキダシ会話形式」にする方法 | まろやかなギーク!

PCから見るといい感じだったんですけど、スマホ(iPhone6/6Plus)で見ると盛大にデザインが崩れてました。

キャラに肝心のフキダシが被さってしまったりとかもうありえない崩れよう。

たまたま別件でメッセージをくれた友人のWeb屋さんに飛びつくようにヘルプをもとめましたところ、応急処置とはいえ満足のいくデザインに修正していただきました\(^o^)/

優しさに惚れました。

CSSコワイ…

僕のブログはWordPressの『stinger5』っていうテーマを使っているんだけど、レスポンシブデザインでスマホでもPCと同じようなデザインになります。

ところが前回記事にしたように「フキダシ会話風」のCSSをコピべすると、PCでは普通に見えるんだけどスマホから見るととんでもないことになってました。どうやらもともとのCSSがレスポンシブには対応していなかったようで、コードを公開された方も「適当に作ったので」と注釈されておりましたw

 参考 ☞  CSSで会話形式のフキダシデザインを作ってみる

CSSとかもう本当よくわかんないからどこをどういじればいいのやら…

なので、もうすごい偶然なんだけどたまたま別件でメッセージをくれた友人のWeb屋さんこと江口さん(@GapPacker)に手ほどきをうけて無事に解決しましたよ!

CSSコードの修正箇所

修正した箇所を赤字で示してみました。

/*============================================================
フキダシデザイン
============================================================*/
.arrow_answer,
.arrow_question {
    position: relative;
    background: #fff;
    border: 1px solid #c8c8c8;
    padding: 30px 25px;
    border-radius: 10px;
    width: 55%(変更);
    font-size: 13px;
}
.arrow_question {
    float: right;
   margin-right: 20px; ←いらない(削除)
}
.arrow_answer:after,
.arrow_answer:before,
.arrow_question:after,
.arrow_question:before {
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.arrow_question:after,
.arrow_question:before { right: 100% }
.arrow_answer:after,
.arrow_answer:before { left: 100% }
.arrow_answer:after,
.arrow_question:after {
    border-color: rgba(255, 255, 255, 0);
    border-width: 15px;
    margin-top: -15px;
}
.arrow_answer:after { border-left-color: #fff }
.arrow_question:after { border-right-color: #fff }
.arrow_answer:before,
.arrow_question:before {
    border-color: rgba(200, 200, 200, 0);
    border-width: 16px;
    margin-top: -16px;
}
.arrow_answer:before { border-left-color: #c8c8c8 }
.arrow_question:before { border-right-color: #c8c8c8 }
.question_image { float: left;
                  margin-right(leftから反転); 5px;
                  width: 20%;(追記)
}
.answer_image {
    float: right;
    margin-left(rightから反転): 5px;
    width: 20%;(追記)
}
.answer_image img,
.question_image img { border-radius: 50px }
.question_Box {
    margin-bottom: 25px;
    overflow: hidden;
}

フキダシとキャラの間に隙間が空いたりとまだ修正の余地はありそうですが、応急処置としては納得の出来だと思います。

まとめ

20141027125548-1

とりあえず言われるがままCSSを直してみましたが、江口さん(@GapPacker)の丁寧な対応でどうにか形になりました。

というか、まったくわかってない素人相手によく我慢して対応してくれたなー(笑)

本当に助かりました!ありがとうございました\(^o^)/

ちなみに上のコードをコピペすると記述した部分もコピーしちゃうので、適時削除してから使ってみてくださいね。

 参考 ☞  珍士の沈思黙考

今回お世話になった江口さん(@GapPacker)のブログはこちら。

Web屋さんでWordPressなどにも精通しているのでめちゃくちゃ頼りになる方です!

記事が参考になったりおもしろかったら
いいね!してね( ´ ▽ ` )ノ

Twitterでマツオユキを

1 個のコメント