MovableType.net では、ウェブサイト単位で管理画面へIPアドレスにを指定してアクセス制限をすることができます。IPアドレス制限（セキュリティ設定） - マニュアル | MovableType.netテレワークになって家で仕事しているんだけど、サイトは更新しなければいけないでも普段は会社からIPアドレスを制限してアクセスしてるから外からアクセスできないという場合でも安全に対応することが可能です！今回はそういったケースの具体的な利用方法についてご紹介します。アクセスを許可するIPアドレスを登録するIPアドレスを登録できるのは、サイト管理者以上の権限を持つ人になります。今回のケースでは、外部から投稿しようとしている人が管理者に自分のアクセス元のIPアドレスとどこからのアクセスかを伝えます。管理者はそれを元に、設定＞セキュリティの許可するIPアドレスにIPアドレスとメモ欄に誰のIPアドレスかを記述します。これにより、管理上不明なIPアドレスをなくすことができます。利用が終わったら不要なIPアドレスを削除して、安全に運用しましょう。また、サイト管理者には以下のような変更した人、追加されたIPアドレスが記載されたメールが飛ぶようになっているので、複数のサイト管理者で運用している場合でも誰が何をしたかを確認することができるので安心です。以上、セキュリティもしっかりと担保しつつ柔軟に運用ができる管理画面のIPアドレス制限、ぜひサイト運用にご活用ください。

この機能は、MovableType.net、MovableType.netフォームどちらもスタンダードプラン以上でご利用いただけます。フォーム機能では以下の項目を利用した場合に、条件によってその先の表示項目の表示非表示をコントロールできます。ドロップダウンリストラジオボタン今回は、ラジオボタンを利用して項目によってその配下の項目を変更する例をご紹介します。項目の設定では、今回はラジオボタンでセールスを選んだ場合とサポートを選んだ場合とで項目を変更してみます。セールスに必要な項目は以下です。お名前メールアドレス問い合わせの種類都道府県内容続いて、サポートに必要な項目は以下です。お名前メールアドレス対象のURLOS、ブラウザのバージョン情報内容まず、必要な項目をすべて以下のように揃えます。共通のものは１つで大丈夫です。続いて各項目の設定をしていきます。条件分岐のためのラジオボタンの設定問い合わせ先という項目名のラジオボタンを作成し、セールス、サポートを選べるようにします。表示条件は常に表示になります。その他共通項目の設定お名前、メールアドレス、内容は共通の項目になるので表示条件は常に表示になります。セールス用の項目の設定問い合わせの種類、貴社名、都道府県はセールス用の項目になるので、それぞれ表示条件で問い合わせ先を選択し、右側はセールスを選びます。サポート用の項目の設定対象のURL、OS、ブラウザのバージョン情報はサポート用の項目になるので、それぞれ表示条件で問い合わせ先を選択し、右側はサポートを選びます。以上で設定は完了です。実際のフォームでラジオボタンを選ぶことにより、その後の表示項目を変更することができます。あわせてメールの送信先を変更する場合は、以下の記事もご覧ください。ドロップダウンリストの項目によってフォームの送信先を変更する

この機能は、MovableType.net、MovableType.netフォームどちらもスタンダードプラン以上でご利用いただけます。フォーム機能では以下の項目を利用した場合に、条件によってメールの送信先を変更することができます。ドロップダウンリストラジオボタン今回は、ドロップダウンリストを利用して項目によって異なる部署へメールを送信する例をご紹介します。項目の設定まず、ドロップダウンリストの項目でラベルを問い合わせ先で作成し、オプションに以下を設定します。セールスマーケティングサポート実際の問い合わせ内容は、複数行テキストを利用しラベルを内容にしておきます。通知先メールアドレスの設定基本設定に移動し、通知先メールアドレスを追加します。入力欄を追加リンクをクリックするとメールアドレス設定欄が表示されるので、各部署のメールアドレスを設定します。それぞれ、全て送信すると書かれているドロップダウンリストをクリックすると、先程作成した項目の問い合わせ先が表示されているのでそれを選択します。右側には問い合わせ先で指定した項目が表示されるので、該当する項目をそれぞれ選択します。以上で選択した項目によってメールの送信先を変更する、ということが実現できます。是非ご活用ください。

