フォーム機能を利用している場合に、期間限定の応募フォームである日時になったら受付を停止したいセミナーの募集人数は１０人なので定員一杯になったら自動的に停止したいといったケースがあると思います。今回追加された機能を利用すると上記どちらも実現が可能ですので、具体的な方法についてご紹介します！

MovableType.net はサービス型CMSということもあり、Web担当者にもWeb制作者にもメリットがあります。今回は導入事例を中心にご紹介していきます。例えば以下の事例にあるように、制作者の開発期間の短縮することができる、納品後の運用負荷を軽減しその分コンテンツに集中する、といったことが可能です。ロケットスタートホールディングスが MovableType.net を使う理由 以下の事例では選んで頂いたポイントの一つとして「利用者がPCが苦手な場合もあるので管理画面の使いやすさは重要」という部分があります。ヒューマンブリッジ株式会社- MovableType.net 導入事例管理画面の各機能については、サービス開始してからも使いやすくなるように日々改善しているので、嬉しく思います。運用面でのセキュリティ対策や支払い、規約など企業利用に適しているということで採用いただいたケースもあります。東京海上日動メディカルサービスが MovableType.net を使う理由また、事例でもいくつかご紹介させていただいていますが、先日All Home Page 株式会社様が MovableType.net の紹介記事を書いて下さいました。もっと使おう！MovableType.net　ーMovable Typeアドベントカレンダー１２月４日の記事ですー | MtoM・Move up to MovableType.net　ムーブアップ（サイト引越し）サービス　古いウェブサイトをMovableType.netへお引越ししよう！All Home Page 株式会社様では実際に何件も MovableType.net をご利用いただいており、実際の利用者様ならではの感想をつづっていただいているので、現在 MovableType.net のご利用を迷われている方、すでにご利用いただいている方も、ぜひ一度ご覧ください。 より便利に活用できる方法が見つかるかもしれません。以上導入事例からいくつかご紹介させていただきましたが、ご利用いただいているお客様の声は他にも以下に掲載されていますので是非ご覧いただければと思います。MovableType.net 導入事例

様々な言語環境からMovableType.netの情報の取得や更新が行えるDataAPIを公開しましたが、今回はiOSの写真アプリから直接アイテムに画像をアップロードする方法を紹介します。いつも写真をiPhoneで撮るんだけど、記事はPCでガッツリ書きたい。でも画像をPCに読み込んでアップして、、だと面倒だなぁ、、、といった場合に効率よく書くことができるようになります！事前にDataAPIを有効にして、利用するユーザーのパスワードの設定等が必要です。詳しくは以下のマニュアルをご覧ください。Data APIを利用する - マニュアル | MovableType.net iOSのショートカットアプリをダウンロードしておくまず、iPhone（iOS）のショートカットアプリをインストールしておきます。‎「ショートカット」をApp Storeでショートカットアプリのインストールショートカットアプリのインストールは以下にアクセスして行います。MTへ画像をアップロードショートカットを入手をクリックし、ショートカットアプリで開きます。ショートカットを取得ボタンを押すと、DataAPIのエンドポイントの指定が表示されます。URLのhttps://example.comの部分を自分のサイトのドメインに変更します。次に認証情報の2項目をクリックし、DataAPIで指定されたユーザ名とWebサービスパスワードを入力します。完了すればショートカットアプリとして登録されます。写真アプリから画像をアイテムに登録する写真アプリを開き、特定の画像を開くもしくは選択から複数の画像を選び、左下のボタンを押します。一番下の段にショートカットがあるので（なければ右端のその他を開き、ショートカットをオンにする）、それを選択します。MTへ画像をアップロードを実行します。途中でどのブログにアップロードするかを選択する画面が表示されるので、投稿先を選択します。自動的に指定したブログのアイテムに追加されます。という感じで、一度設定してしまえば後は写真アプリから直接アイテムへ画像をアップロードできるようになります。是非サイト運用にご活用ください！

