ブログ | 市川ウェブデザイン https://ichikawa-webdesign.com 千葉県市川市のホームページ制作業者。 WordPress制作、コーディング請負がメイン業務です。直接打ち合わせ可能、お客様のご要望に柔軟に対応します。 ウェブ制作会社、デザイン会社、動画制作会社、その他会社向けに業務を行っています。 Fri, 23 Feb 2024 14:33:28 +0000 ja hourly 1 https://wordpress.org/?v=6.4.3 最初の画像をアイキャッチにする方法 PHP8対応 https://ichikawa-webdesign.com/archives/7339 https://ichikawa-webdesign.com/archives/7339#respond Fri, 23 Feb 2024 14:31:18 +0000 https://ichikawa-webdesign.com/?p=7339 WordPressで記事一覧ページに画像を表示させる方法です。 今回は、やり方を説明することが目的ではありません。 ネットで検索すると参考コードが出て ...

The post 最初の画像をアイキャッチにする方法 PHP8対応 first appeared on 市川ウェブデザイン.]]>
WordPressで記事一覧ページに画像を表示させる方法です。

今回は、やり方を説明することが目的ではありません。
ネットで検索すると参考コードが出てきますが、それだとPHP8の環境では、不具合が起きました。
今回はその対処方法について説明することが目的です。

まずはやりたいことをざっくりと説明します。

  1. 記事一覧ページで画像を表示したい
  2. アイキャッチ画像を表示
  3. アイキャッチ画像がなければ、記事内の画像(1番目の画像)を表示
  4. アイキャッチ画像と記事内に画像が無ければ、任意の画像(No Image)を表示

上記で任意の画像と分かりにくい表現で書きましたが、No Imageの画像を表示させる場合が大半だと思います。

ネットでよくあるコード

ネットに転がっているのは下記のコードです。

function catch_that_image()
{
  global $post;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('/<img.+src=[\\'"]([^\\'"]+)[\\'"].*>/i', $post->post_content, $matches);
  $first_img = $matches[1][0];

  if (empty($first_img)) { //Defines a default image
    $first_img = esc_url(get_template_directory_uri()) . "/img/no-image.png";
  }
  return $first_img;
}

PHP8だと上手く表示されない。

PHP7だと問題なく画像が表示されます。
しかし、PHP8では警告が出力されてNo Image画像が出力されません。

 

具体的に説明すると、アイキャッチ画像と記事内の画像は出力されます。しかし、アイキャッチ画像も記事内の画像も無い場合に表示されるNo Image画像が上手く表示されませんでした。

警告メッセージが出力されています。

要約した内容です。

Warning:  Undefined array key 0 in ~~~~~ functions.php on line 129

原因は配列の書き方

PHP8では、空や未定義の配列にアクセスしようとするとWarningのメッセージが発生するようです。

function catch_that_image()
{
  global $post;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('/<img.+src=[\\'"]([^\\'"]+)[\\'"].*>/i', $post->post_content, $matches);
  //この部分が原因
 $first_img = $matches[1][0];

  if (empty($first_img)) { //Defines a default image
    $first_img = esc_url(get_template_directory_uri()) . "/img/no-image.png";
  }
  return $first_img;
}

上記のコードでいえば、$first_img = $matches[1][0];で未定義の配列にアクセスしようとしてWarningが発生するようになりました。

対応方法

配列に値があった場合に変数に代入するように変更しました。isset関数を使います。

function catch_that_image()
{
  global $post;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('/<img.+src=[\\'"]([^\\'"]+)[\\'"].*>/i', $post->post_content, $matches);
  // ここを変えてあげる
	if (isset($matches[1][0])) {
    $first_img = $matches[1][0];
  }

  if (empty($first_img)) { //Defines a default image
    $first_img = esc_url(get_template_directory_uri()) . "/img/no-image.png";
  }
  return $first_img;
}

これでNo Image画像も表示されるようになりました。

