会話形式について

http://georges.hatenablog.jp/entry/blog-custom14 のサイトのＣＳＳをstyle.cssに貼り付けても反映されませんでした。

サンプルのhtmlがないと何とも言えませんが、たいていのことはできます。

#50333のcssはそれ用のhtmlがあって、セレクタが一致しているから機能しているのであって、いずれかが異なれば機能しないのは当然です。

これらはできるだけ依存しないようにも書けますがhtmlがどうなっているかによります。

すいません・・・自分にはよくわからないので、あきらめます・・・
返信ありがとうございます！

style.cssに上記サイトのコードをコピペするだけじゃダメなんですね･･･

ダメ元で
http://www.globalcontent-collabo.net/post-2908/
も試しましたがダメでした。

全く同じようにやったのですが、なぜ反映されないのでしょうか？
まるでわかりません。

CSSにコピペして、<p class=”r-fuki tarou”>会話内容</p>で表示させるだけなのに･･････
試しに

長々とすいません！
この質問は解決済みでお願いします。

何かが(テーマなりプラグイン)がhtmlを書き出しているのでなくて1から作るのであれば、極簡単なことなんですけどね。

しかしそうなると僕が勝手に自分の作りやすいようにhtmlやらを書くことになるので、使われている環境によっては、「いや、こうしたいとか」「もうこんなふうに書いてあるので」ということになったりしますよね？

特にプラグインで単純に見た目が問題なだけ、までできてるなら見た目を変えればよいだけなので特別難しいことではないですが、問題は「今それがどのように書いてあるかです」。それがわからないのでどうすればできるかを回答できないということです。

#50362のリンクにSimplicityのline風にする解説ページが書いてあったので、そのhtmlのがわかりました。どこかで見た気はしたんですがどこだったかがわからなかったので、どう書いているのかが必要だったわけです。

またサンプルでflex版を作りました。
サンプル: line風会話、デフォルト修正、新規flex版 | codepen
※ cssはscssで書いてあります。css欄のview compiledでcssに変換できます。
※ scssはそのままではブラウザが読み込めません。cssの変換が必要です。

さて、デフォルト版の使い方ですが、

<div class="line_back">
  <p class="left-balloon">何かしらのテキスト</p>
  <p class="right-balloon">何かしらのテキスト</p>
  <div class="clear_balloon"></div>
</div>

このように書きます。最後に.clear_balloonを入れないとダメなんですが(中身がfloatしているので高さがないため)、サンプルで入れなくても大丈夫なようにfixしてあります(css欄最上部)。

デフォルトでは、.line_backと.line-backのいずれでも利用できるようにしてあります。いずれにもこのfixを対応させるためには_(アンダースコア)と-(ハイフン)版それぞれ2つのクラスを設定しておく必要があります(現在は_のみ書いてあります)。

新規で作ったflex版のものは、

<div class="line_back2 balloon">
  <p class="left">何かしらのテキスト</p>
  <p class="right">何かしらのテキスト</p>
</div>

これだけで良いです。一応デフォルトと共存できるように.line_back2としてあります。

<div class="line_back2"> このように.balloonクラスを外せば角丸がとれます。逆を言えば、ここらを変更・新設することで背景に模様をつけたり色々とスタイルができます。同じページ内で何かしら違う雰囲気を入れたい場合などに。

次に画像部分ですが、
.line_back2 .left 及び、.line_back2 .rightの::beforeに画像を設定してあります(::afterは吹き出しの三角に利用しています)。

background-image: url(画像のパス) を変更することで任意の画像を利用できます(css欄1番下あたり)。
使い方にもよりますが、デフォルトでは.leftと.rightにそれぞれ画像をふってあるので登場人物が二人しか出てきませんが、例えば、

<p class="left ex_A">三人目</p> このようなhtmlを書き、

.line-back2 .left.ex_A {
  background-image: url(三人目の画像パス);
}

とすれば左側に三人目の登場人物を入れることができます。まぁ画像が変わるだけですが(笑)
もちろん.left部分を.rightにすれば、右側に三人目の画像を入れることもできます。そのスタイルを書いておかないといけませんけども。

結局の所、css自体は画像を振り分けるだけで、基本重要なのはhtml側のクラス指定とその構造です。
サンプルのhtml欄273行目あたりを眺めてもらえればどのように使っているかが理解してもらえると思います。

flex版は文字通りflexを利用しています。IEなどでflexに問題があるブラウザでは正しく表示されません。

.line-back2 .left.ex_A::before {
  background-image: url(三人目の画像パス);
}

でした。
::beforeが抜けてました。