<?php
error_reporting(0);
/* ------------- 初期値 -------------------*/

$design_num = 14; // デザインの個数
$designs = array(1,2,3,6,9,4,5,7,8,10,11,12,13,14); // 番号の並び順
$designs_size = array(1,1,1,1,1,0,0,0,0,1,0,0,1,0); // １は縦長
$designs_name = array(A,B,C,D,E,F,G,H,I,K,J,L,M,N); // 番号の並び順
//$w = array('700','200','500','900');
//$wm = array(1,0);
//$p1 = array(0,1,2);
//$p2 = array(0,1,2);
//$c = array('#fff','#000','#c00','#06c','#393','#f69','#666','#D80','#FF0','#93C');
$fonts = array('no'=>'default','kana' => 'kana', 0 => 'Ap',1 =>'Kin', 2=>'Mu',3=>'GenEiLateGo', 4=>'Mp2R',5=>'GenGoT', 6=>'GenMinL', 7=>'Ship',8=>'GenGoBl',9=>'GenMinB',10=>'Hannari',11=>'Hare',12=>'GenEiAnti',13=>'irohakakuC-L',14=>'irohamaru-R',15=>'Oradano',16=>'Koburi',17=>'ShipAnti',18=>'AL',19=>'AB',20=>'Wa',21=>'Zatsu',22=>'azuki');
$f= array('no'=>'default', 'kana' => 'kana', 0 => 'ApTate',1 =>'KinTate', 2=>'MuTate',3=>'GenEiLateGoTate', 4=>'Mp2RTate',5=>'GenGoTTate', 6=>'GenMinLTate', 7=>'ShipTate',8=>'GenGoBlTate',9=>'GenMinBTate',10=>'HannariTate',11=>'HareTate',12=>'GenEiAntiTate',13=>'irohakakuC-LTate',14=>'irohamaru-RTate',15=>'OradanoTate',16=>'KoburiTate',17=>'ShipAntiTate',18=>'ALTate',19=>'ABTate',20=>'WaTate',21=>'ZatsuTate',22=>'azukiTate');
$f2= array('no'=>'default', 'kana' => 'kana', 0 => 'ApYoko',1 =>'KinYoko', 2=>'MuYoko',3=>'GenEiLateGoYoko', 4=>'Mp2RYoko',5=>'GenGoTYoko', 6=>'GenMinLYoko', 7=>'ShipYoko',8=>'GenGoBlYoko',9=>'GenMinBYoko',10=>'HannariYoko',11=>'HareYoko',12=>'GenEiAntiYoko',13=>'irohakakuC-LYoko',14=>'irohamaru-RYoko',15=>'OradanoYoko',16=>'KoburiYoko',17=>'ShipAntiYoko',18=>'ALYoko',19=>'ABYoko',20=>'WaYoko',21=>'ZatsuYoko',22=>'azukiYoko');
$fontsize = array(24,26,28,30,32,34,36,38,40);

//$j= array('-0.2em','-0.3em','-0.1em');
//$l= array('0.7','0.5','0.9');
//$m = array(0,1,0,0,0,0,0);
$size2= array(120,180,100,160,120,90,120,160,110,140,200);
$sizeH = array (910, 827,680);
$sizeW = array (550, 550,480);
/* ------------- /初期値 -------------------*/

require_once 'php/menu.php';
	
// パラメータ初期設定
$param= array();

// 背景画像一覧読み込み
$bgs = file('bg/list.csv');
array_shift($bgs);
$bg = array();
$credit = array();
foreach($bgs as $line){
	$data = explode(',',$line);
	$bg[$data[0]] = $data[1];
	$credit[$data[0]]['site'] = $data[2]; 
	$credit[$data[0]]['url'] = $data[3];
	$credit[$data[0]]['credit'] = $data[4];
	$ID[$data[0]] = $data[5];
	$category[$data[0]] = $data[6];
	$category[$data[0]] = rtrim($category[$data[0]],"\r\n,\r,\n");
}
$bg_count = count ($bg);

// ====================================================
//     画像生成
// ====================================================
	if ($_POST['imagedata']) {
		$imagedata = $_POST["imagedata"];
		$filename = $_POST["filename"];
		$imagedata  = base64_decode($imagedata);
		$image = imagecreatefromstring($imagedata);
		imagesavealpha($imageP, TRUE);
		imagejpeg($imageJ);
		if ($_POST['b'] == 'save') {
			header('Content-Type: image/png');
			header("Cache-control: no-cache");
			header('Content-Disposition: attachment; filename="' . $filename . '.png"');
			imagepng($image);
			imagedestroy($image);
			exit();
		} else {
			$filename = $filename . '.' . $_POST['b'];
			$fp = fopen('mkimg/'. $filename,w);
			if ($_POST['b'] == 'jpeg') {
				fwrite($fp,base64_decode($_POST["imagedataJ"]));
			} else {
				fwrite($fp,base64_decode($_POST["imagedata"]));
			}
			fclose($fp);
	
			// サイズを取得します
			list($width, $height) = getimagesize('mkimg/'. $filename);
			if ($height > $width) {
				$css = <<< CSS
	width: 40vh;
	height: auto;
	max-height:910px;
	max-widtht:550px;
CSS;
			}else {
				$css = <<< CSS
	height: 40vh;
	width: auto;
	max-height:550px;
	max-widtht:910px;
}
@media screen and (max-width:66.2vh) {
	canvas {
		width: 90vw;
		height: auto;
	}
CSS;
			}
			// ファイル削除
			date_default_timezone_set('Asia/Tokyo');
			 
			//削除期限
			$expire = strtotime("15 minute ago");
		 
			$dir = dirname(__FILE__) . '/mkimg/';
			 
			$list = scandir($dir);
			foreach($list as $value){
			    $file = $dir . $value;
			    if(!is_file($file)) continue;
			    $mod = filemtime( $file );
			    if($mod < $expire){
			        unlink($file);
			    }
			}
			// HTML;
			echo <<< HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-126701105-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-126701105-1');
</script>
<meta charset="UTF-8" />
<title>L版SSメーカー</title>
<meta name="description" content="短文を画像と組み合わせてL版サイズにレイアウトする無料のWebツールです。">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="meishi.css?20180416">
<style>
{$menu_css}
img.meishi {
{$css}
}
</style>
</head>
<body>
{$menu}
<h1>L版SSメーカー</h1>
<!-- #BeginLibraryItem "/Library/news.lbi" --><div id="news">【お知らせ】広告非表示プランを公開しました。[<a href="https://www.pixiv.net/fanbox/creator/31396054" target="_blank">pixivFANBOX</a>] [<a href="https://fantia.jp/fanclubs/13074" target="_blank">Fantia</a>]</div><!-- #EndLibraryItem -->
<div class="wrapper">
<div class="fm">
<h2 style="color:#8d1d55;margin-bottom:1em;">※「<a href="rule.html" style="z-inded:3;">利用規約と注意事項</a>」に同意のうえでお使いください※</h2>
<div class="cvs">
<p style="font-size:90%">右クリック→「名前を付けて画像を保存」（PC)または画像長押し（スマートフォン）で保存できます。</p>
<img src="mkimg/{$filename}" width="{$width}" height="{$height}" class="meishi">
$rakuten_book
</div>
<div style="text-align: center">
</div>
HTML;
		}
