larimar
demo
海中をイメージ、グラスモーフィズムを使用した1ページ完結型のテンプレートです。背景にcssアニメーションを使用しました。トップへ戻るボタンは錨が引き上げられる様子をイメージしています。
2023.04.30一部素材差し替え
2022.11.14ver 1.0.1 - クレジット修正・背景アニメーション改善
2021.09.20Release
2022.11.14ver 1.0.1 - クレジット修正・背景アニメーション改善
2021.09.20Release
material
- banner / texture
-
suiren様より
バナー - 10,000hit記念企画ログ - Q.1 Result & Banner - ラリマー / ベニトアイト おまけ - Texture - 10000hit Q1 // ラリマー / ベニトアイト
texture No.006
banner No.006-1
banner No.006-2
banner No.006-3
配布元レンタルスペースのサービス終了のため幣サイト素材に差し替えました。
sample text
- 日本語サンプルテキスト
-
青空文庫様より
海のまぼろし 著者：小川未明
font
- Lora / Playfair Display SC / Shippori Mincho
-
Google Fonts様より
Lora
Playfair Display SC
Shippori Mincho - Font Awesome 5 Free
- Font Awesome様
code
- nanoのスマホ向け自動出力CSSの消去
-
sikaku様より
ナノのスマホ向け自動出力CSSの消去
※管理人の飯様より再配布の許可をいただいております。 - リセットcss(改変元)
-
Richard Clark様より
HTML5 Reset Stylesheet
ライセンス : MIT License - スムーズスクロール(改変元)
-
125naroom様より
【jQuery】ページ内リンクでスムーズスクロール（スクロール位置の調整も簡単にできる） - 水泡アニメーション(改変元)
-
CodePen様より
Parallax Star background in CSS by Saransh Sinha - 区切り線 / 見出しレベル1/ 見出しレベル2 / 見出しレベル3 (改変元)
-
coliss様より
[CSS]コンテンツの区切り hr要素を素敵にデザインするスタイルシートのテクニックのまとめ
special thanks
デザインパーツの用意・展示にあたり、折橋 廉様の運営するKerryのデモページを参考にさせて頂きました。ありがとうございます。index
html
書き換え部分(クリック/タップで表示)
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290 <!DOCTYPE html><html lang="ja"><head> <meta charset="utf-8"> <meta name="robots" content="noindex,nofollow"> <meta name="googlebot" content="noindex,nofollow"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta name="theme-color" content="#050249"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lora&family=Playfair+Display+SC&family=Shippori+Mincho&display=swap" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="ファイル名.css"> <!-- nano --> <smartphone> <script> document.querySelector('link[href="/static/css/smartphone/common.css"]').remove(); </script> </smartphone> <!-- nano END --> <title>site title</title></head><body> <div id="bg"></div> <div id="bubble-01"></div> <div id="bubble-02"></div> <div id="bubble-03"></div> <header id="top"> <div class="cube-wrapper"> <div id="cube-01"></div> <div id="cube-02"></div> <div id="cube-03"></div> <div id="cube-04"></div> <div id="cube-05"></div> </div> <div class="fv-wrapper"> <h1>site title</h1> <nav> <ul class="ul-menu"> <li><a href="#info"><i class="fas fa-question-circle menu-icon"></i><span class="menu-text">info</span></a></li> <li><a href="#main"><i class="fas fa-book menu-icon"></i><span class="menu-text">main</span></a></li> <li><a href="#contact"><i class="fas fa-envelope menu-icon"></i><span class="menu-text">contact</span></a></li> </ul> <ul class="ul-row"> <li><a href="URL">rank</a></li> <li><a href="URL">rank</a></li> </ul> </nav> </div> </header> <main> <section id="info"> <h2>information</h2> <h3>introduction</h3> ここに内容 <div class="box"> <dl class="dl-row"> <dt>name</dt> <dd>site name</dd> <dt>url</dt> <dd>http://xxx.xx.xxx/</dd> <dt>manager</dt> <dd>your name</dd> <dt>since</dt> <dd>xxxx.xx.xx-</dd> </dl> </div> <h3>link</h3> <h4>me</h4> link free <textarea class="copy-box" rows="1" onclick="this.select()"><a href="http://xxx.xx.xxx/">site name</a></textarea> <div class="flex-wrapper"> <div class="flex-item"> <h4>credit</h4> <ul class="ul-row"> <li><a href="URL">item</a></li> <li><a href="URL">item</a></li> <li><a href="URL">item</a></li> </ul> </div> <div class="flex-item"> <h4>bookmark</h4> <ul class="ul-row"> <li><a href="URL">item</a></li> <li><a href="URL">item</a></li> <li><a href="URL">item</a></li> </ul> </div> </div> <h3>rule</h3> <div class="flex-wrapper"> <div class="flex-item"> <h4>ok</h4> <ul class="ul-column"> <li>item</li> <li>item</li> <li>item</li> </ul> </div> <div class="flex-item"> <h4>ng</h4> <ul class="ul-column"> <li>item</li> <li>item</li> <li>item</li> </ul> </div> </div> </section> <section id="main"> <h2>main</h2> <form class="form-oneline center" action="URL" method="post"> <input type="text" class="input-multi" value="苗字"> <input type="text" class="input-multi" value="名前"> <input type="submit" value="◯"> </form> <h3>long</h3> <div class="flex-wrapper"> <div class="card"> <img src="画像URL" class="card-img"> <div class="caption"> <a href="URL" class="caption-title">title</a> ここに内容 </div> </div> <div class="card"> <img src="画像URL" class="card-img"> <div class="caption"> <a href="URL" class="caption-title">title</a> ここに内容 </div> </div> <div class="card"> <img src="画像URL" class="card-img"> <div class="caption"> <a href="URL" class="caption-title">title</a> ここに内容 </div> </div> </div> <h3>short</h3> <div class="flex-wrapper"> <div class="flex-item"> <h4>genre</h4> <dl class="dl-column"> <dt>character name</dt> <dd> <ul class="ul-row"> <li><a href="URL">title</a></li> <li><a href="URL">title</a></li> <li><a href="URL">title</a></li> </ul> </dd> <dt>character name</dt> <dd> <ul class="ul-row"> <li><a href="URL">title</a></li> <li><a href="URL">title</a></li> <li><a href="URL">title</a></li> </ul> </dd> <dt>character name</dt> <dd> <ul class="ul-row"> <li><a href="URL">title</a></li> <li><a href="URL">title</a></li> <li><a href="URL">title</a></li> </ul> </dd> </dl> </div> <div class="flex-item"> <h4>genre</h4> <dl class="dl-column"> <dt>character name</dt> <dd> <ul class="ul-row"> <li><a href="URL">title</a></li> <li><a href="URL">title</a></li> <li><a href="URL">title</a></li> </ul> </dd> <dt>character name</dt> <dd> <ul class="ul-row"> <li><a href="URL">title</a></li> <li><a href="URL">title</a></li> <li><a href="URL">title</a></li> </ul> </dd> <dt>character name</dt> <dd> <ul class="ul-row"> <li><a href="URL">title</a></li> <li><a href="URL">title</a></li> <li><a href="URL">title</a></li> </ul> </dd> </dl> </div> </div> <h3>plan</h3> <dl class="dl-banner flex-wrapper"> <div class="flex-item"> <dt><a href="URL" class="banner-title">title</a><img src="画像URL" class="banner"></dt> <dd>ここに内容</dd> </div> <div class="flex-item"> <dt><a href=""><img src="画像URL" class="banner"></a></dt> <dd> title ここに内容 </dd> </div> <div class="flex-item"> <dt><img src="画像URL" class="banner"></dt> <dd> <a href="">title</a> ここに内容 </dd> </div> </dl> </section> <section id="contact"> <h2>contact</h2> <form class="form-contact center" action="URL" method="post"> <input type="text" placeholder="name"> <input type="text" placeholder="address/url"> <textarea rows="6" placeholder="message"></textarea> <input type="submit" value="send"> </form> </section> </main> <footer> <small>template by <a href="https://miroirs.stars.ne.jp/" target="_blank" rel="noopener noreferrer">Miroirs</a></small> </footer> <div class="anchor-wrapper"> <span class="anchor-line"></span> <button class="anchor-btn"><i class="fas fa-anchor"></i></button> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(function() { $('a[href^="#"]').click(function () { var speed = 1000; var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top; $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); }); $(function() { $('.anchor-btn').click(function () { $('.anchor-line').animate({opacity:1,top:'0'}, 600, 'linear'); $('.anchor-wrapper').delay(600).animate({top:'-100vh'}, 1000, 'swing'); $('body,html').delay(600).animate({scrollTop:$('#top').offset().top}, 1000, 'swing',function(){ $('.anchor-wrapper').css('top','auto'); $('.anchor-line').css({opacity: "0",top: "-100vh"}); }); }); }); $(function () { var upper = $('.anchor-btn'); $(window).scroll(function () { var main = $('main').offset().top; if ($(this).scrollTop() > main) { upper.fadeIn(); } else { upper.fadeOut(); } }); }); $(function(){ size(); $(window).on("resize", function() {size();}); function size() { var fvH = $('.fv-wrapper').height(); var fvW = $('.fv-wrapper').width(); $('.cube-wrapper').css({width: fvW,height: fvH}); } }); </script></body></html>
css
parts
各パーツ
2カラム
カード
見出しレベル2
見出しレベル3
見出しレベル4
見出しレベル5
見出しレベル6
リンク
太字
斜体
削除
重要
強調
マーク
ルビ
左横線
右横線
後線
マーカー風
ボタン風
両端揃え
中央揃え
右揃え
水平線
ボックス
スクロールボックス
折りたたみボックス
コピーボックス
引用(短)
引用(長)
順序付きリスト - 横並び
順序付きリスト - 縦並び
順序なしリスト - 横並び
順序なしリスト - 縦並び
説明リスト - バナー
説明リスト - バナー(2カラム)
説明リスト - 横並び
説明リスト - 縦並び
表 - 横並び
連絡用フォーム
一行フォーム - input/テキスト(単体)
一行フォーム - input/テキスト(複数)
一行フォーム - 選択
一行フォーム - テキストエリア
検索避けタグ
当サイトのテンプレートでは、全てのテンプレートに検索避けのmetaタグを挿入しています。
検索避けが不要な方はhtmlの下記のコードを削除してください。
検索避けが不要な方はhtmlの下記のコードを削除してください。
67 <meta name="robots" content="noindex,nofollow"><meta name="googlebot" content="noindex,nofollow">
GoogleChrome(スマートフォン版)のタブ色
Chrome(スマートフォン版)のタブ色を設定しています。各head内にある下記のカラーコードを変更するとタブ色が変更できます。
8 <meta name="theme-color" content="#050249">
色とフォントの管理
色とフォントは各cssの:root{}部分で管理をしています。色やフォントを変更したい場合は:root{}内の値を変えると該当部分の色やフォントが全て変わります。
larimarではガラス風の背景色やborder設定、影、ぼかしも:rootにて一括設定しています。
larimarではガラス風の背景色やborder設定、影、ぼかしも:rootにて一括設定しています。
ブラウザ別スクロールバー
Chrome / Opera / Edge : スクロールバー背景が透過されます。
Firefox : スクロールバー背景を透過させることが出来ませんでしたので、スクロールバーを非表示にしています。解決策が見つかり次第、修正します。
Safari : スクロールバーがカスタマイズ不可となっているため、ブラウザデフォルトのスクロールバーになっています。
Firefox : スクロールバー背景を透過させることが出来ませんでしたので、スクロールバーを非表示にしています。解決策が見つかり次第、修正します。
Safari : スクロールバーがカスタマイズ不可となっているため、ブラウザデフォルトのスクロールバーになっています。
Safari - summaryアニメーションのバグ
Safariではsummaryの開閉時アニメーションが一度きりしか動作しないというバグがあるそうです。現在、解決策が見つかりませんのでそのままになっています。解決策が見つかり次第、修正します。
Firefoxの仕様
Firefoxではガラスのぼかすコードであるbackdrop-filterが効かないので、ガラス部分が半透明(ぼかし無し)になります。
また、スクロールバーについても他ブラウザとの違いがありますが、閲覧するにあたり支障はありません。
また、スクロールバーについても他ブラウザとの違いがありますが、閲覧するにあたり支障はありません。
説明リスト - バナー
展示ではバナーをお借りして表示していますが、バナーサイズ(200×40)ではない画像も自動的にバナーサイズにトリミングされます。
labelタグの使い方
labelタグはinputタグと紐付けさせることが出来ます。例えば、ラベルが未設定のチェックボックスはチェックボックス自体をクリックしなければ選択することが出来ません。
labelタグで紐付けることによって、labelタグ自体をクリックしても紐づけられた入力欄がフォーカスされます。
また、主にチェックボックスやラジオボタンの装飾をする際にlabelタグがよく使われ、当サイトのテンプレートも例外ではありません。
<input id="hoge" type="checkbox">
<label for="hoge">項目名</label>
上記のようにinputのidとlabelのforを同じ値にするとinputとlabelが紐付けされ、labelをクリックしても紐付けたinputがフォーカスされるようになります。
idはclassと違い、各ページで一度きりしか使用してはいけません。複数記述があると動作しなくなります。ご注意ください。
また、主にチェックボックスやラジオボタンの装飾をする際にlabelタグがよく使われ、当サイトのテンプレートも例外ではありません。
<input id="hoge" type="checkbox">
<label for="hoge">項目名</label>
上記のようにinputのidとlabelのforを同じ値にするとinputとlabelが紐付けされ、labelをクリックしても紐付けたinputがフォーカスされるようになります。
idはclassと違い、各ページで一度きりしか使用してはいけません。複数記述があると動作しなくなります。ご注意ください。
nano & XRIE/XRIA - 改行
自動改行をしない設定であることを前提に作っています。
nano : ホムペ設定 > その他共通設定 > 改行を<br>に変換して表示 をしない
XRIE/XRIA : 各編集ボックス直下の自動改行しないにチェック
に設定をお願いします。
nano : ホムペ設定 > その他共通設定 > 改行を<br>に変換して表示 をしない
XRIE/XRIA : 各編集ボックス直下の自動改行しないにチェック
に設定をお願いします。
nano & XRIE/XRIA - headとbody
レンタルスペースではheadとbodyを分離して記述する仕様のため、また外部ファイルを読み込むことができないので
<head></head>の中身
→HEAD・HTML詳細(nano)
→HEAD間編集(XRIE/XRIA)
<body></body>の中身
→◯◯レイアウト(nano)
→ページ編集(XRIE/XRIA)
に記述してください。
また、<link rel="stylesheet" type="text/css" href="ファイル名.css">は
<head></head>の中身
→HEAD・HTML詳細(nano)
→HEAD間編集(XRIE/XRIA)
<body></body>の中身
→◯◯レイアウト(nano)
→ページ編集(XRIE/XRIA)
に記述してください。
また、<link rel="stylesheet" type="text/css" href="ファイル名.css">は
123 <style>ここに配布css</style>
と置き換えてください。
nano - 一万文字を超えるソースコード
nanoではHEAD・HTML詳細のHEAD内の文字数が一万文字を超えるとエラーを起こしてしまいます。
回避方法としては、
定型文の登録は管理者画面トップページ > 定型文 > 定型文の追加 から出来ます。#stamp_登録した定型文名#で表示します。
回避方法としては、
- 定型文への登録をし、HEAD内に定型文の独自タグを設置する
- 不要なコメントアウト・改行・スペースを削除する
定型文の登録は管理者画面トップページ > 定型文 > 定型文の追加 から出来ます。#stamp_登録した定型文名#で表示します。
nano - 各フォームカスタム
名前変換
123456 <form action="/yourID/novel/N/dream" method="post"> <input type="text" name="DreamID[1]" value="苗字"> <input type="text" name="DreamID[2]" value="名前"> <input type="submit" name="set" value="変換"> <input type="submit" name="clear" value="消去"></form>
valueの値は夢(ドリーム)小説設定>並び替えから確認出来ます。上から1,2,3...と割り振られます。
フォームメール
各タグの横に対応する独自タグを記載しています。<!-- 独自タグ -->です。プレビュー有
123456789101112131415161718192021 <form action="/yourID/form/N/preview" method="post"><!-- #formStart# --> 一行テキスト <input name="Item[1]" value="" type="text"><!-- #formInput1# --> 複数行テキスト <textarea name="Item[2]"></textarea><!-- #formInput2# --> ラジオボタン <input name="Item[3]" value="選択肢名1" type="radio">選択肢名1<!-- #formInput3_1##formLabel3_1# --> <input name="Item[3]" value="選択肢名2" type="radio">選択肢名2<!-- #formInput3_2##formLabel3_2# --> <input name="Item[3]" value="選択肢名3" type="radio">選択肢名2<!-- #formInput3_3##formLabel3_3# --> チェックボックス <input name="Item[4][1]" value="選択肢名1" type="checkbox">選択肢名1<!-- #formInput4_1##formLabel4_1# --> <input name="Item[4][2]" value="選択肢名2" type="checkbox">選択肢名2<!-- #formInput4_2##formLabel4_2# --> <input name="Item[4][3]" value="選択肢名3" type="checkbox">選択肢名2<!-- #formInput4_3##formLabel4_3# --> プルダウン(セレクト) <select name="Item[5]"><!-- #formInput5# --> <option value="選択肢名1">選択肢名1</option> <option value="選択肢名2">選択肢名2</option> <option value="選択肢名3">選択肢名3</option> </select> <input type="submit" value="送信"><!-- #formSubmit_送信# --></form><!-- #formEnd# -->
プレビュー無
123456789101112131415161718192021 <form action="/yourID/form/N/posted" method="post"><!-- #formStart# --> 一行テキスト <input name="Item[1]" value="" type="text"><!-- #formInput1# --> 複数行テキスト <textarea name="Item[2]"></textarea><!-- #formInput2# --> ラジオボタン <input name="Item[3]" value="選択肢名1" type="radio">選択肢名1<!-- #formInput3_1##formLabel3_1# --> <input name="Item[3]" value="選択肢名2" type="radio">選択肢名2<!-- #formInput3_2##formLabel3_2# --> <input name="Item[3]" value="選択肢名3" type="radio">選択肢名2<!-- #formInput3_3##formLabel3_3# --> チェックボックス <input name="Item[4][1]" value="選択肢名1" type="checkbox">選択肢名1<!-- #formInput4_1##formLabel4_1# --> <input name="Item[4][2]" value="選択肢名2" type="checkbox">選択肢名2<!-- #formInput4_2##formLabel4_2# --> <input name="Item[4][3]" value="選択肢名3" type="checkbox">選択肢名2<!-- #formInput4_3##formLabel4_3# --> プルダウン(セレクト) <select name="Item[5]"><!-- #formInput5# --> <option value="選択肢名1">選択肢名1</option> <option value="選択肢名2">選択肢名2</option> <option value="選択肢名3">選択肢名3</option> </select> <input type="submit" value="送信"><!-- #formSubmit_送信# --></form><!-- #formEnd# -->
項目追加・編集の項目タイプと各タグの対応
自由入力一行 ⇔ <input name="Item[N]" value="" type="text">自由入力(複数行) ⇔ <textarea name="Item[N]"></textarea>
選択肢(ﾗｼﾞｵﾎﾞﾀﾝ) ⇔ <input name="Item[N]" value="選択肢名" type="radio">選択肢名
選択肢(ﾁｪｯｸﾎﾞｯｸｽ) ⇔ <input name="Item[N][N']" value="選択肢名" type="checkbox">選択肢名
選択肢(ﾌﾟﾙﾀﾞｳﾝ) ⇔ <select name="Item[N]"><option value="選択肢名">選択肢名</option></select>
Item[N]の確認
項目並び替えから確認出来ます。上から1,2,3...と割り振られます。checkboxの[N']は登録している選択肢の左から1,2,3...と割り振られます。
拍手
ボタンのみ
123 <form action="/yourID/clap/N/?ResultOrder=1" method="post"> <input type="submit" value="拍手"></form>
一行テキストタイプ
1234 <form action="/yourID/clap/N/?ResultOrder=1" method="post"> <input type="text" name="Message" value=""> <input type="submit" value="拍手"></form>
セレクトタイプ
12345678 <form action="/yourID/clap/N/?ResultOrder=1" method="post"> <select name="Message"> <option>テキスト1</option> <option>テキスト2</option> <option>テキスト3</option> </select> <input type="submit" value="拍手"/></form>
リンクタイプ
1 <a href="/yourID/clap/N/?ResultOrder=1">拍手</a>
アンケート
123456 <form action="/yourID/enq/N/vote" method="post"> <input type="radio" name="DataID" value="1">項目1 <input type="radio" name="DataID" value="2">項目2 投票理由:<input type="text" name="Reason"> <input type="submit" value="投票"></form>
項目のinputのvalueは項目並び替えで確認出来ます。上から1,2,3...と割り振られます。
XRIE/XRIA - 小説URL
小説本文ページのURLは記事の管理 > 各記事編集ページ の下部にあるこの記事の変化しないURLが本文ページのURLになります。
名前変換機能を利用している場合はその後ろに#drm_q#を加えてください。以下は例になります。
名前変換機能を利用している場合はその後ろに#drm_q#を加えてください。以下は例になります。
1 <a href="http://#id#.N.novel.r.xria.biz/?guid=on&t=0000#drm_q#">タイトル</a>
XRIE/XRIA - 各フォームカスタム
名前変換
actionのURLはxriaになっているのでXRIEユーザーの方はxrieに書き換えをお願いします。
1234567 <form action="http://#id#.N.novel.d.xria.biz/?guid=on" method="post"> <input type="text" name="n1" value="苗字"> <input type="text" name="n2" value="名前"> <input type="submit" value="変換"> <input type="hidden" name="mode" value="set"> <input type="hidden" name="page_pass" value=""></form>
valueの値は人物名自由設定から確認出来ます。上からn1,n2,n3...と割り振られます。
メールボックス
actionのURLはxriaになっているのでXRIEユーザーの方はxrieに書き換えをお願いします。
123456789101112131415 <form action="http://#id#.N.mailbox.xria.biz/?guid=on" method="post"> タイトル <input type="text" name="subject" value=""> 名前 <input type="text" name="name" value=""> サイトURL <input type="text" name="url" value="http://"> メールアドレス <input type="text" name="email" value=""> メッセージ <textarea cols="30" name="message"></textarea> <input type="submit" value="送信"> <input type="hidden" name="mode" value="send"> <input type="hidden" name="page_pass" value="">lt;/form>
拍手
actionのURLはxriaになっているのでXRIEユーザーの方はxrieに書き換えをお願いします。ボタンのみ
1234 <form action="http://#id#.N.clap.xria.biz/?guid=on" method="post"> <input type="submit" value="拍手"> <input type="hidden" name="req" value="%request%"></form>
一行テキストタイプ
123456 <form action="http://#id#.N.clap.xria.biz/?guid=on" method="post"> <input type="text" name="msg"> <input type="submit" value="拍手"> <input type="hidden" name="mode" value="s"> <input type="hidden" name="req" value="%request%"></form>
リンクタイプ
1 <a href="http://#id#.N.clap.xria.biz/?guid=on&req=%erequest%">拍手</a>
アンケート
actionのURLはxriaになっているのでXRIEユーザーの方はxrieに書き換えをお願いします。
12345678910 <form action="http://#id#.N.enq.p.xria.biz/?guid=on" method="post"> <input type="radio" name="t" value="N">項目1 <input type="radio" name="t" value="N">項目2 名前 <input type="text" name="name"> コメント <input type="text" name="message"> <input type="submit" value="投票"> <input type="hidden" name="page_pass" value=""></form>
投票項目のvalueは投票ページのソースコードから確認してください。PCは右クリック→ページのソースを表示(ブラウザによって名称の違いがあります)、スマートフォンはスマホ向けWebページの検証を行う方法からご確認ください。