Bootstrap 5 の標準機能を使った 脱 JQuery の lightbox
Bootstrap 5 のフルスクリーンモーダルを使い、JQuery に依存しない Lightbox の機能を実現します。
Azure WebApp と Azure Database for MySQL フレキシブル サーバーで WordPress サイトを立ち上げる際の Tips
WebApps に Wordpress をインストールし、Azure Database for MySQL フレキシブル サーバーに接続するまでの手順を解説をしていきます。
Google Analytics でクリック数がカウントできる脱 JQuery 独自ソーシャルボタン
ソーシャルボタンを自作するメリットとしては、思い通りのデザインで作れる、読み込み時に他のサイトとの通信が発生しないため描画速度が向上する、などがあり、かつ Google タグマネージャと組み合わせることでクリック数をカウントする事ができるようになります。
MT の検索結果ページの URL を別の URL にする方法
Movable Type の検索結果ページのURL を、ウェブサーバーの Rewrite 機能を用いて別の URL に見せかける方法をご案内します。
Swiper を使った様々なスライダー実装
Swiper はタッチ操作にも対応したスライダーのモジュールであり、多くのオプションが用意されており様々なシーンで利用できます。
HTML エスケープ文字
カテゴリセットで < の入った文字列を設定した際に mt:contents が期待した動作にならなかった際のメモ
Movable Type ウェブページの「タグ」／「カスタムフィールド」で条件分岐を行う
テンプレート作成やコンテンツの出し分けなどで利用する条件分岐を、ウェブページのタグ、またはカスタムフィールドを使って実装します。
MT を使ったサイト構築の始め方 (7): ウェブページの制作と表示
前回は記事の制作と表示について解説しました。今回はウェブページについての制作と表示を解説します。
MT を使ったサイト構築の始め方 (6): 記事ページの制作と表示
MT で記事を制作・表示する仕組みを見てみましょう。
MT を使ったサイト構築の始め方 (5): ページ・コンテンツの種類
Wordpress にもページには「投稿」と「固定ページ」という種類がありますが、MT にも同様にページの種類があります。
MT を使ったサイト構築の始め方 (4): テーマの適用
MT はインストール直後は「クラシックウェブサイト」というテーマが適用されていますが、これを他のテーマに変更してみましょう。
MT を使ったサイト構築の始め方 (3): MT のインストールフォルダ変更
MT に関連するファイル群を別の階層に持っていくことができますので、管理性・セキュリティなどを向上させたい場合はこちらをご参照ください。
MT を使ったサイト構築の始め方 (2): MT のバージョンアップ
残念ながら MT のバージョンアップは Wordpress のようにボタンひとつで、とはいかず、マニュアル操作で実施することになります。
MT を使ったサイト構築の始め方 (1): MT のインストール
これから何回かに分けて、Movable Type (以降 MT) を使ったサイト構築方法について解説をしていきます。MT はページを静的ページとして生成する点が WordPress とは大きく異なる点です。静的ページとし…
続きを読む
MT を使ったサイト構築の始め方 (0): MT とWordPressの主な違い
Wordpress と Movable Type の比較をし、向いているサイト構成を確認します。
グラデーションライブラリ
クールで利便理性高めのグラデーションCSSを置いていきます。随時追加更新していく予定です。
パスワードジェネレーター
パスワードを素早くランダムで発行するページです。発行に際してサーバーサイドと通信を行わないので何回でも素早く発行することが可能です。
JQueriy スムーススクロールと Bootstrap との共存
JQuery のスムーススクロールと Bootstrap のクラス定義とを共存させる方法をご案内します。
APNG によるアニメーションバナー
PNG でアニメーションをサポートした新形式、APNG を使ったアニメーションバナーの作成方法をご案内します。
簡単な JavaScript で HTML の表示要素をクリップボードにコピーする(iPhone 対応、脱 JQuery)
例えばプロダクトキーや API キーなど、長くて複雑な文字列を、訪問者に提供している場合、この機能を提供することで、訪問者のクリップボードに文字列をコピーして、その後はペーストだけすればよい、という形で利便性を高めること…
続きを読む
Azure Storage の静的 Web サイトで、動画再生時にシークできなかった件
Azure Storage 上に動画ファイルを置き、それをウェブサーバーから参照した際に、動画のシークができなかったので、その時のメモを記載します。 当初の構成図はこちら。 Web Apps 上にページを作成し、ページ内…
続きを読む
Bootstrap の Spinner を利用してロード中画面を表示する
Bootstrap の Spinner を利用してロード画面を表示するサンプルをご紹介します。
Collapse を特定して開閉アイコンを付けたい場合
ひとつのページ内に複数の Collapse を利用している場合の、Collapse を特定してアイコンを付与する方法です。
JavaScript で実装するカウントダウンリダイレクト
リダイレクトを設定する際に、おしゃれかつユーザビリティを高めた方法として、リダイレクトまでの秒数をカウントダウンして表示してあげる方法があります。
CSS で縁取り文字
画像を使わずに CSS だけで文字を縁取りして、白抜き文字や黒抜き文字を作ることができます。