The post 最初の画像をアイキャッチにする方法 PHP8対応 first appeared on 市川ウェブデザイン.]]>
https://ichikawa-webdesign.com/archives/7339/feed 0
Contact Form 7 – 自動返信メールに添付ファイルを付ける方法【応用編】 https://ichikawa-webdesign.com/archives/7150 https://ichikawa-webdesign.com/archives/7150#respond Mon, 18 Dec 2023 04:39:31 +0000 https://ichikawa-webdesign.com/?p=7150 前回は、お問い合わせフォーム(Contact Form 7)の自動返信メールに、あらかじめ添付したファイルを送る方法について書きました。 自動返信メー ...

The post Contact Form 7 – 自動返信メールに添付ファイルを付ける方法【応用編】 first appeared on 市川ウェブデザイン.]]>

前回は、お問い合わせフォーム(Contact Form 7)の自動返信メールに、あらかじめ添付したファイルを送る方法について書きました。

自動返信メールに添付ファイルを付ける方法はこちら

今回は応用編として、お問い合わせフォームのチェック項目を選択したら、自動返信メールに添付ファイルを送る方法について書きます。

仕様

資料請求の要望があったときを想定

今回は資料請求があった場合に自動返信することを想定します。お問い合わせ後に資料請求のファイルを添付して返信するよりも、自動返信した方が早く届いてユーザに便利です。

下記の流れになります。

  • お問い合わせフォームにチェック項目「資料請求」を追加
  • チェック項目「資料請求」をチェック
  • 自動返信メールでファイルを送る

事前準備

プラグイン「Conditional Fields for Contact Form 7」をインストールします。

このプラグインでフォームに条件分岐が出来るようになります。

フォームの設定

まずチェック項目を作成します。今回はチェックボックスで作成しましたが、ドロップダウンメニューやラジオボタンでも構いません。

次に「条件付きフィールドグループ」を選択してグループを作成します。グループを作成することで条件分岐が可能になります。ちなみにグループを作成することが大事であり、グループ内は空欄でも構いません。今回はグループ内にテキスト「資料を自動送信いたします」を入れました。

メールの設定

自動返信メールのファイル添付にファイルに先ほど作ったグループを設定します。 今回は[document]という名前で作っています。

条件付きフィールドの設定

条件付きフィールドを設定します。今回は下記の設定をしました。

  • お問い合わせ項目の値が「資料請求」であれば
  • グループ名[document]内のコンテンツを表示させる

グループ名[document]内のコンテンツというのは、フォームタグの[group document]とメールタグの[document]のことです。これらを表示させます。

メールを確認

メールを確認するとファイルが添付されていました。これでOKです。 念のためご説明しますが、お問い合わせ項目に「資料請求」を選択しないとファイルは添付されません。必要な時(「資料請求」を選択)だけ、ファイルは添付されます。

まとめ

自動返信メールに添付ファイルを送りたい方法をご説明しました。実案件では今回のようケースが多いと思います。

そのためには条件分岐のプラグイン「Conditional Fields for Contact Form 7」を導入して対応します。

ちょっと手間がかかりますが、運用はラクになるのでおススメです。

The post Contact Form 7 – 自動返信メールに添付ファイルを付ける方法【応用編】 first appeared on 市川ウェブデザイン.]]>
https://ichikawa-webdesign.com/archives/7150/feed 0
Contact Form 7 – 自動返信メールに添付ファイルを付ける方法 https://ichikawa-webdesign.com/archives/7068 https://ichikawa-webdesign.com/archives/7068#respond Mon, 13 Nov 2023 06:34:29 +0000 https://ichikawa-webdesign.com/?p=7068 お問い合わせフォーム(Contact Form 7)の自動返信メールに、あらかじめ添付したファイルを送る方法です お問い合わせを頂いたユーザに対して、 ...

The post Contact Form 7 – 自動返信メールに添付ファイルを付ける方法 first appeared on 市川ウェブデザイン.]]>

お問い合わせフォーム(Contact Form 7)の自動返信メールに、あらかじめ添付したファイルを送る方法です

お問い合わせを頂いたユーザに対して、添付ファイルを送信したい場合があるとします。例えば、資料請求や会社概要などのファイルです。そんなときは自動返信メールにあらかじめファイルを添付して送ることができます。