// ====================================================
//     プレビュー
// ====================================================
	} else if ($_POST['t1']) {
		require_once 'resize.php';


		// テキスト処理
		$text1 = $_POST['t1'];
		$text1 = preg_replace("/\x{202a}/u", '', $text1 );
		$text1 = preg_replace("/\x{202c}/u", '', $text1 );
		if (!$_POST['eisu']) {
			$text1 = mb_convert_kana($text1, 'AKS');
		}
		$text1 = preg_replace("/\x{2014}/u", '―', $text1 );
		$text1 = preg_replace("/\x{301c}/u", '～', $text1 );
		$text1 = preg_replace("/─/", '―', $text1 );
		$text1 = preg_replace('/\'/', "’", $text1 );
		$text1 = preg_replace('/</', "＜", $text1 );
		$text1 = preg_replace('/>/', "＞", $text1 );
		if ($_POST['wrimode'] == 'Yoko') {
			$text1 = preg_replace('/"(.*?)"/', "“$1”", $text1 );
		} else {
			$text1 = preg_replace('/"(.*?)"/', "〝$1〟", $text1 );
		}
		$text1 = preg_replace('/"/', "”", $text1 );
		$text1 =  htmlspecialchars($text1, ENT_QUOTES, 'UTF-8');
		$text1 = preg_replace('/\r\n|\r|\n/', "∀", $text1 );
		
		$_POST['sig'] = preg_replace('/</', "＜", $_POST['sig']);
		$_POST['sig'] = preg_replace('/>/', "＞", $_POST['sig'] );
		$_POST['sig'] = preg_replace('/\'/', "’", $_POST['sig'] );
		$_POST['sig'] = preg_replace('/"(.*?)"/', "“$1”", $_POST['sig'] );
		$_POST['sig'] = preg_replace('/"/', "”", $_POST['sig'] );
		$_POST['sig'] =  htmlspecialchars($_POST['sig'], ENT_QUOTES, 'UTF-8'); 

		$_POST['site'] = preg_replace('/</', "＜", $_POST['site']);
		$_POST['site'] = preg_replace('/>/', "＞", $_POST['site'] );
		$_POST['site'] = preg_replace('/\'/', "’", $_POST['site'] );
		$_POST['site'] = preg_replace('/"(.*?)"/', "“$1”", $_POST['site'] );
		$_POST['site'] = preg_replace('/"/', "”", $_POST['site'] );
		$_POST['site'] =  htmlspecialchars($_POST['site'], ENT_QUOTES, 'UTF-8'); 
		
		$_POST['author'] = preg_replace('/</', "＜", $_POST['author']);
		$_POST['author'] = preg_replace('/>/', "＞", $_POST['author'] );
		$_POST['author'] =  htmlspecialchars($_POST['author'], ENT_QUOTES, 'UTF-8'); 

		$check = file_get_contents('check.txt');
		$texts = preg_split("//u", $text1, -1, PREG_SPLIT_NO_EMPTY);
		$fuki = preg_split("//u", $_POST['sig'] . $_POST['site'] . $_POST['author'], -1, PREG_SPLIT_NO_EMPTY);
		foreach ($texts as $c) {
			if (mb_strpos($check, $c)) {
				$jo[0]++;
			}
		}
		foreach ($fuki as $c) {
			if (mb_strpos($check, $c)) {
				$jo[1]++;
			}
		}
		
		$param['w'] = $_POST['w'];
		$param['bg'] = $_POST['bg'];
		$param['bgalign'] = $_POST['bgalign'];
		$param['bgvalign'] = $_POST['bgvalign'];
		$param['bgscale'] = $_POST['bgscale'];
		$param['wrimode'] = $_POST['wrimode'];
		$param['eisu'] = 0 + $_POST['eisu']; 
		if ( $_POST['f'] != 'no') {
			if ($_POST['wrimode'] == 'Yoko') {
				$param['f'] = $fonts[$_POST['f']].'Yoko';
			} else {
				$param['f'] = $fonts[$_POST['f']].'Tate';
			}
			if ($_POST['f2'] == 'same') {
				$param['f2'] = $f2[$_POST['f']];
			} else {
				$param['f2'] = $f2[$_POST['f2']];
			}
			if ($_POST['joyo']) {
				$param['f'] = $param['f'].'J';
				$param['f2'] = $param['f2'].'J';
			} else {
				if (!$jo[0]) {
					$param['f'] = $param['f'].'J';
				}
				if (!$jo[1]) {
					$param['f2'] = $param['f2'].'J';
				}
			}
		}
		if ($_POST['dropcap']) {
			$param['dropcap'] = 1;
		} else {
			$param['dropcap'] = 0;
		}
		if ($_POST['fontsize'] == 'free') {
			if ($_POST['fontsize_free']) {
				$param['fontsize'] = $_POST['fontsize_free'];
			} else {
				$param['fontsize'] = 28;
			}
		} else if ($_POST['fontsize'] == '' && $_POST['fontsize_free']) {
			if ($_POST['fontsize_free']) {
				$param['fontsize'] = $_POST['fontsize_free'];
			} else {
				$param['fontsize'] = 28;
			}
		} else {
			$param['fontsize'] = $_POST['fontsize'];
		}
		if ($_POST['fontsize2'] == 'free' && $_POST['fontsize2_free']) {
			$param['fontsize2'] = $_POST['fontsize2_free'];
		} else {
			$param['fontsize2'] = $_POST['fontsize2'];
		}
		$param['lineheight'] = $_POST['lineheight'];
		$param['waku'] = $_POST['waku'];
		$param['nuri'] = $_POST['nuri'];
		$param['author'] = $_POST['author'];
		$param['marker'] = $_POST['marker'];
		$param['fuchi'] = $_POST['fuchi'];
		$param['fuchi2'] = $_POST['fuchi2'];
		$param['shadow'] = $_POST['shadow'];
		$param['markeralpha'] = $_POST['markeralpha'];
		$param['marker2'] = $_POST['marker2'];
		$param['marker2alpha'] = $_POST['marker2alpha'];
		if ($_POST['c'] == 'picker') {
			$param['c'] = $_POST['picker-c'];
		} else {
			$param['c'] = $_POST['c'];
		}
		if ($_POST['s'] == 'same') {
			if ($_POST['c'] == 'picker') {
				$param['s'] = $_POST['picker-c'];
			} else {
				$param['s'] = $_POST['c'];
			}
		} else if ($_POST['s'] == 'picker') {
			$param['s'] = $_POST['picker-s'];
		} else {
			$param['s'] = $_POST['s'];
		}
		if ($_POST['paper'] == 'picker') {
			$param['paper'] = $_POST['picker-p'];
		} else {
			$param['paper'] = $_POST['paper'];
		}
		if ($_FILES["mybg"]["name"]) {
			if ($_POST['agree'] ==1) {
				//アップロードされたファイルを取得
				$upfile=$_FILES["mybg"]["name"];
				//アップされた画像の拡張子を抜き出す
				$ext = substr($upfile, strrpos($upfile, '.') + 1);
						
				//拡張子を調べる
				if($ext!="jpg" && $ext!="jpeg" && $ext!="gif" && $ext!="png" && $ext!="JPG" && $ext!="JPEG" && $ext!="PNG" && $ext!="GIF"){
				    $er["image"]="拡張子が「" .$ext ."」のファイルです。jpg、gif、png形式の画像のみアップできます";
				}
				$file_new_name = md5(uniqid(rand(), true));
				$newname = resizeImage($_FILES["mybg"], 910, 'upimg', $file_new_name);

				if ($_POST['filter']) {
					if($ext == "jpg" || $ext == "jpeg" || $ext == "JPG") {
						$im = imagecreatefromjpeg('upimg/' . $newname);
					} else if ($ext == 'png' || $ext == 'PNG') {
						$im = imagecreatefrompng('upimg/' . $newname);
					}
					switch ($_POST['filter']) {
						case 'NEGATE':
							imagefilter($im, IMG_FILTER_NEGATE);
							break;
						case 'GRAYSCALE':
							imagefilter($im, IMG_FILTER_GRAYSCALE);
							break;
						case 'EDGEDETECT':
							imagefilter($im, IMG_FILTER_EDGEDETECT);
							break;
						case 'BLUR':
							imagefilter($im, IMG_FILTER_GAUSSIAN_BLUR);
							imagefilter($im, IMG_FILTER_GAUSSIAN_BLUR);
							imagefilter($im, IMG_FILTER_GAUSSIAN_BLUR);
							imagefilter($im, IMG_FILTER_GAUSSIAN_BLUR);
							imagefilter($im, IMG_FILTER_GAUSSIAN_BLUR);
							imagefilter($im, IMG_FILTER_GAUSSIAN_BLUR);
							imagefilter($im, IMG_FILTER_GAUSSIAN_BLUR);
							imagefilter($im, IMG_FILTER_GAUSSIAN_BLUR);
							imagefilter($im, IMG_FILTER_GAUSSIAN_BLUR);
							imagefilter($im, IMG_FILTER_GAUSSIAN_BLUR);
							imagefilter($im, IMG_FILTER_GAUSSIAN_BLUR);
							imagefilter($im, IMG_FILTER_GAUSSIAN_BLUR);
							imagefilter($im, IMG_FILTER_GAUSSIAN_BLUR);
							imagefilter($im, IMG_FILTER_GAUSSIAN_BLUR);
							imagefilter($im, IMG_FILTER_GAUSSIAN_BLUR);
							imagefilter($im, IMG_FILTER_GAUSSIAN_BLUR);
							imagefilter($im, IMG_FILTER_GAUSSIAN_BLUR);
							imagefilter($im, IMG_FILTER_GAUSSIAN_BLUR);
							break;
						case 'MEAN_REMOVAL':
							imagefilter($im, IMG_FILTER_MEAN_REMOVAL);
							break;
						case 'SEPIA':
							imagefilter($im, IMG_FILTER_GRAYSCALE);
							imagefilter($im, IMG_FILTER_COLORIZE,107,74,43,0);
							break;
					}
					//第２引数は、ファイルの保存先のパス
					if($ext == "jpg" || $ext == "jpeg" || $ext == "JPG") {
					    imagejpeg($im, 'upimg/' . $newname);
					} else if ($ext == 'png' || $ext == 'PNG') {
					    imagepng($im, 'upimg/' . $newname);
					}
					//画像を破棄する（保持するメモリを解放）
				    imagedestroy($im);
				}
				
				$param['bg'] = 'background-image: url(upimg/' . $newname . ');background-size:auto 100%;';
				$imgurl = 'upimg/' . $newname;
			} else {
				$er["image"] = '画像の権利に関する質問に同意してからアップロードしてください。';
			}
		} else {
			if ($_POST['filter']) {
				//新しい画像をファイルあるいは URL から作成する（）内は、変換元のPNG画像へのパス
				$filter_new_name = md5(uniqid(rand(), true));
				$ext = substr($_POST['bg'], strrpos($_POST['bg'], '.') + 1);
				if($ext == "jpg" || $ext == "jpeg" || $ext == "JPG") {
					$im = imagecreatefromjpeg('bg/910/' . $_POST['bg']);
				} else if ($ext == 'png' || $ext == 'PNG') {
					$im = imagecreatefrompng('bg/910/' . $_POST['bg']);
				}
				switch ($_POST['filter']) {
					case 'NEGATE':
						imagefilter($im, IMG_FILTER_NEGATE);
						break;
					case 'GRAYSCALE':
						imagefilter($im, IMG_FILTER_GRAYSCALE);
						break;
					case 'EDGEDETECT':
						imagefilter($im, IMG_FILTER_EDGEDETECT);
						break;
					case 'BLUR':
						imagefilter($im, IMG_FILTER_GAUSSIAN_BLUR);
						imagefilter($im, IMG_FILTER_GAUSSIAN_BLUR);
						imagefilter($im, IMG_FILTER_GAUSSIAN_BLUR);
						imagefilter($im, IMG_FILTER_GAUSSIAN_BLUR);
						imagefilter($im, IMG_FILTER_GAUSSIAN_BLUR);
						imagefilter($im, IMG_FILTER_GAUSSIAN_BLUR);
						imagefilter($im, IMG_FILTER_GAUSSIAN_BLUR);
						imagefilter($im, IMG_FILTER_GAUSSIAN_BLUR);
						imagefilter($im, IMG_FILTER_GAUSSIAN_BLUR);
						imagefilter($im, IMG_FILTER_GAUSSIAN_BLUR);
						imagefilter($im, IMG_FILTER_GAUSSIAN_BLUR);
						imagefilter($im, IMG_FILTER_GAUSSIAN_BLUR);
						imagefilter($im, IMG_FILTER_GAUSSIAN_BLUR);
						imagefilter($im, IMG_FILTER_GAUSSIAN_BLUR);
						imagefilter($im, IMG_FILTER_GAUSSIAN_BLUR);
						imagefilter($im, IMG_FILTER_GAUSSIAN_BLUR);
						imagefilter($im, IMG_FILTER_GAUSSIAN_BLUR);
						imagefilter($im, IMG_FILTER_GAUSSIAN_BLUR);
						break;
					case 'MEAN_REMOVAL':
						imagefilter($im, IMG_FILTER_MEAN_REMOVAL);
						break;
					case 'SEPIA':
						imagefilter($im, IMG_FILTER_GRAYSCALE);
						imagefilter($im, IMG_FILTER_COLORIZE,107,74,43,0);
						break;
				}
				
				//第２引数は、ファイルの保存先のパス
			    imagejpeg($im, 'upimg/' . $filter_new_name . '.' . $ext);
				//画像を破棄する（保持するメモリを解放）
			    imagedestroy($im);
				$imgurl = 'upimg/' . $filter_new_name . '.' . $ext;
			} else {	
				$imgurl = 'bg/910/' . $_POST['bg'];
			}
			if ($param['bg'] != 'nobg.png' and $param['bg'] != 'w.jpg' and $param['bg'] != 'b.jpg') {
				$imagesource = '<div class="credit"><span style="white-space: nowrap;">使用写真：</span><a href="' . $credit[$_POST['bg']]['url'] . '" target="_blank">' . $credit[$_POST['bg']]['url']  . '</a></div>';
			}
		}


		// ファイル削除
		date_default_timezone_set('Asia/Tokyo');
		 
		//削除期限
		$expire = strtotime("5 minute ago");
		 
		//ディレクトリ
		$dir = dirname(__FILE__) . '/upimg/';
		 
		$list = scandir($dir);
		foreach($list as $value){
		    $file = $dir . $value;
		    if(!is_file($file)) continue;
		    $mod = filemtime( $file );
		    if($mod < $expire){
		        unlink($file);
		    }
		}
//		// 保存画像		
		$savename = 'up_' . md5(uniqid(rand(), true));
//		$savename = 'up_' . md5(uniqid(rand(), true)) . '.png';
		
		// 読み込み
		$d = $_POST['d'];
		require_once 'lphoto_script.php';
		require_once 'meishi_fontload.php';
		require_once 'font.php';
		$param['sizeH2'] = $design[$d]['sizeH'];

		session_start();
		// HTML;
		echo <<< HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-126701105-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-126701105-1');
</script>
<meta charset="UTF-8" />
<title>L版SSメーカー</title>
<meta name="description" content="短文を画像と組み合わせてL版サイズにレイアウトする無料のWebツールです。">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="meishi.css?20180416">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style>
{$menu_css}
{$font_css}
.font-loading{
    opacity: 0;
}
canvas {
	display:block;
	margin: auto;
	text-align: center;
	{$design[$d]['css']}
}
.credit {
	font-size: 90%;
	word-wrap: break-word;
}
#loading, #error {
	position: absolute;
	top:200px;
	left: 0;
	display: table-cell;
	margin: 0;
	z-index:2;
	vertical-align: middle;
	width: 100%;
	height: 40vh;
}
#loading div {
	vertical-align: middle;
	text-align: center;
}
#error {
	display: none;
	color: red;
	font-weight: bold;
}
 </style>
<script>
	cxShift = 0;
	cyShift = 0;
   var img = new Image();    //画像オブジェクト作成
  img.src = "{$imgurl}";  //写真のパスを指定する
	function ImgSave(bunki) {
		var now = new Date();
		var y = now.getFullYear();
		var m = now.getMonth() + 1;
		var d = now.getDate();
		var h = now.getHours();
		var mi = now.getMinutes();
		var s = now.getSeconds();
		var mm = ('0' + m).slice(-2);
		var dd = ('0' + d).slice(-2);
		var hh = ('0' + h).slice(-2);
		var mmi = ('0' + mi).slice(-2);
		var ss = ('0' + s).slice(-2);
		var lphoto = {};
		
		if (localStorage.getItem('lphoto')) {
			lphoto = JSON.parse(localStorage.getItem('lphoto'));
		}
		lphoto[y+"/"+mm+"/"+dd+" "+hh+":"+mmi+":"+ss] = $('#t1').val()+"\t"+$('#sig').val()+"\t"+$('#site').val();
		if (Object.keys(lphoto).length > 100) {
			var firstKey = Object.keys(lphoto)[0];
			alert (firstKey);
			delete lphoto[firstKey];
		}
		localStorage.setItem('lphoto', JSON.stringify(lphoto));

		var canvas = document.getElementById("display") ;
		var image_data = canvas.toDataURL("image/png");
		image_data = image_data.replace(/^.*,/, '');
		var image_dataJ = canvas.toDataURL("image/jpeg");
		image_dataJ = image_dataJ.replace(/^.*,/, '');
		var form = document.form;
		form.imagedata.value = image_data;
		form.imagedataJ.value = image_dataJ;
		if (bunki == "d") {
			form.b.value = "save";
		} else if(bunki == "j") {
			form.b.value = "jpeg";
		} else if(bunki == "p") {
			form.b.value = "png";
		}
		form.submit();
	}
		
