temp parody 01

parody 01

demo

ver3.0.2公開(ソースコード内の記述位置,インデント,空行,コメントアウト等微調整)
ver3.0.1公開(h1要素のcss修正)
header,footer 非固定ver公開
配色案,ふきだし変形パターン公開
配色変更ツール公開
ver3.0.0公開
ver2.1.0公開
ver2.0.0公開 (ナノユーザーテンプレート 2015/07/01配布終了)
ver1.0.0用既読,時刻表記追記
ver1.0.0用+α編集方法追記
ver1.0.0公開 (ナノユーザーテンプレート 2014/08/03配布終了)

download

code

body


        
	<div id="layout">
	
	
	
	<header>
	
	  <h1>名前</h1>
	
	  <div class="button">
	
	    <a href="戻り先URL" class="back"></a>
	    <span class="menu1"></span>
	    <span class="menu2"></span>
	    <span class="menu3"></span>
	
	  </div>
	
	</header>
	
	
	
	<div id="content">
	
	
	  <ul class="talk">
	
	
	    <li class="system">
	      <p>テキスト</p>
	    </li>
	
	    <li class="left">
	      <img src="icon.png" />
	      <span>名前</span>
	      <div class="text">
	        <p>サンプル</p>
	        <p>12:34</p>
	      </div>
	    </li>
	
	    <li class="right kdk">
	      <div class="text">
	        <p>サンプル</p>
	        <p>改行サンプル</p>
	        <p>改行サンプル</p>
	        <p>12:34</p>
	      </div>
	    </li>
	
	    <li class="right">
	      <div class="text">
	        <p>改行なし長文サンプル、 いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせすん</p>
	        <p>12:34</p>
	      </div>
	    </li>
	
	    <li class="left">
	      <img src="icon.png" />
	      <span>名前</span>
	      <div class="text">
	       <p class="call_c"></p>
	        <p>12:34</p>
	      </div>
	    </li>
	
	    <li class="left">
	      <img src="icon.png" />
	      <span>名前</span>
	      <div class="text">
	       <p class="call_x"></p>
	        <p>12:34</p>
	      </div>
	    </li>
	
	    <li class="left">
	      <img src="icon.png" />
	      <span>名前</span>
	      <div class="text">
	       <p class="call_o">10:20</p>
	        <p>12:34</p>
	      </div>
	    </li>
	
	    <li class="system">
	      <p>スタンプ</p>
	    </li>
	
	    <li class="left">
	      <img src="icon.png" />
	      <span>名前</span>
	      <div class="stamp">
	        <p><img src="stamp.png" /></p>
	        <p>12:34</p>
	      </div>
	    </li>
	
	    <li class="right">
	      <div class="stamp">
	        <p><img src="stamp.png" /></p>
	        <p>12:34</p>
	      </div>
	    </li>
	
	    <li class="system">
	      <p>イメージ</p>
	    </li>
	
	    <li class="left">
	      <img src="icon.png" />
	      <span>名前</span>
	      <div class="image">
	        <p><img src="image.gif" /></p>
	        <p>12:34</p>
	      </div>
	    </li>
	
	    <li class="right">
	      <div class="image">
	        <p><img src="image.gif" /></p>
	        <p>12:34</p>
	      </div>
	    </li>
	
	    <li class="system">
	      <p>既読数変更</p>
	    </li>
	
	    <li class="kdkset" style="counter-reset:kdk 10"></li>
	
	    <li class="right kdk">
	      <div class="text">
	        <p>比較的容易に既読数の変更ができるようにしています。</p>
	        <p>12:34</p>
	      </div>
	    </li>
	
	  </ul>
	
	
	</div>
	
	
	
	<footer>
	
	  <p class="textarea"></p>
	
	  <div class="button">
	
	    <span class="menu1"></span>
	    <span class="menu2"></span>
	    <span class="menu3"></span>
	    <span class="stmp"></span>
	    <span class="send"></span>
	
	  </div>
	
	</footer>
	
	
	
	</div>