ちょっとわかりにくい説明かもしれませんが、ユーザがお問い合わせフォームにファイルを添付する方法ではなく、ウェブサイト側(運営者側)が好きなファイルを添付してユーザ(送信者)へ自動返信メールを送る方法です。

今回はその方法を書きます。

前提条件

あたりまえですが、Contact Form 7のプラグインを使ってお問い合わせフォームを作っていることです。

ファイルを置く

wp-contentディレクトリ内に添付したいファイルを置きます。

ちなみにwp-content直下でなくても構いません。wp-contentディレクトリ内であればどこでも構いません。

今回はメディアライブラリーに置いたPDFファイルを使います。

Contact Form 7側の設定

自動返信メールのファイル添付に先ほど格納したファイルのパスを記載します。
パスはwp-contentディレクトリより後のディレクトリから記載します。wp-content以前のパス(例えばhttp://sample.com/wp-contentなど)を記載するとエラーメッセージが表示されます。


今回はメディアライブラリー内に置いたPDFファイルを使用するので下記のパスになりました。

uploads/2023/11/document1.pdf
uploads/2023/11/document2.pdf

ちなみに複数ファイルでも設定できます。

設定は以上です。

送信確認

実際にメールを送ってみます。

自動返信メールです。

OKです。これで問題なく自動返信メールに添付ファイルを送ることができました。

まとめ

今回はお問い合わせフォーム(Contact Form 7)の自動返信メールに、あらかじめ添付したファイルを送る方法について書きました。

次回は応用編です。

お問い合わせフォームのチェック項目を選択したら、自動返信メールに添付ファイルを送る方法について書きます。

The post Contact Form 7 – 自動返信メールに添付ファイルを付ける方法 first appeared on 市川ウェブデザイン.]]>
https://ichikawa-webdesign.com/archives/7068/feed 0
暫くの間、新規クライアント様からのお仕事はお受けできません https://ichikawa-webdesign.com/archives/6740 https://ichikawa-webdesign.com/archives/6740#respond Sat, 17 Jun 2023 02:26:00 +0000 https://ichikawa-webdesign.com/?p=6740 いつもお世話になっております。市川ウェブデザインの前田です。 多忙のため、暫くの間は新規クライアント様との取引を見合わせていただきます。 今までは私1 ...

The post 暫くの間、新規クライアント様からのお仕事はお受けできません first appeared on 市川ウェブデザイン.]]>

いつもお世話になっております。市川ウェブデザインの前田です。

多忙のため、暫くの間は新規クライアント様との取引を見合わせていただきます。

今までは私1人で作業して来ましたが、今後はコーディングに特化したチーム作りを行うつもりです。チームが軌道の乗りましたら、新規クライアント様との取引を再開させて頂きます。

現在、案件はお受けできませんが、

  • いざという時のために外注コーダーを探している
  • 将来的に案件が発生する

などの理由で今のうちに顔合わせをしたいのであれば大歓迎です。
是非ご連絡ください。

いつも弊社と取引して頂きありがとうございます。
皆さまには感謝しております。

The post 暫くの間、新規クライアント様からのお仕事はお受けできません first appeared on 市川ウェブデザイン.]]>
https://ichikawa-webdesign.com/archives/6740/feed 0
毎週水曜日は業務の対応ができません https://ichikawa-webdesign.com/archives/6644 https://ichikawa-webdesign.com/archives/6644#respond Thu, 30 Mar 2023 13:17:56 +0000 https://ichikawa-webdesign.com/?p=6644 いつもお世話になっております。市川ウェブデザインの前田です。 毎週水曜日は、お客様の会社で働いています。 よって今後、水曜日はメールやチャットの返信が ...

The post 毎週水曜日は業務の対応ができません first appeared on 市川ウェブデザイン.]]>

いつもお世話になっております。市川ウェブデザインの前田です。

毎週水曜日は、お客様の会社で働いています。

