会話方式で記事の導入を書きたい！！
他のブログさんで会話方式やってらっしゃるのを見て、
「やっばいやん、めちゃ読みやすいやん」と感銘を受けたナコです。
自分視点が多くなるブログで、
他人のツッコミ風に使うもよし、好きなキャラを過程して登場させるもよし、
会話方式はあんな事こんな事自由自在です。
今回はその部分をHTMLとCSSを使って身近なLINE風の会話方式で作ってみました。
ラインと言えばスタンプは必須ですが…
私が昔まじで血を吐きながら作った本当に売ってるラインスタンプ
「方言うさぎ（関西弁）」ボツVER全41イラストを同封します。
これで速攻LINEライフ！
※ボツVERなので違うイラストも多数あります。
|
関西弁を話すうさぎのスタンプです。ベタなギャグが大好きです。 動作環境 iOS、Android用LINE3.1.1、Android用LINE Lite1.7.5、Windows Phone用LINE2.7以上 LINE用スタンプ方言うさぎ（関西弁） |
ソースコード一式とスタンプセットは下にダウンロードボタンがありますのでそちらからGETGETしてください。
完成図
12:30
12:30
やだ〜楽しい！実写にしてあの人にあんなことやこんな事を言わせたい！
これを目標にソースを説明していきましょう。
ブログやベタのHTMLではそのまま貼り付けて使えますが、
WordPressで使う時はひと手間必要ですので
WordPressで使用時に最適化する方法も合わせて紹介していきます。
基本のベース
LINE画面のベースを表示します。タイトルエリアは無くてもOKです。
CSS「style.css」は全部をコピペして読み込んでいるCSSの一番最後に貼り付けるかインポート(@import)してください。
SCSS「style.scss」はインポート(@import)しちゃってください。
style.cssってみんな使ってると思うのでインポート時はファイルのリネームをお願いします。
Sass(SCSS)専用カラー変更変数
SCSSの先頭部分にパーツカラーを変更できる変数を用意しました。
// color
$titleColor: #273246; //タイトル背景色
$baseColor: #7494c0; // 背景色
$myTextColor: #8de055; // 吹き出しの色
画面枠を作ろう
HTML
<!-- ▼LINE風ここから -->
<div class="line__container">
<!-- タイトル -->
<div class="line__title">
うさきち友の会
</div>
<<!-- ▼会話エリア scrollを外すと高さ固定解除 -->
<div class="line__contents scroll">
<!-- ここに吹き出しやスタンプのタグを追加していく -->
</div>
<!-- ▲会話エリア ここまで -->
</div>
<!-- ▲LINE風 ここまで -->
class=”line__contents scrollにすると会話エリアの高さが固定になりスクロールバーが表示されます。
表示
12:30
12:30
CSSのwidth指定を外すと横幅いっぱいに表示されます
CSS
.line__container {
padding:0;
background: #7494c0;
overflow: hidden;
// max-width: 400px; ←コメントアウト
margin: 20px auto;
font-size: 80%;
}
12:30
会話を表示する
会話相手側のアイコン画像は正方形のものを使ってください。サイズは自動で変更してくれます！
HTML
<!-- 相手の吹き出し -->
<div class="line__left">
<figure>
<img src="icon.png" />
</figure>
<div class="line__left-text">
<div class="name">うさきち</div>
<div class="text">ちゃんぐるもんぐるぼくいがぐり</div>
</div>
</div>
<!-- 自分の吹き出し -->
<div class="line__right">
<div class="text">ぼいーんぼいーん</div>
<span class="date">既読<br>0:30</span>
</div>
表示
0:30
スタンプを表示する
画像のサイズは自由です。GIFアニメを使っても面白そうですよ。
HTML
<!-- 相手のスタンプ -->
<div class="line__left">
<div class="stamp"><img src="./stamp/13.png" /></div>
</div>
<!-- 自分のスタンプ -->
<div class="line__right">
<div class="stamp"><img src="./stamp/22.png" /></div>
<span class="date">既読<br>0:30</span>
</div>
表示
0:30
WordPressの記事で使いたい方
WordPressはデフォルトだとテキストモードで編集した時も自動的にPタグがはいってしまいます。
そのまま貼り付けると改行部分に勝手にPタグが入ってレイアウトが崩れてしまいます。
そこでfunction.phpにショートコードで囲んだ範囲のpタグを消す処理を追加します。
function.phpの一番下に追加
//////////////////////////////////////////////////
//ショートコードで囲んだ範囲のp, タグを消す
//////////////////////////////////////////////////
function noFunc( $atts, $html = null ) {
$html = str_replace( '<p>' , '' , $html );
$html = str_replace( '</p>' , '' , $html );
$html = str_replace( ' ' , '' , $html );
return $html;
}
add_shortcode('no', 'noFunc');
記事のテキストモードで挿入時ショートコードで囲む
<!-- ▼LINE風 ここから -->
<div class="line__container">
<!-- タイトル -->
<div class="line__title">
うさきち友の会
</div>
<!-- ▼会話エリア scrollを外すと高さ固定解除 -->
<div class="line__contents scroll">
<!-- 相手の吹き出し -->
<div class="line__left">
<figure>
<img src="icon.png" />
</figure>
<div class="line__left-text">
<div class="name">うさきち</div>
<div class="text">ちゃんぐるもんぐるぼくいがぐり</div>
</div>
</div>
<!-- 自分の吹き出し -->
<div class="line__right">
<div class="text">ぼいーんぼいーん</div>
<span class="date">既読<br>0:30</span>
</div>
<!-- 相手のスタンプ -->
<div class="line__left">
<div class="stamp"><img src="./stamp/13.png" /></div>
</div>
<!-- 自分のスタンプ -->
<div class="line__right">
<div class="stamp"><img src="./stamp/22.png" /></div>
<span class="date">既読<br>0:30</span>
</div>
</div>
<!-- ▲会話エリア ここまで -->
</div>
<!-- ▲LINE風 ここまで -->
完成！！
無事にLINE風の会話が表示されていると思います。
私もブログで使っていく予定なので、ソースをアプデしたら加筆していきます。
0:30
「chat_line_css.zip」の中身
このページでダウンロードできるzipファイルの中身です。
| index.html | HTMLのソースファイルです |
|---|---|
| stampフォルダ | ラインスタンプ画像が41個と番号対応表が入っています |
| function.php | WordPress用です。不要な方は削除してください。 |
| icon.png | 会話相手のアイコンサンプルです |
| style.css | CSSファイルです |
| style.scss | Sass(SCSS)ファイルです。上のCSSと同じ内容になります。 |
文字コードは【UTF-8】で作っています。
更新履歴
2018/06/24 Ver.1.1
1. class名stanp→stampに変更しました
2. WordPress用のサンプルコードにline__contentsがなかった為追加しました
3. スタンプの番号対応表を作成しました
4. class名の被り防止の為ネームスペースを.lineからline__containerに変更しました
5. function.phpにショートコード内の半角スペースタグも排除するよう変更しました
6. スタンプ25番目が欠落していたので追加しました
7. 自分側の発言マージンを微調整しました
読書家の長尾さんチェックバックありがとうございました！
2018/06/21 Ver.1.0
ソースを公開しました
HTMLとCSSでLINE風チャット画面(会話方式)を記事に表示する方法(ほんとに売ってるラインスタンプイラスト41個付き)ダウンロードはこちら
LINE風チャット画面Ver.1.1をダウンロードする(chat_line_css.zip)
おまけ
↓血を吐きながら作った本家ラインスタンプもどうぞよろしくおねがいします！！
|
|
関西弁を話すうさぎのスタンプです。ベタなギャグが大好きです。 動作環境 iOS、Android用LINE3.1.1、Android用LINE Lite1.7.5、Windows Phone用LINE2.7以上 LINE用スタンプ方言うさぎ（関西弁） |
