吹き出しを使った会話コンテンツを入れる-WordPressとXOOPS Cube編

Image

昨日のblog cssで内容によって大きさの変わる吹き出しを作る  を書きましたが、WordPressXOOPS Cubeについてはまだ上手く出来てませんでした。

今日はWordPressやXOOPS Cubeでも会話コンテンツを入れてみたので、それについて書きたいと思います。

WordPressの投稿や固定ページに会話コンテンツを入れる

こんな感じに入れてみました。
吹き出し会話
Image

左側に顔があるパターンでも複数行でしてみました。ソースはこちらです。

使っている子テーマのstyle.cssに以下を追加しました。

コンテンツはこのように書きました。

昨日のhtmlと違うのはコンテンツ幅を狭めたこと、boxというクラス名が既存のスタイルと重複するといけないので usa-box という名前に変更したことです。

他に吹き出し部分の vertical-align:bottom が効かずに、下にいかなかったので、無理矢理 usa-box で margin-bottom: -20px; としてしまいました(^_^;。

XOOPS Cubeにも同じコンテンツを入れてみました

使っているテーマのstyle.cssに全く同じようにcssを追加しました。変更したのは1カ所だけ、WordPressで下に行かなかったのと同じようにやはりXOOPS Cubeでもvertical-align:bottom が効かなかったようです。今度は margin-bottom: 0px; とすることで下に行きました(^_^;。

cssで上記のWordPressと違うのは、そこだけでコンテンツはpicoに全く同じものを入れました。

その結果がこの表示です。

XOOPS Cube吹き出し会話
Image

行と行の間をもうちょっとあけたほうがいいかなぁ、と思いますがまずまず同じように表示されました。

まとめ:cssで吹き出しを作って色んなところで使うときは若干の調整をしよう♪

と、今回やってみて思いましたが既存のテーマなどに影響されるのでWordPressやXOOPS Cube、他色々な環境で使うときは若干の修正が必要かと思います。

とはいえ~、今回のようにたぶん幅とか縦位置の変更とかをすればそこそこ使えそうですので、これから会話的なコンテンツを作りたいというときに参考にしていただければ幸いです。

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/ 無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
トップへ戻る