FEATURE 01 入力支援も揃ったフォームを簡単に作成 HTMLの知識がなくても、ドラッグ＆ドロップで簡単にフォームが完成。住所自動入力や入力ミスをその場で知らせるエラーチェックなど、回答率を上げる入力支援機能も搭載。
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 みんな大好きFlickrではグループ を作成出来るのですが、その中に WordPressのログイン画面の 入力フォームデザインのグループ があったのでご紹介します。 個人で使う分にはそのままでも良さそうですが、Web制作でWPをクライアントに渡すのにログイン画面がWordPressよりはクライアントのロゴなどでデザインされている方が喜ばれるのでは無いかと思います。言わないと分からないでしょうが＾＾；そんな訳でログイン画面の秀逸なデザインとログイン画面で使用されているｃｓｓファイルの場所を一番下に載せておきます。ソース見れば簡単に分かるんですけど一応。。 まずはギャラリーから。 Universidad San Andres 学校でWP使ってるようですね。敷地内の写真を
Form Design フォームデザイン さてさて、最近のwebの入力フォームは本当に凝ってるところが多くて、ただただ関心するばかり。 そんなわけで今回は、焦点を『フォーム』に限定し、スタイル抜群なフォームUIを勉強してみたい。 流れ的には インスピレーションデザイン集CSSによるフォームの変更方法JavaScriptによるフォームデザインという感じでお送りいたします。 インスピレーション まずは、スタイリッシュなフォーム。 これらは、webデザイン全体がフォームデザインとなっているまとめです。 まさにバインダー。 webの入力フォームを街頭アンケート用紙のように仕上げたデザイン。かっこいい。 くしゃくしゃっとしたような紙の一部にフォームが設置されている。 こちらもメモに名前を書くかのごとく。 深海に光がさす感じのイメージ。 シンプルイズベストなレイアウト設計がなされている。 １，２，３，
セレクトボックスの各アイテムにアイコンを配置して、グラフィカルに認識しやすくするスクリプトをMarghoob Sulemanから紹介します。
《2017年7月4日 15:10 公開/更新》 フォーカスのある入力フォームの装飾を変化させるCSS [フォーム,線,色] 複数の入力欄が並んでいるとき、ぱっと見て「今どこに入力可能な状態なのか」が分かりにくいこともあります。そんなとき「今、入力可能な状態になっている欄」(＝フォーカスのある入力欄)だけ、装飾を変化させると分かりやすくなります。カーソルの入ったテキスト入力欄、選択したばかりのチェックボックスなど、フォーカスのある入力フォームの装飾だけを一時的に変化させるCSSの書き方を解説。 フォーカスのある入力フォームの装飾を変化させるCSS 入力可能状態になっている(＝フォーカスのある)要素の装飾を一時的に変化させるスタイルシート 属性セレクタでテキスト入力欄に限定し、「フォーカスのあるテキスト入力欄」だけの装飾を変化させる フォーカスのある入力フォームの装飾を変化させるCSS 掲示板
Checkbox alignment in IE and Firefox | Xinotes チェックボックスを綺麗に並べるCSSサンプル。 次のように、チェックボックスの横に、改行入りのテキストを入れても綺麗に配置するサンプルです。 簡単そうでなかなか難しいテクニックかもしれないので覚えておくとよいかも。 サンプル IEでもFirefoxでも動作。Chromeでも試してみたところ動作しました。 関連エントリ クリーンなデザインでピュアＣＳＳなフォームを作るサンプル CSSでクールなINPUTフォームを作成するサンプル CSSベースのクールなフォーム、サンプル集 CSSでフォームデザインをする際のチュートリアル
DocManagerは複数のリソースの情報を一括で編集出来るモジュールです。パッケージに同梱されているので初期インストール時にチェックを外していなければ最初から使用可能です。入力内容の統一、メニューの並び替えなどが簡単に出来ます。 対象になるリソース番号の指定方法 使用テンプレートの変更 テンプレート変数の内容を変更 アクセス許可の変更 メニューインデックスの変更 その他リソース情報の設定 リソースの各種日時設定 リソースの各種設定（公開or非公開、メニューに表示or非表示など） 作成者と編集者の変更 対象になるリソース番号の指定方法 画面下にある「操作対象(操作元)のリソースIDを指定」というフィールドに対象になるリソースのIDを入力します。IDは半角数字で入力、半角のカンマ,で区切って複数の条件を指定できます。以下n、m はリソースIDを示す数字です。 複数のリソースを個別に指定 n
検索フォームを素敵なデザインにスタイリングする、クロスブラウザ対応のスタイルシートをCss Finestから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <form id=”searchform1″ method=”get” action=”" > <input class=”isearch1″ type=”text” name=”keywords” id=”keywords” /> <input class=”ibutton1″ type=”submit” value=”" /> </form> </textarea>
はじめまして タグ表示はなんとか使用で来たのですが メール設定のところに入れるタグがわかりません。 フォームのタグとメールのタグ とわかりやすく説明している資料などないでしょうか？ 教えてください。よろしくお願いします。 7/10 12:05に書き込みをしたfujiと申します。 wordpressを再インストールしてみたところ、解決いたしました。 現在、借りているサーバではwordpressが上手く動かない事があるので、 もしかしたらそれの影響があるのかもしれないですが、原因はよくわかりません。 やっぱり有料のサーバの方が、安定するのかもしれませんね。 メールフォームのカスタマイズも無事できました。 これからもずっと使っていこうと思っております。 ご迷惑をおかけいたしました。
FirefoxやThunderbirdはWEBユーザーの必須アイテム。 初心者からヘビーユーザーまで使える！便利でクールなFirefox拡張機能（アドオン）の使い方やカスタマイズ、Mozilla関連情報をどうぞ。 Adobe 「Flash Player」を緊急アップデート。 by hoge (07/16) Adobe 「Flash Player」を緊急アップデート。 by H.I. (07/16) ウェブページから余計なコンテンツを排除して読みやすく表示できるFirefoxアドオン「Tranquility Reader」 by しんちゃん (07/11) YouTubeのHTML5動画に表示される広告をブロックしてくれるFirefoxアドオン「YouTube Advertisement Blocker」 by はち (06/17) ウェブページ上の不要なリンクを非表示にできるFirefox
The Comment form, is an important part of interface design that usually appears at the end of an article. Comment Form should have appealing typography, ordered element placement (name, e-mail, etc.), colors which induces the reader to comment. Here are some samples of clean comment forms collected from various websites and blogs. Note: Dzineblog presents you “Interface Design Inspirations“, a se
今回は、フォームの見た目にこだわっていろいろとフォームのデザインをまとめてみました。 登録、ログイン、コメント、検索などなどいろいろな場面で使われるフォームをきれいに見せるアイデアがたくさんつまっています。 Blog Comment Form Design Showcase | Smiley Cat Web Design ブログのコメントフォームを集めたショーケースです。きれいなフォームがたくさんありますね。またこちらのサイトでは、他にもいろいろとフォームをまとめられております。ログインフォームや登録フォーム、別のブログコメントフォームも参考になりますね。 Pattern Tap 現在185種類のフォームデザインがまとめられております。 Form Generators, Styling, Inspiration | CSSAddict おしゃれにデザインされたフォームがたくさん。 Web
複雑なお問い合わせフォームを作成するプラグイン cforms IIを紹介したが、プラグイン制作者のOliverさんから依頼を受けて日本語翻訳ファイルを作成した。一部誤訳やタイプミスがあるかもしれないので、この日本語翻訳ファイルを使用された方で何かしら発見されたらぜひご報告いただきたい。 日本語翻訳ファイルの適用方法は以下の通り。 圧縮ファイルを展開する。 cforms-ja.moをwp-content/pluginsディレクトリにアップロードする。 p*-title.jpg（*は1-5）をwp-content/plugins/cforms/imagesにアップロードする。 ja.jsをwp-content/plugins/cforms/js/langsにアップロードする 以上である。管理画面で正常に日本語化されているか確認してほしい。cforms IIは大変高機能なお問い合わせフォーム作成
cforms II » delicious:days お問い合わせフォームを作成するプラグインとして以前、お問い合わせフォームを簡単に作成するプラグイン Contact Form 7を紹介したが、Contact Form 7は簡単にお問い合わせフォームを作成できるが、checkboxやradioボタンが使えない等の制約（最新バージョンでは使用できる）があり、複雑な質問事項を含むようなお問い合わせフォームを作成することができない。そこで、より詳細なお問い合わせフォームの作成を可能にするプラグインが、cforms IIである。 このcforms IIは現在、バージョン6.0まで更新されており、積極的に機能拡張が進められている。Formタグを使った設定はほとんどできるのではないだろうか。しかしながら、日本語の翻訳ファイルはまだないので英語で使うしかない。日本語翻訳ファイルを作成したので、cfor
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
