拍手機能についてのメモ

このようなテキストフォーム付きの拍手機能を設置する手順についてのメモ。Alice+とナノでの方法です。（上のものはダミーです。なぜかこのページで独自タグが使えなかった）

メッセージ欄つき拍手機能の設置の手順

１．基本設定
・拍手＞基本設定＞「ページ貼り付け時のリンクタイプ」を「レイアウト指定」に設定

２．貼り付け時レイアウト
・拍手＞「貼付け時レイアウト」に記入／独自タグ内の「拍手」の文字は変更可能（formSubmit_拍手→formSubmit_clapなど）
［メッセージ欄付き］
#formStart##formInput_20##formSubmit_拍手##formEnd#

３．設置
設置したいページに拍手の独自タグ（＃clap1＃など）を記入

私が試したデザインの変更

４．head間の編集
Alice+の場合 - 「共通head間編集」に追加
ナノの場合 - トップページ編集＞HEAD・HTML詳細＞HEAD内に追加
input[type="text"], input[type="submit"]{ border-radius:0; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } input[type="text"]{ border:none; background:#bfc6d6; color:#fff; font-size:12px; margin-right:5px; padding:6px; } input[type="submit"]{ border:none; background:#bfc6d6; color:#fff; font-size:12px; vertical-align:middle; padding:5px 10px; }

０．カスタマイズについて
・色の変更
「background:#fff;」や「color:#000;」など＃以降の数値を変更する
・透明化
透明にさせたい場合は「rgba()」を使う。黒の半透明なら「background:rgba(0,0,0,0.4);」、白の半透明は「rgba(255,255,255,0.4)など。（４つ目の数値が透明度。０〜１の間で設定）
・枠線
「border:none;」を「border:1px solid;」に変更 「border-radius:5px;」を使うと丸みがつく。pxの値によって丸み具合が変わる。