- このトピックには8件の返信、2人の参加者があり、最後に
により8年、 10ヶ月前に更新されました。
-
投稿
-
-
いつもお世話になり、ありがとうございます。
画像＋画像の名前付きのチャット風カスタマイズについてお伺いしたいです。
ネットで調べながら、下記のCSSまで何とか作れたのですが、会話の長さに合わせて吹き出しの長さを変えたいと思っているのですが、どうしたら良いか分かりませんでした。
画像はコチラです 下記CSSの画像下の吹き出しだと、文字が左揃えになっており読みにくいです。
会話の長さに合わせて吹き出しの長さが変われば、読みやすくなるように思って、display: inline-block;が良さそうだと思ったのですが、デザインが崩れるばかりで上手くいきません。吹き出しの長さをテキストの長さに合わせる方法を御教示いただきたいと思います。
よろしくお願いいたしますm(_ _)m（コードタグを張ると、上手くいかなかったので、リンクします。https://notepad.pw/code/zoabo5q22
-
「右からの吹き出しテキスト」の領域に
text-align: right;を入れたらどうですかね。内容は検索したら出てきますよ。※centerで中央寄せになります。HTMLがないので、ザックリこんな感じですが。
-
回答ありがとうございます。
htmlは、こちらのサイト様のを参考にしています。https://arakumablog.xyz/post-3595/
（htmlを張って送信も出来ないみたいで、リンクで失礼します）できれば、文字の右寄せや中央寄せではなく、ライン風に文字数によって吹き出しの長さを変えられたらと思うのですが、難しいのでしょうか？
-
できれば、実際のページのURLを提示していただいてデベロッパーツールを利用して、いろいろ試してみたい感じです。
ただ、サポート対象外のものにもあるように独自カスタマイズのサポートは、必ずしも対応しきれるかどうかわからないので、あらかじめご了承ください。
-
寝ログのほうに出ているカスタマイズも参考にしてみたのですが、やはり難しくて、できませんでした…。
実際のURLはこちらです。
http://ninsinsen-sango-life.com/funin-treatment/post-327/独自カスタマイズのサポートの注意事項は読んでいたのですが、どうかな？と思いながら質問させていただいていました。
もし大丈夫そうであれば、ぜひご教示頂きたいです。
宜しくお願い申し上げます。 -
そちらのサイトさんは、冒頭の画像通りのスタイルで作成されてます。そういった仕様って事です。
今やりたい事はHTMLとCSSを追加する感じですので、お好みの仕様で作られたサイトを探したほうが良いかもしれません。と個人的に思います❦
-
これでいかがでしょうか。エラーが出るため、notepad.pw に CSS を貼り付けています。
右からのテキスト（旦那さんの会話）が2行になることに備えて、テキスト全体は右揃えにしつつも、行の開始位置は左揃えにしています。
なので2行以上になっても、表示が変になることはないはずです。
同じプロパティが何度も指定されてあったため、勝手に一部を簡単にまとめています。
-
あれ？画像リンクが変になってしまった。
カスタマイズ後の吹き出し画像。
https://gyazo.com/ec254954c1438a551f9967136b8723502行以上になった時の画像。
https://gyazo.com/b32e9e532c8b594d8166e41cf48fc232 -
皆さま、アドバイスありがとうございます。
頂いたCSSで試してみたところ、うまくいきました！
本当にありがとうございます。
色々なサイトで見比べて試してはいたのですが、うまくいくCSSが見つからなかったので、本当に助かりました。
ありがとうございましたm(_ _)m
-
- トピック「画像＋画像の名前付きのチャット風会話のカスタマイズについて」には新しい返信をつけることはできません。