head


        
	<style type="text/css">
	/* === import === */
	
	
	@import url(https://fonts.googleapis.com/css?family=Roboto+Slab);
	@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
	
	
	
	/* === reset & base === */
	
	
	* ,*::before ,*::after {
		box-sizing: border-box;
		margin:  0;
		padding: 0;
		outline: 0;
		border: none;
		word-break: break-all;
		font-family: inherit;
		font-size: inherit;
		line-height: inherit;
		-webkit-appearance: none;
	}
	
	ul ,ol { list-style-type:none}
	
	.left   {	text-align: left}
	.right  {	text-align: right}
	.center {	text-align: center}
	
	
	
	/* === color === */
	
	
	/*　ベース　*/
	
	body::before {
		background-color: #cccccc;/* PC向け背景色 */
	}
	
	body ,.text::after ,#layout::before {
		background-color: #849ec0;/* トーク部分背景色 */
	}
	
	body ,li > div > p:last-child {
		color: #000000;/* 文字色 */
	}
	
	
	/*　リンク文字色　*/
	
	a:link    {	color: #0000ff; }/* 通常 */
	a:visited {	color: #800080; }/* 訪問済 */
	a:hover   {	color: #ffff00; }/* 選択時 */
	a:active  {	color: #ff0000; }/* クリック時 */
	
	
	/* リンク装飾のリセット */
	
	.button a ,.talk .stamp a ,.talk .image a {
		text-decoration: none;
	}
	
	
	/*　ヘッダー　*/
	
	header {
		background-color: #464e66;/* 背景色 */
		color: #ffffff;/* 文字色 */
	}
	
	
	/*　フッター　*/
	
	footer {
		background-color: #ffffff;/* 背景色 */
		color: #888da1;/* 文字色 */
	}
	
	
	/* フッター内テキストエリア */
	
	footer .textarea {
		background-color: #f6f6f6;/* 背景色 */
		color: #000000;/* 文字色 */
		box-shadow: 0 0 0 1px #e8e6ec;/* 枠線 */
	}
	
	
	/*　日付,区切り　*/
	
	.talk > .system p {
		background-color: rgba(0,0,0,0.2);/* 背景色 */
		color: #ffffff;/* 文字色 */
	}
	
	
	/*　左寄せふきだし　*/
	
	.talk > .left > .text {
		background-color: #ffffff;/* 背景色 */
		color: #000000;/* 文字色 */
	}
	
	
	/*　右寄せふきだし　*/
	
	.talk > .right > .text {
		background-color: #baf291;/* 背景色 */
		color: #000000;/* 文字色 */
	}
	
	
	
	/* === font === */
	
	/* icon */
	
	.icon ,.button > * ,[class^="call_"]::before {
		font-family: 'Material Icons';
		letter-spacing: normal;
		text-transform: none;
		white-space: nowrap;
		word-wrap: normal;
		direction: ltr;
		-webkit-font-feature-settings: 'liga';
		             feature-settings: 'liga';
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	
	
	/* 通常フォント */
	
	body {
		font-family: 'Roboto Slab','ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo','Osaka','ＭＳ Ｐゴシック', 'MS PGothic',sans-serif;
	}
	
	
	
	/* === layout === */
	
	
	body {
		margin: 48px 0;
		text-align: center;
		letter-spacing: 1px;
	}
	
	
	#layout {
		position: relative;
		z-index: 1;
		max-width: 480px;
		margin: 0 auto;
		padding: 0;
		font-size: 12px;
		line-height: 1.5em;
	}
	
	
	header ,footer {
		position: fixed;
		left: 0; right: 0;
		z-index: 10;
		font-size: 2em;
		line-height: 2em;
	}
	
	
	header {
		top: 0;
		padding-left:  1.75em;
		padding-right: 4.75em;
	}
	
	header h1 {
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: left;
		font-weight: bold;
		font-size: 0.8em;
		white-space: nowrap;
	}
	
	
	footer {
		bottom: 0;
		padding: 0.25em 1.75em 0.25em 4.75em;
	}
	
	footer .textarea {
		display: block;
		height: 3em;
		padding: 0.5em 2em 0.5em 1.5em;
		border-radius: 1.5em;
		font-size: 0.5em;
		line-height: 1.5;
		text-align: left;
		overflow-y: auto;
	}
	
	
	.button > * {
		position: absolute;
		bottom: 0;
		display: block;
		width: 1.5em;
		overflow: hidden;
		color: inherit !important;
	}
	
	header .back  {	left:  0.25em;}
	header .menu1 {	right: 0.25em;}
	header .menu2 {	right: 1.75em;}
	header .menu3 {	right: 3.25em;}
	
	header .back:before  {	content: 'keyboard_arrow_left';}
	header .menu1:before {	content: 'keyboard_arrow_down';}
	header .menu2:before {	content: 'insert_drive_file';}
	header .menu3:before {	content: 'call';}
	
	footer .send  {	right: 0.25em;}
	footer .stmp  {	right: 1.75em;}
	footer .menu1 {	left:  0.25em;}
	footer .menu2 {	left:  1.75em;}
	footer .menu3 {	left:  3.25em;}
	
	footer .send:before  {	content: 'mic';}
	footer .stmp:before  {	content: 'mood';}
	footer .menu1:before {	content: 'add_circle';}
	footer .menu2:before {	content: 'camera_alt';}
	footer .menu3:before {	content: 'image';}
	
	
	#content {
		position: rerative;
		z-index: 2;
		padding: 10px 5px;
	}
	
	
	.talk > li {
		position: relative;
		z-index: 3;
	}
	
	.talk > li ~ li {
		margin-top: 15px;
	}
	
	.talk > li:after {
		content: '';
		display: block;
		clear: both;
	}
	
	
	/* 区切り */
	
	.talk > .system p {
		display: inline-block;
		padding: 5px 10px;
		line-height: 1em;
		border-radius: 10px;
	}
	
	
	/* アイコン設定 */
	
	.talk > li > img {
		width: 1em;
		height: 1em;
		margin: 0 5px;
		border-radius: 0.5em;
		font-size: 40px;
	}
	
	.talk > .left > img {
		float: left;
		margin-left: 0;
	}
	
	.talk > .right > img {
		float: right;
		margin-right: 0;
	}
	
	
	/* 名前 */
	
	.talk > li > span {
		display: block;
		font-weight: bold;
	}
	
	
	
	/* 既読,時刻表記部分 */
	
	.talk > li > div > p:last-child {
		position: absolute;
		bottom: 4px;
		display: inline-block;
		width: 4em;
		font-size: 0.9em;
		line-height: 1em;
	}
	
	
	.talk > .left  > div > p:last-child {
		right: -4.5em;
		text-align: left;
	}
	
	.talk > .right > div > p:last-child {
		left: -4.5em;
		text-align: right;
	}
	
	.talk > li > div > p:last-child::before {
		display: inline-block;
		width: 100%;
	}
	
	.kdkset + li {
		margin-top: 0;
	}
	
	.talk > li.kdk > div > p:last-child::before {
		content: '既読';
	}
	.talk > .kdkset ~ li.kdk > div > p:last-child::before {
		content: '既読'counter(kdk); 
	}
	
	
	
	/* 内容部分　共通 */
	
	.talk > li > div {
		position: relative;
		top: 0;
		display: inline-block;
		margin: 3px 5px 0;
		text-align: left;
	}
	
	
	/* 内容部分 左寄せ */
	.talk > .left > div {
		left: 0 ;
		margin-right: 0 ;
	}
	
	/* 内容部分 右寄せ */
	.talk > .right > div{
		right: 0 ;
		margin-left: 0 ;
	}
	
	
	/* フキダシ形成 */
	
	.talk > li > .text {
		max-width: 60% ;
		height: auto ;
		min-height: 30px ;
		padding: 6px 12px ;
		border-radius: 15px ;
	}
	
	.talk > li > .text::after ,.talk > li > .text::before {
		content: '';
		position: absolute;
		top: 0;
		z-index: -1;
		display: block;
		width: 20px;
	}
	
	.talk > li > .text::before {
		height: 9px;
		border-radius: 0 0 10px 10px;
		background-color: inherit;
	}
	
	.talk > li > .text::after {
		height: 4px;
		border-radius: 0 0 10px 10px / 0 0 4px 4px;
	}
	
	.talk > .left > .text::before ,
	.talk > .left > .text::after {	left:  -4px; }
	
	.talk > .right > .text::before ,
	.talk > .right > .text::after {	right: -4px; }
	
	
	/* 通話表示 */
	
	[class^="call_"] {
		text-align: center;
		width: 6em;
	}
	
	[class^="call_"]::before {
		content: 'call';
		display: inline-block;
		width: 100%;
		overflow: hidden;
		font-size: 3.5em;
		line-height: 1em;
	}
	
	.call_o::before{	content: 'phone_in_talk'}
	.call_c::after {	content: 'キャンセル'}
	.call_x::after {	content: '着信不在'}
	
	
	/* イメージ,スタンプ */
	
	.talk > div img {
		width:  auto;
		height: auto;
	}
	
	.talk .stamp img {
		max-width:  150px;
		min-width:   30px;
		max-height: 150px;
		min-height:  30px;
	}
	
	.talk .image img {
		max-width:  120px;
		min-width:   60px;
		max-height: 120px;
		min-height:  60px;
		border-radius: 10px;
	}
	
	
	
	@media screen and (min-width: 481px) {
	
	
		body {
			margin: 0;
			background-size: 1px 1px;
			background-position: -2px 0;
		}
	
		body:before ,#layout:before {
			content: '';
			position: fixed;
			top: 0; bottom: 0;
			right: 0; left: 0;
			z-index: -5;
			display: block;
		}
	
		#layout {
			height: 100vh;
		}
	
		#layout:before {
			position: absolute;
			z-index: -4;
		}
	
		header ,footer {
			position: relative;
		}
	
		#content {
			height: -webkit-calc(100% - 8em);
			height:         calc(100% - 8em);
			overflow: auto;
		}
	
	}
	/*
	parody01 ver(3.0.2)
	Template by http://nanos.jp/sikaku0/ */
	</style>