例えば商品を色々とサイトに掲載している場合、この商品について問い合わせるといったボタンを用意し、問い合わせフォームに誘導したいことがあるかと思います。今回は特定の商品ページから遷移すると、フォームの1行テキストの項目に商品名が自動で挿入され、フォームの項目として送信できるようにする、という方法を以下のマニュアルを元にご紹介します。フォームの項目の値をJavaScriptで指定する - マニュアル | MovableType.netフォームの作成まずフォームを作成するのですが、今回の項目は以下になります。商品名（1行テキストの閲覧のみの状態で表示）お名前メールアドレス内容（複数行テキスト）ポイントは、最初の商品名の部分を1行テキストを利用し項目名を商品名に変更、表示モードを閲覧のみの状態で表示を選びます。フォームのページを作成しフォームとscriptを設置次にウェブページ等でお問い合わせページを作成し、先程のフォームiframeのソース貼り付け、以下のファイルをファイルマネージャー等でアップロードし、読み込み用のリンクを貼ります。 form-param.jsをダウンロード 上記ファイルのポイントは、var names = ["商品名"];の商品名が先程1行テキストで設定した項目名と同じになっているところです。各商品ページにお問い合わせページへ誘導するリンクを作成するお問い合わせページへ遷移する場合に、以下のようにURLの後ろに項目名と値を入力すると、フォームのページでその項目の値がセットされるようになります。http://example.movabletype.io/contact.html?項目名=値今回は商品名が記事タイトルになっているので、記事のテンプレートで自動的に項目の値部分を入力できるようにしてみました。a href="$mt:BlogURL$inquiry.html?商品名=$mt:EntryTitle encode_html="1"$"button class="item__button"span商品について問い合わせる/span/button/a実際の表示結果は以下のようになり、このページから遷移すると、フォームでは以下のように表示されます。商品名の部分は編集不可状態になっているので、このままお問い合わせを送信すると商品名の項目としてマカロンが入った状態で受け付けることができます。今回はURLの指定を自動的にできるボタンにしてみましたが、もちろん手動で記述し記事内にリンクを張っても大丈夫です。フォームの項目の値を指定する方法は様々な運用で使えますので是非お試しください！

Webサービス同士を連携させるIFTTT(イフト)を利用できる、IFTTT Webhooks 機能を公開しました。IFTTT Webhooks 機能は各ブログ毎に設定でき、設定をすれば以下の状態の変更の場合に自動的にリクエストを送信します。記事の公開などのステータス変更（差し替え版も含む）ウェブページの公開などのステータス変更（差し替え版も含む）記事・ウェブページのワークフロー時のステータス変更詳細のリクエストの種類と送信されるデータについては以下のマニュアルも参照してください。IFTTT Webhooks 機能今回は、記事が公開された時にビジネスチャットアプリSlackの指定したチャンネルに投稿する、という設定方法を紹介します。「社内のコミュニケーションツールでSlackが使われているんだけど、自社のニュースやクライアントのサイトの記事公開など自動で通知してくれたらいいなぁ。。」といった場合に非常に便利です！IFTTTのAppletを作成するIFTTTでアカウントを作成し、My AppletsのページのNew Appletを作成します。次に＋thisを選択トリガーとなるサービスを選ぶ画面が表示されるので Webhooks と入力し選択します。Receive a web request というボックスが表示されているのでクリックします。今回は記事の公開時をトリガーにしたいので、イベント名をpost_releaseにします。その他のイベント名はマニュアルを御覧ください。続いて、＋that を選択します。アクションを実行するサービスを選択する画面が表示されるので Slackと検索して選択します。Connect ボタンを押すとslackにサインインする画面が表示されるので、サインインしてAuthorizeします。続いて、Slackでのアクションを設定するので、Post to Channelのページへ移動します。今回は特定のChannelに送信するので、Channelsを選択し送信したいチャンネルを選びます。送信されるイベントは共通で以下になるので、value1: 記事タイトル（なければ空白）value2: 記事概要（なければ空白）value3: 記事が公開状態の場合は公開URL、未公開の場合はプレビューURLMessageとTitleを以下のように設定しました。Create Action ボタンを押すと以下の画面が表示されるので、アプリの名前を設定しFinishボタンを押します。これでアプリの作成は完了です。その後、Webhooks のページに移動しDocumentationのページに移動するとAPIキーが表示されているので、このキーをコピーします。MovableType.net 側の設定管理画面の設定したいウェブサイトもしくはブログの、設定＞Webサービス の IFTTT Webhooks の設定を有効にして、先程コピーしたAPIキーを設定します。以上で、指定したブログで記事が公開されたタイミングで以下のようにSlackのChannelに通知されるようになります。是非、運用効率化に利用してください！