</script>
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
{$menu}<h1>L版SSメーカー</h1>
<!-- #BeginLibraryItem "/Library/news.lbi" --><div id="news">【お知らせ】広告非表示プランを公開しました。[<a href="https://www.pixiv.net/fanbox/creator/31396054" target="_blank">pixivFANBOX</a>] [<a href="https://fantia.jp/fanclubs/13074" target="_blank">Fantia</a>]</div><!-- #EndLibraryItem -->
<div class="wrapper">
<div class="fm">
<h2 style="color:#8d1d55;margin-bottom:1em;">※「<a href="rule.html" style="z-inded:3;">利用規約と注意事項</a>」に同意のうえでお使いください（保存ボタンは広告の下にあります）</h2>
<strong style="color:red;">{$er["image"]}</strong>
<div class="cvs">
<div id="loading"><div><img src="img/icon_loader_f_ww_03_s1.gif" width="20" height="20"></div></div>
<div id="error">フォントをロードできませんでした。</div>
<div id="fontload" style="width:1;height:1;font-size:1px;color:#fff;font-family:'{$f2[$_POST['f']]}TateJ'">{$text1}</div>
<canvas id="layer0" width="{$design[$d]['sizeW']}" height="{$design[$d]['sizeH']}" style="position: absolute; z-index: 6; display:none;"></canvas>
<canvas id="layer1" width="{$design[$d]['sizeW']}" height="{$design[$d]['sizeH']}" style="position: absolute; z-index: 5; display:none;"></canvas>
<canvas id="layer1f" width="{$design[$d]['sizeW']}" height="{$design[$d]['sizeH']}" style="position: absolute; z-index: 4; display:none;"></canvas>
<canvas id="layer3" width="{$design[$d]['sizeW']}" height="{$design[$d]['sizeH']}" style="position: absolute; z-index: 3; display:none;"></canvas>
<canvas id="layer5" width="{$design[$d]['sizeW']}" height="{$design[$d]['sizeH']}" style="position: absolute; z-index: 1; display:none;"></canvas>
<canvas id="layer2" width="{$design[$d]['sizeW']}" height="{$design[$d]['sizeH']}" style="position: absolute; z-index: 0; display:none;"></canvas>
<canvas id="layer4"  width="{$design[$d]['sizeW']}" height="{$design[$d]['sizeH']}" style="position: absolute; z-index: 2; display:none;"></canvas>
<canvas id="credit" width="{$design[$d]['sizeW']}" height="24" style="position: absolute; z-index: 100; display:none;"></canvas>
<canvas id="display" width="{$design[$d]['sizeW']}" height="{$param['sizeH2']}"></canvas>
</div>
<div style="text-align: center">
{$imagesource}
<h2>テキスト位置の調整</h2>
<input type="button" value="↑上" class="save" id="minusY"><br>
<input type="button" value="←左" class="save" id="minusX">
<input type="button" value="戻す" class="reset" id="resetXY">
<input type="button" value="右→" class="save" id="plusX"><br>
<input type="button" value="下↓" class="save" id="plusY">
<div style="margin: 50px 0;">{$ad_top}</div>
<p style="font-size:90%">PCの場合は、この画像を右クリック→「名前を付けて画像を保存」で保存できます。<br>スマートフォン等、保存できない場合は下の変換ボタンからどうぞ。</p>
<form method="post" action="{$basename}" name="form" class="saveform">
　<input type="button" value="PNG画像に変換" onclick="ImgSave('p');" class="change"> <input type="button" value="JPEG画像に変換" onclick="ImgSave('j');" class="change"><br><br>
　<input type="button" value="PNG画像をダウンロード" onclick="ImgSave('d');" class="change"><br>
　↑初期バージョンの動きはこちら
  <input type="hidden" name="imagedata" value="">
  <input type="hidden" name="imagedataJ" value="">
  <input type="hidden" name="filename" value="{$savename}">
  <input type="hidden" name="t1" value="{$_POST['t1']}" id="t1">
  <input type="hidden" name="sig" value="{$_POST['sig']}" id="sig">
  <input type="hidden" name="site" value="{$_POST['site']}" id="site">
  <input type="hidden" name="b" value="server"></div>
<p>※文字が正しく表示されない→一度戻って再読み込みしてみてください。広告ブロック機能（コンテンツブロッカー）は解除してください。<br>画像変換ができない→ブラウザを変更してみてください。</p>
</form>
</div>
<script> 
{$fontload}
{$script}
</script>
HTML;

