• Home
  • MTAppjQuery
  • Movable Type の管理画面に SweetAlert2 を導入してみよう

Movable Type の管理画面に SweetAlert2 を導入してみよう

これは MTAppjQuery Advent Calendar 2018 - Adventar の 6日目の記事です。

今回は、MTAppjQuery を利用して、Movable Type 7 の管理画面で SweetAlert2 を導入する方法をご紹介します。

SweetAlert2 とは

SweetAlert2 はおしゃれで格好いいアラートウィンドウを表示し、ユーザビリティが格段に向上することができる JaVaScript ライブラリです。

導入方法

システム全体に導入する場合はシステムメニュー、各サイトに限定して導入する場合はサイトメニューの MTAppjQuery の設定画面を開きます。そして下記のテキストエリアに下記のコードを入れて設定を保存します。

  • システムメニューの場合 : システム全体に適用する設定自由テキストエリアuser.css の読み込み直前
  • サイトメニューの場合 : 自由テキストエリアuser.css の読み込み直前

なお、この CDN の URL は sweetalert2 CDN by jsDelivr - A CDN for npm and GitHub で最新のものを確認してください。

使えるか確認

上記の設定だけで、Movable Type の管理画面で SweetAlert2 が使えるようになっています。

試しに、ブラウザの JavaScript コンソールを開いて、下記のコードをコピペして実行してみてください。

swal('Installation is completed!')

下図のような素敵なアラートが表示されれば成功です。

sweetalert2-min.png

詳しい利用方法は、 SweetAlert2 をご覧ください。

MTAppjQuery について

Movable Type の管理画面をフロントエンドの知識だけで簡単にカスタマイズすることができます。更新担当者が迷うことのない優しい管理画面にするためにぜひお使いください!

以上です。

Recent Entries

Pickup Categories

Movable Type

CMSとして国内5万サイト以上に導入されている Movable Type に関する記事です。

Craft CMS

CMS 業界で注目の Craft CMS に関する記事です。Craft CMS はチーム全体をハッピーにしてくれる素晴らしい CMS です。