スタンダードプラン以上では、更新情報をタイムリーに閲覧者に届けるWebプッシュ通知機能が利用でき、実際に自分で導入する方法は以下になります。ウェブサイトにWebプッシュ通知の購読機能を持たせる上記方法の場合、設置したブログを対象に購読することになりますが、カスタマイズをすると特定のブログの購読やウェブサイト配下のすべてのブログを登録することができます。特定のブログを指定する方法a href="javascript:void(0)" class="webpush" onclick="MT.PushNotification.openSubscriptionModal({rootDir: 'blog'})" section class="side-webpush"Webプッシュ通知の購読/section/a特定のブログを１つ指定する場合は、上記のソースで購読ボタンを設置し rootDir: 'blog' のblogの部分を指定したいブログのフォルダ名を記述します。例えば、example.com/staffblog/といったようにウェブサイトの配下にスタッフブログを作ったけど、トップページなどのウェブサイト上でも購読させたい、といった場合に利用できます。ウェブサイトも含む配下のブログでオンになっているブログをすべて購読させる方法対象が１つであれば上記のようにシンプルに対応が可能でしたが、ウェブサイトも含む配下のブログもまとめて購読する、という場合には少々追加コードが必要になります。ただ、これが実現できれば閲覧者は１度購読するだけでそのサイト内のWebプッシュ通知を利用しているすべての更新情報を受け取ることができるようになるので便利です。まずは購読ボタンの方のソースコードは以下になります。a href="javascript:void(0)" class="webpush" onclick="MT.PushNotification.openSubscriptionModal({rootDir:'/'})" spanWebプッシュ通知の購読/span/aこちらも rootDir:'/'といったように指定するのがポイントです。続いて、必要なスクリプトを出力させるmt:ServiceWorkerSnippetにもその下に追加で以下のスクリプトを追加します。$mt:ServiceWorkerSnippet pn_auto_spawn="0"$script id="subscribe-all-blogs" data-blog-dirs='mt:Blogsmt:If tag="PushNotificationEnabled"mt:BlogDirname,/mt:If/mt:Blogs'if (MT.PushNotification.isSupportEnvironment()) { MT.PushNotification.ready.then(function() { var service = MT.PushNotification.PushNotificationService.getInstance(); var siteUrl = (function() { var aElement = document.createElement("a"); aElement.href = "/"; return aElement.href; })(); service.on("scriptionstatuschange", function(data) { if (!(siteUrl in data)) { return; } var siteIsSubscribed = data[siteUrl]; document .getElementById("subscribe-all-blogs") .dataset["blogDirs"].slice(0, -1) .split(",") .forEach(function(dir) { MT.PushNotification.isSubscribed({ rootDir: dir }).then(function( blogIsSubscribed ) { if (siteIsSubscribed !blogIsSubscribed) { service.subscribe({ rootDir: dir }); } else if (!siteIsSubscribed blogIsSubscribed) { service.unsubscribe({ rootDir: dir }); } }); }); }); });}/script上記により、Webプッシュ通知がオンになっているブログすべてをまとめて購読させることができます。※購読は裏側で１つ１つ行っているため購読ブログ数が多い場合は、登録に時間がかかる場合があります。極端に多い場合はブラウザを閉じないようメッセージ等を表示してください。以上、タイムリーな情報発信に便利なWebプッシュ通知機能、ぜひご活用ください。Webプッシュ通知を利用する - マニュアル | MovableType.net

MovableType.net フォームのリリースに合わせて、フォーム機能を強化しました。今まではフォームの受付データにアクセスできるのは、サイト管理者以上の権限を持たないといけませんでしたが、特定のフォームの受付データを特定のメンバーに閲覧させることができるようになりました。まず、受付データを閲覧できるようにするには、ウェブサイトに対してなんらかの権限を持っている必要があります。すでにウェブサイトに権限を持っているメンバーであれば、権限を設定することで閲覧できるようになります。今回、フォームの受付データにのみアクセスさせるケースも対応できるように、「参加者」というメンバー権限を追加しました。「参加者」権限を持つメンバーを追加する方法初めて招待するメンバーを「参加者」にするフォームを設置しているウェブサイトの左サイドバーにある [メンバー] - [新規] をクリックし受付データを見せたいメンバーを「参加者」権限で招待する[フォーム] - [一覧] から受付データを見せたいフォームを選択するフォームを選んだら「基本設定」タブの「データの保存」項目で「サービス上に保存」を選択する「＋データ閲覧者の追加・編集」リンクをクリックし受付データを見せたい「参加者」を選択して [完了] ボタンをクリックする[保存] ボタンをクリックするブログだけに招待されているメンバーを「参加者」にするウェブサイトに権限を持っているメンバーであればすぐ追加が可能ですが、配下のブログのみに権限を持っているメンバーの場合は以下の手順で設定することができます。フォームを設置しているウェブサイトの左サイドバーにある [メンバー] - [一覧] をクリックする招待済みのメンバーでブログにだけ招待されているメンバーのアカウント権限（「なし」のリンク）をクリックする権限を「なし」から「参加者」に変更し [変更を保存] ボタンをクリックする[フォーム] - [一覧] から受付データを見せたいフォームを選択するフォームを選んだら「基本設定」タブの「データの保存」項目で「サービス上に保存」を選択する「＋データ閲覧者の追加・編集」リンクをクリックし受付データを見せたい「参加者」を選択して [完了] ボタンをクリックする[保存] ボタンをクリックする以上で、任意のメンバーにだけ受付データを見せることができます。ブログの管理や運営と収集したデータの集計等が別担当者の場合などにお役立てください。