よって今後、水曜日はメールやチャットの返信ができません。
また水曜日は急ぎの修正も対応できません。

あらかじめ、お知らせいたします。

どうしても水曜日に作業を依頼したい場合は、事前連絡を頂けると幸いです。
何卒よろしくお願いいたします。

The post 毎週水曜日は業務の対応ができません first appeared on 市川ウェブデザイン.]]>
https://ichikawa-webdesign.com/archives/6644/feed 0
手動でGoogle reCAPTCHAを設定する https://ichikawa-webdesign.com/archives/6531 https://ichikawa-webdesign.com/archives/6531#respond Sun, 05 Feb 2023 04:15:59 +0000 https://ichikawa-webdesign.com/?p=6531 Google reCAPTCHAの設定方法について書きます。 WordPressのプラグイン「Contact Form 7」「MW WP Form」を ...

The post 手動でGoogle reCAPTCHAを設定する first appeared on 市川ウェブデザイン.]]>

Google reCAPTCHAの設定方法について書きます。

WordPressのプラグイン「Contact Form 7」「MW WP Form」を使ってお問い合わせフォームを作った場合は、reCAPTHAの設定は簡単です。

これは各プラグインがreCAPTHAのサイトキーとシークレットキーを入力すれば利用できるように設定してくれるからです。

しかし、プラグインを使わずにお問合せフォームを作った場合は、reCAPTCHAの全ての設定を自分で対応しなければならず、けっこう大変です。

今回はreCAPTCHA v3の設定について記事にします。

サイトキーとシークレットキーを取得する

reCAPTHAの登録方法は割愛します。

公式サイトからがんばって登録してください。

https://www.google.com/recaptcha/about/

ネットで検索するとたくさんヒットするのでそちらで対応してください。

ウェブサイトへ設定するのに必要な情報は、WordPressの各プラグインで設定する時と同じくサイトキーシークレットキーです。

設定したコード一覧

とりあえず設定したコードを載せておきます。

PHP部分。ページの先頭に記載した方が良いです。
「ここにシークレットキーを記載」の部分にシークレットキーを記載します。

<?php
/* ----------------------------------------
サーバ側にAPIリクエストを送り、受け取る
----------------------------------------- */ 
// サーバー側のkey
$secretKey =  'ここにシークレットキーを記載';
// トークン
$captchaResponse = $_POST['g-recaptcha-response'];

// サーバ側にAPIリクエスト
// keyとトークンが必須
// file_get_contentsはファイルの内容を全て文字列に読み込む関数
$verifyResponse = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret={$secretKey}&response={$captchaResponse}");

// APIレスポンス応答
// JSONオブジェクトで受け取る
// json_decodeはJSONエンコードされた文字列を受け取り、それをPHPの値に変換
$responseData = json_decode($verifyResponse);
if ($responseData->success) {
  // 成功のメッセージを入れる
  $complete_message = '<strong id="okmessage">お問い合わせありがとうございます。</strong><br>メッセージが送信されました。'; 
} else {
  // 失敗のメッセージを入れる
  $complete_message = 'メッセージの送信に失敗しました。<br>後でまたお試しください。';
}

?>

HTML部分 送信ボタンに追記します。
「ここにサイトキーを記載する」の部分にサイトキーを記載します。

<form class="c-form" id="c-form" action="" method="post">

---- 省略 -----

<!-- 送信ボタン  -->
<input class="c-btn01 g-recaptcha" id="form-submit" type="button" name="form-submit"
      data-sitekey="ここにサイトキーを記載する" data-callback='onSubmit' data-action='submit' value="送信">

</form>

JavaScript部分 recaptchaファイルの読み込み、トークン、サブミット時に処理を記載

<!-- reCAPTCHA -->
<script src="https://www.google.com/recaptcha/api.js"></script>
<script src="https://www.google.com/recaptcha/api.js?render=ここにサイトキーを記載する"></script>
<script>
function onClick(e) {
  e.preventDefault();
  grecaptcha.ready(function() {
    grecaptcha.execute('ここにサイトキーを記載する', {
      action: 'submit'
    }).then(function(token) {
      // Add your logic to submit to your backend server here.
    });
  });
}