フォーム機能では、カスタムスクリプトでフィールドの更新処理ができます。フォームのカスタムスクリプト（フィールド更新処理の仕様） - マニュアル | MovableType.net今回はその機能を利用して、記事の各ページの下に評価フォームを設置する方法をご紹介します。フォームの項目の作成まず、フォームの項目として以下を用意します。見出し（見出し）：ページの評価をお願いします。といったような文章評価（ラジオボタン）：1から5までの評価ご意見（複数行テキスト）：自由入力欄ページタイトル（１行テキスト）：表示モードを「フィールドを非表示」にするページURL（１行テキスト）：表示モードを「フィールドを非表示」にするポイントは、ページタイトルとページURLの項目は実際には表示されないように設定することです。フォームの設置とスクリプトの挿入フォームを設置するためのiframeのコードに追加して以下のスクリプトを追記します。scriptwindow.MTNetFormDataLayer = window.MTNetFormDataLayer || [];function MTNetForm(){MTNetFormDataLayer.push(arguments)};MTNetForm("updateValues", {'ページタイトル':'mt:EntryTitle','ページURL':'mt:EntryPermalink'});/script更新処理として '項目名':'実際の値'という指定の方法で値を入れられるので、非表示となっているページタイトルには記事のタイトルを、ページURLにはその記事のURLを自動で挿入できます。上記により評価フォームの見た目上には表示されませんが、送信された各ページのタイトルとURLを送信されるフォームのデータに含むことが可能です。以上、評価フォーム以外でも様々なことに利用できると思いますのでぜひご活用ください！

少し遅いですが、あけましておめでとうございます！2020年初となる新テーマ「Modern Corporate」を公開いたしました。「Stylish Corporate」以来、久しぶりのコーポレートサイト用テーマの登場となりました。今回のテーマでは必要な要素は押さえつつ、メインページの高解像度画像や大きめの余白、要素のコントラストといったデザイン面を強化し、ビジュアルからブランドイメージを伝えられるよう意識しています。機能や詳しい使い方は、テーママニュアルをご確認ください。ここでは「Modern Corporate」で出てくるちょっとしたデザインカスタマイズについてをQ＆A形式で紹介していきます。テンプレートを触るので難しく思われるかもしれませんが、いっしょにがんばってみましょう！

MovableType.net には現状記事などにタグをつける機能はありません。今回はサイト内検索を使い、タグによる記事一覧の表示を実現する方法をご紹介します！実際の動作は、記事の個別ページに表示されたタグをクリックすると、そのタグによる検索結果ページが表示される、というものになります。カスタムフィールドを作成するまず、タグを入力するためにカスタムフィールドを作成します。システムオブジェクトは記事を選び、タイプはテキスト、識別子はtagsにします。タグ検索結果ページの作成続いて、検索結果ページを作成します。デザイン＞テンプレートのインデックス・テンプレートで、タグ検索結果ページをtag-search.html というファイル名で作成し、検索結果を表示する部分に以下のようなソースを記述します。mt:SetVars blogid=$mt:BlogID$/mt:SetVars$mt:SiteSearchSnippet blog_ids="$blogid" search_result_container="s-result" storage_id="tag" fields="field:tags" query_key="tag" no_search_form="1"$div id="s-result"/divポイントは、以下になります。fields="field:tags": 検索の対象を先程作成したカスタムフィールドのtagsにしているno_search_form="1"：タグ検索結果ページには検索ボックスはいらないので非表示にしている指定できるモディファイアの詳細は以下もご覧ください。MTSiteSearchSnippet - タグリスト | MovableType.netまた、タグ検索とは別の通常の検索ボックスもページ内に設置している場合は、2つの検索ボックスが設置されることになるので以下の記事を参考にしてください。サイト内検索の検索ボックスを1ページ内に２つ設置する方法 - MovableType.net 活用ブログ記事にタグを表示する最後に記事の個別ページでタグを表示したい部分に、以下のコードを記述します。mt:If tag="CustomFieldValue" identifier="tags" div class="tags"タグ：div id="entry-tags"mt:CustomFieldValue identifier="tags" //div/div/mt:ifscript(function() { var e = document.querySelector("#entry-tags"); var f = document.createDocumentFragment(); e.textContent.split(/\s+/).forEach(function(t) { var a = document.createElement("a"); a.textContent = t; a.href = "/tag-search.html?tag=" + t; f.appendChild(a); }); e.innerHTML = ""; e.appendChild(f);})();/scriptこのコードでは、カスタムフィールドのタグの値を表示し、そのタグにタグ検索結果ページへのリンクを追加する、ということを行っています。以上で実装は完了です。後は、実際のカスタムフィールドで記述をすると、以下のようにページ内に表示され、タグをクリックすると検索結果が表示されます。その他のヒントその他運用を助ける機能として、サイト内検索機能では表記ゆれに対応することができます。タグの表記ゆれに対応することができますので、こちらもご利用ください。詳しくは以下の記事をご覧ください。サイト内検索機能：ユーザー辞書を使って表記ゆれに対応する方法 - MovableType.net 活用ブログタグ検索の結果で「とある記事を優先的に表示したい」ということも可能です。やり方は簡単で、優先的に表示したい記事・ウェブページのキーワード欄に、指定したいタグを追加するだけです。以上、記事にタグをつけて一覧で表示する方法、是非サイト運営でご活用いただければと思います！

