アイコンをクリックすると、パスワードの表示と非表示を切り替える表現が当たり前の様に使われていますが、今回はそれを簡単にjQueryで実装する方法をお伝えしたいと思います。 DEMOはこちら 実装方法 以下のHTMLとCSS、jQueryを用意します。 HTML <div class="input-wrap"> <input type="password" name="password"> <i class="toggle-pass fa fa-eye-slash"></i> </div> CSS .input-wrap{ position: relative; } .toggle-pass{ position:absolute; top:50%; right: 10px; transform: translateY(-50%); } jQuery $(function() { $('.to

新しくサービスを立ち上げた際、開発・運用コストがかさみやすいポイントの１つが「料金表」です。 「Stripeなどの決済サービスに登録した料金情報を利用して実装する」か、「個別にCMSへデータを打ち込んで作成する」かetc... データを利用する場合は、APIレスポンスとデザインのつなぎこみやシステムの保守にコストが発生します。 そして個別にデータを入力した場合、価格改訂やプラン追加の設定・反映漏れによるトラブルが起きるリスクが生じます。 Stripeでは、シンプルな料金表を、専用のコードスニペットを埋め込むだけで実装・管理できる機能を提供しています。 Stripeの料金表機能 Stripeの提供するリダイレクト型決済機能のCheckoutと連携した、料金表をGUIで作ることができます。 見た目のカスタマイズや掲載する料金の追加・変更・削除がダッシュボードから行えますので、サイトやwebアプ

Stripeで継続課金中の商品（決済連携で登録した商品）の決済を停止・解約する場合の操作について、お問い合わせをいただくことがございますのでご案内いたします。 ※Stripeの仕様やデザインなどが変更された場合、説明の通りにできない事がございます。その際は、まずStripeにご連絡頂き、方法をご確認ください。 決済されたお客様側で解約してもらう方法 お客様側でキャンセルすることができるようにするには、以下の手順が必要となります。 手順１：まず、Stripeの管理画面にログインし、カスタマーポータルリンクを有効にする Stripeで操作 Stripeのカスタマーポータルページに移動してカスタマーポータルリンクを有効にします。 以下のように『有効』という表示になっていることをご確認ください。 手順２：顧客によるサブスクリプションのキャンセルを許可」を有効にする Stripeで操作 次に[設定

Information 2024.06.25 【導入インタビュー】発達サポートセンターといろ様 Information 2024.05.24 【機能紹介】BJJ-connect連携 Information 2024.05.13 【導入インタビュー】放課後児童クラブ コレマナ様

WordPressで会員限定のサイトを作る場合、プラグインを入れるだけで構築できてしまいますが、今回は、会員限定のサイトをプラグインなしで作ってみます。 当サイトでも使っているWordPressテーマ「SANGO」をベースにして作ってみたサンプルもあるので、併せて参考にしてみてください。

こんばんは、webエンジニアのゾノ( @ozonosho )です。 さて、今日のブログではWordPressでユーザー登録やログインをメールアドレスのみ（＝ユーザー名を不要）に変更する方法を紹介したいと思います。 今回は「半角英数字しか利用できないユーザー名はユーザーに表示したくない」という相談をいただいたので実装してみました。 ちなみに完成形のユーザー登録画面はこんな感じです。 たしかに最近のサービスってメールアドレスのみで登録できるのが普通なので、ユーザーIDみたいなものまでユーザーに設定させるのは嫌だなぁと僕も感じることがあります。 そんなわけでさっそく実装方法を見ていきましょう。 WordPressでユーザー登録やログインをメールアドレスのみ（＝ユーザー名を不要）に変更する方法 実装は簡単で、functions.phpに下記のコードを追加してください。 //メールアドレスのみでユー

こんにちは、Webエンジニアのゾノ( @ozonosho )です。 今回の記事ではWordPressで会員登録フォームを独自に実装する方法を紹介します。 会員制サイトを作る場合、サイト上からユーザーが自由に会員登録できる仕組みが必要になります。 WordPressには標準で会員登録フォームが備わっていますが、一般ユーザー向けに利用するにはあまりにダサいです。しかもメールアドレスだけでは登録できずWordPress独自の項目「ユーザー名（半角英数字）」の登録が必須となっているのでお世辞にも使い勝手が良いとは言えません。 ユーザーの立場で考えると、他の固定ページ同様にヘッダーやフッターが共通化されているページ上から会員登録できたり、そのサイトに合った項目（例：性別、ニックネームなど）を入力したうえで会員登録できるほうが親切でしょう。 そんなわけで、僕の運営するいくつかのサイトでは独自に会員登録

こんにちは、Webエンジニアのゾノ( @ozonosho )です。 今回の記事ではWordPressでログインフォームを独自に実装する方法を紹介します。 ユーザーが自由に会員登録できるサイトを作る場合、会員登録フォームやログインフォームが必要になります。 WordPressには標準で会員登録フォームやログインフォームが備わっていますが、一般ユーザー向けに利用するにはあまりにダサいです。また、WordPressのコアファイルなのでカスタマイズするにも限界があります。 一般ユーザーの立場で考えると、他の固定ページ同様にヘッダーやフッターが共通化されているページ上からログインや会員登録できたほうが混乱しなくて親切でしょう。 そんなわけで、僕の運営するいくつかのサイトでは独自にログインフォームを実装しています。 ▽実装例 ※実際のログインページはこちら 独自にログインフォームを実装すると下記のよう

WooCommerce の払戻処理に関して説明します。 WooCommerce の決済としては本家のグローバルパートナーである stripe を参考に画面説明は行います。 まずは、stripeでは、全体の「払い戻し」処理をしても、stripeと連携して払い戻し処理はされません。 stripe と連携して払い戻し処理をする場合は、必ず管理画面の注文編集の左下の「払戻額」にて行こなう必要があります。 また、 stripe で問題なく決済をされた場合は、注文メモにて「請求ID」が表示されます。 払戻を各商品ごとに行う まずは、払戻を商品ごともしくは、送料や手数料ごとに処理をします。一括して処理する方法もあります。 上の画像は、商品個数を入れて、払い戻しをした方法です。 各商品や送料や手数料ごとに払戻が出来る欄が出てきますので、そこに数を入れていく形です。 もしくは右下の方にある「払戻総額」に金額

はじめに 今回はCSSだけでタブ切り替えを作る方法をご紹介します。 最近はCSSの使い方次第でできることが非常に多くなっているので、タブ切り替えなどちょっと動きがあるものでもJavaScriptを使わず作ることが可能です。 今回作成していくもの まずは、今回作成していくデモをご紹介します。 今回作成していくデモはこちらです。 See the Pen CSS tabs by Ayaka Sasaki (@ayausaspirit) on CodePen. HTML解説 では、中身のソースコードを見て行きましょう。 まず、今回の全体のHTMLはこのようになっています。 <div class="tabs"> <input id="all" type="radio" name="tab_item" checked> <label class="tab_item" for="all">総合</lab

WordPressのタブ機能の実装と言えば、プラグイン「Shortcodes Ultimate」が有名ですが、少々デザインが古臭くて、オシャレなタブが作れればと思う方も少なくないでしょう。 そこで、下記のようなタブ切り替え機能をWordPressの記事内で実装する方法をご紹介します。コピペで誰でも作れますので、是非ご活用ください。 タブ1 タブ2 タブ3 コンテンツ1（タブ1） コンテンツ2（タブ2） コンテンツ3（タブ3） 基本のコード3つ 使うコードは以下の3つです。 <div class="tab-wrap"> <div class="tab-group"> <div class="tab is-active">タブ1</div> <div class="tab">タブ2</div> <div class="tab">タブ3</div> </div> <div class="pane

WordPressにログインしている時に上部に表示されるツールバー。便利なものではあるものの、サイト確認の際には非表示にしたい、もっと別の項目を追加したい、不要な項目だけ削除したい、といったこともあります。 そんな時に役立つ、表示・非表示変更や表示場所の移動・項目のカスタマイズなどツールバーのカスタマイズ方法のメモです。

Form<div id="pg-contact"> <p class="lead"> 当社へのお問い合わせは、以下のフォームへのご入力をお願いいたします。<br /> フォームに<strong>必要事項をすべて入力</strong>した後、<a href="/privacy-policy">個人情報保護方針</a>に同意の上、<br />送信ボタンを押してください。 </p> <div class="form-inner"> <div class="contact-form"> <div class="input-box"> <label class="label-area">お問い合わせ種類</label> <div class="input-area"> [radio _shuruibetsu default:1 "お問い合わせ" "事業に関する相談"] </div> </div> <

「Contact Form 7」はお問い合わせフォームが作成できる、WordPressの定番プラグインです。今回紹介する「Contact Form 7 Conditional Fields」は、Contact Form 7をカスタマイズして条件分岐を追記できるプラグインです。 例えば、お問い合わせフォームの中に設置された「資料の送付を希望しますか」という質問に「はい」と答えた場合のみ住所記入欄を表示する、といった使い方ができます。実用性が高めなフォームなので、ご利用の方は本稿の解説をご参考ください。 インストール方法 WordPressの管理画面から、「プラグイン」→「新規追加」と進み、「Contact Form 7 Conditional Fields」を検索します。もしくは、下記ボタンからダウンロードします。インストールしたら、有効化します。 プラグイン公式ページ 当然のことながら、こ

サイテーションとは SEOの文脈におけるサイテーションとは、外部サイトからの第三者による言及を意味します。リンクはあってもなくてもよく、単に話題として扱われるだけで機能し、自然検索における露出の機会と検索順位を向上します。言及の対象は、企業名、店舗名、ブランド名、製品名、ウェブサイト名、人物名などのエンティティです。 著名なサイトや著名な著者による言及は、言及対象のエンティティが高い注目度や信頼度を持っていることを証明し、一般の人々からの多数の言及（メンションと呼ばれることもあります）は言及対象のエンティティが高い知名度や話題性を持っていることを証明します。まとめると、サイテーションには次のようなSEO効果が期待できます。 信頼できる有力なニュースサイト上で言及されることは、言及の対象エンティティが注目に値する重要なものであることを証明します。 SNSやブログやディスカッションフォーラムな

Microsoft 365は、バージョン2008と、バージョン2105で動作確認しています。 解説記事内の画像はExcel 2019のものです。

WordPressの記事中にアドセンスを表示させたいケースは多いと思います。 プラグインを使わずに、特定のテンプレートを作ってアドセンスを自動で表示させるカスタマイズ方法の紹介です。 目次 別のテンプレートを作っておくメリットWordPressのカスタマイズをする際には、要素ごとにテンプレート（phpファイル）を分けておくと便利です。 その分テンプレートの数は多くなるのですが、 要素内の記述を別のテンプレートに書くことで、そのテンプレート自体はすっきり書くことができ、見やすいどこをいじったら良いかわかりやすく、カスタマイズがしやすい1行コードを書くことでテンプレートの使いまわしができるといったメリットがあります。 今回は、 アドセンスのコードを記載したテンプレート（ad-in-body.php）を別途用意し、記事中のh2見出しの前に表示させます。 なお、functions.phpを編集しま

PayPal＆Stripe Add-onでは、"|stripe"か"|paypal"という値が渡されているかどうかを調べて決済画面に移行するため、入力項目の種類やラベルの値はなんでもOKです。 例えば、必ずクレジットカード決済に移行するフォームの場合は、[hidden payment-select “paypal|paypal"]とフォーム内に設置しておけば必ずPayPal決済に移行します。 フォーム自体はカスタマイズが可能なので、自由に作成できますね。 お支払い方法を選択（または送信）するフォーム項目を作ったら、フォーム項目の名前(name)をPayPal&Stripeの設定タブのGateway Codeに設定します。 ③お支払いに関する説明は必ず記載するお支払いに移行するフォーム内で金額の記載や支払う取引の内容が記載されていないと、法律に触れる可能性が高いです。 フォームに移動する前の