先日、カスタムフィールドに新たなシステムオブジェクト、「メンバー」が追加されました。このカスタムフィールドを作成すると、メンバーのユーザー情報にフィールドが追加されます。SNSのURLや、プロフィール文など、独自でユーザー情報を追加できるようになりますよ。例えば、ブログやメディアサイトなどで執筆メンバーが複数いる場合に「各執筆者のサイトやSNSを表示させたい！」という場合にこのフィールドが有効です。今回はテーマ「Owned Media」上で「メンバー」のカスタムフィールドを活用して、記事の終わりにユーザ情報を表示させるカスタマイズをしてみましょう！サンプルコードも紹介しているので是非一緒に試してみてください。

いつもご利用いただきありがとうございます。プロダクトマネージャーの早瀬です。先日、以下のニュースで限定公開でパスワード認証を追加したことをお知らせしていますが、限定公開の認証方法にパスワード認証を追加しました | MovableType.net今回はこの機能をどのようなケースで使うか？など具体例を混じえて詳しく解説していきます！限定公開にする理由閲覧ページを限定公開する理由は何でしょうか？ MovableType.net の運用においては大きく２つあると考えられます。開発中に外部に見られたくないのでパスワードをかける簡易的な会員向けコンテンツをパスワードをかけて運用する１に関しては、開発中ということで従来のベーシック認証による共通のユーザー名とパスワードで、ウェブサイト全体にかけて運用する、ということがよくあります。２に関しては、特定のページ配下にパスワードをかけて例えば会員専用として運用する、といったケースがあります。例えば、MovableType.net ではブログ単位で限定公開ができるので、会員向けコンテンツ専用のブログを作って、メニューに入り口を作るなど運用します。

こんにちは、デザイン担当のsaoriです。今回は既存のベーステーマをカスタマイズし、ギャラリーサイトを作ってみました！１からテーマカスタマイズをするよりも簡単＆時短で完成できますよ。デモサイト（例１）イラストギャラリー（例２）フォトギャラリー元にしたテーマは「One Page」です。メインページに大きめのビジュアルと記事の一覧を表示させ、たくさんの画像を見せるのに適したサイトになりました。運用しやすいカスタムフィールドを用意しており、記事ページから画像を投稿することで簡単にギャラリーサイトが作れます。 もちろん、写真やイラスト以外にもポートフォリオサイトにもオススメです。今回用意した２つのデモサイトは同じ構造のテンプレートのテーマを、配色やアイコンを変更して作成しています。デザインなどは公開する作品のテイストに合わせて変更してみるのもオススメです。今回は、どんなカスタマイズをしたか？ MovableType.netの機能についてを解説していきます。 この記事の最後から実際に使えるサンプルテーマもダウンロードできます。