MovableType.net をご利用いただき、また、ご興味を持っていただき、ありがとうございます！ プロダクトマネージャーの早瀬です。本日2020年2月5日で、MovableType.net が正式公開されてちょうど5年となりました。5年間よく進化を続けた！そしてよくこんなにもたくさんの方々に使っていただけるサービスに成長した！と感慨深い思いにひたると同時に、お使いいただいているユーザーの皆様には感謝の気持ちでいっぱいです。サービス開始から日々、お客様のニーズに応えるべくCMSの機能開発・改善を行っていく中で、気がつくと？ MovableType.net の関連サービスが2つ誕生していました。5周年という節目を機に、今回はそれらのサービスも含め、あらためてそれぞれの特長などを紹介させていただきたいと思います。さらに！「もっともっとたくさんの方に MovableType.net を知ってもらいたい」という思いを込めて、AirPods Pro が当たるTwitterキャンペーンも実施します。ぜひ @movabletypenet アカウントをフォローしてキャンペーンツイートをRTしてください。詳細はこの記事の最後に記載していますのでご確認ください。それでは、MovableType.net 三兄弟をご紹介します！MovableType.netまずは、最初に誕生したウェブサービス型のCMS「MovableType.net」。SaaS なので、サーバー管理やソフトウェアのアップデートなど気にせず、常に最新で安全な状態で利用できます。また、SaaS型のCMSでありながらHTMLレベルでデザインテンプレート編集が可能なため、デザイン上の制限は一切なく、さまざまな機能により本格的なウェブサイトの制作・運営が可能となっています。価格は月額約2,100円から利用可能。機能面でも、サービス開始から5年をかけて大幅に拡張されました。プラン展開も豊富になり、今では小さな街のお花屋さんから大企業まで、幅広いお客様に使っていただけるようになりました。例えば、昨年インタビューさせていただいた PayPay さんのように大規模なトラフィックが見込まれるサイトでも、最上位プランではCDN連携機能も用意されているので問題なく運営することが可能です。PayPay が MovableType.net を使う理由 - 導入事例また、運用から開発まで便利な機能も盛りだくさんです。代表的な機能を紹介した記事をピックアップしてみましたので、ぜひご覧ください。公開前の表示確認ができるステージング機能を追加新機能ワークフローを徹底解説！フォーム 記事一覧常時SSL機能を利用して公開サイトをHTTPS化するサイト内検索機能を徹底解説！差し替え予約機能を使いこなす：期間限定キャンペーンページ運用編共有プレビューを使いこなして効率的で安全な運営を！毎日のバックアップおよび任意のタイミングでのバックアップと、復元が可能にサイト制作者の方で「これからはじめてみたいな……」と思った方は、制作者向け評価ライセンスをご利用ください。自身のテストやデモ用のみの用途で公開サイトには使用できませんが、半永久的にスタンダードプランを試すことができます。MovableType.net 制作者向け評価ライセンスまた、HTML や CSS はわかるけど、Movable Type シリーズ独自のテンプレートタグ（MTタグ）は触ったことがない、といった方に向けて、テーマ開発を通して初歩的なテンプレートのカスタマイズを学んでいただけるコンテンツも用意しています。トフでもできる！？テーマ開発講座機能の使い方など、何かわからないことがあったら、この活用ブログを検索してみください。さまざまな機能を活用するためのTipsなど、何かしらの情報が見つかります。MovableType.net 活用ブログまだ触ったことがない方は、ぜひ一度お試しください！https://movabletype.net/MovableType.net フォームMovableType.net で好評だったフォーム機能を独立させたのが「MovableType.net フォーム」です。他のCMSで構築されたサイトやCMSが使われていないサイトなど、どんなサイトでも利用できるサービスになっています。多機能だけど簡単。それが最大の特長です。指定されたコードを埋め込むだけで、静的サイトやどのようなCMSでも簡単にフォームを設置可能個別のURLを持たせてフォームを表示することも可能フリープランもあり、有料プランも月1,000円（年払い時834円）から安価に利用できるフォームの項目はドラッグ＆ドロップで誰でも簡単に作成できる件数や日時を指定して自動でフォームを閉じることができる受付データを保存してCSVでダウンロードも可能受付データにアクセスできるメンバーを絞って安全に運用できる3日間の無料トライアルがあるので、ぜひこちらもお試しください！https://movabletype.net/form/MovableType.net サイトサーチ最後に、昨年サービスを開始した「MovableType.net サイトサーチ」をご紹介します。ウェブサイトを運用する上でサイト内検索が必要になるケースは多いですが、多くのウェブサイトで使われていたGoogleカスタム検索の有料版が終了後、検索難民になってしまった方も多かったかと思います。そこで、GoogleのAPIを利用したサイト内検索サービスを公開しました。こちらも、MovableType.net で構築されたサイトに限らず、どんなサイトでも導入可能で、簡単に設置できるのが最大の特長です。検索結果には広告なし埋め込みコードの貼り付けで簡単に設置可能キーワードごとの優先ページの指定も可能ユーザー辞書登録で表記ゆれにも対応サイト訪問者による絞り込み検索が可能Google の API を利用しているので検索の精度も高い月額1,000円（年払いなら834円）から安価に利用できるこちらも3日間の無料トライアルをご用意していますので、ぜひ実際に触っていただければと思います。https://movabletype.net/sitesearch/以上3つのサービスを紹介してきましたが、今後もそれぞれをさらに進化させていく予定です。MovableType.net シリーズを引き続きよろしくお願いいたします！AirPods Pro が当たる！Twitter キャンペーンについて最後に、5周年を記念して実施するTwitterキャンペーンについてのご案内です。Twitter で @movabletypenet アカウントをフォローしてキャンペーンツイートをリツイートしていただくキャンペーンで、ご応募いただいた方から抽選で3名様に AirPods Pro をプレゼントします！「もっともっとたくさんの方に MovableType.net を知ってもらいたい」という思いを込めたキャンペーンです。まだ MovableType.net を使ったことがないという方でもOK。使っていないと当選の権利が無いということはありません。皆さん、ぜひリツイート＆フォローで盛り上げてください！／🎯RTでAirPods Proが当たる🎧＼㊗️SaaS型本格CMS https://t.co/KjSDXIrLjm 5周年記念👏🎉🥳抽選で3名様に AirPods Pro をプレゼントします🎁▼応募方法　〆切は2/291️⃣ このツイートをリツイート2️⃣ 当アカウントをフォロー📝記事もぜひ読んでくださいhttps://t.co/FSFaNPsEQD#MTnet5周年— movabletypenet (@movabletypenet) February 5, 2020【応募期間】2020年2月5日 〜 2月29日【応募方法】Twitterでキャンペーンツイートをリツイートして@movabletypenetアカウントをフォロー【当選連絡について】当選された方には、@movabletypenet アカウントからダイレクトメッセージでご連絡します。ご連絡から1週間以内に返信をいただけない場合には、当選取り消しのご連絡をいたします。その後、再度抽選を行い当選者様にご連絡をさせていただきます。抽選と発送は2020年3月上旬の予定です。【諸注意】◆ 本キャンペーンは、MovableType.net のご利用有無にかかわらず応募可能です。◆ ご応募は、日本在住の方に限らせていただきます。◆ 当選権利の換金、他人への譲渡はできません。◆ 送り先が不明確な場合など、何らかの理由により賞品がお届けできない場合は当選を無効とさせていただきます。◆ ご応募はお一人さま一回限りとさせていただきます。◆ 本キャンペーンを通じてお客様からご提供いただきました個人情報は、本キャンペーンの運営に関すること以外の目的で使用することはありません。シックス・アパートのプライバシーポリシーに基づいて厳重に取り扱います。◆ 本キャンペーンはシックス・アパートが主催しているものであり、Apple Inc.、 アップルジャパン合同会社によるものではありません。