// submit 
function onSubmit(token) {
  //フォームの要素を取得
  const form = document.getElementById("c-form");
  // form.submit()だとHTML5のバリデーションが効かない
  // reportValidity()・・・子コントロールが制約検証を満たしているか判定
  if (!(form).reportValidity()) {
    // 満たしていなければ終了
    return false;
  } else {
    // 満たしていたら処理
    form.submit();
  }
}

</script>

外部ファイルの読み込みやサイトキーの設定

ほとんどは公式サイトに書いてあるコードを貼り付ければOKです。英語ですが日本語翻訳すれば理解できると思います。

サイトキーの設定までは問題なく設定できると思います。

https://developers.google.com/recaptcha/docs/v3

サーバー側の設定

サーバー側の設定については、公式サイトの説明を見ても分かりませんでした。

https://developers.google.com/recaptcha/docs/verify

よってこちらの記事を参考にしました。見出し「PHPの設定をする」の部分です。

サーバー側の設定です。上記のPHP部分になります。

<?php
/* ----------------------------------------
サーバ側にAPIリクエストを送り、受け取る
----------------------------------------- */ 
// サーバー側のkey
$secretKey =  'ここにシークレットキーを記載';
// トークン
$captchaResponse = $_POST['g-recaptcha-response'];

// サーバ側にAPIリクエスト
// keyとトークンが必須
// file_get_contentsはファイルの内容を全て文字列に読み込む関数
$verifyResponse = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret={$secretKey}&response={$captchaResponse}");

// APIレスポンス応答
// JSONオブジェクトで受け取る
// json_decodeはJSONエンコードされた文字列を受け取り、それをPHPの値に変換
$responseData = json_decode($verifyResponse);
if ($responseData->success) {
  // 成功のメッセージを入れる
  $complete_message = '<strong id="okmessage">お問い合わせありがとうございます。</strong><br>メッセージが送信されました。'; 
} else {
  // 失敗のメッセージを入れる
  $complete_message = 'メッセージの送信に失敗しました。<br>後でまたお試しください。';
}

?>

サーバー側の設定でやっていることは以下の通りです。

  1. トークンを取得
  2. APIをリクエスト
    APIリクエストにはシークレットキー(secret)、トークン(response)が必須
  3. 認証の結果を受け取る
    結果はJSONオブジェクトで受け取る
  4. 受け取ったJSONオブジェクトのsuccessキーの値がtrueだったら処理成功、falseだったら処理失敗

上記4.のJSONオブジェクトはsuccessキー以外にもいくつかあり、その中にscoreキーがあります。scoreキーはGoogle側で0.0(不正なデータ)~1.0(安全なデータ)までスコアを付けています。追加でscoreキーの数値を条件として追加すると、より精度の高いスパム対策になるでしょう。

今回はscoreキー利用しませんでしたが、スパムが送られてくるようであれば利用を検討します。

submit()メソッドはHTML5のバリデーションが効かない

あと1つポイントがあります。

<script>
   function onSubmit(token) {
     document.getElementById("demo-form").submit();
   }
 </script>

公式サイトを見ながら設定しましたが、HTML5のバリデーションが効きませんでした。submit()メソッドが原因みたいです。

よってコードをひと手間くわえました。

function onSubmit(token) {
  //フォームの要素を取得
  const form = document.getElementById("c-form");
  // form.submit()だとHTML5のバリデーションが効かない
  // reportValidity()・・・子コントロールが制約検証を満たしているか判定
  if (!(form).reportValidity()) {
    // 満たしていなければ終了
    return false;
  } else {
    // 満たしていたら処理
    form.submit();
  }
}

まとめ

正直めんどうです。一応設定しましたが、本当に効いているのか、まだ確認できていません。

もしGoogle reCAPTCHAを設定できるツールがあれば、それを利用することをおすすめします。