// ====================================================
//     フォーム画面
// ====================================================

	} else {
		$basename = basename($_SERVER['PHP_SELF']);
		require_once 'lphoto_script.php';
		require_once 'lphoto_sample_script.php';
		
		// デザイン
		$design_htmls = array();
		$j = 0;
		// 幅
		while ($j < $design_num){
			$l = $j+1;
			$clip = '';
			if ($j == 0) {
				$ck = ' checked';
			} else {
				$ck = '';
			}
			if ($designs_size[$j]) {
				$wh1 = '"width: 150px;height:196px"';
				$wh2 = 'width="110" height="157"';
			} else {
				$wh1 = '"width: 184px;height:150px"';
				$wh2 = 'width="157" height="110"';
			}
			if (($designs_name[$j] == 'K') || ($designs_name[$j] == 'M')) {
				$clip = '<br>（<label><input type="radio" name="clipp_' .$l .'" value="p" checked>紙色</label><label><input type="radio" name="clipp_' .$l .'" value="w">白</label>）';
			}
			$txWidth .= ','.$designs[$j].':'. $design[$designs[$j]]['txWidth'];
			$txHeight .= ','.$designs[$j].':'. $design[$designs[$j]]['txHeight'];
			$design_htmls[] = <<< HTML
<section class="img_select" style={$wh1}>
<label><img src="img/design{$designs[$j]}l.jpg" {$wh2} class="thum" style="border:solid 1px #999"><br>
<input type="radio" name="d" value="{$designs[$j]}" id="d{$designs[$j]}"{$ck}>デザイン{$designs_name[$j]}</label><span style="color:blue;font-size:80%;" id="count_{$designs[$j]}"></span>{$clip}
</section>
HTML;
			$j++;
		}
		$design_html =  implode("\n", $design_htmls);
		
		// テキスト処理
		
		$param['bg'] = 'jeremy-thomas-98201.jpg';
		$imgurl = 'bg/910/' . $param['bg'];


		// 読み込み
//$d = 1;
//		require_once 'lphoto_sample_script.php';
		$param['sizeH2'] = $design[$d]['sizeH'] + 40;

		// HTML描画
		echo <<< HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-126701105-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-126701105-1');
</script>
<meta charset="UTF-8" />
<meta name="description" content="短文を画像と組み合わせてフォトプリント用にレイアウトする無料のWebツールです。">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@140sscard" />
<meta name="twitter:title" content="L版SSメーカー" />
<meta name="twitter:description" content="短文SSをL版写真サイズにレイアウト" />
<meta property="twitter:image" content="https://sscard.monokakitools.net/ogp/twicard_lphoto.png" />


<meta property="og:url" content="https://sscard.monokakitools.net/lphoto.html" />
<meta property="og:title" content="L版SSメーカー" />
<meta property="og:description" content="短文SSをL版写真サイズにレイアウト" />
<meta property="og:image" content="https://sscard.monokakitools.net/ogp/twicard_lphoto.png" />
<title>L版SSメーカー</title>
<link rel="stylesheet" type="text/css" href="spectrum.css">
<link rel="stylesheet" type="text/css" href="meishi.css?20180416">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style>
{$menu_css}
canvas {
	border: solid 1px #000;
}
canvas#layer4,
canvas#layer5,
canvas#layer7,
canvas#layer8,
canvas#layer11,
canvas#layer12,
canvas#layer14
 {
	max-width: 100%;
	width: 165px;
	height: auto;
}
canvas#layer1,
canvas#layer2,
canvas#layer3,
canvas#layer6,
canvas#layer9,
canvas#layer10,
canvas#layer13 {
	height: 165px;
	width: auto;
}
.smp {
	display:block;
	margin: 10px;
	float: left;
}
textarea {
	height: 7em;
	width: 90%;
}
@media screen and (max-width:480px) {
	textarea {
		height: 12em;
	}
}
</style>
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="spectrum.js"></script>
<script src='FavSearchCondition.js'></script>
<script src="webfontloader.js"></script>
<script type="text/javascript">
$(function(){
	// オリジナル画像のリセット
	$('#mybg').val('');
	
	var txWidth = {0:0{$txWidth}};
	var txHeight = {0:0{$txHeight}};
	var design = $('#TiG input[name="d"]:radio:checked').val();
	var wrimode = $('#TiG input[name="wrimode"]:radio:checked').val();
	var lineheight = $('#TiG input[name="lineheight"]:radio:checked').val();
	var fontsize= $('#TiG input[name="fontsize"]:radio:checked').val();
	if (fontsize == 'free') {
		fontsize = $('#TiG input[name="fontsize_free"]').val();
	}
	var Info = MaxField(design,wrimode,lineheight,fontsize);
	var fonts = {'no':'default','kana' : 'kana', 0 : 'Ap',1 :'Kin', 2:'Mu',3:'GenEiLateGo', 4:'Mp2R',5:'GenGoT', 6:'GenMinL', 7:'Ship',8:'GenGoBl',9:'GenMinB',10:'Hannari',11:'Hare',12:'GenEiAnti',13:'irohakakuC-L',14:'irohamaru-R',15:'Oradano',16:'Koburi',17:'ShipAnti',18:'AL',19:'AB',20:'Wa',21:'Zatsu',22:'azuki',23:'Satsuki'};
	$("#info").text(Info[1]);
	$("#fsize").text(fontsize);
	for (i = 1; i <= {$design_num}; i++) {
		$('#count_'+ i).text('（'+ LayField(i,wrimode,lineheight,fontsize) + '字）');
	}
	t_height = Info[0];
	// 標準フォント
	if (wrimode == 'Yoko') {
		$('#deffont').prop("disabled", false);
		$('#deffont_span').css("color", "#000");
		$('#eisu').prop("disabled", false);
		$('#eisu_span').css("color", "#000");
	} else {
		$('#eisu').prop("disabled", true);
		$('#eisu_span').css("color", "#999");
		if ($('#eisu').prop('checked')) {
			$('#eisu').prop('checked',false);
		}
	}


	// 保存したデータを表示
	$('#docs').ready(function(){
		$('#docs').val(localStorage.getItem("docs"));
		$('#sig').val(localStorage.getItem("sig"));
		$('#site').val(localStorage.getItem("site"));
		$("#count").text(CountField(t_height,$('#docs').val(),$('#TiG input[name="dropcap"]:checkbox:checked').val(),wrimode));
		if (localStorage.getItem('waku') == 'false') {
			$('#TiG input[name="waku"]').prop('checked',false);
		} else {
			$('#TiG input[name="waku"]').prop('checked',true);
		}
		if (localStorage.getItem('trgt') == 'true') {
			$('#TiG input[name="trgt"]').prop('checked',true);
		} else {
			$('#TiG input[name="trgt"]').prop('checked',false);
		}
		if (localStorage.getItem('height') == 'true') {
			$('#TiG input[name="height"]').prop('checked',true);
		} else {
			$('#TiG input[name="height"]').prop('checked',false);
		}
		if (localStorage.getItem('joyo') == 'true') {
			$('#TiG input[name="joyo"]').prop('checked',true);
		} else {
			$('#TiG input[name="joyo"]').prop('checked',false);
		}
	});
	// フォントのロード
	SelectedFont = fonts[$('#TiG input[name=f]:radio:checked').val()];
	if (wrimode == 'Yoko') {
		if (sessionStorage.getItem("YokoFont") || sessionStorage.getItem("YokoFont").indexOf(SelectedFont) == -1) {
			WebFont.load({
	    		custom: {
	        		families: [fonts[$('#TiG input[name=f]:radio:checked').val()]+'Yoko', fonts[$('#TiG input[name=f]:radio:checked').val()]+'YokoJ'],
	        		urls: ['fontview.css']
	    		}
	    	});
	    	if (sessionStorage.getItem("YokoFont")) {
		    	sessionStorage.setItem("YokoFont", sessionStorage.getItem("YokoFont") + ',' + fonts[$('#TiG input[name=f]:radio:checked').val()]);
		    } else {
		    	sessionStorage.setItem("YokoFont", fonts[$('#TiG input[name=f]:radio:checked').val()]);
		    }
	    }
    } else {
		if (! sessionStorage.getItem("TateFont") || sessionStorage.getItem("TateFont").indexOf(SelectedFont) == -1) {
			WebFont.load({
	    		custom: {
	        		families: [fonts[$('#TiG input[name=f]:radio:checked').val()]+'Tate', fonts[$('#TiG input[name=f]:radio:checked').val()]+'TateJ'],
	        		urls: ['fontview.css']
			    }
	    	});
	    	if (sessionStorage.getItem("TateFont")) {
		    	sessionStorage.setItem("TateFont", sessionStorage.getItem("TateFont") + ',' + fonts[$('#TiG input[name=f]:radio:checked').val()]);
		    } else {
		    	sessionStorage.setItem("TateFont", fonts[$('#TiG input[name=f]:radio:checked').val()]);
		    }
	    }
    }


	// フォーム変更時
	$('#TiG input[name=bg]').on("change", function() {
		ChangeBG($('#TiG input[name="bg"]:radio:checked').val());
    });
    // フォントのロード
	$('#TiG input[name=f]').on("change", function() {
		wrimode = $('#TiG input[name="wrimode"]:radio:checked').val();
		SelectedFont = fonts[$('#TiG input[name=f]:radio:checked').val()];
		if (wrimode == 'Yoko') {
			if (! sessionStorage.getItem("YokoFont") || sessionStorage.getItem("YokoFont").indexOf(SelectedFont) == -1) {
				WebFont.load({
		    		custom: {
		        		families: [fonts[$('#TiG input[name=f]:radio:checked').val()]+'Yoko', fonts[$('#TiG input[name=f]:radio:checked').val()]+'YokoJ'],
		        		urls: ['fontview.css']
		    		}
		    	});
		    	if (sessionStorage.getItem("YokoFont")) {
			    	sessionStorage.setItem("YokoFont", sessionStorage.getItem("YokoFont") + ',' + fonts[$('#TiG input[name=f]:radio:checked').val()]);
			    } else {
			    	sessionStorage.setItem("YokoFont", fonts[$('#TiG input[name=f]:radio:checked').val()]);
			    }
		    }
	    } else {
			if (! sessionStorage.getItem("TateFont") || sessionStorage.getItem("TateFont").indexOf(SelectedFont) == -1) {
				WebFont.load({
		    		custom: {
		        		families: [fonts[$('#TiG input[name=f]:radio:checked').val()]+'Tate', fonts[$('#TiG input[name=f]:radio:checked').val()]+'TateJ'],
		        		urls: ['fontview.css']
				    }
		    	});
		    	if (sessionStorage.getItem("TateFont")) {
			    	sessionStorage.setItem("TateFont", sessionStorage.getItem("TateFont") + ',' + fonts[$('#TiG input[name=f]:radio:checked').val()]);
			    } else {
			    	sessionStorage.setItem("TateFont", fonts[$('#TiG input[name=f]:radio:checked').val()]);
			    }
		    }
		}
    });
	$('#TiG input[name=wrimode]').on("change", function() {
		wrimode = $('#TiG input[name="wrimode"]:radio:checked').val();
		SelectedFont = fonts[$('#TiG input[name=f]:radio:checked').val()];
		if (wrimode == 'Yoko') {
			if (! sessionStorage.getItem("YokoFont")|| sessionStorage.getItem("YokoFont").indexOf(SelectedFont) == -1) {
				WebFont.load({
		    		custom: {
		        		families: [fonts[$('#TiG input[name=f]:radio:checked').val()]+'Yoko', fonts[$('#TiG input[name=f]:radio:checked').val()]+'YokoJ'],
		        		urls: ['fontview.css']
		    		}
		    	});
		    	if (sessionStorage.getItem("YokoFont")) {
			    	sessionStorage.setItem("YokoFont", sessionStorage.getItem("YokoFont") + ',' + fonts[$('#TiG input[name=f]:radio:checked').val()]);
			    } else {
			    	sessionStorage.setItem("YokoFont", fonts[$('#TiG input[name=f]:radio:checked').val()]);
			    }
		    }
	    } else {
			if (! sessionStorage.getItem("TateFont")|| sessionStorage.getItem("TateFont").indexOf(SelectedFont) == -1) {
				WebFont.load({
		    		custom: {
		        		families: [fonts[$('#TiG input[name=f]:radio:checked').val()]+'Tate', fonts[$('#TiG input[name=f]:radio:checked').val()]+'TateJ'],
		        		urls: ['fontview.css']
				    }
		    	});
		    	if (sessionStorage.getItem("TateFont")) {
			    	sessionStorage.setItem("TateFont", sessionStorage.getItem("TateFont") + ',' + fonts[$('#TiG input[name=f]:radio:checked').val()]);
			    } else {
			    	sessionStorage.setItem("TateFont", fonts[$('#TiG input[name=f]:radio:checked').val()]);
			    }
		    }
		}
    });
	$('#TiG input[name=f2]').on("change", function() {
		WebFont.load({
    		custom: {
        		families: [fonts[$('#TiG input[name=f2]:radio:checked').val()]+'Yoko',fonts[$('#TiG input[name=f2]:radio:checked').val()]+'YokoJ'],
        		urls: ['fontview.css']
    			}
    	});
    });
	$("#TiG").change(function() {
		design = $('#TiG input[name="d"]:radio:checked').val();
		wrimode = $('#TiG input[name="wrimode"]:radio:checked').val();
		lineheight = $('#TiG input[name="lineheight"]:radio:checked').val();
		fontsize= $('#TiG input[name="fontsize"]:radio:checked').val();
		if (fontsize == 'free') {
			fontsize = $('#TiG input[name="fontsize_free"]').val();
		}
		var Info = MaxField(design,wrimode,lineheight,fontsize);
		$("#info").text(Info[1]);
		t_height = Info[0];
		
		// 文字数
		$("#count").text(CountField(t_height,$('#docs').val(),$('#TiG input[name="dropcap"]:checkbox:checked').val(),wrimode));
		for (i = 1; i <= {$design_num}; i++) {
			$('#count_'+ i).text('（'+ LayField(i,wrimode,lineheight,fontsize) + '字）');
		}
        // 標準フォント
		if (wrimode == 'Yoko') {
			$('#deffont').prop("disabled", false);
			$('#deffont_span').css("color", "#000");
			$('#eisu').prop("disabled", false);
			$('#eisu_span').css("color", "#000");
		} else {
			$('#eisu').prop("disabled", true);
			$('#eisu_span').css("color", "#999");
			if ($('#eisu').prop('checked')) {
				$('#eisu').prop('checked',false);
			}
		}
		localStorage.setItem('waku',  $('#TiG input[name="waku"]').prop('checked'));
		localStorage.setItem('trgt', $('#TiG input[name="trgt"]').prop('checked'));
		localStorage.setItem('height', $('#TiG input[name="height"]').prop('checked'));
		localStorage.setItem('joyo',  $('#TiG input[name="joyo"]').prop('checked'));


		draw();
	});

	
	// 本文変更時
	$("#docs").bind("keydown keyup keypress change", function() {
		$("#count").text(CountField(t_height,$('#docs').val(),$('#TiG input[name="dropcap"]:checkbox:checked').val(),wrimode));
	    localStorage.setItem("docs", $("#docs").val());
	});
	$("#sig").bind("keydown keyup keypress change", function() {
	    localStorage.setItem("sig", $("#sig").val());
	});
	$("#site").bind("keydown keyup keypress change", function() {
	    localStorage.setItem("site", $("#site").val());
	});


	// 自由サイズ変更時
	$('#TiG input[name="fontsize_free"]').change( function() {
		$('#TiG input[name="fontsize"]:radio:checked').val(['free']);
	});

	// ランダム
	$('#random').click(function() {
		$('#TiG input[name="d"]').eq(Math.floor( Math.random() * $('#TiG input[name="d"]').length)).prop('checked',true);
		$('#TiG input[name="bg"]').eq(Math.floor( Math.random() * $('#TiG input[name="bg"]').length)).prop('checked',true);
		$('#TiG input[name="paper"]').eq(Math.floor( Math.random() * $('#TiG input[name="paper"]').length)).prop('checked',true);
		$('#TiG input[name="wrimode"]').eq(Math.floor( Math.random() * $('#TiG input[name="wrimode"]').length)).prop('checked',true);
		$('#TiG input[name="f"]').eq(Math.floor( Math.random() * $('#TiG input[name="f"]').length)).prop('checked',true);
		$('#TiG input[name="fontsize"]').eq(Math.floor( Math.random() * $('#TiG input[name="fontsize"]').length)).prop('checked',true);
		$('#TiG input[name="lineheight"]').eq(Math.floor( Math.random() * $('#TiG input[name="lineheight"]').length)).prop('checked',true);
		if (Math.floor(Math.random()*2)) {
			$('#TiG input[name="dropcap"]').prop('checked',true);
		} else {
			$('#TiG input[name="dropcap"]').prop('checked',false);
		}
		if (Math.floor(Math.random()*2)) {
			$('#TiG input[name="bgalpha"]').prop('checked',true);
		} else {
			$('#TiG input[name="bgalpha"]').prop('checked',false);
		}
		$('#TiG').submit();
	});


	// 最大値
	function MaxField(Design,Wmode,Lheight,Fsize) {
  		if (wrimode == 'Yoko') {
  			var JiCount = Math.floor ((txWidth[Design]+1) / Fsize);
  			var GyoCount = Math.floor ((txHeight[Design] / (Fsize * Lheight))) + 2;
			var t_height = Math.floor (txWidth[Design] / Fsize ) -2;
  		} else {
  			var JiCount = Math.floor ((txHeight[Design]+(Fsize-0)) / Fsize) +1;
  			var GyoCount = Math.floor ((txWidth[Design] / (Fsize * Lheight))) + 1;
			var t_height = Math.floor ((Number(txHeight[Design])+ Number(Fsize)) / Fsize );
  		}
  		TxCount = JiCount * GyoCount;
  		return [t_height, '選択中のデザイン／文字数で入力可能なのは最大' + TxCount + '字（'+JiCount+'字×'+GyoCount+'行）ほどです。'];
	}
	
	// 最大値
	function LayField(Design,Wmode,Lheight,Fsize) {
  		if (wrimode == 'Yoko') {
  			var JiCount = Math.floor ((txWidth[Design]+1) / Fsize);
  			var GyoCount = Math.floor ((txHeight[Design] / (Fsize * Lheight))) + 2;
  		} else {
  			var JiCount = Math.floor ((txHeight[Design]+(Fsize-0)) / Fsize) +1;
  			var GyoCount = Math.floor ((txWidth[Design] / (Fsize * Lheight))) + 1;
  		}
  		TxCount = JiCount * GyoCount;
  		return TxCount;
	}

	// 文字数
	function CountField(Theight,Text,Dcap,Wmode) {
		var t_max = Theight + 3;
		var val = Text;
	 	counter = val.length;
		var dropcap = Dcap;
		val = val.replace(/\\n/g, '∀');
		var c;
		var v;
  		if (Wmode == 'Yoko') {
			c = -1;
			v= 1;
		    for(var i=0;i<val.length;i++){
		        chr = val.charAt(i);
				if (c > Theight) {
					if ((chr.match(/、|。|」|）|』|】/)) &&(c < (Theight + 2))){					
			       		c++;
					} else {
					   c = 1;
					   v++;
					}
				} else if (chr == '∀') {
				   c = -1;
				   v++;
		        } else {
		        	c++;
		        }
				if  (chr == '∀') {
				
				} else {
			        // ドロップキャプステスト
			        if (dropcap > 0) {
				        if (i == 0) {
				        	c= c+2;
				        } else if ((v == 2) &&(c == 0)) {
				        	c=c+3;
				        } else if ((v == 2) &&(c ==1)) {
				        	c=c+2;
				        } else if ((v == 2) &&(c ==2)) {
				        	c++;
				        }
			        }
		        }
			}
			c++;
		} else {
			c = 0;
			v= 1;
		    for(var i=0;i<val.length;i++){
		        chr = val.charAt(i);
				if (c > Theight) { // 最大字数オーバー
					if ((chr.match(/、|。|」|）|』|】/)) &&(c < (Theight + 3))){ // 禁則処理
					} else {
					   c = 1; // 縦位置カウント
					   v++; // 行カウント
					}
				} else if (chr == '∀') { // 改行マーク
					c= 0;
					v++;
		        }
				if  (chr == '∀') {
				
				} else {
			        // ドロップキャプス
			        if (dropcap > 0) {
				        if (i == 0) {
				        	c= c+2;
				        } else if ((v == 2) &&(c == 0)) {
				        	c= c+3;
				        } else if ((v == 2) &&(c ==1)) {
				        	c= c+2;
				        } else if ((v == 2) &&(c ==2)) {
				        	c++;
				        }
			        }
			       	c++;
		        }
			}
		}
		return '現在'+counter+'字（'+v+'行'+c+'字くらい）';
	}

	// 背景初期値
	
    $('[name="bg"]').click(function(){
    	sessionStorage.setItem('BG', $('[name="bg"]').index(this));
    });


	/* 画像選択 */
    // 「id="jQueryBox"」を非表示
    var BgSect = $("#bg").children("section").length;
    BgSect++;
    for (i = 2; i < BgSect; i++ ) {
	    $("#bg"+i).css("display", "none");
		$("#tg"+i).css("display", "none");
	}
 
    // 「id="jQueryPush"」がクリックされた場合
    $(".more").on('click', function(){
		var id =  $(this).attr("id");
		var num = id.slice(2);
        $("#tg"+num).toggle();
        num++;
        $("#tg"+num).toggle();
        $("#bg"+num).toggle();
        if (BgSect == (num + 1)) {
	        $("#tgallopen").toggle();
	    }
	});

    $("#tgall").click(function(){
	    for (i = 2; i < BgSect; i++ ) {
	    	$("#bg"+i).css("display", "none");
		}
        $("#tgallopen").show();
        $("#tg1").toggle();
	});
    $("#tgallopen").click(function(){
	    for (i = 1; i < BgSect; i++ ) {
        	$("#tg"+i).css("display", "none");
		    $("#bg"+(i+1)).css("display", "block");
		}
        $("#tgallopen").toggle();
	});
    $("#categorychange").change(function() {
        var val = $(this).val();
        if (val == 'all') {
			$("#bg section").show();
		    for (i = 0; i < BgSect; i++ ) {
			    $("#bg"+i).css("display", "none");
			}
	        $("#tgallopen").show();
		    $("#bg1").css("display", "block");
		    $("#bg1").show();
	        $("#tg1").toggle();
	    } else {
	    	if (val == 'favorite') {
				  for (var i = 1; i <= {$bg_count}; i++) {
					if (localStorage.getItem(i) == 'fav') {
						$('#SECT_'+i).addClass('favorite');
					} else {
						$('#SECT_'+i).removeClass('favorite');
					}
				}
	    	}
			$("#bg section").hide();
		    for (i = 0; i < BgSect; i++ ) {
			    $("#bg"+i).css("display", "block");
		        $("#tg"+i).css("display", "none");
			}
	        $("#tgallopen").hide();
	        $("#tgall").hide();
			$("#bg section."+val).show();
		}
    });

	
	// 付記
    $("#SubOption").css("display", "none");
    $("#SubOpen").click(function(){
        // 「id="jQueryBox"」の表示、非表示を切り替える
        $("#SubOption").toggle();
        $("#SubOpen").toggle();
    });
    $("#SubClose").click(function(){
        // 「id="jQueryBox"」の表示、非表示を切り替える
        $("#SubOption").toggle();
        $("#SubOpen").toggle();
    });

	// シミュレータ
    $("#SimOption").css("display", "none");
    $("#SimOpen").click(function(){
        $("#SimOption").toggle();
        $("#SimOpen").toggle();
    });
    $("#SimClose").click(function(){
        $("#SimOption").toggle();
        $("#SimOpen").toggle();
    });
});


 // カラーピッカー
