名前

テンプレートについて

左寄せの吹き出しと右寄せの吹き出しで会話をする某SNS会話画面風のレイアウトです。
2014/05/04にアップロードしたものの改訂版になります。(前作の配布は終了しました)
再アップになりますが、テキストのみだったものにヘッダー/既読,時刻表記/スタンプ/イメージ等の要素を追加、微調整を行っただけで以前のものに特に問題があるわけではありません。
ご使用中の方はそのままご使用いただいて大丈夫です。ただ微調整含め、ほぼ別のテンプレートと言える程変更点が多いので変更点の説明は無しとさせていただきます。

■確認状況
□ＰＣ(Chrome)[ss][up]
　幅480pxの中央寄せ、角丸の吹き出し
□スマートフォン(Chrome)
　左右上下に10px余白、角丸の吹き出し(幅以外の表示はPCと同様)
□ガラパゴス携帯(未確認)[image ss]
　左右上下に10px余白、左右に少し寄ったボックス表示
　ある程度の指定はしていますが基本的に閲覧を想定して作っていません。
　CSSが反映されない機種での閲覧非推奨

■設定
改行を<br>に変換して表示：しない
デフォルトのHEAD内タグ：出力しない

■サンプル画像
一応自作フリー(差し替え推奨)

■編集方法
HEAD内は編集推奨箇所のみの編集をお薦めします。
吹き出しの色はHEAD内で指定しており、自由な色に変更可能となっています。
また、全体の背景色を変更する際は、必ずHEAD内で指定してある"全体の背景色"のカラーコードも変更してください。デフォルトでは■#dce0e6になっています。
リンクやフォーム等についてはHEAD内で一切指定していません。必要に応じて追加してください。
DLしましたら全体レイアウト最下部にコピー＆ペースト用レイアウトが入っています。



その他仕組みや詳しい編集方法は長くなりますのでサイトの方に詳しい説明を記載させていただきます。

▼以下テキスト、スタンプ、画像のサンプル

名前

名前

名前

画像サイズについて

	幅(px)		高さ(px)		画像自体の 縦横比率
	最大	最小	最大	最小
アイコン	40 x 40 固定				無視
スタンプ	150	30	150	30	保持
イメージ	120	60	120	60	保持

画像サイズは図のとおりになるようCSSで指定しています。
最小以下のサイズの画像は拡大、最大以上のサイズの画像は縮小して表示されます。
上記サンプルだとスタンプは240x250、イメージは左寄せが40x40、右寄せが240x320 が原寸の画像をそれぞれ縮小拡大して表示しています。

ガラパゴス携帯閲覧時、スタンプとイメージは幅高さ共に最小40px最大60pxになります。
少々小さめのサイズにしているのでしっかり画像も見せたいという方はHEAD内を編集するかスタンプなら画像タグ自体、イメージの場合は<span class="A">〜</span>を画像ページへのリンクタグで囲むなど工夫してください。

おまけ

テキストのフキダシ自体の色や文字色は左寄せ右寄せそれぞれ指定した色で固定となりますが、HEAD内に
.abc,.abc:before{
ここに指定
}
を加え、全体レイアウトの<div class="text">を<div class="text abc">に置き換えるとその吹き出しのみ、色を変えたり背景画像を指定する事ができます。

・abcは任意の半角英数字と置き換え可能
・背景色の指定をする場合はbackground-color: #カラーコード !important;のようにカラーコードの後半角スペース、!importantを付け加えてください
・背景画像指定は左右上下全方向にリピート推奨

.pattern01

.pattern02

.pattern03