今日はWebプッシュ通知*からの流入をGoogleアナリティクスで計測する方法をご紹介します。MovableType.net は、スタンダードプラン以上で「Webプッシュ通知機能」をご利用いただけます。*Webプッシュ通知通知登録を行ったサイト訪問者に、任意のタイミングで更新のお知らせやイベント告知のリマインドなどを送ることができます。ネイティブアプリケーションを準備することなく、興味関心の高いユーザーに情報を素早く届けられることから、現在多くの企業サイトやメディアサイトで導入が進んでいます。手順は、1）MovableType.net で通知する際に行うこと2）Googleアナリティクスで確認する方法に分けて説明します。1）MovableType.net で通知する際に行うことWebプッシュ通知を利用するための基本設定はマニュアル「Webプッシュ通知を利用する」をご覧ください。この基本設定が完了している前提で以下ご説明します。MovableType.net で記事（またはウェブページ）を公開する記事編集画面の［記事の操作］から［通知する］をクリック通知のモーダルが開いたら、URLの後ろにGoogleアナリティクスのキャンペーンパラメータを入れる。カスタム キャンペーンのパラメータの付け方パラメータの付け方は、管理しているサイトごとに独自のルールがあると思いますので、今からご紹介するのは一例です。私は以下のように作成しました。======https://theme.movabletype.net/ownedmedia/diary/ownedmedia.html?utm_source=mtnetblog-pushutm_medium=pushutm_campaign=mtnetblog180613======構造としては、https://theme.movabletype.net/ownedmedia/diary/ownedmedia.htmlシェアする記事のURL?URLの後ろ、パラメータの前には必ず「?」を入れます。utm_source=mtnetblog-pushutm_sourceで指定した値は、Googleアナリティクス上では「参照元」になります。シンプルに「push」としてもいいかもしれませんが、例えばニュースと社員ブログそれぞれにWebプッシュ通知を設定している（別々のウェブアプリ マニフェストを準備している）場合などは、区別できた方がいいので「mtnetblog-push」としました。utm_medium=pushメディアは「push」としました。もし「social」にするとGoogleアナリティクス上で、FacebookやTwitterとチャネルが一緒になって表示されます。私は、Webプッシュ通知からの流入だけを分けたいので「push」にしました。（チャネル定義は大文字と小文字を区別するので「push」と決めたら「Push」や「PUSH」などは使わず、「push」に統一します。）※mediumを「push」にした場合の、Googleアナリティクスで計測するときの話を少し補足しておきます。デフォルトのチャネルグループ（Googleアナリティクス の集客サマリーの中は、チャネルによってトラフィックがOrganic Search、Direct、Email など10種類ほどに分類されますよね。）に「push」は無いので、なにもしないと、pushは「Other （その他の流入）」に分類されます。Other の中を掘っていくと、参照元が一覧で確認できるので、「mtnetblog-push」から流入数を確認することはできますが、「push」専用のチャネルが欲しいという場合は「カスタムチャネルグループ」を作成することで実現できます。作成方法はGoogle公式のチャネルグループについて＞カスタム チャネル グループを作成するをご覧ください。作成すると円グラフでも確認しやすくなるので、流入元の分析を重視される場合は、設定されることをオススメします。▲「web push notification」が追加で作成したカスタムチャネルグループです。utm_campaign=mtnetblog180613campaignは、いつ送ったどの通知なのか識別できるように付与します。個人的には配信した日付を入れる運用が、フォーマットを統一しやすいので楽かなと思います。複数人で運用している場合に、配信する人と分析する人がちがっても、わかりやすいこととか大事ですよね。あとは日付だけだと、Googleアナリティクス上でキャンペーンを一覧したときに、メルマガなどと区別がつきにくくなるので、メディア名も入れています。（入れなくても参照元でセグメントすると区別できるのですが、直近のキャンペーンの反応を知りたいときに多分のちのち役立ちます。）【+α】パラメータの決まっている部分をデフォルトで入れるようにする通知する際のURLは、通知テンプレートで型を登録しておくことができます。カスタムパラメータを毎度1から設定するのはやや面倒なので、登録しておくことをオススメします。［設定］＞［Webサービス］の中のWebプッシュ通知、通知テンプレート＞URLで登録します。例えば、私は以下のように入れました。======$mt:EntryPermalink$?utm_source=mtnetblog-pushutm_medium=pushutm_campaign=mtnetblog$MTDate format="%y%m%d"$======$mt:EntryPermalink$は、記事のURLを出力するMTタグです。$MTDate format="%y%m%d"$は、日付を出力するMTタグです。"%y%m%d"は、2ケタの年、2ケタの月、2ケタの日をもってきて欲しいという記述なので、2018年6月18日だと、180618と出力されます。通知テンプレートに上記のようなものを用意しておくと、記事編集画面から、通知するモーダルを開いたときにはデフォルトで以下のように出力されます。======https://theme.movabletype.net/ownedmedia/diary/ownedmedia.html?utm_source=mtnetblog-pushutm_medium=pushutm_campaign=mtnetblog180618======campaignは日付ではなく、毎回違った文字列を入れて区別するという場合は、utm_campaign=までテンプレートに記述しておいて、通知する際に「=」の後ろを編集する方法で対応できます。2）Googleアナリティクスで確認する方法カスタムパラメータで、参照元・メディア・キャンペーンを指定しているので、基本的にそれらが確認できる『集客』で分析する形になります。細かい見方は、medium=を何にしているかにもよって異なるのでざっくりとになりますが、個人的には「先週送ったWebプッシュ通知にどれくらい反応があったか」を見たい場合は、集客＞キャンペーン＞すべてのキャンペーン、を確認するとわかりやすいです。（テスト用に新規でビューを作成したばかりなので、数字が少なくてすみません。）キャンペーン名の先頭が「mtnetblog」になっているのがWebプッシュのキャンペーンです。ちなみにmmmtnetは、メールマガジンからの経由の数字。先ほどもちょっと触れましたが、こうやって色んな種類のキャンペーンが並ぶことを想定して「utm_campaign=」は設定した方がいいですね。参照元（utm_source=）別に数字を確認したいときは、表のタブを切り替えると確認できます。これくらい確認できれば、基本的なWebプッシュの効果は測定できるかと思います。集客チャネルで見たときに、「全体の中でWebプッシュ通知経由の流入がどれくらいの割合を占めているか確認しやすくしたい」という場合は、先ほどもご紹介した、カスタムチャネルグループを作成する方法をお試しください。Webプッシュ通知からの流入を計測する方法は以上になります。