jQuery(function($){
    $("#picker-c").spectrum({
        color: "#fff", // 初期値
        flat: false, // trueの場合、クリックしなくてもピッカーが表示されるようにする
        showInput: true, // コードの入力欄を表示する
        disabled: false, // trueの場合、ピッカーを無効にする
        showPalette: true, // パレットを表示する
        showPaletteOnly: false, // true の場合、パレットのみの表示にする
        togglePaletteOnly: false, // true の場合、パレット以外の部分はボタンで表示切替する
        togglePaletteMoreText: "詳細", // togglePaletteOnlyがtrueの場合のボタン名(開く)
        togglePaletteLessText: "閉じる", // togglePaletteOnlyがtrueの場合のボタン名(閉じる)
        showSelectionPalette: true, // ユーザーが前に選択した色をパレットに表示する
        maxSelectionSize: 10, // 選択した色を記憶する数の上限
        hideAfterPaletteSelect: false, // true の場合、パレットを選んだ時点でピッカーを閉じる
        clickoutFiresChange: true, // ピッカーの外側をクリックしてピッカーを閉じた際にchangeイベントを発生させる
        showInitial: true, // 初期の色と選択した色を見比べるエリアを表示する
        allowEmpty: true, // 「指定なし」を許可する
        chooseText: "OK", // 選択ボタンのテキスト
        cancelText: "キャンセル", // キャンセルボタンのテキスト
        showButtons: true, // ボタンを表示する
        containerClassName: "full-spectrum", // ピッカーの部品を囲うタグ(要素)のクラス名
        replacerClassName: "", // ピッカーを表示させるボタンのクラス名
        preferredFormat: "hex", // カラーコードの形式を指定したものに変更する (可能な限り。hex, hex3等)
        localStorageKey: "spectrum.demo", // localStorageに選択色を記憶する際のキー
        palette: [ // パレット
            ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", 
            "rgb(204, 204, 204)", "rgb(217, 217, 217)", "rgb(255, 255, 255)"],
            ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)",
            "rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"],
            ["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)",
            "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)",
            "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)",
            "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)",
            "rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)",
            "rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)",
            "rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)",
            "rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)",
            "rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)",
            "rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 18, 77)", "rgb(76, 17, 48)"]
        ],
        selectionPalette: [], // 選択色のパレットの初期値

        // 値の変更(確定)時イベント
        change: function(color){
			$('[name="c"]').val(['picker']);
        }
    });

    $("#picker-s").spectrum({
        color: "#fff", // 初期値
        flat: false, // trueの場合、クリックしなくてもピッカーが表示されるようにする
        showInput: true, // コードの入力欄を表示する
        disabled: false, // trueの場合、ピッカーを無効にする
        showPalette: true, // パレットを表示する
        showPaletteOnly: false, // true の場合、パレットのみの表示にする
        togglePaletteOnly: false, // true の場合、パレット以外の部分はボタンで表示切替する
        togglePaletteMoreText: "詳細", // togglePaletteOnlyがtrueの場合のボタン名(開く)
        togglePaletteLessText: "閉じる", // togglePaletteOnlyがtrueの場合のボタン名(閉じる)
        showSelectionPalette: true, // ユーザーが前に選択した色をパレットに表示する
        maxSelectionSize: 10, // 選択した色を記憶する数の上限
        hideAfterPaletteSelect: false, // true の場合、パレットを選んだ時点でピッカーを閉じる
        clickoutFiresChange: true, // ピッカーの外側をクリックしてピッカーを閉じた際にchangeイベントを発生させる
        showInitial: true, // 初期の色と選択した色を見比べるエリアを表示する
        allowEmpty: true, // 「指定なし」を許可する
        chooseText: "OK", // 選択ボタンのテキスト
        cancelText: "キャンセル", // キャンセルボタンのテキスト
        showButtons: true, // ボタンを表示する
        containerClassName: "full-spectrum", // ピッカーの部品を囲うタグ(要素)のクラス名
        replacerClassName: "", // ピッカーを表示させるボタンのクラス名
        preferredFormat: "hex", // カラーコードの形式を指定したものに変更する (可能な限り。hex, hex3等)
        localStorageKey: "spectrum.demo", // localStorageに選択色を記憶する際のキー
        palette: [ // パレット
            ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", 
            "rgb(204, 204, 204)", "rgb(217, 217, 217)", "rgb(255, 255, 255)"],
            ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)",
            "rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"],
            ["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)",
            "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)",
            "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)",
            "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)",
            "rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)",
            "rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)",
            "rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)",
            "rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)",
            "rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)",
            "rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 18, 77)", "rgb(76, 17, 48)"]
        ],
        selectionPalette: [], // 選択色のパレットの初期値

        // 値の変更(確定)時イベント
        change: function(color){
			$('[name="s"]').val(['picker']);
        }
    });

    $("#picker-p").spectrum({
        color: "#fff", // 初期値
        flat: false, // trueの場合、クリックしなくてもピッカーが表示されるようにする
        showInput: true, // コードの入力欄を表示する
        disabled: false, // trueの場合、ピッカーを無効にする
        showPalette: true, // パレットを表示する
        showPaletteOnly: false, // true の場合、パレットのみの表示にする
        togglePaletteOnly: false, // true の場合、パレット以外の部分はボタンで表示切替する
        togglePaletteMoreText: "詳細", // togglePaletteOnlyがtrueの場合のボタン名(開く)
        togglePaletteLessText: "閉じる", // togglePaletteOnlyがtrueの場合のボタン名(閉じる)
        showSelectionPalette: true, // ユーザーが前に選択した色をパレットに表示する
        maxSelectionSize: 10, // 選択した色を記憶する数の上限
        hideAfterPaletteSelect: false, // true の場合、パレットを選んだ時点でピッカーを閉じる
        clickoutFiresChange: true, // ピッカーの外側をクリックしてピッカーを閉じた際にchangeイベントを発生させる
        showInitial: true, // 初期の色と選択した色を見比べるエリアを表示する
        allowEmpty: true, // 「指定なし」を許可する
        chooseText: "OK", // 選択ボタンのテキスト
        cancelText: "キャンセル", // キャンセルボタンのテキスト
        showButtons: true, // ボタンを表示する
        containerClassName: "full-spectrum", // ピッカーの部品を囲うタグ(要素)のクラス名
        replacerClassName: "", // ピッカーを表示させるボタンのクラス名
        preferredFormat: "hex", // カラーコードの形式を指定したものに変更する (可能な限り。hex, hex3等)
        localStorageKey: "spectrum.demo", // localStorageに選択色を記憶する際のキー
        palette: [ // パレット
            ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", 
            "rgb(204, 204, 204)", "rgb(217, 217, 217)", "rgb(255, 255, 255)"],
            ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)",
            "rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"],
            ["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)",
            "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)",
            "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)",
            "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)",
            "rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)",
            "rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)",
            "rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)",
            "rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)",
            "rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)",
            "rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 18, 77)", "rgb(76, 17, 48)"]
        ],
        selectionPalette: [], // 選択色のパレットの初期値

        // 値の変更(確定)時イベント
        change: function(color){
			$('[name="paper"]').val(['picker']);
        }
    });

	// 警告
	$('#mybg').on("change", function() {
    	var file = this.files[0];
        if(file != null) {
		    $("#caution").css("display", "block");
        }
 		GetColor();
    });

  $('#cancel').click(function() { 
		$('#mybg').val('');
		$('#TiG input[name="agree"]').checked = false;
	    $("#caution").css("display", "none");
  });

	
    //スルスルっとスクロールでトップへもどる
    var topBtn = $('#page-top');
    topBtn.hide();
    $('#TR').hide();
    //スクロールが500に達したらボタン表示
    $(window).scroll(function () {
        if ($(this).scrollTop() > 500) {
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
    });
    topBtn.click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 500);
        return false;
    });
    //スクロールが100に達したらボタン表示
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $('#TR').fadeIn();
        } else {
            $('#TR').fadeOut();
        }
    });


  $('#openmenu').click(function() { 
    if ($(this).attr('class') == 'selected') {
      // メニュー非表示
      $(this).removeClass('selected').next('ul').slideUp('fast');
      $('#openmenu').text('▼');
    } else {
      // 表示しているメニューを閉じる
      $('#openmenu').removeClass('selected');
      $('ul').hide();
      $('#openmenu').text('▼');

      // メニュー表示
      $(this).addClass('selected').next('ul').slideDown('fast');
      $('#openmenu').text('▲');
    }    
  });
  
  // マウスカーソルがメニュー上/メニュー外
  $('#openmenu,ul').hover(function(){
    over_flg = true;
  }, function(){
    over_flg = false;
  });  
  
    $("#TiG").on('submit',function(){
    	var als = [];
    	if ($('#docs').val() == '') {
    		alert ('本文が入力されていません。');
    		return false;
    	}
    	if($("#trgt").prop('checked')) {
			$("#TiG").attr("target","_blank");
		} else {
			$("#TiG").attr("target","_self");
		}
    });
    
	 $("#TiG").on('reset',function(){
		    $("#caution").css("display", "none");
		    $("#thumb").html("");
    });

    // 「.modal-open」をクリック
    $('.modal-open').click(function(){
        // オーバーレイ用の要素を追加
        $('body').append('<div class="modal-overlay"></div>');
        // オーバーレイをフェードイン
        $('.modal-overlay').fadeIn('slow');

        // モーダルコンテンツのIDを取得
        var modal = '#' + $(this).attr('data-target');
        // モーダルコンテンツの表示位置を設定
        modalResize();
         // モーダルコンテンツフェードイン
        $(modal).fadeIn('slow');

        // 「.modal-overlay」あるいは「.modal-close」をクリック
        $('.modal-overlay, .modal-close').off().click(function(){
            // モーダルコンテンツとオーバーレイをフェードアウト
            $(modal).fadeOut('slow');
            $('.modal-overlay').fadeOut('slow',function(){
                // オーバーレイを削除
                $('.modal-overlay').remove();
            });
        });

        // リサイズしたら表示位置を再取得
        $(window).on('resize', function(){
            modalResize();
        });

        // モーダルコンテンツの表示位置を設定する関数
        function modalResize(){
            // ウィンドウの横幅、高さを取得
            var w = $(window).width();
            var h = $(window).height();

            // モーダルコンテンツの表示位置を取得
            var x = (w - $(modal).outerWidth(true)) / 2;
            var y = (h - $(modal).outerHeight(true)) / 2;

            // モーダルコンテンツの表示位置を設定
            $(modal).css({'left': x + 'px','top': y + 'px'});
        }
    });
	  $('#rst').click(function(){
//	  	if(confirm('ブラウザに保存された下書きも削除しますか？')){
	    	localStorage.removeItem("docs");
//	    }
	  });
	  $('#docdel').click(function(){
	  	if ($('#docdel').val() == '本文クリア') {
	  		if (confirm('本文を削除します。よろしいですか？')) {
		  		$('#docs').val(['']);
		  		$('#docdel').val(['本文復活']);
		  	}
	  	} else {
	  		$('#docs').val(localStorage.getItem("docs"));
	  		$('#docdel').val(['本文クリア']);
	  	}
	  });
	  
	  for (var i = 1; i <= {$bg_count}; i++) {
		if (localStorage.getItem(i) == 'mute') {
			$('#IMG_'+i).prop('src','bg/thum2/mute.png');
		}
	}

});
   var img = new Image();    //画像オブジェクト作成
  img.src = "{$imgurl}";  //写真のパスを指定する
  function ChangeBG(bg) {
 	if (! MyBG){
  		img.src = 'bg/910/' + bg;
	  	img.onload = function(){
	  		draw();
	 		GetColor();
	  	}
	}
  }