The post 手動でGoogle reCAPTCHAを設定する first appeared on 市川ウェブデザイン.]]>
https://ichikawa-webdesign.com/archives/6531/feed 0
CSSでドローン撮影っぽくしてみる https://ichikawa-webdesign.com/archives/6423 https://ichikawa-webdesign.com/archives/6423#respond Tue, 24 Jan 2023 04:25:22 +0000 https://ichikawa-webdesign.com/?p=6423 ドローンで撮影すれば良いのですが、そんな予算が無い時の苦し紛れの対応です。 一枚の写真を動かすことでドローンっぽくしてみました。 まずは適当に写真を選 ...

The post CSSでドローン撮影っぽくしてみる first appeared on 市川ウェブデザイン.]]>
ドローンで撮影すれば良いのですが、そんな予算が無い時の苦し紛れの対応です。
一枚の写真を動かすことでドローンっぽくしてみました。

まずは適当に写真を選びます。

CSSで拡大、縮小、移動させてドローンぽくしてみました。
※右下のRerunボタンを押すと最初から表示されます。

See the Pen
ドローン撮影っぽくする
by Kazuhiro Maeda (@kazurou147)
on CodePen.0


なかなかイイ感じではないでしょうか? 本物を求めたら厳しいですが、まあまあ雰囲気が出ていると思います。 とはいえ、この雰囲気を出すのはけっこう時間かかりましたが。。。

さらにテキストを配置して、よくあるメインビジュアルにしてみました。
※右下のRerunボタンを押すと最初から表示されます。

See the Pen
ドローン撮影っぽくする テキスト
by Kazuhiro Maeda (@kazurou147)
on CodePen.


キャッチコピーになるテキストの可読性を上げたいので、背景を少し暗くするためにレイヤーを重ねました。

この記事を読んでいる皆さんはどう思うかわかりませんが、個人的には意外に良いなと思いました。

コードを載せておきます。

<div class="mainvisual">
  <div class="mainvisual-bg">
  </div>
  <div class="mainvisual-layer"></div>
  <div class="mainvisual-content">
    <h1>キャッチコピー<br>キャッチコピー<br>キャッチコピー</h1>
    <p>テキストテキストテキストテキスト</p>
  </div>
</div>
.mainvisual {
  position: relative;
  height: 300px;
  overflow: hidden;
}

.mainvisual::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 300px;
  background-color: #55555522;
  background-image: radial-gradient(#555 30%, transparent 31%), radial-gradient(#555 30%, transparent 31%);
  background-size: 4px 4px;
  background-position: 0 0, 2px 2px;
  opacity: 0.8;
}

.mainvisual-bg {
  position: relative;
  width: 100%;
  height: 300px;
  background: url(./img/img1-1.jpg);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: cover;
  animation-name: drone, drone2;
  animation-duration: 10s, 6s;
  animation-delay: 1s, 11.5s;
  animation-timing-function: ease-out, ease;
  animation-fill-mode: forwards, forwards;
  animation-iteration-count: 1, 1;
  transform: scale(3);
}

@keyframes drone {
  0% {
    background-position: 0 100%;
    transform: scale(3);
  }

  35% {
    background-position: 0% 100%;
  }

  100% {
    background-position: 0% 0%;
    transform: scale(1);
  }
}

@keyframes drone2 {
  0% {
    background-position: 0% 0%;
    transform: scale(1);
  }

  50% {
    background-position: 0% 2%;
  }

  100% {
    background-position: 0% 3%;
    transform: scale(1.1);
  }
}

.mainvisual-content {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 300px;
  height: 175px;
  margin: auto;
  padding: 30px;
  border: 2px solid #fff;
  color: #fff;
  text-shadow: 0px 0px 10px #00000077;
  text-align: center;
  line-height: 1.4;
  z-index: 10;
}

.mainvisual-content h1 {
  margin: 0 0 20px 0;
  font-size: 33px;
}

.mainvisual-content p {
  margin: 0;
  font-size: 14px;
  line-height: 1;
}

まとめ

ドローン撮影っぽくするには画像選びが大事だと思いました。奥行きのある画像だと作りやすいです。あとは実際に画像を配置してトライ&エラーを繰り返すことになります。

