MicroEngine Mailform 添付ファイル対応・料金計算機能・郵便番号から住所を自動入力できる機能を備えたPHPメールフォームです。 お問い合わせフォームやアンケート・お申し込み・ご予約・ご注文フォームなどでご利用頂けます。
簡単設置スマホ対応レスポンシブ メールフォームの無料ダウンロード 公開日 2014年3月28日 最終更新日 2024年3月18日 著者 Motohiro Tani とても簡単に設置できるメールフォームを無料でダウンロードできます。 制作する上での基本思想は、 入力する人がストレスを感じることなく快適に入力~送信までできること。 なるべく簡単に設置でき、正常にメール送信がされること。(標準状態で) 既存のページに組み込みやすいこと。 デザインの変更などがしやすいこと。 となっております。上のものほど優先度が高いものになります。 上記1と2を特に重視している関係上でメール本文欄のカスタマイズは難しいかもしれませんが、そのあたりは設置者のスキルやカスタマイズ依頼などでカバーしてください。(宣伝) 現在の最新バージョンは2022年12月22日公開の8.1です。 参考ページ:プログラムをアップデート
Google様からの突然の課金宣言…。 ゴールデンウィーク中にGoogleから英語でなにやらメールが来ていたのを見落としていた方多いのではないでしょうか? 英語だし自動で無視してしまいがち。よくよく読んでみたらとんでもないことが書いてあります。 大まかにいうと 「GoogleMapsAPIは6/11からGoogleMapsPlatformというサービスになるので、使ってる人はすべからく請求情報を登録してくださいね」 嘘でしょ?!なんか詐欺メールみたい。(本物です。) Google公式ブログ 詳しいことはこちらの記事が詳しいので、ご覧ください。 Google Maps APIが新しくなる!Google Maps Platformの料金体系と必要な設定変更 よくわからないので無料説明会に行ってみた。 弊社が扱う案件は、お客様のサイトの制作上必要なアクセスページだとか、店舗の検索だとかが主である
可視範囲になってから表示されたり動いたり、スクロールに応じてアニメーションさせる方法を紹介します。動きをつけて目を引くことで、効果的に伝えることができるかもしれません。 以前、「jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる|Webpark」という記事で同じようなものを紹介したのですが、デモが気に入っていない、アニメーションが1度きりということで作り変えました。 まずはサンプルをご覧ください。スクロールするとアイコンとテキストが順番にフェードインします。 このサンプルで使われている、画面いっぱいに表示する方法と、上にスクロールしたときに現れるメニューは以前紹介しています。気になる方はどうぞ。 画面サイズに合わせて高さを指定する3つの方法|Webpark jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー|Webpark とい
※当サイトは、アフィリエイト広告を利用しています 2022/11/02 【コピペOK】Sassで簡単にメディアクエリを使用する方法 プログラミング Sassは簡単にスタイルを記述できる便利なものって思ってませんか?、、、間違ってはいませんがその認識だけじゃ勿体ない、Sassの真価を体感できるのはメディアクエリを使った時です。 目次【本記事の内容】 [ click ] 1.Sassで便利なメディアクエリの書き方【コピペOK】 ①:変数とミックスインで定義 ②:実際に使用してみる 2.まとめ Sassで便利なメディアクエリの書き方【コピペOK】 CSSでメディアクエリを指定するのってめんどくさいですよね、たくさん作ると管理も大変だし、工夫してまとめるにしても少し手間がかかるので正直だるいです。 そこで、これから紹介するSass式メディアクエリを使えば、コード量もグッと減り、width指定も一括
スポンサードリンク EC CUBE 久々にECCUBEをいじったのですけど 結構忘れちゃってます。 今回お問い合わせページを追加したので 忘れないように覚書を残しておきます。 スポンサードリンク 1.既存のお問い合わせファイルをコピーしてファイルを作成 ※今回は見積もりページを作ります。(名前はmitsumoriとしてます。名前は別の名前でも構いません) 見積もり問い合わせ入力ページ用 ・html/contact/index.php をコピーして、html/contact/mitsumori.php を作成 ・data/class_extends/page_extends/contact/LC_Page_Contact_Ex.php をコピーして、 data/class_extends/page_extends/contact/LC_Page_Contact_Mitsumori_Ex.ph
Overview Velocity is an animation engine with the same API as jQuery's $.animate(). It works with and without jQuery. It's incredibly fast, and it features color animation, transforms, loops, easings, SVG support, and scrolling. It is the best of jQuery and CSS transitions combined. Download Download Velocity, include it on your page, and replace all instances of jQuery's $.animate() with $.veloci
HTML 5.2のそれぞれの要素が入れ子にできる「子要素」、包含されることが可能な「親要素」の一覧のルールを視覚化して表示します。 ※1 a要素の親要素が包含可能であること※1 audio要素の親要素が包含可能であること※1 canvas要素の親要素が包含可能であること※1 del要素の親要素が包含可能であること※1 ins要素の親要素が包含可能であること子要素省略※1 map要素の親要素が包含可能であること※1 noscript要素の親要素が包含可能であること かつ body要素の子孫であること子要素省略※1 video要素の親要素が包含可能であること ルート要素&文書メタデータ html 親 子 head 親 子 title 親 子 base 親 子 link 親 子※HTML 5.2から可能。フレージングコンテンツが期待される場所※head要素の子孫であること meta 親 子※he
はじめに 今やレスポンシブ対応は、要件としてデフォルトで求められるケースも増えてきました。きちんと作ろうとすると結構手間が掛かりますよね。。。 ちょうど機会があり、色々と調べていたら知らなかったことも多く、私の脳みそのメジャーバージョンがアップデートされました。今回、その中でも「これは覚えておきたい!」と思ったことをまとめてみました。何かの参考にでもなれば幸いです。 実際に使うかどうかはさておき、こういったものがあるのかと知っておくだけでも役に立つかもしれません。知っているものばっかりだったらゴメンネ 目次 html編 htmlのみで「使用するメディアの切り替え」方法を知る css編 フォントサイズremという単位を知る メディアクエリにpx指定したときの動作を知る viewportの単位: vw, vh, vmin, vmaxを知る javaScript編 ブレークポイントの設定方法を
PCであればxxx_pc.png、SPであればxxx_sp.pngを表示する。 用意するもの xxx_pc.png PCで表示する画像 xxx_sp.png SPで表示する画像) blank.png 1px・1pxのダミー画像。 最初に読み込ませページが重くなるのを防ぐ。 HTML <img src="blank.png" alt="xxx" data-src="xxx.png" class="switch-img"> src属性 blank.pngを指定。 data-src属性 _pc/_spを除いたファイル名を指定。 ex) lead_txt_pc.pngとlead_txt_sp.pngを準備してるならlead_txt.pngと指定。 JavaScript 要jQuery。 (function() { var breakPoint = 768 - 1; // ブレイクポイント。これ以下
cssだとメディアクエリーを使うことで、デバイス毎にcssを分離出来るから便利だったり。 けどjsにはそんな都合がよいものはないわけで、じゃあどうするかって考えると、 $(window).width()で条件分岐してあげるって考えるけど、 画面サイズが変わった場合って考えると$(window).resize()を使う事になるんだけど、 resizeはwindowサイズが変わるたびにイベント発火するし、 そもそもwindowsサイズが変わらなかったら発火できないからイベントを付与する前に発火を一度しないといけない。 まぁそこら辺考えると面倒だし、そもそも640pxみたいに指定した大きさで発火してほしいんだけど、 それに対応するにはwindow.matchMedia()を使うと対応する事が出来る。 ということで今日はそのwindow.matchMedia()の使い方についてをば。 $(docu
レスポンシブなページを作っていると、JavaScriptもPC向けとスマホ・タブレット向けで動作を分けたいという事はよくあります。 JavaScriptでレスポンシブ対応させるとしたら以下のような方法があるかと思います。 jQuery(window).width() の値から判定 window.innerWidth の値から判定 window.matchMedia で判定 あと、ここでは Internet Explorer 8 以下に関してはないものとして扱います。 それぞれの動作を見てみる それぞれにメリット/デメリットがあるのは世の常です。 jQuery(window).width() の値から判定 はっきり言うとこの方法はダメです。何がダメかというと、jQuery(window).width() はスクロールバーを含めないウィンドウの横幅になるからです。 CSSのメディアクエリの m
画像は使用せずにCSSだけでスタイリングしたタイトル(見出し)のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。 全体的にすごく手間がかかっているようなものはないのですが、似たようなタイトルデザインを使う場合はCSSコピペで実装できると思います。 また、一部複数行に向かないものもありますが、基本的には複数行のタイトルでも見栄えが崩れない感じのものになっており、余白やカラーなどを調整することでデザインを変更するのも容易です。 以下で紹介している内容は一部異なるものもありますが、基本的に下記のようなシンプルなHTMLを使用しています。 ただ、一部異なるものといってもいずれもspan要素を1つ追記する程度です。
WordPressでカテゴリやタグ、カスタムフィールドを検索対象に追加したり、Ajaxによるリアルタイム検索機能を実装するなど、検索機能を強化できるおすすめの検索プラグインを紹介します。 1. カテゴリー、タグ、カスタムフィールドなどあら項目を検索できる「Search Everything」 Search Everythingはカテゴリー、タグ、カスタムフィールドなど、WordPressのあらゆる項目を検索できるプラグインです。 通常の検索対象のタイトル、本文に加えて、抜粋、カスタムフィールド、カテゴリー、タグ、カスタムタクソノミー、コメントなどの項目を検索することができます。 使い方 2. 管理画面で画像を代替テキスト(alt)で検索することができるプラグイン「Enhanced Media Library」 Enhanced Media Libraryは管理画面で画像を代替テキスト(al
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く