先日、スタンダードプラン以上で利用できる新機能として更新情報をタイムリーに閲覧者に届けることのできる、Webプッシュ通知機能を公開しましたが、既存のサイトに購読機能を追加する方法をご紹介します！※Webプッシュ機能を利用するには閲覧ページのHTTPSが有効になっている必要があります。今回はPublic Organizationをベースにしたサイトを例にします。マニフェストファイルの設定まず、ホーム画面に登録する場合などの設定などが記載されたマニフェストファイルの設定の中の以下の項目を[設定]＞[全般]から行います。ショートネーム：ホーム画面に登録された際に表示される名前アイコン：ホーム画面に登録された場合に表示されるアイコン。購読や通知画面にも利用される。マニフェストファイルのテンプレートへの出力作成されたマニュフェストファイルは$mt:ManifestLink$タグで出力されるので、Public Organizationテーマでは全ページのheadタグの終わりの前に挿入されるheader-scriptモジュールの最後に入れます。実際の出力は以下のようにされます。link rel="manifest" href="https://example.com/.app/manifest.json"Webプッシュ通知の設定次に、[設定][Webサービス]からWebプッシュ通知の設定をします。有効にチェックを入れ、実際に通知する際に表示される（通知するときにテキストは編集できます）際のテンプレートと、閲覧者が購読する際に表示される購読用モーダルのテンプレートの設定をします。Webプッシュ通知に必要なスクリプトの挿入通知の購読を実現するために必要なスクリプトを出力する$mt:ServiceWorkerSnippet$タグを挿入します。このタグは、bodyの終了タグの直前に入れるのが望ましいのでfooter-scprtモジュールの一番下に挿入します。今回は自動で登録モーダルが表示されないように、モディファイアをつけて$mt:ServiceWorkerSnippet pn_auto_spawn="0"$ という記述にします。購読・解除のためのボタンを設置上記で登録モーダルの自動表示はさせないようにしたので、モーダル表示用のボタンを設置します。まず、今回はサイドバーのインフォメーションに表示したいので、以下のソースをinformationモジュールに記述します。div a href="javascript:void(0)" class="webpush" onclick="MT.PushNotification.openSubscriptionModal()" section class="side-webpush"Webプッシュ通知の購読/section /a /div次に以下のCSSをスタイルシートに追加します。/* ------------------------------------------ webpush------------------------------------------ */.webpush {display: none;}.mtnet-push-notification-service-enabled .webpush { display: block;}.side-webpush { width: 100%; text-align: center; display: inline-block; padding: 15px 15px 15px 52px; position: relative; background-color: $mt:Var name='main_color'$; color: #ffffff;}.side-webpush::before { position: absolute; content: "\f0f3"; z-index: auto; left: 2rem; top: 12px; font-size: 1.25rem; font-family: FontAwesome;}ボタンのCSSに関しては対応していないブラウザの場合は表示されないように基本的には非表示にしてあり、対応している場合はbodyタグのクラスに.mtnet-push-notification-service-enabledというクラスが追加されるので表示される、という仕組みを入れています。その他詳しい条件等はマニュアルをご覧ください。ボタンの色とテキストの色は、以下のbackground-colorとcolorでサイトにあわせて変更してください。以上でウェブサイトにWebプッシュ通知の購読機能を持たせることができました。他のテーマをベースにしていても基本的な部分は同じですので、是非ご利用いただければと思います！