PageSourceSearch

https://nyanimon.com/

html nyanimon.com collected 2026-10-07 10:55:02 UTC 39,856 bytes, 501 lines download raw bytes

1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
7    <title>ネコ名刺の無料作成サービス ニャにもん-nyanimon-</title>
8    <meta name="description" content="ネコ名刺の無料作成サービス ニャにもん-nyanimon-">
9    <meta name="keywords" content="ネコ,名刺,無料作成サービス,ニャにもん,nyanimon">
10    <meta property="og:type" content="website" />
11    <meta property="og:title" content="ネコ名刺の無料作成サービス ニャにもん-nyanimon-" />
12    <meta property="og:site_name" content="ネコ名刺の無料作成サービス ニャにもん-nyanimon-" />
13    <meta property="og:description" content="ネコの写真のアップロード&カンタンな文字情報の入力で、サッとお手がるに愛猫の名刺を自動生成できるサービスです。" />
14    <meta property="og:url" content="https://nyanimon.com" />
15    <meta property="og:locale" content="ja_JP" />
16
17    <link rel="preload" href="/images/img_loading.png" as="image">
18    
19    
20    <link href="https://fonts.googleapis.com/css?family=Kosugi+Maru|M+PLUS+Rounded+1c|Noto+Sans+JP|Noto+Serif+SC|Sawarabi+Gothic|Sawarabi+Mincho" rel="stylesheet">
21
22    <link rel="stylesheet" href="https://nyanimon.com/css/index.css">
23    <link rel="stylesheet" type="text/css" href="https://nyanimon.com/css/slick.css"/>
24    <link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css">
25    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/cropper/4.0.0/cropper.css">
26    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
27    <link href="css/evol-colorpicker.css" rel="stylesheet" type="text/css">
28    <link rel="stylesheet" href="https://nyanimon.com/css/slick-custom.css?20210224112011">
29    <link rel="stylesheet" href="https://nyanimon.com/css/custom.css?20190212105948">
30    <link rel="stylesheet" href="https://nyanimon.com/css/loader.css?20211201174111">
31    <link rel="stylesheet" href="https://nyanimon.com/css/swiper.css?20191016163139">
32    
33    
34    
35    
36    
37    
38
39
40
41    
41<script src="https://code.createjs.com/easeljs-0.7.1.min.js"></script>
41
42    
42<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
42
43    
43<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
43
44    
44<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
44
45    
45<script src="js/evol-colorpicker.min.js" type="text/javascript" charset="utf-8"></script>
45
46    
46<script src="https://nyanimon.com/js/exif.js" type="text/javascript" charset="utf-8"></script>
46
47    
47<script src="https://cdnjs.cloudflare.com/ajax/libs/cropper/4.0.0/cropper.js" type="text/javascript" charset="utf-8"></script>
47
48    
48<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
48
49    
49<script type="text/javascript" src="https://nyanimon.com/js/slick.min.js"></script>
49
50    
50<script type="text/javascript" src="https://nyanimon.com/js/swiper.min.js"></script>
50
51    
51<script src="https://nyanimon.com/js/common.js?20191016165203"></script>
51
52    
52<script src="https://nyanimon.com/js/function.js?20201020110819"></script>
52
53
54    
54<script type="text/javascript">
55        $(document).ready(function() {
56            $("#color").colorpicker();
57        });
58
59        $(function () {
60            $('#direction').click(function () {
61                var parent = $(this).parent();
62                parent.toggleClass('isVertical isHorizontal');
63                $(this).val(parent.hasClass('isVertical') ? 1 : 2);
64            })
65        });
66    </script>
66
67
68    
69    
69<script type="text/javascript" src="https://nyanimon.com/js/templateConfig.js?20210203170829"></script>
69
70    
70<script type="text/javascript" src="https://nyanimon.com/js/slickConfig.js?20180608163510"></script>
70
71    
71<script type="text/javascript" src="https://nyanimon.com/js/textConfig.js?20190212105948"></script>
71
72
73    <!-- Global site tag (gtag.js) - Google Analytics -->
vendor: 68 bytes, lines 73-74
73
74    <script async src="https://www.googletagmanager.com/gtag/js?id=
74UA-119889631-1
vendor: 16 bytes, lines 74-75
74"></script>
75    
75<script>
76        
vendor: 152 bytes, lines 76-80
76window.dataLayer = window.dataLayer || [];
77        function gtag(){dataLayer.push(arguments);}
78        gtag('js', new Date());
79
80        gtag('config', '
80UA-119889631-1
vendor: 8 bytes, lines 80-81
80');
81    
81</script>
81
82</head>
83<body>
84<div id="firstContent">
85    <div class="mainContents">
86        <div class="mainVisual swiper-container">
87            <div class="swiper-wrapper">
88                <p class="swiper-slide"><img src="images/mv01.png" alt=""></p>
89                <p class="swiper-slide"><img src="images/mv02.png" alt=""></p>
90                <p class="swiper-slide"><img src="images/mv03.png" alt=""></p>
91                <p class="swiper-slide"><img src="images/mv04.png" alt=""></p>
92                <p class="swiper-slide"><img src="images/mv05.png" alt=""></p>
93                <p class="swiper-slide"><img src="images/mv06.png" alt=""></p>
94                <p class="swiper-slide"><img src="images/mv07.png" alt=""></p>
95                <p class="swiper-slide"><img src="images/mv08.png" alt=""></p>
96                <p class="swiper-slide"><img src="images/mv09.png" alt=""></p>
97            </div>
98        </div>
99        <div class="header">
100            <div class="header-sns-btns">
101                <p class="mv-btn btn-fb rover-hover"><a href="https://twitter.com/nyanimon0222" target="_blank"><img src="images/ico_tw.png" alt="twitter"></a></p>
102                <p class="mv-btn btn-ig rover-hover"><a href="https://www.instagram.com/nyanimon/" target="_blank"><img src="images/ico_ig.png" alt="instagram"></a></p>
103            </div>
104            <h1 class="title">
105                <img src="images/title.png" alt="ネコ名刺の無料作成サービス ニャにもん-nyanimon- 運営会社:株式会社ねここち" class="on-pc">
106                <img src="images/title_sp.png" alt="ネコ名刺の無料作成サービス ニャにもん-nyanimon- 運営会社:株式会社ねここち" class="on-sp">
107            </h1>
108        </div>
109        <div class="example-area">
110            <!--<nav class="menu">
111                <div class="menu-list">
112                    <p class="btn-menu"><a href=""><img src="images/btn_menu.png" alt="MENU"></a></p>
113                </div>
114            </nav>-->
115            <p class="overview" id="introduction">ネコの写真のアップロード&<br class="on-sp">カンタンな文字情報の入力で、<br class="on-pc">
116                サッとお手がるに<br class="on-sp">愛猫の名刺を自動生成できるサービス<br class="on-sp">『ニャにもん』です。</p>
117            <p class="bnr-general rover-hover"><a href="https://lit.link/nyanimon" target="_blank"><img src="/images/bnr_general.jpg" alt="ねここちサービス総合サイト"></a></p>
118            <p class="bnr-neco-demy"><a href="https://necodemy.stores.jp/" target="_blank"><img src="/images/bnr_neco-demy01.jpg" alt=""></a></p>
119            <div class="other-btns">
120    <p class="btn-shop rover-hover"><a href="https://nyanimon.kawaiishop.jp/" target="_blank"><img src="https://nyanimon.com/images/btn_shop.png" alt="ニャにもんショップ(印刷代行・グッズ・イベントなど)" class="on-pc"><img src="https://nyanimon.com/images/btn_shop_sp.png" alt="ニャにもんショップ(印刷代行・グッズ・イベントなど)" class="on-sp"></a></p>
121    <p class="btn-article disabled"><a href=""><img src="https://nyanimon.com/images/btn_article.png" alt="特集記事紹介" class="on-pc"><img src="https://nyanimon.com/images/btn_article_sp.png" alt="特集記事紹介" class="on-sp"></a></p>
122    <p class="btn-introduce disabled"><a href=""><img src="https://nyanimon.com/images/btn_introduce.png" alt="看板ネコ紹介" class="on-pc"><img src="https://nyanimon.com/images/btn_introduce_sp.png" alt="看板ネコ紹介" class="on-sp"></a></p>
123</div>
124            <h2 class="header-example" id="example"><img src="images/header_example.png" alt="例えばこんな楽しみ方" class="on-pc"><img src="images/header_example_sp.png" alt="例えばこんな楽しみ方" class="on-sp"></h2>
125            <div class="example-list">
126                <dl class="example-item">
127                    <dt class="photo"><img src="images/img_example1.jpg" alt=""></dt>
128                    <dd class="title bg-pink">ネコオーナー同士の交流に</dd>
129                </dl>
130                <dl class="example-item">
131                    <dt class="photo"><img src="images/img_example2.jpg" alt=""></dt>
132                    <dd class="title bg-red">SNSでのネコ自慢に</dd>
133                </dl>
134                <dl class="example-item">
135                    <dt class="photo"><img src="images/img_example3.jpg" alt=""></dt>
136                    <dd class="title bg-red">定期入れに</dd>
137                </dl>
138                <dl class="example-item">
139                    <dt class="photo"><img src="images/img_example4.jpg" alt=""></dt>
140                    <dd class="title bg-pink">スマホケースの中に</dd>
141                </dl>
142                <dl class="example-item">
143                    <dt class="photo"><img src="images/img_example5.jpg" alt=""></dt>
144                    <dd class="title bg-pink">旅行やゴルフなどのネームタグに</dd>
145                </dl>
146                <dl class="example-item">
147                    <dt class="photo"><img src="images/img_example6.jpg" alt=""></dt>
148                    <dd class="title bg-red">コレクションに</dd>
149                </dl>
150            </div>
151        </div>
152        <div class="threeStep-area" id="step">
153            <h3 class="header-3step"><img src="images/head_3step.png" alt="3ステップでカンタン作成"></h3>
154            <div class="step-list">
155                <div class="step-item">
156                    <p class="image"><img src="images/img_step1.png" alt="Step1 名刺のデザインテンプレートを選ぶ 縦型・横型など、お好みのデザインテンプレートをお選びください。テンプレートは随時、増やしていく予定です。" class="on-pc"><img src="images/img_step1_sp.png" alt="Step1 名刺のデザインテンプレートを選ぶ 縦型・横型など、お好みのデザインテンプレートをお選びください。テンプレートは随時、増やしていく予定です。" class="on-sp"></p>
157                    <p class="btn-original rover-hover"><a href="https://www.nyanimon.com/original" target="_blank"><img src="images/btn_original.png" alt="有料のオリジナルデザイン名刺を作成したい方はコチラ" class="on-pc"><img src="images/btn_original_sp.png" alt="有料のオリジナルデザイン名刺を作成したい方はコチラ" class="on-sp"></a></p>
158                </div>
159                <div class="step-item">
160                    <p class="image"><img src="images/img_step2.png" alt="Step2 写真をアップロード 愛猫のお気に入りの写真をアップして、サイズや切りとる位置を調整します。" class="on-pc"><img src="images/img_step2_sp.png" alt="Step2 写真をアップロード 愛猫のお気に入りの写真をアップして、サイズや切りとる位置を調整します。" class="on-sp"></p>
161                </div>
162                <div class="step-item">
163                    <p class="image"><img src="images/img_step3.png" alt="Step3 テキスト情報の登録 愛猫の名前や性別、またその他に紹介したい情報を入力(キャッチコピー/性格/好きなモノ/年齢/品種などなど)。また、名刺裏面に掲載する飼い主情報(名前/住所/TEL/E-mail/趣味/SNSのIDなど)を自由項目で入力します。" class="on-pc"><img src="images/img_step3_sp.png" alt="Step3 テキスト情報の登録 愛猫の名前や性別、またその他に紹介したい情報を入力(キャッチコピー/性格/好きなモノ/年齢/品種などなど)。また、名刺裏面に掲載する飼い主情報(名前/住所/TEL/E-mail/趣味/SNSのIDなど)を自由項目で入力します。" class="on-sp"></p>
164                </div>
165                <p class="img_complete"><img src="images/img_complete.png" alt="完成"></p>
166            </div>
167            <div class="step-detail">
168                <div class="detail-item">
169                    <div class="detail-description">
170                        <p class="header-image sns"><img src="images/head_3step_sns.png" alt="SNSで発信するための画像データを作成"></p>
171                        <p class="notice">※H:1253pixel×W:757pixelのJPEGデータ</p>
172                        <p class="notice">※ニャにもん主催での、ネコオーナー交流イベントの定期開催も<br>8月以降で企画中です。</p>
173                        <p class="description-text">インスタ「#nyanimon」で、ネコ自慢やネコオーナー<br>同士の交流をしましょう!</p>
174                    </div>
175                    <p class="description-image"><img src="images/img_sns.jpg" alt=""></p>
176                </div>
177                <div class="detail-item">
178                    <div class="detail-description">
179                        <p class="header-image pdf"><img src="images/head_3step_pdf.png" alt="印刷用PDFデータを指定メールアドレスに送信"></p>
180                        <p class="description-text">
180インターネット印刷などでオリジナル名刺を<br>作成しましょう!</p>
181                        <p class="notice">※ラクスルを推奨(PDF入稿時に右下の「再処理設定」から<br>「中央から切り抜き」の調節が必要。</p>
182                    </div>
183                    <p class="description-image"><img src="images/img_pdf.jpg" alt=""></p>
184                    <p class="btn-service"><a href="#" target="_blank"><img src="images/btn_service.png" alt="名刺の印刷代行サービス" class="on-pc"><img src="images/btn_service_sp.png" alt="名刺の印刷代行サービス" class="on-sp"></a></p>
185                </div>
186            </div>
187        </div>
188
189        <div class="creation-area">
190            <form action="https://nyanimon.com/form" method="post" id="form">
191                <input type="hidden" name="_token" value="Kx5vJjtdw7j4c0A5gkWCAMnt3Ks8BE5H5Jw8YL5z">
192                <h4 class="img-now" id="make"><img src="images/img_now.png" alt="さっそく作成" class="on-pc"><img src="images/img_now_sp.png" alt="さっそく作成" class="on-sp"></h4>
193                <h5 class="header-step"  id="makeStep1"><img src="images/head_step1.png" alt="step1 名刺デザインのテンプレートを選択"></h5>
194                <div id="templateSelection">
195                    <div class="stickyWrap">
196                        <div class="stickyArea">
197                            <div class="template-list">
198                                <div class="template-item"><img data-lazy="images/samples/1-1-5.jpg" data-temp="1"></div>
199                                <div class="template-item"><img data-lazy="images/samples/2-2-4.jpg" data-temp="2"></div>
200                                <div class="template-item"><img data-lazy="images/samples/3-2-5.jpg" data-temp="3"></div>
201                                <div class="template-item"><img data-lazy="images/samples/4-1-1.jpg" data-temp="4"></div>
202                                <div class="template-item"><img data-lazy="images/samples/5-1-4.jpg" data-temp="5"></div>
203                                <div class="template-item"><img data-lazy="images/samples/6-2-3.jpg" data-temp="6"></div>
204                                <div class="template-item"><img data-lazy="images/samples/7-2-1.jpg" data-temp="7"></div>
205                                <div class="template-item"><img data-lazy="images/samples/8-1-4.jpg" data-temp="8"></div>
206                                <div class="template-item"><img data-lazy="images/samples/9-2-4.jpg" data-temp="9"></div>
207                                <div class="template-item"><img data-lazy="images/samples/10-1-4.jpg" data-temp="10"></div>
208                                <div class="template-item"><img data-lazy="images/samples/11-2-1.jpg" data-temp="11"></div>
209                                <div class="template-item"><img data-lazy="images/samples/12-1-3.jpg" data-temp="12"></div>
210                                <div class="template-item"><img data-lazy="images/samples/13-2-1.jpg" data-temp="13"></div>
211                                <div class="template-item"><img data-lazy="images/samples/14-2-7.jpg" data-temp="14"></div>
212                                <div class="template-item"><img data-lazy="images/samples/15-1-2.jpg" data-temp="15"></div>
213                                <div class="template-item"><img data-lazy="images/samples/16-1-4.jpg" data-temp="16"></div>
214                                <div class="template-item"><img data-lazy="images/samples/17-2-6.jpg" data-temp="17"></div>
215                                <div class="template-item"><img data-lazy="images/samples/18-1-4.jpg" data-temp="18"></div>
216                                <div class="template-item"><img data-lazy="images/samples/19-1-6.jpg" data-temp="19"></div>
217                                <div class="template-item"><img data-lazy="images/samples/20-1-1.jpg" data-temp="20"></div>
218                                <div class="template-item"><img data-lazy="images/samples/21-2-3.jpg" data-temp="21"></div>
219                                <div class="template-item"><img data-lazy="images/samples/22-2-1.jpg" data-temp="22"></div>
220                                <div class="template-item"><img data-lazy="images/samples/23-2-12.jpg" data-temp="23"></div>
221                                <div class="template-item"><img data-lazy="images/samples/24-2-4.jpg" data-temp="24"></div>
222                                <div class="template-item"><img data-lazy="images/samples/25-2-1.jpg" data-temp="25"></div>
223                                <div class="template-item"><img data-lazy="images/samples/26-2-5.jpg" data-temp="26"></div>
224                                <div class="template-item"><img data-lazy="images/samples/27-1-3.jpg" data-temp="27"></div>
225                                <div class="template-item"><img data-lazy="images/samples/28-2-1.jpg" data-temp="28"></div>
226                                <div class="template-item"><img data-lazy="images/samples/29-2-1.jpg" data-temp="29"></div>
227                                <div class="template-item"><img data-lazy="images/samples/30-2-3.jpg" data-temp="30"></div>
228                                <div class="template-item"><img data-lazy="images/samples/31-2-3.jpg" data-temp="31"></div>
229                                <div class="template-item"><img data-lazy="images/samples/32-2-3.jpg" data-temp="32"></div>
230                                <div class="template-item"><img data-lazy="images/samples/33-2-1.jpg" data-temp="33"></div>
231                                <div class="template-item new"><img data-lazy="images/samples/34-1-1.jpg" data-temp="34"></div>
232                            </div>
233                        </div>
234                        <button id="choose" type="button" class="customBtn" value="このテンプレートにする">このテンプレートにする</button>
235                        <div id="templatePattern">
236                            <div>
237                                <ul id="colorSelection">
238                                </ul>
239                            </div>
240                            <div><label id="directionBtn"><input type="checkbox" checked id="direction"></label></div>
241                        </div>
242                    </div>
243                    <div class="template-list-nav">
244                        <div class="template-nav-item"><img data-lazy="images/samples/1-1-5.jpg"></div>
245                        <div class="template-nav-item"><img data-lazy="images/samples/2-2-4.jpg"></div>
246                        <div class="template-nav-item">
246<img data-lazy="images/samples/3-2-5.jpg"></div>
247                        <div class="template-nav-item"><img data-lazy="images/samples/4-1-1.jpg"></div>
248                        <div class="template-nav-item"><img data-lazy="images/samples/5-1-4.jpg"></div>
249                        <div class="template-nav-item"><img data-lazy="images/samples/6-2-3.jpg"></div>
250                        <div class="template-nav-item"><img data-lazy="images/samples/7-2-1.jpg"></div>
251                        <div class="template-nav-item"><img data-lazy="images/samples/8-1-4.jpg"></div>
252                        <div class="template-nav-item"><img data-lazy="images/samples/9-2-4.jpg"></div>
253                        <div class="template-nav-item"><img data-lazy="images/samples/10-1-4.jpg"></div>
254                        <div class="template-nav-item"><img data-lazy="images/samples/11-2-1.jpg"></div>
255                        <div class="template-nav-item"><img data-lazy="images/samples/12-1-3.jpg"></div>
256                        <div class="template-nav-item"><img data-lazy="images/samples/13-2-1.jpg"></div>
257                        <div class="template-nav-item"><img data-lazy="images/samples/14-2-7.jpg"></div>
258                        <div class="template-nav-item"><img data-lazy="images/samples/15-1-2.jpg"></div>
259                        <div class="template-nav-item"><img data-lazy="images/samples/16-1-4.jpg"></div>
260                        <div class="template-nav-item"><img data-lazy="images/samples/17-2-6.jpg"></div>
261                        <div class="template-nav-item"><img data-lazy="images/samples/18-1-4.jpg"></div>
262                        <div class="template-nav-item"><img data-lazy="images/samples/19-1-6.jpg"></div>
263                        <div class="template-nav-item"><img data-lazy="images/samples/20-1-1.jpg"></div>
264                        <div class="template-nav-item"><img data-lazy="images/samples/21-2-3.jpg"></div>
265                        <div class="template-nav-item"><img data-lazy="images/samples/22-2-1.jpg"></div>
266                        <div class="template-nav-item"><img data-lazy="images/samples/23-2-12.jpg"></div>
267                        <div class="template-nav-item"><img data-lazy="images/samples/24-2-4.jpg"></div>
268                        <div class="template-nav-item"><img data-lazy="images/samples/25-2-1.jpg"></div>
269                        <div class="template-nav-item"><img data-lazy="images/samples/26-2-5.jpg"></div>
270                        <div class="template-nav-item"><img data-lazy="images/samples/27-1-3.jpg"></div>
271                        <div class="template-nav-item"><img data-lazy="images/samples/28-2-1.jpg"></div>
272                        <div class="template-nav-item"><img data-lazy="images/samples/29-2-1.jpg"></div>
273                        <div class="template-nav-item"><img data-lazy="images/samples/30-2-3.jpg"></div>
274                        <div class="template-nav-item"><img data-lazy="images/samples/31-2-3.jpg"></div>
275                        <div class="template-nav-item"><img data-lazy="images/samples/32-2-3.jpg"></div>
276                        <div class="template-nav-item"><img data-lazy="images/samples/33-2-1.jpg"></div>
277                        <div class="template-nav-item new"><img data-lazy="images/samples/34-1-1.jpg"></div>
278                    </div>
279                </div>
280
281                
282                
283
284                <div class="nextStep-area">
285                    <p class="img-nextArrow step2"><img src="images/bg_next_black.png" alt=""></p>
286                    <div class="upload-area">
287                        <h5 class="header-step" id="makeStep2"><img src="images/head_step2.png" alt="step2 写真をアップロード" class="on-pc"><img src="images/head_step2_sp.png" alt="step2 写真をアップロード" class="on-sp"></h5>
288                        <div class="uploader-container" id="imgContainer">
289                            <p class="frame">
290                                <img id="crop" src="images/img_photo.png" alt="photo upload" style="display: none;">
291                                <!--<img src="images/img_photo_sp.png" alt="photo upload" class="on-sp">-->
292                            </p>
293                            <p class="btn-upload">
294                                <!--<a href="javascript:void(0)" onclick="$('#upload_img').click()"><img src="images/btn_upload.png" class="on-pc rover-hover"></a>-->
295                                <!--<a href="javascript:void(0)" onclick="$('#upload_img').click()"><img src="images/btn_upload_sp.png" class="on-sp"></a>-->
296                                <input type="file" id="upload_img" name="file" style="display:none" accept="image/*">
297                            </p>
298                            <div id="imgBtnBox">
299                                <button type="button" class="customBtn" id="whenUploadImg" onclick="$('#upload_img').click()">写真をアップロード</button>
300                                <div id="whenUploadedImg" style="display: none">
301                                    <button type="button" id="changeImgBtn" class="customBtn close"  onclick="$('#upload_img').click()">画像を変える</button><button type="button" id="commitImgBtn" class="customBtn" onclick="scrollToPosition('make_step3')">これでOK</button>
302                                    <span>※写真を拡大・縮小できます(PC版はマウスホイール)</span>
303                                </div>
304                            </div>
305                        </div>
306                    </div>
307                    <p class="img-nextArrow"><img src="images/bg_next_black.png" alt=""></p>
308                    <div class="text-info-area">
309                        <h5 class="header-step"  id="make_step3"><img src="images/head_step3.png" alt="step3 テキスト情報の入力" class="on-pc"><img src="images/head_step3_sp.png" alt="step3 テキスト情報の入力" class="on-sp"></h5>
310                        <div class="input-area">
311                            <p class="form-header">表面:ネコ情報</p>
312                            <dl class="input-list">
313                                <dt class="input-header required">ネコのお名前</dt>
314                                <dd class="input-body">
315                                    <p class="textArea-example">文字の大きさによって文字数制限が異なります<br><small style="font-size:0.75em">(大:5文字まで / 中:7文字まで / 小:10文字まで)</small></p>
316                                    <div class="counter">
317                                        <lable class="inputGroup"><select id="size">
318                                            <option value="L">大</option>
319                                            <option value="M">中</option>
320                                            <option value="S">小</option>
321                                        </select><input type="text" class="text-box" id="name" required maxlength="5" placeholder="5文字まで入力できます"></lable>
322                                    <span class="limit">0/5</span>
323                                    </div>
324                                </dd>
325                                <dt class="input-header">性別</dt>
326                                <dd class="input-body">
327                                    <label>未選択
328                                        <input type="radio" name="sex" class="radio-btn" value=2 id="genderless" checked>
329                                        <label for="genderless"></label>
330                                    </label>
331                                    <label>オス
332                                        <span class="icon">♂</span><input type="radio" name="sex" class="radio-btn" value=0 id="male">
333                                        <label for="male"></label>
334                                    </label>
335                                    <label>メス
336                                        <span class="icon">♀</span><input type="radio" name="sex" class="radio-btn" value=1 id="female">
337                                        <label class="female" for="female"></label>
338                                    </label>
339                                </dd>
340                                <dt class="input-header long required">自由項目</dt>
341                                <dd class="input-body">
342                                    <p class="textArea-example">たとえば:キャッチコピー / 性格 / 好きなモノ / 年齢 / 品種など</p>
343                                    <div class="counter">
344                                        <div class="text-group">
345                                            <label><input type="text" class="text-box" name="front_free" required maxlength="15" placeholder="1行目"></label>
346                                            <label><input type="text" class="text-box" name="front_free" maxlength="15" placeholder="2行目"></label>
347                                            <label><input type="text" class="text-box" name="front_free" maxlength="15" placeholder="3行目"></label>
348                                        </div>
349
350                                        
351                                        <span class="limit"></span>
352                                    </div>
353                                </dd>
354                                <dt class="input-header long">フォント設定</dt>
355                                <dd class="input-body">
356                                    <p class="textArea-example">フォント / 文字色</p>
357                                    <div class="fontSetting">
358                                        <select id="font">
359                                            <optgroup label="ゴシック体">
360                                                <option value="Noto Sans JP" class="notosans">Noto Sans JP</option>
361                                                <option value="Sawarabi Gothic" class="sawarabiG">さわらびゴシック</option>
362                                            </optgroup>
363                                            <optgroup label="明朝体">
364                                                <option value="Noto Serif SC" class="NotoSerifSC">Noto Serif SC</option>
365                                                <option value="Sawarabi Mincho" class="sawarabiM">さわらび明朝</option>
366                                            </optgroup>
367                                            <optgroup label="丸文字">
368                                                <option value="M PLUS Rounded 1c" selected class="msplus1c">M PLUS Rounded 1c</option>
369                                                <option value="Kosugi Maru" class="KosugiMaru">Kosugi Maru</option>
370                                            </optgroup>
371                                        </select>
372                                        <input style="width:100px;" id="color" value="#000000">
373                                    </div>
374                                    <blockquote id="sampleText" class="msplus">文字sampleですニャ。</blockquote>
375                                </dd>
376                            </dl>
377                            <p class="form-header">裏面:飼い主情報</p>
378                            <dl class="input-list">
379                                <dt class="input-header long">自由項目</dt>
380                                <dd class="input-body">
381                                    <p class="textArea-example">
381たとえば:名前 / 住所 /TEL / E-mail  / 趣味 /SNSのIDなど</p>
382                                    <div class="counter">
383                                        <div class="text-group">
384                                            <label><input type="text" class="text-box" name="back_free" maxlength="32" placeholder="1行目"></label>
385                                            <label><input type="text" class="text-box" name="back_free" maxlength="32" placeholder="2行目"></label>
386                                            <label><input type="text" class="text-box" name="back_free" maxlength="32" placeholder="3行目"></label>
387                                            <label style="display: none;"><input type="text" class="text-box back_free_vertical" name="back_free" maxlength="18" placeholder="4行目"></label>
388                                            <label style="display: none;"><input type="text" class="text-box back_free_vertical" name="back_free" maxlength="18" placeholder="5行目"></label>
389                                        </div>
390                                    </div>
391                                </dd>
392                            </dl>
393                        </div>
394                        <p class="img-nextArrow"><img src="images/bg_next_black.png" alt=""></p>
395                        <p class="btn-make">
396                            <span class="notice">※写真のアップロード、「ネコのお名前」、「ネコ情報:自由項目」は必須項目です</span>
397
398                            <button id="create" type="button" disabled>
399                                <img src="images/btn_make.png" alt="名刺を作成する" class="on-pc rover-hover">
400                                <img src="images/btn_make_sp.png" alt="名刺を作成する" class="on-sp">
401                            </button>
402
403
404                            <span class="notice">※クリックすると、名刺プレビュー(裏・表)が表示されます。</span>
405                            <span class="notice">※縦型の名刺の場合、スクロールして裏面をご確認ください。</span>
406                            <span class="notice">※Safari(iOS10以上), <a href="https://www.google.co.jp/chrome/" class="text_link" target="_blank">Chrome</a>以外の環境では正しく動作しない場合があります</span>
407                            <span class="notice">※【@nyanimon.com】からの受信を有効にしてください</span>
408                        </p>
409                        <p class="bnr-print rover-hover"><a href="https://nyanimon.kawaiishop.jp/items/18319522" target="_blank"><img src="images/bnr_print.jpg" alt="作った名刺を印刷しよう"></a></p>
410                        <p class="bnr-neco-demy"><a href="https://necodemy.stores.jp/" target="_blank"><img src="/images/bnr_neco-demy01.jpg" alt=""></a></p>
411                        <div class="other-btns">
412    <p class="btn-shop rover-hover"><a href="https://nyanimon.kawaiishop.jp/" target="_blank"><img src="https://nyanimon.com/images/btn_shop.png" alt="ニャにもんショップ(印刷代行・グッズ・イベントなど)" class="on-pc"><img src="https://nyanimon.com/images/btn_shop_sp.png" alt="ニャにもんショップ(印刷代行・グッズ・イベントなど)" class="on-sp"></a></p>
413    <p class="btn-article disabled"><a href=""><img src="https://nyanimon.com/images/btn_article.png" alt="特集記事紹介" class="on-pc"><img src="https://nyanimon.com/images/btn_article_sp.png" alt="特集記事紹介" class="on-sp"></a></p>
414    <p class="btn-introduce disabled"><a href=""><img src="https://nyanimon.com/images/btn_introduce.png" alt="看板ネコ紹介" class="on-pc"><img src="https://nyanimon.com/images/btn_introduce_sp.png" alt="看板ネコ紹介" class="on-sp"></a></p>
415</div>                    </div>
416                </div>
417            </form>
418        </div>
419        <div class="pageTop-wrapper">
420            <p class="btn-pageTop"><a href="#" class="rover-hover"><img src="images/btn_pagetop.png" alt="page top"></a></p>
421        </div>
422    </div>
423    <p class="fixed-btn"><a href="#make" class="rover-hover"><img src="images/btn_now.png" alt="さっそく作成"></a></p>
424    <footer class="footer">
425    <p class="logo">nyanimon</p>
426    <ul class="menu-list">
427        <li class="menu-item"><a href="https://nyanimon.com" class="rover-hover">サイトトップ</a></li>
428        <li class="menu-item"><a href="https://nyanimon.com/#example" class="rover-hover">楽しみ方</a></li>
429        <li class="menu-item"><a href="https://nyanimon.com/#step" class="rover-hover">作成ステップ</a></li>
430        <li class="menu-item"><a href="https://nyanimon.com/#make" class="rover-hover">作成する</a></li>
431        <li class="menu-item"><a href="https://www.necocochi.co.jp" target="_blank" class="rover-hover">運営会社</a></li>
432    </ul>
433    <div class="sns-btns">
434        <p class="fb"><a href="https://twitter.com/nyanimon0222" target="_blank" class="rover-hover"><img src="https://nyanimon.com/images/ico_tw_white.png" alt="twitter"></a></p><p class="ig"><a href="https://www.instagram.com/nyanimon" target="_blank" class="rover-hover"><img src="https://nyanimon.com/images/ico_ig_white.png" alt="instagram"></a></p>
435    </div>
436    <p class="privacy"><a href="https://www.necocochi.co.jp/privacy/" target="_blank" class="rover-hover">プライバシーポリシー</a></p>
437    <p class="copyright">
437Copyright &copy; 2018 necocochi Co., Ltd All Rights Reserved.</p>
438</footer>    <div id="modal">
439        <!-- 出力部分 -->
440        <div id="modalContainer">
441            <div id="preview">
442                <div id="preview_front"></div>
443                <div id="preview_back"></div>
444            </div>
445        </div>
446        <div id="modal_footer">
447            <div class="btnBox">
448                <button id="cancel" type="button" class="customBtn close">やり直す</button>
449                <button id="generate" type="button" class="customBtn" disabled>これでOK</button>
450            </div>
451            <small>※実際のできあがりと異なる場合がございます</small>
452        </div>
453    </div>
454</div>
455
456<script>
457    var callSwiper = function () {
458        var mySwiper = new Swiper ('.swiper-container', {
459            effect: "fade",
460            loop: true,
461            autoplay: {
462                delay: 3400
463            },
464            speed: 1200
465        });
466    };
467    $('#firstContent').hide();
468    Loader.start();
469    $(window).load(function () {
470        var ahash = location.hash;
471        Loader.end();
472        if(!ahash) return $('#firstContent').fadeIn('slow', callSwiper);
473        var gotoNum = $(ahash).offset().top;
474        $('html,body').animate({ scrollTop: gotoNum }, 0 );
475        $('#firstContent').fadeIn('slow', callSwiper);
476    });
477
478    $(function () {
479        $('#font option').each(function () {
480            $('#font').val($(this).val()).change();
481        })
482        $('#font').val($('#font option:first-child').val()).change();
483    });
484
485    $('#font').change(function () {
486        var sample = $('#sampleText');
487        var className = $(this).find(':selected').attr('class');
488        sample.removeClass().addClass(className).css('color', $('#color').val()).css('background', ($('#color').val() == '#ffffff' ? '#ccc' : '#fff'));
489    });
490
491    $('#color').on('change', function () {
492        $('#sampleText').css('color', $(this).val()).css('background', ($(this).val() == '#ffffff' ? '#ccc' : '#fff'))
493    });
494
495    $(function () {
496        Displayed = new FrameDisplay($('.template-list .slick-current').find('img').data('temp'));
497    });
498
499</script>
499
500</body>
501</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.