配色簡易変更ツール

簡易demo

入力で上記ソースも書き換わります。

全体

リンク文字色

ヘッダー

フッター

フッター内テキストエリア

日付,区切り

左寄せふきだし

右寄せふきだし

img

setting

body内基本編集

ヘッダー部分

body


        
	<header>
	
	  <h1>トークルーム名</h1>
	
	  <div class="button">
	
	    <a href="戻り先URL" class="back"></a>
	    <span class="menu1"></span>
	    <span class="menu2"></span>
	    <span class="menu3"></span>
	
	  </div>
	
	</header>

各色付き文字部分を指定内容に置き換え
アイコン表示用。機能を持たせたい場合は別の要素に置き換え可(同クラスは持たせてください)

トーク部分：基本

(<ul class="talk"></ul>要素)間に、<li>内容</li>の形で下記発言,日付,設定のいずれかを必要数記述

トーク部分：発言

発言


        
	<li class="left">
	  <img src="アイコン画像URL" />
	  <span>名前</span>
	  <div class="text">
	    <p>発言内容</p>
	    <p>時刻表記</p>
	  </div>
	</li>

各色付き文字部分を指定内容に置き換え
下線箇所は不要なら削除

左右振り分け

箇所：left

leftrightどちらか選択

内容選択

箇所：text

