.htaccessでPHPのファイルアップロードサイズの上限値を変更
2022.02.5
PHPを使用して画像(動画・PDF等)をアップロードするフォームを作成した際に、ファイル…
CTAボタンの実装時にいつでも目につくよう配置しておきたいと希望されることがあります。ボタンが単独で配置されているデザインであれば固定で対応できましすが、今回はコンテンツ内に組み込まれているものだったので対応方法をメモ。
$('.sidebar__order').css({'width': $('#sidebar1').width()+'px'});
$(window).scroll(function(){
//スクロールするオブジェクトの高さ
var boxhight = $('.sidebar__order').height();
//追従開始位置
var toplimit = $('.sidebar__sticky').offset().top;
//追従終了位置
var bottomimit = $('.seminar').offset().top - boxhight - 40;
if($(window).scrollTop() > toplimit){
$('.sidebar__order').css({'position':'fixed', 'top': '0'});
if($(window).scrollTop() > bottomimit){
$('.sidebar__order').css({'position':'absolute', 'top': bottomimit+'px'});
}
}else{
$('.sidebar__order').css({'position':'initial', 'top': 'auto'});
}
});
<div id="sidebar1">
<div class="sidebar__bnr">
<img src="○○○○.png">
</div>
<section class="sidebar__auther">
<p class="sidebar__auther__image"><img src="○○○○.png"></p>
<dl>
<dt class="sidebar__auther__heading">運営会社:○○○○</dt>
<dd>○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○</dd>
<dd class="sidebar__auther__btn"><a href="/" target="_blank">公式サイトを見る></a></dd>
</dl>
</section>
<div class="sidebar__sticky">
<section class="sidebar__order">
<div class="sidebar__order__inner">
<h2 class="sidebar__order__heading">まずはお気軽に<strong>お問い合わせ</strong>を。</h2>
</div>
<p class="sidebar__order__btn"><a href="">ホームページ制作の<br>プロに相談する(無料)</a></p>
</section>
</div>
</div>
<section class="seminar">
<h2 class="section__heading"><i class="fas fa-th-large"></i>セミナー情報</h2>
<p class="section__btn"><a href="/seminar/">セミナー情報を見る</a></p>
</section>
「sidebar__order」で囲まれた部分が「sidebar__sticky」の範囲内で追従。
スクロールに合わせて「sidebar__order」に上部からの座標を付与して固定。
「offset()」では下部座標をとれないので、下部コンテンツ「seminar」の上部座標位置を起点に追従できる下限座標を算出。
※実装サイトは「sidebar1」はメインコンテンツの右側に配置されているため「sidebar__sticky」に高さが設けられています。
2022.02.5
PHPを使用して画像(動画・PDF等)をアップロードするフォームを作成した際に、ファイル…
2020.10.3
テキストエリア等で入力した文字の中にURLを含んでいた場合に、自動で認識してリンクタグを…
2024.03.30
外部ファイル(CSVファイル等)を読み込んでサイト内に表示する際に、保存時の文字コードが…
2020.12.5
メールフォームからメールを送信する際に、画像(ファイル)を添付できるようにしてほしいとの…
2022.02.19
画像データ等をサーバーにアップロードする際、一点づつアップロードしても良いけれど、ファイ…
2019.12.29
メールフォーム等での入力値チェック(バリデーション)。PHPの「preg_match」(…
2023.12.2
ワードプレスの投稿のカテゴリー機能を、目的ごとに使い分けたいというご要望があった際に、カ…
2020.08.15
フォームの入力値やURLのパラメータ等、文字列や数値を受け取る際に正規表現を利用してバリ…
2020.08.1
動画ファイルをCMS化して保存するときに、多くの場合はファイルパスをデータベース(MyS…
2021.03.27
WEBで提供されているサービスを使用する際に、提供元のAPIに自身のサイトで入力されたデ…