“HTML/CSS/JS” カテゴリの記事（16件）

PHP で動作する汎用メールフォーム TransmitMail で、WordPress の機能にあるようなパスワード保護（パスワードを知ってる人だけが本文を閲覧可能）を設定して、パスワードを入れないとフォームが表示されない仕組みを作ってみました。

JavaScript で実装することもできますが、ブラウザのソースを見たらフォーム部分がわかりますし、デベロッパーツールでソースを編集してフォームを表示することもできてしまいます。

一方、TransmitMail は PHP で動作しますので、PHP で実装することにしました。PHP を使えばブラウザのソースには現れません。

“TransmitMail でパスワード保護付きのメールフォームを作る” の続きを読む »

Splide は jQuery 非依存で軽量かつアクセシビリティに優れたスライダーライブラリです。以前は他のスライダーライブラリ を使っていたのですが、アクセシビリティの面ではいろいろと手を加える必要がありました。Splide は標準でアクセシビリティへの配慮を追求して作られています。→ アクセシビリティ – Splide

この Splide、機能も豊富なのですが、テキストを含むスライド等それぞれのスライドの高さが異なる場合に自動調整するオプションがありません。他の有名なスライダーライブラリーでは、slick と bxSlider には adaptiveHeight、Swiper には autoHeight というオプションがあって、それぞれ値を true とすることで個々のスライドの高さに合わせて自動調整できるのですが、Splide には同様のオプションが見当たりません。autoHeight というオプションがありますが Swiper のそれとは用途が異なるようです。

仕方がないので、イベントリファレンスを見ながらスライダーの高さが自動調整されるようにカスタマイズしてみました。

“Splide でスライダーの高さを可変にする” の続きを読む »

Copyright 表示不要の PHP 製汎用メールフォームシステムの TransmitMail。静的 HTML の Web ページでよく利用させていただいています。

この TransmitMail のテンプレートは HTML ファイルなのですが、ヘッダー部分などで PHP を使いたい場合があります。

だからと言って、header.html を header.php に変えて PHP を組み込み、input.html や confirm.html 等に書かれている {include:header.html} を {include:header.php} と書き換えても、PHP がそのまま文字列として処理されて機能しません。

このような場合、index.php にインクルードするか、直接記述すれば PHP が機能します。

“TransmitMail のテンプレートで PHP を使う” の続きを読む »

bxSlider でカルーセル表示をするとき、1枚目（カレント）のスライドが左端に表示されます。これを中央に表示したいのですが、bxSlider のオプションにはそのような設定はありません。

常に3枚のスライドを表示して1枚目を中央に表示する方法とか、1枚を表示してその左右に前後のスライドの一部を表示する方法は様々な記事で紹介されているのですが、それらは表示枚数が固定であることが前提です。

しかし今回やりたかったのは、画面の幅に応じて一度に表示されるスライドの数が変動する場合に、1枚目（カレント）のスライドを中央に配置すること。つまり、レスポンシブ対応で画面幅が違っても各スライドのサイズは変わらず、例えば PC 画面では5枚、タブレット端末では3枚、スマホでは1枚が表示され、その1枚目（カレント）を中央に、さらに左右には前後のスライドの一部が見えている状態にしたいということです。

そして試行錯誤の末、以下の方法で実現することができました。試行錯誤の割には、CSS でマージンを設定するだけという、実に単純なものですがw

“bxSlider のカルーセルで一度に複数枚を表示する場合に1枚目を画面の中央に配置する” の続きを読む »

当Webサイト内、Web制作&システム開発サイトの制作実績ページで表示しているWebページのサムネイル。当初はサムネイル自動生成ツールを使用していました。その後、半年前から各々の制作実績のページでレスポンシブ Web デザインによる PC、タブレット、スマホそれぞれの画面を表示するようにしたのですが、サムネイル自動生成ツールではPC画面を縮小して取得することしかできず。仕方なく、それぞれのスクリーンショットを撮って貼り付けてました。

しかし、新しいサイトを追加する度に3種類のスクリーンショットを撮る必要がありますし、時が経つとスクリーンショットが古くなるので定期的に撮り直す必要があり。そこで、少々強引ですが、Webページそのものの PC、タブレット、スマホそれぞれのサイズの画面を、インラインフレーム（ iframe タグ）で埋め込んで表示することにしました。

ただ、それぞれのサイズのWebページをサムネイルのように縮小表示する必要があり、更にレスポンシブにも対応させる必要がありました。

“iframe でWebページを埋め込んで縮小表示する（レスポンシブ対応）” の続きを読む »