</script>
</head>
<body>
{$menu}
<h1>L版SSメーカー</h1>
<!-- #BeginLibraryItem "/Library/news.lbi" --><div id="news">【お知らせ】広告非表示プランを公開しました。[<a href="https://www.pixiv.net/fanbox/creator/31396054" target="_blank">pixivFANBOX</a>] [<a href="https://fantia.jp/fanclubs/13074" target="_blank">Fantia</a>]</div><!-- #EndLibraryItem -->
<div class="wrapper">
<h2 style="color:#8d1d55;margin-bottom:1em;">※「<a href="rule.html" style="z-inded:3;">利用規約と注意事項</a>」に同意のうえでお使いください※<br></h2>
<p style="font-size:80%">名刺サイズ→<a href="index.html" target="_blank">SS名刺</a> ／ 文字数多め→<a href="bunko.html">文庫ページ</a> | <a href="shinsho.html">新書ページ</a></p>
{$ad_top}
<div class="fm">
<form method="post" action="{$basename}" id="TiG" enctype="multipart/form-data">
<fieldset>
<legend id="toptext">テキスト</legend>
<span class="note">※ルビ書式：『　<span style="color:blue">｜漢字《かんじ》</span>　』　圏点書式：『　<span style="color:blue">｜文字列《圏》</span>　』</span>
<h2>本文（必須）<span style="font-weight:normal;color:#333;font-size:1rem;"> <span id="count">現在0字</span></h2>
<textarea name="t1" id="docs"></textarea><br>
<span class="note" style="color:blue;"><span id="info"></span>　</span><input type="button" value="本文クリア" class="del" id="docdel" style="font-size:80%;">
<h2>付記（任意）</h2>
<div style="line-height:200%;">付記１　<input type="text" name="sig"><br>
付記２　<input type="text" name="site"></div>
</fieldset>
<div style="margin:20px 0"><input type="submit" value="　カードを生成する　"> <input type="button" id="random" value="　おまかせデザイン　"></div>
<fieldset>
<legend id="Lay">レイアウト</legend>
<p>（横書き・縦書き、文字サイズは、下のメニューで選択できます）<br>
<span style="color:blue;font-size:80%;">青字で示した文字数は選択中の文字サイズと連動しています。（現在<span id="fsize"></span>pxを選択中）</span></p>
{$design_html}
<div style="clear:both;"></div>
</fieldset>
<fieldset>
<legend id="Ga">画像</legend>
<h2>一覧から選ぶ <span>[<a href="meishi_images.php" target="_blank">画像詳細情報・お気に入り登録</a>] [<a href="mute.php">画像ミュート</a>]</span></h2>
<div style="margin-bottom:0.5em;">
カテゴリ別表示：<select id="categorychange" style="font-size:16px;">
<option value="all">すべて</option>
<option value="new">新着20件</option>
<option value="human">人</option>
<option value="animal">動物</option>
<option value="plant">植物</option>
<option value="sky">空</option>
<option value="nature">自然</option>
<option value="landscape">景観</option>
<option value="architecture">建物</option>
<option value="food">食べ物</option>
<option value="item">アイテム</option>
<option value="abstraction">抽象</option>
<option value="texture">テクスチャ</option>
<option value="illustration">イラスト</option>
<option value="favorite">お気に入り画像</option>
</select>
</div>
<div id="bg">
<section id="bg1">
<section class="img_select bg all">
<label><img src="bg/thum2/nobg.png" width="75" height="75" class="thum" style="border:solid 1px #999"><br>
<input type="radio" name="bg" value="nobg.png" id="nobg.png">なし</label>
</section>
<section class="img_select bg all">
<label><img src="bg/thum2/w.jpg" width="75" height="75" class="thum" style="border:solid 1px #999"><br>
<input type="radio" name="bg" value="w.jpg" id="w.jpg">白無地</label>
</section>
<section class="img_select bg all">
<label><img src="bg/thum2/b.jpg" width="75" height="75" class="thum" style="border:solid 1px #999"><br>
<input type="radio" name="bg" value="b.jpg" id="b.jpg">黒無地</label>
</section>
HTML;

	$i = 1;
	$tg = 1;
	$last = count($bg);
	//foreachはfor文のように繰り返す命令
	foreach($bg as $k => $v){ 
		if ($i == 1) {
			$checked = ' checked';
		} else {
			$checked = '';
		}
		$tg_num = $tg;
		if ($ID[$k] > ($last - 20)) {
			$category[$k] = $category[$k] . ' ' . 'new';
		}
		echo <<< HTML
<section class="img_select bg {$category[$k]} all" id="SECT_{$ID[$k]}">
<label for="{$k}"><img src="bg/thum2/{$k}" width="75" height="75" class="thum" style="border:solid 1px #999" id="IMG_{$ID[$k]}"></label><br>
<label><input type="radio" name="bg" value="{$k}" id="{$k}"{$checked}>{$v}</label>
</section>
HTML;
		if ((($i+1) % 18 == 0 ) && (count($bg) > $i+1)) {
			echo <<< HTML
<div style="clear:both" id="tg{$tg_num}" class="more"><span style="text-decoration:underline;color:#c00;cursor:pointer;"> >>>もっと画像を表示</span></div>
</section>
HTML;
			$tg++;
			$tg_num = $tg;
			echo <<< HTML
<section id="bg{$tg_num}">
HTML;
		}
		if (count($bg) == $i) {
			echo <<< HTML
<div style="clear:both;text-align:right;" id="tgall"><span style="text-decoration:underline;color:#c00;cursor:pointer;">画像を閉じる▲</span></div>
HTML;
		}
		$bg_val .= "bgs['" . $k . "'] = '" . $v  ."';\n";
		$i++;
	}

	echo <<< HTML
</section>
<div style="clear:both" id="tgallopen"><span style="text-decoration:underline;color:#c00;cursor:pointer;">▼全画像を開く▼</span></div>
<h2 style="clear:both;">オリジナル画像を使う</h2>
<div id="caution"><strong>アップロードする画像は、あなた自身が撮影・作成した画像か、使用の許可を得ている画像ですか？<br>
<label style="color:red;weight:bold;" class="wrap"><input type="checkbox" name="agree" value="1">はい、この画像は私が使っていい画像です。</label></strong><br>
<span class="note" style="color:#000;">※画像の権利にご注意ください。許可なく保存した画像、他人の姿や商標など、あなたが自由に使っていいものでない画像を権利者の許諾なく使用しないでください。</span>
<h3>画像のクレジット（任意）</h3>
<input type="text" name="author" placeholder="例）イラスト・山田太郎" style="width:80%;">
</div>
<input type="file" name="mybg" id="mybg" accept="image/*" style="width:80%;">
<div id="thumb"></div>
<script>
var bgs ={};
{$bg_val}
var MyBG;
// File APIに対応しているか確認
if(window.File) {
    var thumb = document.getElementById('thumb');
    var select = document.getElementById('mybg');
    var OrImg;
 
    // ファイルが選択されたとき
    select.addEventListener('change', function(e) {
        // 選択されたファイルの情報を取得
        var fileData = e.target.files[0];
        var imgType = fileData.type;
 
        // 選択されたファイルが画像かどうか確認
        if(!imgType.match(/^image/)) {
            alert('画像を選択してください');
            select.value = '';
            thumb.innerHTML = 'ここにサムネイルを表示します。';
            return;
        }
 
        var reader = new FileReader();
        // ファイル読み取りに失敗したとき
        reader.onerror = function() {
            alert('ファイル読み取りに失敗しました')
            thumb.innerHTML = '';
        }
        // ファイル読み取りに成功したとき
        reader.onload = function() {
            var insert = '<img src="' + reader.result + '" width="300">';
            thumb.innerHTML = insert;
  			img.src = reader.result;  //写真のパスを指定する
		  	img.onload = img.onload = function(){
		  		draw();
		 		GetColor();
		  	}
        }
        // ファイル読み取りを実行
        reader.readAsDataURL(fileData);
        MyBG = 1;
    }, false);
}
</script>
<h2>画像効果</h2>
<label><input type="radio" name="filter" value="" checked>効果をつけない</label><br>
<label><input type="radio" name="filter" value="GRAYSCALE">グレースケール</label>
<label><input type="radio" name="filter" value="SEPIA">セピア調</label>
<label><input type="radio" name="filter" value="NEGATE">ネガポジ反転</label>
<label><input type="radio" name="filter" value="BLUR">ぼかし</label>
<label><input type="radio" name="filter" value="MEAN_REMOVAL">スケッチ風</label>
<h2>画像の濃さ</h2>
<input id="bgalpha" name="bgalpha" type="range" value="1" min="0.05" max="1" step="0.05" style="width:400px;max-width:75vw">
<span id="rg1">100</span>%
<script>
  var elem = document.getElementById('bgalpha');
  var target = document.getElementById('rg1');
  var rangeValue = function (elem, target) {
    return function(evt){
      target.innerHTML = Math.floor(elem.value * 100,1);
    }
  }
  elem.addEventListener('input', rangeValue(elem, target));