textstampimageいずれかを選択

既読表記

箇所：left

kdkクラスを追加

例：right→right kdk

スタンプ,イメージ

stampimageどちらか選択時に適用

発言内容は<img>要素推奨

通話表示

text選択時に使用可能

を行ごと下記に置き換え

通話	：	`<p class="call_o">通話時間</p>`
着信不在	：	`<p class="call_x"></p>`
キャンセル	：	`<p class="call_c"></p>`

トーク部分：日付

日付


        
	<li class="system">
	  <p>日付</p>
	</li>

青字部分で表示内容変更
本家っぽくするなら1月1日(日)的な表記がいいんじゃないでしょうか。

トーク部分：設定既読数変更

既読数変更


        
	<li class="kdkset" style="counter-reset:kdk 10"></li>

10部分で数値指定
上記記述で以降全ての発言の既読数を変更
グループっぽく見せるなら、最初に書いておくと楽です。

head内基本編集

配色変更

箇所：

コメントアウトを参照して色々変更してみてください。

もしくはソースコード下部の置き換えツールを使用してください。

リンク装飾を足す場合

リンク装飾を追加する場合、で装飾のリセットを行ってください。

初期設定では、a要素デフォルト装飾のtext-decoration: underline;をリセットする指定のみ行っています。

装飾追加例

リンク装飾追加例


        
	a {
		text-decoration: none;
		background-color: rgba(255,200,0,0.5);
		border: dotted 2px #ffffff;
	}
	
	
	/* リンク装飾のリセット(head60-62にあたる部分) */
	
	.button a ,.talk .stamp a ,.talk .image a {
		background-color: transparent;
		border: none;
	}

a要素自体にtext-decoration: none;を指定したためリセットからは削除
a要素に追加した指定をリセットでは初期値に再指定

ヘッダー,フッターの表示アイコン変更

cssの擬似要素を利用してアイコン表示するようにしています。

表示アイコンの変更

箇所：

content: 'hoge';部分を使用したいアイコン表示用の文字列と変更

Material icons

アイコンのフォント自体の変更

下記手順で編集してください。

１：使用したいフォントをインポートする記述追加

２：(現使用フォントのインポート)削除

３：間を使用したいフォント表示用の記述に変更

４：上記表示アイコンの変更と同様の編集をする

parody 01

download

code

body

head

簡易demo

全体

リンク文字色

ヘッダー

フッター

フッター内テキストエリア

日付,区切り

左寄せふきだし

右寄せふきだし

img

setting

body内基本編集

ヘッダー部分

body

トーク部分：基本

トーク部分：発言

発言

左右振り分け

内容選択

既読表記

スタンプ,イメージ

通話表示

トーク部分：日付

日付

トーク部分：設定 既読数変更

既読数変更

head内基本編集

配色変更

リンク装飾を足す場合

リンク装飾追加例

ヘッダー,フッターの表示アイコン変更

表示アイコンの変更

アイコンのフォント自体の変更

extra edit

link

special thanks

font file

おすすめサイト

スタンプ素材

トーク部分：設定既読数変更