主に静的サイトにメールフォームを設置する際、TransmitMail をよく利用させていただいています。TransmitMail は Copyright 表示不要の PHP 製汎用メールフォームシステムで、ファイルの添付や CSV 出力など、柔軟で豊富な機能が特徴です。

一方 WordPress 案件では、用途に応じてプラグインの WP MW Form や ContactForm 7 を利用していますが、場合によってはこの TransmitMail をテーマに組み込んで利用することもあります。

ただ、TransmitMail はメールヘッダに Reply-To（返信先アドレス）を設定することができません。ググってもその方法が見つかりませんでしたので、私なりにカスタマイズしてみました。

“TransmitMail で Reply-To ヘッダを設定する” の続きを読む »

9月20日に iPhone 向けソフトウェア iOS 13 の配信が開始されました。その後すぐ25日に iOS 13.1 と、iOS から iPad 向けに独立した iPadOS 13.1 が配信されています。

iOS 13・iPadOS 13（以下まとめて iOS 13 とします）はダークモードをはじめ、数々の新機能が搭載されていますが、その中で、Webブラウザの Safari にWebページの文字を簡単に拡大／縮小できる機能が追加されました。アドレスバー左側の _AA をタップすると拡大／縮小などのオプションが表示されます。

ところがこれ、実際は文字だけの拡大／縮小ではなく、ページ全体の拡大／縮小となっていました。つまり macOS の Safari の拡大／縮小と同じ動きです。

macOS の Safari の場合は、[option]キーを併用することで文字だけを拡大／縮小することができるのですが、iOS ではその術が見つかりません。実際、iOS はピンチアウトでズームができるので（viewport の設定によりますが）、iPhone の小さな画面では文字だけが拡大できた方がいいと思うのですが…。

“iOS 13 Safari で文字の拡大／縮小が簡単になったことの影響” の続きを読む »

Instagram のフィードを簡単にWebサイトに埋め込みむことができる無料サービス InstaWidget が、最近何度かダウンすることがあり、それを埋め込んでいるページ全体の読み込みに影響がありました。

SnapWidget や WordPress のプラグインである Instagram Feed は、利用するためには Instagram のアカウントで認証する必要があるため、クライアント案件ではハードルがあり、別のサービスを探していたところ、複眼feed という無料サービスがありました。

この複眼feed、Instagram に限らず、Facebook や Twitter、Youtube、Tumblr など、様々な SNS やブログ等のフィードから写真や動画を抽出して埋め込むことができ、さらに Instagram の写真は Instagram のサイトに飛んでくれるなど、とても良い感じなのですが、サムネイルのサイズが設定したサイズ（px）に固定されるため、レスポンシブでないところが難点です。複眼feed ではレスポンシブとうたってありますが、PC からのアクセスとスマホ等からのアクセスとでレイアウトを切り替えることができるというもので、PC レイアウトの可変幅には対応していません。

ただ、埋め込まれた状態の HTML を確認すると、table タグで直接埋め込まれており、よくある iframe 方式ではないので、CSS を使って上書きすることができます。

“複眼feed を可変幅のレスポンシブにする” の続きを読む »

WordPress のサイトから RSS フィードを取得して表示する場合、RSS フィードからデフォルトで取得できる情報は、タイトル、パーマリンク、投稿日、投稿者、概要（本文）くらいで、アイキャッチ画像を取得することはできません。そもそもアイキャッチ画像は RSS フィードに含まれていないので当然です。

そこで、WordPress の RSS テンプレートを加工してアイキャッチ画像を含め、別のサイトでこの RSS フィードを取得して表示してみました。（RSS フィード発信元の WordPress サイトの管理者権限があることが前提です。）

“RSS フィードにアイキャッチ画像を含めて別のサイトで表示する” の続きを読む »

近年、スマホ等で閲覧した際のユーザビリティを考慮して、クリックやタップできるリンク範囲を広げる手法がよく使われています。

• HTML5 で複数のブロック要素を a 要素で囲む方法
• CSS の position プロパティを使って a 要素を直前のブロック要素に被せる方法
• jQuery を使って a 要素を含むブロック要素のクリックに反応させる方法

などありますが、jQuery を使う方法は私もよく使います。

以前から多くのブログ等で紹介されている記述は次のようなものです。

$(function(){
  $('div.linkBox').click(function(){
    window.location = $(this).find('a').attr('href');
    return false;
  });
});

ただ、この方法は本来のリンク要素外の範囲では、リンク先を新しいタブで開くキーボードショートカットに反応しません。Windows では [ctrl] キーを、Mac では [command] キーを押しながらクリックすると、リンク先が新しいタブで開くというものです。

“リンクエリアをブロック要素全体に広げ、新しいタブで開くキーボードショートカットに対応する” の続きを読む »