</script>
<h2>画像オプション</h2>
<label><input type="radio" name="bgscale" value="0" checked>枠にあわせてトリミング</label>
<label><input type="radio" name="bgscale" value="1">画像全体を表示</label>
<h2>画像の配置</h2>
横位置：<label><input type="radio" name="bgalign" value="center" checked>中央合わせ</label>
<label><input type="radio" name="bgalign" value="left">左辺合わせ</label>
<label><input type="radio" name="bgalign" value="right">右辺合わせ</label><br>
縦位置：<label><input type="radio" name="bgvalign" value="middle" checked>中央合わせ</label>
<label><input type="radio" name="bgvalign" value="top">上辺合わせ</label>
<label><input type="radio" name="bgvalign" value="bottom">下辺合わせ</label><br>
<div id="SimOpen">
<h2 style="cursor:pointer;">配置シミュレート [開く▼]</h2>
</div>
<div id="SimOption">
<h2 style="cursor:pointer;" id="SimClose">配置シミュレート [閉じる▲]</h2>
<div class="sample">
<div class="smp">デザインA<br><canvas id="layer1" width="{$design[1]['sizeW']}" height="{$design[1]['sizeH']}"></canvas></div>
<div class="smp">デザインB<br><canvas id="layer2" width="{$design[2]['sizeW']}" height="{$design[2]['sizeH']}"></canvas></div>
<div class="smp">デザインC<br><canvas id="layer3" width="{$design[3]['sizeW']}" height="{$design[3]['sizeH']}"></canvas></div>
<div class="smp">デザインD<br><canvas id="layer6" width="{$design[6]['sizeW']}" height="{$design[6]['sizeH']}"></canvas></div>
<div class="smp">デザインE<br><canvas id="layer9" width="{$design[9]['sizeW']}" height="{$design[9]['sizeH']}"></canvas></div>
<div class="smp">デザインF<br><canvas id="layer4" width="{$design[4]['sizeW']}" height="{$design[4]['sizeH']}"></canvas></div>
<div class="smp">デザインG<br><canvas id="layer5" width="{$design[5]['sizeW']}" height="{$design[5]['sizeH']}"></canvas></div>
<div class="smp">デザインH<br><canvas id="layer7" width="{$design[7]['sizeW']}" height="{$design[7]['sizeH']}"></canvas></div>
<div class="smp">デザインI<br><canvas id="layer8" width="{$design[8]['sizeW']}" height="{$design[8]['sizeH']}"></canvas></div>
<div class="smp">デザインJ<br><canvas id="layer11" width="{$design[11]['sizeW']}" height="{$design[11]['sizeH']}"></canvas></div>
<div class="smp">デザインL<br><canvas id="layer12" width="{$design[12]['sizeW']}" height="{$design[12]['sizeH']}"></canvas></div>
<div class="smp">デザインK<br><canvas id="layer10" width="{$design[10]['sizeW']}" height="{$design[10]['sizeH']}"></canvas></div>
<div class="smp">デザインM<br><canvas id="layer13" width="{$design[13]['sizeW']}" height="{$design[13]['sizeH']}"></canvas></div>
<div class="smp">デザインN<br><canvas id="layer14" width="{$design[14]['sizeW']}" height="{$design[14]['sizeH']}"></canvas></div>
</div>
<script> 
{$sample_script}
</script>
</div>
</fieldset>
<fieldset>
<legend id="Kami">紙色</legend>
<label><input type="radio" name="paper" value="#ffffff" checked><span style="color:#FFFFFf;background-color:#333;">■白</span></label>
<label><input type="radio" name="paper" value="#FCFAF2"><span style="color:#FCFAF2;background-color:#333;">■白練</span></label>
<label><input type="radio" name="paper" value="#ebf6f7"><span style="color:#ebf6f7;background-color:#333;">■藍白</span></label>
<label><input type="radio" name="paper" value="#fef4f4"><span style="color:#fef4f4;background-color:#333;">■桜</span></label>
<label><input type="radio" name="paper" value="#DAC9A6"><span style="color:#DAC9A6;background-color:#333;">■鳥の子</span></label>
<label><input type="radio" name="paper" value="#FFEC47"><span style="color:#FFEC47;background-color:#333;">■菜の花</span></label>
<label><input type="radio" name="paper" value="#D7C4BB"><span style="color:#D7C4BB">■灰桜</span></label>
<label><input type="radio" name="paper" value="#bed2c3"><span style="color:#bed2c3">■青磁鼠</span></label>
<label><input type="radio" name="paper" value="#C73E3A"><span style="color:#C73E3A">■銀朱</span></label>
<label><input type="radio" name="paper" value="#8E354A"><span style="color:#8E354A">■蘇芳</span></label>
<label><input type="radio" name="paper" value="#838A2D"><span style="color:#838A2D">■苔</span></label>
<label><input type="radio" name="paper" value="#006284"><span style="color:#006284">■縹</span></label>
<label><input type="radio" name="paper" value="#7DB9DE"><span style="color:#7DB9DE">■勿忘草</span></label>
<label><input type="radio" name="paper" value="#0F2540"><span style="color:#0F2540">■紺</span></label>
<label><input type="radio" name="paper" value="#0C0C0C"><span style="color:#0C0C0C">■呂</span></label>
<label><input type="radio" name="paper" value="#000000"><span style="color:#000000">■黒</span></label>
<br>[抽出色] <span id="get_paper"></span><br>
<label><input type="radio" name="paper" value="picker">カラーピッカーで指定：<span class="picker"><br /></span><input type="text" id="picker-p" name="picker-p"></label>
</fieldset>
<fieldset>
<legend id="Conf">本文テキストの設定</legend>
<h2>文章の方向</h2>
<label><input type="radio" name="wrimode" value='Tate' checked>縦書き（中央配置）</label> 
<label><input type="radio" name="wrimode" value='TateR'>縦書き（右上基点）</label> 
<label><input type="radio" name="wrimode" value='Yoko'>横書き</label> 
<h2>本文の書体<span> [<a data-target="modal1" class="modal-open">書体サンプル</a>]</span></h2>
<label><input type="radio" name="f" value='0' checked>アプリ明朝</label> 
<label><input type="radio" name="f" value='7'>しっぽり明朝</label> 
<label><input type="radio" name="f" value='11'>はれのそら明朝</label> 
<label><input type="radio" name="f" value='2'>むつき現代明朝</label> 
<label><input type="radio" name="f" value='16'>源暎こぶり明朝</label> 
<label><input type="radio" name="f" value='9'>源ノ明朝Bold</label> 
<label><input type="radio" name="f" value='15'>Oradano明朝</label> 
<label><input type="radio" name="f" value='5'>源ノ角ゴシックThin</label> 
<label><input type="radio" name="f" value='8'>源ノ角ゴシックBlack</label> 
<label><input type="radio" name="f" value='4'>M+2p Regular</label> 
<label><input type="radio" name="f" value='3'>源暎ラテゴ</label> 
<label><input type="radio" name="f" value='17'>しっぽりアンチック</label> 
<label><input type="radio" name="f" value='13'>いろは角クラシックLight</label> 
<label><input type="radio" name="f" value='14'>いろはマルRegular</label>
<label><input type="radio" name="f" value='18'>アームドレモン</label>
<label><input type="radio" name="f" value='19'>アームドバナナ</label>
<label><input type="radio" name="f" value='20'>タイムマシンわ号</label>
<label><input type="radio" name="f" value='21'>851手書き雑</label>
<label><input type="radio" name="f" value='22'>あずきフォント</label>
<br>
<label style="white-space: normal"><input type="radio" name="f" value='no' id="deffont"><span style="font-family:'Hiragino Mincho ProN','Hiragino Mincho Pro','Yu Mincho','YuMincho','MS Mincho', serif;font-size:1em;color:#000">機器の標準フォント</span>を使用<span class="note">（明朝体優先／軽量化／文字化け対策）</span></label>
<h2>書体のオプション</h2>
<label style="white-space: normal"><input type="checkbox" name="eisu" value="1" id="eisu" disabled><span id="eisu_span" style="color:#999;">半角を全角に変換しない<span class="note">（横書きのみ／文字数行数カウントと一致しません）</span></span></label>
<h2>本文の文字色</h2>
<label><input type="radio" name="c" value="#000000" checked><span style="color:#000">■黒</span></label> 
<label><input type="radio" name="c" value="#BDC0BA"><span style="color:#BDC0BA;background-color:#333">■白鼠</span></label>
<label><input type="radio" name="c" value="#ffffff"><span style="color:#fff;background-color:#333">■白</span></label> 
<label><input type="radio" name="c" value="#D7C4BB"><span style="color:#D7C4BB;">■灰桜</span></label>
<label><input type="radio" name="c" value="#64363C"><span style="color:#64363C">■桑染</span></label>
<label><input type="radio" name="c" value="#8E354A"><span style="color:#8E354A">■蘇芳</span></label>
<label><input type="radio" name="c" value="#AB3B3A"><span style="color:#AB3B3A">■真朱</span></label>
<label><input type="radio" name="c" value="#C73E3A"><span style="color:#C73E3A">■銀朱</span></label>
<label><input type="radio" name="c" value="#D0104C"><span style="color:#D0104C">■韓花紅</span></label>
<label><input type="radio" name="c" value="#FFB11B"><span style="color:#FFB11B">■山吹</span></label>
<label><input type="radio" name="c" value="#838A2D"><span style="color:#838A2D">■苔</span></label>
<label><input type="radio" name="c" value="#1B813E"><span style="color:#1B813E">■常磐</span></label>
<label><input type="radio" name="c" value="#62592C"><span style="color:#62592C">■海松茶</span></label>
<label><input type="radio" name="c" value="#36563C"><span style="color:#36563C">■千歳緑</span></label>
<label><input type="radio" name="c" value="#2B5F75"><span style="color:#2B5F75">■熨斗目花</span></label>
<label><input type="radio" name="c" value="#113285"><span style="color:#113285">■紺青</span></label>
<label><input type="radio" name="c" value="#0F2540"><span style="color:#0F2540">■紺</span></label>
<label><input type="radio" name="c" value="#4A225D"><span style="color:#4A225D">■深紫</span></label>
<br>
[抽出色] <span id="get_c"></span><br>
<label><input type="radio" name="c" value="picker">カラーピッカーで指定：<span class="picker"><br /></span><input type="text" id="picker-c" name="picker-c"></label>
<h2>文字サイズ</h2>
<label><input type="radio" name="fontsize" value='24'>24px</label> 
<label><input type="radio" name="fontsize" value='27'>27px</label> 
<label><input type="radio" name="fontsize" value='30'>30px</label> 
<label><input type="radio" name="fontsize" value='33'>33px</label> 
<label><input type="radio" name="fontsize" value='36' checked>36px</label> 
<label><input type="radio" name="fontsize" value='39'>39px</label> 
<label><input type="radio" name="fontsize" value='42'>42px</label> 
<label><input type="radio" name="fontsize" value='45'>45px</label> 
<label><input type="radio" name="fontsize" value='48'>48px</label> 
<label><input type="radio" name="fontsize" value='51'>51px</label><br>
<label><input type="radio" name="fontsize" value="free">数値を指定する：<input type="number" name="fontsize_free" min="18" max="120" step="3" style="width: 4em;">px</label><br>
<label><input type="checkbox" name="dropcap" value="1">ドロップキャップ（一字目倍角）</label>
<h2>行間</h2>
<label><input type="radio" name="lineheight" value='1.3'>狭い</label> 
<label><input type="radio" name="lineheight" value='1.5' checked>通常</label> 
<label><input type="radio" name="lineheight" value='1.7'>広い</label> 
<h2>文字にふちどり</h2>
<label><input type="radio" name="fuchi" value="" checked>つけない</label>
<label><input type="radio" name="fuchi" value="#ffffff"><span style="color:#FFFFFf;background-color:#333;">■白</span></label>
<label><input type="radio" name="fuchi" value="#FBE251"><span style="color:#FBE251;background-color:#333;">■黄蘗</span></label>
<label><input type="radio" name="fuchi" value="#D7C4BB"><span style="color:#D7C4BB">■灰桜</span></label>
<label><input type="radio" name="fuchi" value="#bed2c3"><span style="color:#bed2c3">■青磁鼠</span></label>
<label><input type="radio" name="fuchi" value="#C73E3A"><span style="color:#C73E3A">■銀朱</span></label>
<label><input type="radio" name="fuchi" value="#006284"><span style="color:#006284">■縹</span></label>
<label><input type="radio" name="fuchi" value="#0C0C0C"><span style="color:#0C0C0C">■呂</span></label><br>
[抽出色] <span id="get_fuchi"></span>
<label><input type="checkbox" name="shadow" value="1">ぼかしシャドウにする</label>
<h2>文字にマーカー</h2>
<label><input type="radio" name="marker" value="" checked>つけない</label>
<label><input type="radio" name="marker" value="#ffffff"><span style="color:#FFFFFf;background-color:#333;">■白</span></label>
<label><input type="radio" name="marker" value="#FBE251"><span style="color:#FBE251;background-color:#333;">■黄蘗</span></label>
<label><input type="radio" name="marker" value="#D7C4BB"><span style="color:#D7C4BB">■灰桜</span></label>
<label><input type="radio" name="marker" value="#bed2c3"><span style="color:#bed2c3">■青磁鼠</span></label>
<label><input type="radio" name="marker" value="#C73E3A"><span style="color:#C73E3A">■銀朱</span></label>
<label><input type="radio" name="marker" value="#006284"><span style="color:#006284">■縹</span></label>
<label><input type="radio" name="marker" value="#0C0C0C"><span style="color:#0C0C0C">■呂</span></label><br>
[抽出色] <span id="get_marker"></span><br>
<label><input type="checkbox" name="markeralpha" value="1">半透明のマーカー</label>
</fieldset>
<fieldset id="SubOpen">
<legend style="cursor:pointer;">付記の設定 [開く▼]</legend>
</fieldset>
<fieldset id="SubOption">
<legend style="cursor:pointer;" id="SubClose">付記の設定 [閉じる▲]</legend>
<h2>付記の文字色</h2>
<label><input type="radio" name="s" value="same" checked><span style="color:#000">本文と同じ</span></label><br>
<label><input type="radio" name="s" value="#000000"><span style="color:#000">■黒</span></label> 
<label><input type="radio" name="s" value="#BDC0BA"><span style="color:#BDC0BA;background-color:#333">■白鼠</span></label>
<label><input type="radio" name="s" value="#ffffff"><span style="color:#fff;background-color:#333">■白</span></label> 
<label><input type="radio" name="s" value="#D7C4BB"><span style="color:#D7C4BB;">■灰桜</span></label>
<label><input type="radio" name="s" value="#64363C"><span style="color:#64363C">■桑染</span></label>
<label><input type="radio" name="s" value="#8E354A"><span style="color:#8E354A">■蘇芳</span></label>
<label><input type="radio" name="s" value="#AB3B3A"><span style="color:#AB3B3A">■真朱</span></label>
<label><input type="radio" name="s" value="#C73E3A"><span style="color:#C73E3A">■銀朱</span></label>
<label><input type="radio" name="s" value="#D0104C"><span style="color:#D0104C">■韓花紅</span></label>
<label><input type="radio" name="s" value="#FFB11B"><span style="color:#FFB11B">■山吹</span></label>
<label><input type="radio" name="s" value="#838A2D"><span style="color:#838A2D">■苔</span></label>
<label><input type="radio" name="s" value="#1B813E"><span style="color:#1B813E">■常磐</span></label>
<label><input type="radio" name="s" value="#62592C"><span style="color:#62592C">■海松茶</span></label>
<label><input type="radio" name="s" value="#36563C"><span style="color:#36563C">■千歳緑</span></label>
<label><input type="radio" name="s" value="#2B5F75"><span style="color:#2B5F75">■熨斗目花</span></label>
<label><input type="radio" name="s" value="#113285"><span style="color:#113285">■紺青</span></label>
<label><input type="radio" name="s" value="#0F2540"><span style="color:#0F2540">■紺</span></label>
<label><input type="radio" name="s" value="#4A225D"><span style="color:#4A225D">■深紫</span></label>
<br>[抽出色] <span id="get_s"></span>
<br><label><input type="radio" name="s" value="picker">カラーピッカーで指定：<span class="picker"><br /></span><input type="text" id="picker-s" name="picker-s"></label>
<h2>付記の書体</h2>
<label><input type="radio" name="f2" value='same' checked>本文と同じ</label><br>
<label><input type="radio" name="f2" value='0'>アプリ明朝</label> 
<label><input type="radio" name="f2" value='7'>しっぽり明朝</label> 
<label><input type="radio" name="f2" value='11'>はれのそら明朝</label> 
<label><input type="radio" name="f2" value='2'>むつき現代明朝</label> 
<label><input type="radio" name="f2" value='16'>源暎こぶり明朝</label> 
<label><input type="radio" name="f2" value='9'>源ノ明朝Bold</label> 
<label><input type="radio" name="f2" value='15'>Oradano明朝</label> 
<label><input type="radio" name="f2" value='5'>源ノ角ゴシックThin</label> 
<label><input type="radio" name="f2" value='8'>源ノ角ゴシックBlack</label> 
<label><input type="radio" name="f2" value='4'>M+2p Regular</label> 
<label><input type="radio" name="f2" value='3'>源暎ラテゴ</label> 
<label><input type="radio" name="f2" value='17'>しっぽりアンチック</label> 
<label><input type="radio" name="f2" value='13'>いろは角クラシックLight</label>
<label><input type="radio" name="f2" value='14'>いろはマルRegular</label>
<label><input type="radio" name="f2" value='18'>アームドレモン</label>
<label><input type="radio" name="f2" value='19'>アームドバナナ</label>
<label><input type="radio" name="f2" value='20'>タイムマシンわ号</label>
<label><input type="radio" name="f2" value='21'>851手書き雑</label>
<label><input type="radio" name="f2" value='22'>あずきフォント</label>
<br>
<h2>付記の文字サイズ</h2>
<label><input type="radio" name="fontsize2" value='auto' checked>自動調整</label> 
<label><input type="radio" name="fontsize2" value='21'>21px</label> 
<label><input type="radio" name="fontsize2" value='24'>24px</label> 
<label><input type="radio" name="fontsize2" value='27'>27px</label> 
<label><input type="radio" name="fontsize2" value='30'>30px</label> 
<label><input type="radio" name="fontsize2" value='33'>33px</label> 
<label><input type="radio" name="fontsize2" value='36'>36px</label> 
<label><input type="radio" name="fontsize2" value='39'>39px</label> 
<label><input type="radio" name="fontsize2" value='42'>42px</label> 
<label><input type="radio" name="fontsize2" value='45'>45px</label><br>
<label><input type="radio" name="fontsize2" value="free">数値を指定する</label>：<input type="number" name="fontsize2_free" min="18" max="180" step="3" style="width: 4em;">px<br>
<h2>文字にふちどり</h2>
<label><input type="radio" name="fuchi2" value="" checked>つけない</label>
<label><input type="radio" name="fuchi2" value="#ffffff"><span style="color:#FFFFFf;background-color:#333;">■白</span></label>
<label><input type="radio" name="fuchi2" value="#FBE251"><span style="color:#FBE251;background-color:#333;">■黄蘗</span></label>
<label><input type="radio" name="fuchi2" value="#D7C4BB"><span style="color:#D7C4BB">■灰桜</span></label>
<label><input type="radio" name="fuchi2" value="#bed2c3"><span style="color:#bed2c3">■青磁鼠</span></label>
<label><input type="radio" name="fuchi2" value="#C73E3A"><span style="color:#C73E3A">■銀朱</span></label>
<label><input type="radio" name="fuchi2" value="#006284"><span style="color:#006284">■縹</span></label>
<label><input type="radio" name="fuchi2" value="#0C0C0C"><span style="color:#0C0C0C">■呂</span></label><br>
[抽出色] <span id="get_fuchi2"></span>
<h2>付記の文字にマーカー</h2>
<label><input type="radio" name="marker2" value="" checked>つけない</label>
<label><input type="radio" name="marker2" value="#ffffff"><span style="color:#FFFFFf;background-color:#333;">■白</span></label>
<label><input type="radio" name="marker2" value="#FBE251"><span style="color:#FBE251;background-color:#333;">■黄蘗</span></label>
<label><input type="radio" name="marker2" value="#D7C4BB"><span style="color:#D7C4BB">■灰桜</span></label>
<label><input type="radio" name="marker2" value="#bed2c3"><span style="color:#bed2c3">■青磁鼠</span></label>
<label><input type="radio" name="marker2" value="#C73E3A"><span style="color:#C73E3A">■銀朱</span></label>
<label><input type="radio" name="marker2" value="#006284"><span style="color:#006284">■縹</span></label>
<label><input type="radio" name="marker2" value="#0C0C0C"><span style="color:#0C0C0C">■呂</span></label><br>
[抽出色] <span id="get_marker2"></span><br>
<label><input type="checkbox" name="marker2alpha" value="1">半透明のマーカー</label>
</fieldset>
<fieldset>
<legend>その他の設定</legend>
<label><input type="checkbox" name="waku" value="1">枠線をつける</label>
<label><input type="checkbox" id="trgt" name="trgt">別画面に生成する</label>
<label style="white-space: normal"><input type="checkbox" name="joyo" value="1">フォントデータを軽量化<span class="note">（常用外漢字にフォントが適用されません）</span></label><br>
</fieldset>
<div style="margin-top:20px"><input type="submit" value="　カードを生成する　"><input type="reset" id="rst" value="リセット" class="del" style="cursor:pointer;">
<br><span class="note">※「生成」ボタンはどれを押しても同じはたらきです</span>
</div>
<div id="TR">
<input type="submit" value="生成"><br>
<div id="menu"><div><span id="openmenu">▼</span><ul><li><a href="#toptext">本文</a></li><li><a href="#Lay">レイ<br>アウト</a></li><li><a href="#Kami">紙</a></li><li><a href="#Ga">画像</a></li><li><a href="#Conf">設定</a></li></ul></div></div>
<div id="page-top"><a href="#wrap">▲</a></div>
</div>
</div>
</form>
<!--Modal contents-->
<div id="modal1" class="modal-content">
<img src="img/fonts0528.png">
 <a class="modal-close">×</a>