最後に、長時間かけて制作したので車酔いした感覚になりました。酔って気持ち悪かったです。画像を動かすのはほどほどにしましょう。

The post CSSでドローン撮影っぽくしてみる first appeared on 市川ウェブデザイン.]]>
https://ichikawa-webdesign.com/archives/6423/feed 0
jQuery Scrollify – iPhoneのSafariだとスクロールがズレる https://ichikawa-webdesign.com/archives/6074 https://ichikawa-webdesign.com/archives/6074#respond Fri, 30 Sep 2022 00:26:32 +0000 https://ichikawa-webdesign.com/?p=6074 jQuery Scrollifyで設定したページですが、iPhoneのsafariで閲覧するとスクロールがズレてしまいました。今回はその対応について書 ...

The post jQuery Scrollify – iPhoneのSafariだとスクロールがズレる first appeared on 市川ウェブデザイン.]]>
jQuery Scrollifyで設定したページですが、iPhoneのsafariで閲覧するとスクロールがズレてしまいました。今回はその対応について書きます。

まずjQuery Scrollifyとは?

jQuery Scrollifyはセクションごとにスクロールできるプラグインです。画面いっぱいにコンテンツが表示され、スクロール時に1画面分がスクロールされます。

公式サイトはコチラ
https://projects.lukehaas.me/scrollify/

使い方は公式サイトもしくは下記の記事をご覧ください。丁寧に説明されています。
https://kakechimaru.com/scrollify/
https://webdesignday.jp/inspiration/technique/jquery-js/3812/

iPhoneのSafariで閲覧するとスクロールがズレる

iPhoneのsafariで閲覧するとスクロールがズレました。

上の赤枠の部分はタブバーと呼びます。このタブバーの高さがスクロール時に変化してしまいます。それによりスクロールがズレて、コンテンツの位置が中途半端に表示されてしまいます。

スクロールがズレる瞬間です。

※補足ですが、本件が発生したときのiOSバージョンは15.5でした。古いバージョンはタブバーの高さが固定で表示されているので、本件の現象は起きませんでした。

対応方法

こちらの記事を参考にしました。
https://webdesignday.jp/inspiration/technique/jquery-js/3812/

jQuery Scrollifyはオプションとしてリサイズ後の設定が可能です。ちなみにリサイズとは、ウィンドウの縦幅や横幅が変わることです。なので、リサイズしたとき表示しているセクションをウィンドウ上部へピッタリ合わせるように設定しました。

・・・省略・・・・・
before: function (i) { // 移動先にスクロールする前に
・・・省略・・・・・
    current = i;
  },
},
afterResize: function () { // リサイズ後
   // スクロールするセクションがある場合
   if (current) {
     // 表示するセクションの位置を取得
     var currentScroll = $('.scrollify').eq(current).offset().top;
     // その位置へスクロール
     $(window).scrollTop(currentScroll);
   }
},

これでタブバーの高さが変化してもスクロールがズレなくなりました。

だた強引に合わせたような動きで、違和感があります。スクロール時にタブバーが無くなった後に実行されるので、タイムラグが出てしまうんですよね。

まあ今の自分としてはこの対応が限界です。今回はこれで良しとします。

The post jQuery Scrollify – iPhoneのSafariだとスクロールがズレる first appeared on 市川ウェブデザイン.]]>
https://ichikawa-webdesign.com/archives/6074/feed 0
テキストの両端揃えは地味に使える https://ichikawa-webdesign.com/archives/6245 https://ichikawa-webdesign.com/archives/6245#respond Sun, 18 Sep 2022 06:58:15 +0000 https://ichikawa-webdesign.com/?p=6245 テキストの両端揃えについて書きます。 自分は全く気になりませんが、デザイナーの方は気になるみたいです。特に紙媒体で仕事にしているデザイナーさんに、その ...

The post テキストの両端揃えは地味に使える first appeared on 市川ウェブデザイン.]]>

テキストの両端揃えについて書きます。