MovableType.net のサイト内検索機能をお使いの場合は、下記リンクの記事を御覧ください。サイト内検索の検索ボックスを1ページ内に２つ設置する方法今回は、MovaleType.net サイトサーチで同じページ内に２つ検索ボックスを表示する方法をご紹介します。同じサーチエンジンの検索ボックスを２つ設置する場合同じサーチエンジンの検索ボックスを、「グローバルメニューと検索結果ページの上部に表示したい…」といったケースがあると思います。その場合は、まず１つ目は通常通り指定された埋め込みコードを貼り付けます。div class="mt-site-search-container"〜/div２つ目の検索ボックスは以下のコードを記述します。actionに関してはサーチエンジンの設定にあわせて記述してください。div id=“mt-site-search-container2”form action=“/search-resut.html”input name=“mtssq” /button class=“mt-site-search-form__button” type=“submit”検索/button/form/div上記で検索ボックスは表示されますが、検索結果の表示後に元の検索ワードが２つ目のボックスに挿入されないので、以下のスクリプトを追加します。script(function() { window.MTNetSearchDataLayer = window.MTNetSearchDataLayer || []; function MTNetSearch() { return MTNetSearchDataLayer.push(arguments); } MTNetSearch(“registerHandler”, function(data) { var secondarySearchForm = document.getElementById(“mt-site-search-container2"); var input = secondarySearchForm.getElementsByTagName(“input”)[0]; input.value = data.query; });})();/script以上で２つの検索ボックスの設置が完了です。２つのサーチエンジンの検索ボックスを１ページ内に表示する場合グローバルメニューには常にサイト全体の検索ボックス、特定のページ配下ではそれとは別の検索対象の範囲が絞られた検索ボックス、といったように１ページ内に２つ設置する場合もあるかと思います。その場合は１つ目は通常通り埋め込みコードを設置します。div class="mt-site-search-container"div id="mt-site-search" ... /div２つ目は以下のように、挿入します。ポイントはidが重複しないように変更しているところです。div class="mt-site-search-container"div id="mt-site-search-2" ... /divscriptwindow.MTNetSearchDataLayer = window.MTNetSearchDataLayer || [];function MTNetSearch() { return MTNetSearchDataLayer.push(arguments); }MTNetSearch("createApp", "mt-site-search-2");/scriptさらに、１つ目と同じscriptが重複してしまうので、div class="mt-site-search-container"div id="mt-site-search-2" ... /div内にある以下のscriptを削除します。script src="https://site-search.movabletype.net/v1/assets/20445/js/search.js" id="mt-site-search-script" async defer/script以上で２つのサーチエンジンの検索ボックスを１ページ内に表示させ、実行させることができます。

閲覧者がウェブサイト内の検索を行える、サイト内検索機能ですがレスポンシブレイアウトなどのデザインの都合上スマホ用とPC用では別の場所に設置したい、というケースがあるかと思います。今回は同じページ内（HTMLソース内）に２つの検索ボックスを設置する方法をご紹介します。検索ボックスの設置の詳細については以下の記事をご覧ください。サイト内検索機能を徹底解説！ - MovableType.net 活用ブログ設置方法まず１つめの検索ボックスは通常の方法で設置します。例えば以下のような例です。$mt:SiteSearchSnippet blog_ids="website,blog" search_result_container="s-result" show_blog_name_on_result="1" form_action="/search.html"$これと同じ検索ボックスを2つ目として設置する方法は以下になります。$mt:SiteSearchSnippet element_id="search2" blog_ids="website,blog" search_result_container="s-result" show_blog_name_on_result="1" form_action="/search.html" no_script="1" $scriptwindow.MTNetSearchDataLayer = window.MTNetSearchDataLayer || [];function MTNetSearch() { return MTNetSearchDataLayer.push(arguments); }MTNetSearch("createApp", "search2");/scriptまず、2つ目の検索ボックスを設置したい場所にmt:SiteSearchSnippetを設置します。その際 element_id のアトリビュートでidを指定します（例では"search2"）。MTNetSearch("createApp", "search2")を実行すると、2つ目の検索ボックスが表示されるようになります。2つ目のmt:SiteSearchSnippetでのポイントとしては、no_script="1" も設定しているところです。以上で２つの検索ボックスを同一ページ内に設置することができます。

記事を書いているときにプレビューしないと実際に見出しがどのように表示されるかわからない、、というのはちょっと面倒で書きにくいかなと思います。そこで、今回は記事（ウェブページ）編集画面でも実際のサイトと同じような見た目にできるエディタCSS機能をご紹介します！エディタCSSの作成エディタCSSは、左メニューのデザイン＞テンプレートのシステムテンプレートから作成します。基本的なルールとしては、記事であればentryというclassがつき、ウェブページであればpageというclassが付きます。上記のルールから例えば記事で見出し２（h2）のCSSを設定する場合は、 .entry h2 といったように指定します。例えば実際のサイトで対応する場合は、まず記事本文内を指定しているCSSの部分を見つけて抜き出し、その部分のクラスをentryに書き換えます。実際のサイトで以下のような指定であった場合は.entrybody h1 {margin-bottom: 20px;font-size: 20px;font-weight: bold;}以下のように置き換えます。.entry h1 {margin-bottom: 20px;font-size: 20px;font-weight: bold;}以上のようにコツさえ掴んでしまえば、エディタCSSを追加することは難しくありません。サイトを運営する上で非常に便利ですので、是非ご活用ください。