</div>
HTML;
	}

?>
<div style="margin:20px 0;">
<div id="adview"><span style="font-size:90%;color:#999;">【スポンサーリンク】</span><br>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 336_280_レクタングル大 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-1080129079031897"
     data-ad-slot="1491300538"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<span class="ad"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 336_280_レクタングル大 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-1080129079031897"
     data-ad-slot="1491300538"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></span></div>

</div>
</div>
<footer>
	<div class="menu"><a href="index.html">SS名刺メーカー</a> | <a href="ordermade.html">オーダーメイド版</a> | <a href="rule.html">利用規約と注意事項</a> | <a href="images.html">画像使用について</a> | <a href="faq.html">よくあるご質問</a> | <a href="contact.html">お問い合わせ</a></div>
	<address>
		- <a href="index.html">SS名刺メーカー</a> -
	</address>
</footer>
<div class="ninja_onebutton">
<script type="text/javascript">
//<![CDATA[
(function(d){
if(typeof(window.NINJA_CO_JP_ONETAG_BUTTON_8a2a6121e34fc91769262346c51efc40)=='undefined'){
    document.write("<sc"+"ript type='text\/javascript' src='\/\/omt.shinobi.jp\/b\/8a2a6121e34fc91769262346c51efc40'><\/sc"+"ript>");
}else{
    window.NINJA_CO_JP_ONETAG_BUTTON_8a2a6121e34fc91769262346c51efc40.ONETAGButton_Load();}
})(document);
//]]>
</script><span class="ninja_onebutton_hidden" style="display:none;"></span><span style="display:none;" class="ninja_onebutton_hidden"></span>
</div>
</body>
</html>