自分は全く気になりませんが、デザイナーの方は気になるみたいです。
特に紙媒体で仕事にしているデザイナーさんに、その傾向があります。

コンテンツが横並びになっているときに、テキストを両端揃えにしておくと、デザイナーは喜んでくれることがあります。

左揃えの時

両端揃えのすると

CSSファイルで対象のテキスト部分にtext-align: justifyと書けばOKです。

まとめ

コーダーの自分には想像できないレベルでデザイナーの方はこだわりを持っています。当然フォントにもこだわりを持っています。再現できないのに、カーニングしないと気持ち悪いという方もいらっしゃいます。

必要に応じて両端揃えのテクニックを披露しておくと、デザイナーに喜ばれるかもしれません。こっちもコードを1つ書けば実装できるので作業がラクです。

The post テキストの両端揃えは地味に使える first appeared on 市川ウェブデザイン.]]>
https://ichikawa-webdesign.com/archives/6245/feed 0
All-in-One WP Migrationでバックアップしているファイルが分かった https://ichikawa-webdesign.com/archives/6159 https://ichikawa-webdesign.com/archives/6159#respond Tue, 30 Aug 2022 02:37:11 +0000 https://ichikawa-webdesign.com/?p=6159 いつの間にかAll in one WP Migrationに新機能が追加されていました。 バージョン7.60からバックアップファイルの全項目がわかるよ ...

The post All-in-One WP Migrationでバックアップしているファイルが分かった first appeared on 市川ウェブデザイン.]]>

いつの間にかAll in one WP Migrationに新機能が追加されていました。

バージョン7.60からバックアップファイルの全項目がわかるようになりました。また個別にファイルをダウンロードすることが可能になりました。

プラグインの変更履歴はこちらをご覧ください。
下記は変更履歴から抜粋した内容です

7.60
追加
バックアップファイルの全項目を一覧表示し、アーカイブファイルを選択してダウンロードすることが可能になりました

バックアップファイルの確認方法

バックアップの対象ファイルの一覧をクリック

バックアップの内容が一覧表示されます

バックアップ対象は、wp-contentとデータベース

下記はwp-content内の構成です。

バックアップの内容が下記になります。

実際に取得したバックアップデータは以下の通りです。

・wp-content内
 ・languagesフォルダ
 ・pluginsフォルダ
 ・themesフォルダ
 ・index.php
・database.sql
・package.json

wp-content内

wp-content内のファイルを取得しています。一部のフォルダ(ai1wm-backups,upgrade)がバックアップされていませんでした。この件は後述します。

database.sql

データベース(database.sql)も当然バックアップしています。データベースが無いと移行できませんから。

package.json

package.jsonは何ですかね。バックアップしたURL,データベース、プラグインなどの情報が入っていました。

恐らく、package.jsonに記載されている情報を元に、移行先ウェブサイトのデータを書き換えているのだと思います。このファイルはバックアップファイルでは無く、プラグイン独自のファイルです。

wp-content内の一部フォルダが無かった

wp-content内の一部フォルダがバックアップされていませんでした。今回で言えばai1wm-backupsとupgradeです。

ai1wm-backupsはこのプラグイン(All in One WP Migration)のバックアップフォルダです。なので当然このフォルダはバックアップ対象外になります。そうしないと過去のバックアップファイルもバックアップされてしまいますから。

つぎにupgradeです。このフォルダがバックアップされなかった原因はフォルダ内にファイルが無かったからでした。

upgrade内に適当なファイルを格納してみます。

再びバックアップした時のファイル構成です。

upgradeがしっかりバックアップされています。

ということで中身の無いフォルダはバックアップ対象にならないみたいです。

まとめ

All in one WP Migrationをよく利用していますが、これまでどのファイルをバックアップしているのか知りませんでした。なんとなく全部ファイルでは無く、wp-content内かなと思っていました。

まあ予想通りでしたが、今回はっきりと分かったので安心して利用できますね。

The post All-in-One WP Migrationでバックアップしているファイルが分かった first appeared on 市川ウェブデザイン.]]>
https://ichikawa-webdesign.com/archives/6159/feed 0